All solutions

I implemented the suggestions left on my last challenge: declared decorative images as background-image(s) rather than in HTML tags, used semantic HTML5 structural elements, and (tried to) use more heading elements.

However, getting the orange floating box to appear on top of the component while declared as a background-image was tricky. Eventually, I just decided to remove it from my CSS and use an img tag instead.

Not happy with the way the background came out on the mobile view, but it is what it is! This challenge was perfect for more general SCSS, BEM, and deployment practice.

There's nothing like struggling with a challenge labeled "NEWBIE" to really knock you down a few pegs. 😅 Front-end design is one of those things I've always assumed I know how to do because it comes easier than back-end work, but this first challenge showed me all the blindspots I had.

1.) Mobile-first responsive design. I spent longer than I should've deciding on breakpoints and then constantly had to adjust them. The spacing transitioning from a desktop to an iPad was especially tricky. If anyone has tips on how to choose/maintain a uniform set of breakpoints, I'd love to hear them!

2.) Svelte. I took this chance to learn a new technology: Svelte. And I loved it! It made it easy to separate and keep track of the different components, I didn't have to worry about BEM naming conventions, and the code looks cleaner IMO. However, I wasn't able to figure out how to get the validation on the form working for when a user tries to submit an empty email address field using Svelte logic. (So you'll notice that the error is the same even though it should change.)

3.) Form validation. This was an unexpected pain point towards the end. If anyone knows how to turn off the automatic form validation error messages that come up in chrome (and overlap the CSS I wrote), PLEASE let me know. I couldn't figure out how to make only one error message come up.

4.) Hiding form labels. To fit the design, I had to hide the form label for the email address input field while also making sure screen readers could see it. I found my solution on StackOverflow, but how do most of you do it?

Thank you!