Responsive Recipe Page using CSS Variables, Utility Classes, & Funcs

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

Creating this recipe page has made me proud of:

• Usage of CSS Selectors / Pseudo Selectors - I discovered selectors such as :not and * + *, which have reduced bloat in my CSS file.
• Usage of clamp() - I just started learning about clamp(), which I use for creating dynamic font sizes within my projects.
• **Understanding , , ** - This was my first time actually applying these elements in a project and I find them more semantic and useful than just using some s.
• Usage of CSS Utility Classes - I've started to learn which type of CSS properties I use often and have made them into classes I can apply to any elements (like my own Tailwind classes)

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

Challenges I found difficult yet insightful:

• **Styling elements** - I found that styling an within a `` was not as straightforward as originally thought. I decided to get creative by using the margin-top property in CSS.
• Image sizing - When it comes to sizing images, I struggle greatly trying to find the appropriate ratio. Ultimately, I went with two widths utilizing the min() function in CSS. -Selecting List ::marker - I found this to be quite difficult, as this pseudo element is not as intuitive to me. However, a quick search on Stack Overflow helped me figure out how I can manipulate this element appropriately.

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

Personally, I would love constructive feedback on:

• Better image sizing techniques
• Redundancies that can be cleaned up within code base
• Alternative/Better units to use and why (rem, em, vw, dvw, etc..)
• How to implement accessibility appropriately (aria)
• Responsive design tips!