Base Apparel Comming Soon Page built using SASS and JS

Hi @dennisthandy nice work on this one! 🙌 It looks great at large screen sizes, and you have some nice JS validation going on two! Here's some suggestions for you to consider:

1. Your breakpoint at 1440px is a bit to early in my opinion, and also causes some layout issues with your form and it's children. I would avoid changing things around until much smaller - maybe even around 600-800px?

2. Couple of points on your HTML:

i) Firstly an input must always have a label. Here's a nice explanation of why: https://css-tricks.com/html-inputs-and-labels-a-love-story/ if you don't want people to see the label you can apply a special class to it that makes it only available to screen readers - a quick google will give you some guidance here.

ii) I think this challenge is a great place to consider making use of the srcset attribute. This will allow you to show users different photos based on what screen size they are using. It also prevents them having to download two images. Don't forget it's only us developers who actually resize screens!

1. On some CSS points:

i) I notice that you removed the outline style. This is OK, but you must add back a custom style if you are going to do this otherwise the user can't tell where they are on the screen - this is especially important for keyboard users.

ii) For the input styles and button positioning, this is something that is worth spending time on a it's a pattern you'll encounter again and again. I think I do something like wrap both the input and button with an element set to display flex, and then absolutely position the button - this could stop your button spreading out beyond the input?

1. Small point on the JS - for forms I would typically add a novalidate attribute in JS so that the native browser validation still works in case JS fails. I wondered how you did it but then I saw that your input type was text rather than email. I think setting it to email would be better, which combined with using JS to add novaldiate will help make things more robust.

Sorry a few things to think about here! But don't let that detract from the great job you did here - I found it very tricky - especially getting that huge image to work!!

Keep up the good work!! 👍 Cheers 👋