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 Basic HTML, CSS

dcco 10

@dcco

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?

I'm proud that I was able to get the unordered/ordered list spacing to look reasonably like the sample. Something I might do differently next time is learn how to structure my CSS in a more orderly, idiomatic fashion.

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

Getting the unordered/ordered list spacing to look correct was a challenge, because the most straightforward ways of doing them came up with a look that wasn't quite right. (Weird spacing/alignment between the dot and the text, etc) I overcame by learning how to use li:before to implement a list marker, rather than the default way of adding markers.

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

  • CSS structuring (what bad habits are in my CSS, what could I do to structure it better, etc)
  • Comments on accessibility

Community feedback

P

@PeterBachman100

Posted

Here is a good primer on CSS structuring: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

0

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