Skip to content
Submitted 10 months ago

Recipe Page with Semantic HTML and Pure CSS

Freddy Santana•190
@Creixz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! This challenge was very interesting, I had to put a lot of effort to finish it.

  • I used the pseudo-element ::before to be able to give a custom style to the elements of the ordered and unordered lists, do you think it was ok? is there any way to do it better?
  • I was looking for different ways to style my table and I used border-bottom to make those lines between rows, is there a better way to do it? Thanks for your comments, I know they will be very helpful.

Community feedback

  • Osman Bay•690
    @osmanbay90Posted 9 months ago

    Your solution looks good.

    You can use pseudo-elements like ::marker to change the color of the list of bullet points.

    Also, you can use the border-collapse property for the line in the table to be shown.

    Other than that, your solution looks great.

    Marked as helpful
    0
    Freddy Santana•190
    @CreixzPosted 9 months ago

    @osmanbay90

    Thank you my friend, I didn't know about ::marker.

    1

Please log in to post a comment

Log in with GitHub

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