Recipe page

Solution retrospective
While working on this project, the most interesting part for me was customizing bullets and numbering in ordered and unordered lists. I had to use CSS counters. I had done something similar before, but a long time ago, so I had to consult the documentation to recall how it works.
What challenges did you encounter, and how did you overcome them?.instructions__list { counter-reset: item; } .instructions__list li::before { counter-increment: item; content: counter(item) "."; }
I also tried to style the bullets using the ::marker
pseudo-element, but unfortunately, it didn’t work as expected because it doesn’t support certain CSS properties, such as margin
Additionally, while comparing the project with the references using the Pixel Perfect Chrome extension, I noticed that the mockups included in the project starter pack did not match the designs in Figma. Therefore, I decided to follow the Figma files instead of relying on the mockup images.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@atif-dev
Congrats🎉 on completing the challenge.
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