Skip to content
Submitted 11 months ago

Recipe Page - HTML, CSS And Flexbox

P
Jan•290
@Jan-Dev0
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Steven Stroud•11,890
    @Stroudy

    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
  • Teodor Jenkler•4,040
    @TedJenkler

    Nice job, keep going!

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