Skip to content
Submitted about 1 month ago

Recipe page using HTML and CSS

Leonardo Schell•20
@DevSchell
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?

I'm proud I could easily write the code now! I felt in myu skin the importance of practice

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

At first I couldn't use git very well but now used very fast! Practice is making the remember more stuff and become used to use the tool

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

I'd like help with even more semantic tags in my code. I felt I could use more semantic stuff but I won't do that now, only tomorrou because I need to stick to my sleep schedule

Community feedback

  • P
    Boris•3,970
    @makogeborisPosted about 1 month ago

    Great work, here's how you can improve your HTML to make it more semantic

    • Wrap the main container in a main tag
    • Use section tags to wrap the different sections in your page like the Preparation, Ingredients...
    • Wrap the .attribution in a footer
    • Change the width of the .main to max-width and it should be defined in rem not %.
    • HTML headings needs to be in a hierarchical order, see why here
    • Font-sizes should be defined in rem not px
    • Use a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    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