Recipe page

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

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.

.instructions__list {
  counter-reset: item;
}

.instructions__list li::before {
  counter-increment: item;
  content: counter(item) ".";
}

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

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

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

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.