All solutions

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

I am happy to have implemented the recipe schema in this challenge.

I would style my list differently (I plan on refactoring this part) next time.

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

I had a hard time styling the lists (spacing and alignment). The easiest for me was to use the '::beforepseudo-element and play with thedisplay` property.

I plan on refactoring the lists CSS by using this approach

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

Semantic HTML, CSS best practices and accessibility.

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

The challenge was pretty straightforward, there was nothing to note here.

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

The challenge was pretty straightforward, there was nothing to note here.

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

Maybe some accessibility advices.

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

Things I am proud of

• Semantic HTML (I tried my best)
• CSS Variables where it made sense to me (I still have a lot to learn)
• I added a transition for the box-shadow for the card and the color for the card's title

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

• Pixel Perfect -> I tried my best by relying upon the Figma File but it was not enough.
• Units for spacing and font size: I chose px for padding and rem for the rest.

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

HTML

• Semantic
• Accessibility

CSS

• Responsive
• Which unit to choose for spacing (padding, margin, gap...)

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

The key here was to take my time and not rush things. It helped me think about what the markup should be before thinking about styling. So it keeps the markup clean!

Next time, I will try to write down on paper the markup and what is the flow of content.

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

The challenge was to get the sizing right to match the mockup ! I used a calculator and tried my best to guess how much the margins and paddings were.

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

Any help here is welcomed ! Sementic, css classes, display techniques, accessibility...