Base Apparel coming soon page

Community feedback

• 

  Eric Salvi•1,350

  @ericsalviPosted about 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Yui•50

  @yteraiPosted about 2 years ago

  @ericsalvi Thank you for your feedback, Eric! I totally forgot to update my README.md file🫠 I'll work on it next time!

  0

  

  Eric Salvi•1,350

  @ericsalviPosted about 2 years ago

  @yterai Just saw a typo that didn't make sense.

  So like on submit, maybe clear the input field and display an inline thank you message or something

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  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 😊

  Marked as helpful

  0

  ---

  

  Yui•50

  @yteraiPosted about 2 years ago

  @elaineleung Thanks for your feedback, Elaine! I had doubts about adding many media queries so it's now clear that I don't need to add many. I'll try to do your method next time :)

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @yterai You're welcome Yui, anyway I just updated my comment as I realized I forgot to paste the link to my solution!

  Marked as helpful

  0
• 

  maia•300

  @maiaflowPosted about 2 years ago

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

  excited to see your next submission!

  1