Skip to content
OverviewSolutions
17
Comments
9

océane

@Ocece77FRANCE290 points

Front-end dev based in France😎🇫🇷

I’m currently learning...

Hi ! Im currently learning Python, c# for unity and Java plus Front-end dev ( CSS, HTML, JS & React JS)

Latest solutions

View more solutions

Latest comments

  • 0-scripter•10
    @0-scripter
    What are you most proud of, and what would you do differently next time?

    this is my first time writing a code, hence I am very happy for trying my best and completing this task.

    What challenges did you encounter, and how did you overcome them?

    reading material is different than applying it in real project u just get blank, so the only solution is keep practicing and coding.

    What specific areas of your project would you like help with?

    my code is not clean, I want to know how I can make it shorter and more clean. Any other opinion will also be appreciated.

    basic html and css web-design

    #accessibility
    2
    océane•290
    @Ocece77

    Code Review for Your Frontend Mentor Challenge ✨

    1. File Naming Convention 📂:
      Usually, the main stylesheet is named style.css by convention, just like the main HTML file is typically named index.html. It’s a good practice to follow this approach and name additional files based on their specific purpose. It keeps your project organized and professional! 🗂️
    1. Text Structure Improvements ✍️:
      • At line 29, your text "Improve your front-end skills" looks like it’s the main title of your card. It would be better to wrap it in an <h1> tag to reflect its importance. Here's an idea for the CSS styling you could use:
    h1 {
  font-weight: bold;
  font-size: 26px; /*or maybe 24px 🧐*/
  color: hsl(218, 44%, 22%);
}
    • For the smaller text below, it seems like a descriptive paragraph. Use a <p> tag for semantic correctness. Here's a suggestion for the CSS:
    p {
  font-size: 15px;
  font-weight: bold;
  opacity: 0.5; 
  /* or alternatively */
  color: hsl(212, 45%, 89%);
}

    🎯 This approach makes your structure more accessible and easier for other developers (or you!) to read later. 👓

    1. Rounded Corners 🌟:
      Nice job with the rounded corners! 🥳 However, pay close attention to details—it looks like the QR code image also needs rounded edges. A quick CSS fix should do the trick:
    img {
  border-radius: 8px; /* Adjust value based on design specs */
}

    🎨 Do not forget the background color that was in the style-guid was hsl(212, 45%, 89%)

    1. Attention to Detail Matters 💡:
      You’re doing great, but don’t forget to double-check the design specifications! 🔍 Take a close look at the style-guide.md file provided by Frontend Mentor. It’s your best friend for nailing the exact look and feel. 💪
    1. Planning Ahead 📝:
      Before jumping into coding, try to map out your project:
      • Sketch your layout 📄.
      • Identify the key elements you’ll use, like divs, headers, paragraphs, etc..
        This process will make the implementation smoother and more organized. 🎯

    Amazing effort! 🎉 Don’t feel discouraged by small mistakes—they’re part of the journey. Keep practicing, and soon you’ll be creating stunning, pixel-perfect designs in no time. 🚀 Remember: details make all the difference! 🌟 You’ve got this! 💪

  • océane•290
    @Ocece77

    Hi 🙌🏿 Your project is great, I noticed you followed the design on mobile, I don't know if it was intentional, in any case it's not bad 😎👍🏿

    There are a few corrections to optimize your code 🌿:

    First

    When you import fonts from google fonts you can put them all in one link, just select the font with the weight you want and in the top right tab "select families" and voilà ✨

    take a look at this YouTube short that shows how to do it: https://youtube.com/shorts/VPHqcvYTy3A?si=QBKYU4yzmF25RBv2

    Second thing : You can use variables for colors, animation, family .. and store them in root:

    Using variables in CSS with the :root selector allows you to store and reuse values throughout your stylesheet, leading to easier and more consistent styling across your entire website ☕️

    Here some cool ressources to help you 😎 :

    Third thing : You can use transition on your button so that when the user no longer hovers over it, it returns smoothly to its initial state. By applying a transition: property to the button's CSS, you can control how properties change over a certain duration when the user interacts with it 💆.

    For exemple in your button:hover{} you can add a transition : 0.3s ease

    While you can technically add the transition property to the :hover state of the button, it's more common and efficient to apply it directly to the button's base class like this :

    .button{ 
    padding: 15px 6rem;  
    background-color: hsl(71, 73%, 54%); 
    border: none;  
    display: inline-flex;
    color: #fff; 
    font-size: 150%; 
    font-weight: 200;
    transition: 3s ease; 
} 

.button:hover{ 
    border-radius: 2em; 
    border: 2px solid white; 
    color: black; 
    background-color: transparent;
}

    I noticed that your transition is a little bit long , transition more than 1 seconds is often considered too long for a transition duration because it can lead to a sluggish or delayed user experience . In many cases, users expect interactions and animations to feel snappy and responsive 🏃. A 3-second transition could potentially frustrate users by making the interaction feel slow and unresponsive 🫨.

    Here some ressources about it 📄:

    Keep practice and NEVER GIVE UP !

    Here a video that can motivate you :

    https://youtu.be/dzdiMRovyK0?si=jRfCxcNMvsLNk1ab

    Marked as helpful
  • océane•290
    @Ocece77

    This is great! I thought your project was the original!🤯

    • You can enhance your code by utilizing variables for colors, typography, and more…,and using :root{} in CSS. 🌳

    Take a look at the mozilla web docs 📄:

    https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties

    https://developer.mozilla.org/fr/docs/Web/CSS/:root

    In one of my projects, I was advised to use dynamic units (em, rem, vw, vh) instead of static units (px)!This offers better scalability 📐, responsiveness, and consistency across devices 💻📱

    Look at this article about css unit ! : https://www.freecodecamp.org/news/css-unit-guide/

    Marked as helpful
  • océane•290
    @Ocece77

    Hi ! ✨ Organizing CSS styles in the order of the corresponding HTML structure is indeed a good practice . This approach not only enhances readability but also makes it easier to locate and manage styles as the project grows. 🌱 For exemple in your css , you will write the code in the order like this :

    .header{ 
background-color : pink
} 

 .main{ 
background-color : chocolate
} 

.footer {
background-color :chartreuse
}

    This organization aligns with your HTML structure, which might resemble:

    <html>

<head>
</head>

<body>

<header><header>
<main><main>
<footer><footer>

</body>

</html>

    This article will guide you: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

    Also, try to learn and practice with freeCodeCamp: https://www.freecodecamp.org/learn/2022/responsive-web-design/

    Additionally, watching video tutorials on how to create a website on YouTube can be helpful as they demonstrate how they structure their CSS.

    Keep going ! Keep Practice 💗👍🏿

  • océane•290
    @Ocece77

    Hi ! For any gradient I use this website , it will make you gain a lot of time ! https://cssgradient.io/

    For the colors you have a file inside the starter file named « style-guide.md » with the color and font for the project in it ! The file « style-guide.md » is in every project so you should take a look before starting any project!

    Keep practice and never give up 👍🏿👍🏿✨

  • océane•290
    @Ocece77

    Wait guys I forgot the social media icon and I my texts are not in the right place bruh 🤦🏿‍♀️

View more comments