Skip to content
Submitted 11 months ago

Recipe Page using custom marker, flex, grid, counter(), variables, BEM

bem, accessibility
P
Daniele•300
@dedo-dev
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?

With this challenge, I discovered a lot of new things. One thing that makes me most proud is how ::marker pseudo-elements work and why we need a custom marker to achieve the design specs, so solving that made me happy. One thing I'll probably do differently next time is how I create variables for spacing, margin, gap etc etc.

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

The tricky challenge for me was to create the right style for making `` look like design specs.

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

I would like to receive feedback on how I made the li to make it as close as possible to the design. Thanks a million.

Code

Please log in to post a comment

Log in

Community feedback

  • Iván Fernández López•230
    @IvanFdez01

    About the li elements... Maybe what's left in your page is applying padding-left on your li elements, that will separate the dots from each text. I've also applied margin-bottom to give the Preparation time and Ingredients list inter-linear height (similiar to the function line-height on paragraphs p). Hope this helps you.

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