Submitted 3 months ago

Recipe Page

Abel Muro•1,830

@AbelMuro

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

To be honest, the only reason I did this project in the first place was because I was bored. It's a very straightforward project with little to no challenge

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

The only small challenge that I encountered is implementing the right dot markers for the lists in the webpage. Using list-style-image: url('./myMarker.svg') had one small issue, the dot image could not be centered, and using the ::marker pseudo element had very limited css properties that could be used.

I ended up using the ::before pseudo element to create a marker that can be centered

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

I don't believe I needed any help with this project

Community feedback

geomydas•1,440
@geomydasPosted 3 months ago
Stop overcomplicating things, there is no need for ::before and you can just use the ::marker element
0
Abel Muro•1,830
@AbelMuroPosted 3 months ago
@geomydas The issue with the ::marker pseudo element is that I can't use position properties or margin: auto to center the marker along with the content in the list. According to the figma design file, the marker had to be centered within the <li>, and I try to be as precise as I possibly can, which is why i used ::before to center the marker.
0

Please log in to post a comment

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