All solutions

First time using SASS. I appreciated the variable declaration and the efficiency of not needing to use brackets/semicolons.

On this project, I learned about and implemented CSS masks for the icons, which was an interesting find. Hadn't used that before, and enjoyed adding it to my toolbox for future use.

• Modifying the Chakra UI theme to change the border color on input hover/invalid states was a bit challenging to find information on and took a bit of time to figure out.
• validator's isEmail() function made the email validation easier than I expected it would be.
• I forgot to custom theme the drop shadow on the button and will add it next time I edit.
• This was my first free challenge since I joined Pro, and the design files save so much time on styling.

Kindly delivered feedback always appreciated!

On this project, I learned that background CSS can accept more than one image/layer. I'm baffled I haven't come across this before, and it kind of makes me want to read through all of MDN's CSS information to figure out other little gems I've missed.

What's the coolest or most obscure feature/functionality you've used in plain CSS?

This was a fun project. I learned about aria-hidden and visually hidden elements. I hid the QR code image from screen readers, since it's not focusable, and provided an alternative text link for screen readers that is visually hidden when viewed on screen.

Do you have excellent resources you could share about using semantic HTML elements as they relate to ARIA roles?

I have read MDN aria roles and quite a lot of the ARIA authoring practices guide. I'm looking for any resources/production examples that can help me learn when to apply the patterns/rules, like when to use section vs article vs document vs group that seem similar.

In Chakra, I can use the "as" prop to specify semantic HTML elements, but outside of headings and form components, I'm unsure how to best use these create a usable hierarchy. I test with Windows Narrator and it seems to primarily call out headings and links.

Windows narrator reads like this, and I thought it was interesting it didn't call out main/article elements. I may try a different screen reader and compare how they differ.

LINK Visit Frontend Mentor Website
HEADING 1 improve your front-end skills by building projects
LINK To visit Frontend Mentor and take your coding skills to the next level, click here.
Challenge by LINK Frontend Mentor
Coded by LINK Amanda Guthrie

Thanks in advance for sharing resources and your kindly delivered feedback.