Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Page using CSS nesting

P
beowulf1958 1,170

@beowulf1958

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Most proud of the CSS nesting and learning more about styling list markers. Next time will try prototyping in Bootstrap for a quicker start.

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

I had a hard time analysing the jpg because the color palette put a real strain on my eyes. I had a hard time figuring out what was going on, and what is up with 3 shades of white? I was finally able to begin by looking over over people's work and seeing how they interpreted the styles.

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

The media query is very messy and would like some help cleaning up the styles. Perhaps I need to fix something in the html?

Community feedback

tchananet 170

@tchananet

Posted

Hi. Good try at the design. Here a few things you could look into.

  • For the media query, you did not add the query for the smaller screens.
  • There is no minimum sizing, so the code is not very responsive.
  • Why put the introduction in a header? The image alone should suffize, and the rest could be in the main or a section.
  • Just a minor issue, but naming class is usually begin with lowercase.
1

Please log in to post a comment

Log in with GitHub
Discord logo

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