Submitted 5 months ago

Recipe Page using CSS nesting

beowulf1958•1,450

@beowulf1958

Preview site View code

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?

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
@tchananetPosted 5 months ago
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

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