Skip to content
Submitted 4 months ago

Recipe Page built with mobile-first approach

Sara Moura•10
@SaraMouraDev
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I would appreciate help on how improve my code using clean code.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Gabe•320
    @gabei

    Hello!

    If I can add to what LittleSamm said:

    Check out this article about semantic HTML. In short, it is helpful to have certain elements on the page labeled a certain way (<main>, <h1>, <h2> (in order), etc. This is especially helpful for screen readers, but also helps you to style and organize your code in logical order.

    Something I wanted to add was to check up on the width of the recipe container. Currently it is centered using some margins, but I think you'll find that this starts to act a little odd when you view the page on a smaller device. Here's a classic article about centering divs.

    Nice work and happy coding!

    Marked as helpful
  • P
    littlesamm96•50
    @littlesamm96

    Code does not include semantic HTML and overall layout is larger than the size in the design.

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