Skip to content
Submitted about 1 month ago

Recipe page using lots of rems and flexbox.

hopefulobject•80
@hopefulobject
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 am most proud of how efficient I am getting at figuring out the solutions to problems when I get stuck.

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

The image in this project kept overflowing off the page and I overcame this be removing the fixed height I had set for body. ( height: 100vh to min-height: 100vh)

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

What is the best way to measure distances on my browser window? This would be helpful as I would be able to compare these distances with the distances in the design file.

Community feedback

  • Tarps240•60
    @Tarps240Posted about 1 month ago

    The fonts look good, but I would work on making sure the background colors are correct, and the border-radius on the image and recipe card container are correct. For this project, try wrapping the entire recipe card in a wrapper in order to better style it (i.e. right after your <main> or give your <main> element a class like this <main class = "wrapper"> and styling that for the main recipe card. I would also try to cut down on the spacing in the HTML and CSS just for readability, once your files and projects get bigger it will be harder and harder to read and it will take longer to load with excess spacing. Otherwise, keep up the good work!

    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