Frontend Mentor | Recipe-Page coding challenge solution

Solution retrospective

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

I decided to take a step back in my field and learn responsiveness and designing on my own without help.

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

I learnt about the "::marker" selector to change the bullet color of a list style type.

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

I would love help in centering the container with margin-top and bottom set.

Community feedback

@DylandeBruijn

Posted 3 months ago

Hiya @thedanielking,

Good job on this solution, it looks great!

I'm happy to give you some friendly constructive feedback:

To give the container some spacing I would add some top and bottom padding to the body element. Or update your margin on the container like so margin: 4rem auto;
I suggest removing width: 100%, display: grid and place-content: center from the container. The container is already a block element so it takes up the full width. And because the container doesn't have any extra width or height the children don't get centered at the moment.
You could try recreating your nutrition table using the table, th and td elements.

I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!

Let me know if you have more questions and I'll try to answer them.

Marked as helpful

@thedanielking

Posted 3 months ago

hi@DylandeBruijn thanks for the feedback I had a problem using the "table", "th" and "td" attributes. I will try the fix. Thanks so much.

@thedanielking

Posted 3 months ago

hi@DylandeBruijn thanks for the feedback I had a problem using the "table", "th" and "td" attributes. I will try the fix. Thanks so much.

Recipe-Page