Responsive and semantic recipe page

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

I'm proud of using the right HTML tags for a better semantic. Even though it took me more time to finish the project, I think it was totally worth it. I'm glad that the website not only looks exactly like the design, but also follows the best practices in terms of semantic and accesibility. Probably there are more things to check but, for me, this is a big step.

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

I didn't know how to customize the bullets and numbers of the HTML lists. However, GitHub Copilot helped me to find a way to do it. I amazed of CSS when allows us to do these things. Sometimes it seems as a programming language. For example, with CSS I could set a counter for the ordered list:

.instructions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: custom-counter; /* Initialize counter (numbers for list items) */
  list-style: none;
}

.instructions-item {
  position: relative;
  padding-left: 4rem;
  counter-increment: custom-counter; /* Increase counter */
  color: var(--stone-600);

  &::before {
    content: counter(custom-counter) "."; /* Number */
    position: absolute;
    left: 0.8rem;
    color: var(--rose-800);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
  }
}