All solutions

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

I am proud of:

• Overwriting the default behaviors type="checkbox" and type="radio" for `` elements.
• Utilizing grid-template-areas to create responsive layouts/elements within my contact form.
• Successfully creating an animation for the first time using @keyframes.

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

The biggest challenges for me were the type="checkbox" and type="radio" for `` elements and adding the appropriate event listeners for each element in the form.

• Checkbox and radio inputs have weird default styles that I learned I could overwrite by first using appearance: none. This allowed me to achieve the styling I wanted.
• Writing JavaScript for this entire project has been SOO fulfilling. I've learned so much about vanilla JavaScript and interacting with the DOM without React hiding it under a layer of abstraction.

JavaScript became a lot easier once I understood two things:

• Element Selectors
• event.target.value

While also using some help from Stack Overflow (such as character code algorithms for email validation), the project became quite fun as I began learning more and more, overcoming the challenges I faced before!

While not the most challenging, discovering CSS selectors such as :checked was interesting. Using a combination of attribute selectors and pseudo selectors was awesome.

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

• Definitely accessibility if any tweaks are needed! I want to ensure all bases are covered when making interactive web applications for ALL visitors.
• Any cool styling tricks or better compartmentalization of any code (JS, CSS).

Ultimately, I'd love to hear thoughts on how you would approach different aspects of this project! My way is not the right way and is definitely not the only way. Constructive criticism is welcome :)

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

• Created an accessible profile page using :focus and :focus-visible selectors. I did not understand the importance of these selectors until I implemented them myself.
• Responsive layout for viewport widths and heights.

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

The trickiest part of this challenge in my case was understanding the importance and implementation of focusable elements.

• Discovering the outline CSS property was interesting and seeing where it lies in the Box Model was eye-opening.
• Sizing the elements was tricky (I moved sizing from tags to the `` tags.

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

Any constructive feedback is welcome!

• Please let me know if I have implemented the font families correctly! :) (Just discovered the @font-facestatement in CSS).

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!