Skip to content
Submitted 3 months ago

Recipe Page - HTML, CSS And Flexbox

Jan•290
@Jan-Dev0
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

The challenge was mostly basic stuff. The only thing to mention here is the customized lists styling and the use of CSS counters.

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

I’d just like some tips on best practices or things to avoid. Any advice on common mistakes and how to do things the right way would be awesome!

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 3 months ago

    Hey Great job with this challenge, Nothing wrong but some things to consider,

    • Having better alt="" descriptions for accessibility is a must check this out Write helpful Alt Text to describe images,
    • Should take a look at BEM naming convention for class names, Its really useful and practical,
    • You have used <div> under instructions for your paragraphs, you should wrap them in <p> to make them semantically correct,
    • You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
    • In your <atricle> you have set a width in px and your @media, Check out this article from a Frontend mentor dev about responsive-meaning.
    • Using max-width: 100% or min-width: 100% is way more responsive than just width:100%,
    • It would not be a bad idea to download the fonts in .woff2 format, Host it your self using a @font-face and add a font-display: swap; property, To leverage the font-display CSS feature to ensure that text is user-visible while web fonts are loading, Increasing performance.

    Happy coding, will be good to see some more from you.

    Marked as helpful
    2
  • Teodor Jenkler•3,800
    @TedJenklerPosted 3 months ago

    Nice job, keep going!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord