Base Apparel coming soon page

Hey @yterai,

This one looks incredible! Great job. I think Elaine mentioned everything I would have said. For the mobile-first approach, you don't need to declare 2 ranges for media queries. The way CSS cascades styles, it will naturally inherit the styles from additional larger min-width.

I couldn't see too many improvements but what I would like to see for future challenges is for you to work on your README.md file for the GitHub repository. Think of it as a way to explain yourself and what you worked on. Like a journal so others can read and discover new things.

Your JS was great as well. Works like charm. My only suggestion with this would be to include some type of something to know the email is correct and valid. So like on submit, maybe learn the input field and display an inline thank you message or something.

I cannot wait to see your next challenge and hopefully, you take a few of these recommendations from me and Elaine, it will really make your solutions pop!

Hi Yui, great job trying a mobile-first approach! This can be a pretty big leap at first, but once you get the hang of it, you'll see why this is the recommended approach.

As for the media queries here, I would only use just one or two, and I would only just list the breakpoint where the change happens. If your breakpoint is at 1023px, then you just only need a media query for that point, and not need to specify max-width: 320px. We generally don't need a range, even though one of the newer media query features allow for a range, but for most cases, you just need to mark that one breakpoint. Try to resize your the viewport in your inspector and see what happens when you get down past 320px. There is also some quirkiness with the media query situation in the picture element; since you started with the mobile view, then then img with src should show the mobile image first, and you only really need just one source element, which would be the desktop.

Here's my solution for this challenge, and even though I completed it a while ago and need to make some changes for improvement, I think this should give you an idea on how to handle the media queries: https://www.frontendmentor.io/solutions/responsive-landing-page-using-flexbox-and-css-grid-to0RksRRE

Hope some of this info can help you out 😊

great work Yui! i love your simple js here. taking notes!

excited to see your next submission!