Skip to content
Submitted over 3 years ago

Base Apparel Coming Soon Page Using CSS Grid and Javascript

Chris•260
@chintriago
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found the javascript part the most challneging only because I haven't been using it much lately as i've been focusing on just html and css but it was very rewarding finally getting the form validation working how I wanted it to work. I didn't try to make it responsive as I only focused on 375px and 1440px but I would appreciate advice on how I could setup my code to have my page be more responsive and cleaner looking when it grows. Also Any advice on my code would be much appreciated thank you! :) I forgot does anybody know how to have the email input form and the icon arrow always be next to each other?

Code

Please log in to post a comment

Log in

Community feedback

  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think that the button is supposed to be positioned relative to the input field.

    In terms of validation errors

    • Any input descendant of a label element with a for attribute must have an ID value that matches that for attribute

    • The value of the for attribute of the label element must be the ID of a non-hidden form control.

    I hope this helps

    Cheers Happy coding 👍

    Marked as helpful
  • Carlos Guzman•285
    @guztrillo

    Hey Chris, great solution! I know you focused only on the the two resolutions that the challenge indicate you, but you as frontend developer, need to satisfy more than two screen types. You need that your clients can look your website from the right way on any device, or at least, a vast majority of devices.

    You can achieve this by multiple methods, from using just CSS Grid or Flexbox, but one common way is using media queries, that reviewing your code, you already know how to use it. So you only need to add an extra media query.

    Still is a great solution and looks clean. I hope this help you! Keep coding.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord