Frontend Mentor | Recipe Page - HTML, CSS And Flexbox coding challenge solution

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

@Stroudy

Posted 17 days 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

@TedJenkler

Posted 15 days ago

Nice job, keep going!

Recipe Page - HTML, CSS And Flexbox