Recipe Page Design

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

This project took me 3 days. The reason for this was that I needed to review all HTML semantics again. I also needed to review the HTML tables, as the Nutrition Section required their use.

I also learned how to use the

• clamp() CSS rule for responsive font sizing (Thanks to 'Tom is Loading')

• ol li::marker

• ol li::before

• counter-reset: custom-counter

• counter-increment: custom-counter

• content: counter(custom-counter) ". ";

These CSS rules helped me use my keyboard numbers. The default numbers in the 'ordered list' did not match the design, so I needed to use my keyboard numbers to apply the font 'Outfit'.

I will continue to do things this way so that I can continue learning new CSS rules as I go.

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

One of the challenges I encountered was forgetting that I have a container for the card design and a container for the design itself. Sometimes, when I don't keep track of what I'm doing, I end up correcting areas that didn't need correction, which throws the whole design off. In other words, it becomes confusing if it is not well-organized.

I needed to review my code again to ensure I had double-checked everything. This can be a bit of a hassle, especially when you need to go back and check why the sizing or positioning is not working as intended.

I also kept putting the .attribution outside the container, which gave me a whole other problem, but I eventually figured it.

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

I want to continue learning about the clamp() pseudo rule and any other CSS rules that are similar or must-know, which will help you towards responsive design.

Also, when sizing and positioning in the center, what is the best practice and what is the most efficient way to execute the code (i.e., names, units, etc).

Thanks for reading! Blessings