Skip to content
Submitted 10 months ago

A Recipe page using only HTML and CSS

P
Karsten Løgstrup•170
@logstrup78
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

My mediaQueries works, that is good.

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

I had som problems separating the numbers from the text in the ordered list. I tried different things, but couldn't get it to work.

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

The above!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Levi•230
    @law973

    Hi! Nice job on using a media query. In order to create space between your ordered list numbers and the list items, use a ::marker selector instead of ::before; that way, adding left padding to the li elements will create the desired effect.

    There's a few other things to mention. I think h2 should be used in place of h3; the numbers should descend based on their position in the document. If, for example, there was a subsection in the "Preparation time" section, then it would make sense to use h3 there. I would also say that the headings should be contained within the divs they belong to and not outside of them.

    Regarding the usage of semantic HTML, I like that you used the main tag. It's worth noting that all of the main content should be placed within there, which would include the image. A footer tag could be used for the attribution section, the divs within the card could use section tags, and perhaps the card itself could use its own article tag.

    It seems like the repository is private, which means the "View Code" link doesn't function properly and the code can only be inspected through browser developer tools; I would consider changing this setup for future submissions in order to make it easier for others to deliver feedback.

    I've done this challenge myself, and I know it can be time-consuming to get the details right, so I'd like to commend you for doing a solid job on the padding, text color and sizing, and using the font families in the right places.

    I hope this helps!

    Marked as helpful
  • P
    Karsten Løgstrup•170
    @logstrup78

    Hi Levi. Thanks a lot for your very nice feedback. I will definitely try to use the ::marker pseudo. I'm very grateful for your help.

    Karsten

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