Skip to content
Submitted 12 days ago

fm-recipe-page

Gracia Naimora Samosir•110
@cia2003
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?

Using BEM methodology to increase the clarity of the code. Next time (hopefully), I could experiment the effectiveness of BEM methodology in reusing the code.

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

I only found minor challenges, like how to make the image fill the card in smaller screen. Other than that, I did not found any.

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

Give me feedback about my code's clarity.

Community feedback

  • P
    KonradJam•1,040
    @KonradJamPosted 12 days ago

    Hello @cia2003!

    Well done. Your solution looks very nice. I only have a few tips for you:

    • Wrap your entire recipe page in <article> instead of <div>. -For card__content you could use <header> and set its name to recipe__header.
    • Change the class name of card to recipe. cart is too vague a name.
    • According to the BEM methodology, each HTML tag should have its own class name.
    • card__section--preparation This is an inappropriate use of modifier. This should be a separate class card__preparation.
    • Each modifier should have only one use. Declare card__section--border-bottom and set its styles to get the same result as with <hr>.
    • Element or block should not affect its parent. So instead of using margin use padding for the parent.
    Marked as helpful
    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