Frontend Mentor - Base Apparel coming soon page solution

This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Github Repo: 🍴 Fork me
• Live Site: 🏡I'm Live Here

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• Flexbox
• CSS Grid
• SASS/SCSS - CSS with superpower
• Vanilla Javascript

What I learned

• I learnt and used CSS GRID's grid-template-area for this complex layout.
• I used the - SASS in my Project

main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(../images/bg-pattern-desktop.svg) no-repeat;
  background-position: left;
  background-size: 75%;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 0.4fr 1fr auto;
  grid-template-areas:
    "header hero"
    "content hero"
    "footer hero";

  @media (max-width: $screen-tablet) {
    background-position: bottom;
    background-size: 100%;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header"
      "hero"
      "content"
      "footer";
  }
}

For the Email Verification, I've disabled the built-in HTML validation and achieved it with JS by using regex and test() method. I also added an event on the input element, that will remove the error message and icon if the user tried to input a new value.

const enteredEmail = document.querySelector("input#email");
const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

document.querySelector("form").addEventListener("submit", (event) => {
  if (!regex.test(enteredEmail.value)) {
    enteredEmail.closest(".form-group").classList.add("alert");
    e.preventDefault();
  }
});

enteredEmail.addEventListener("input", () =>
  enteredEmail.closest(".form-group").classList.remove("alert")
);

Continued development

• I'd love to explore Javascript frameworks more, along with honing my HTML and CSS Skills with further libraries and frameworks. 😊

Useful resources

• Coder Coder's Sass Course - It helped me with SASS and BEM. I really loved this pattern and will use it going forward.
• Brad Traversy's Grid Crash Course - This is an amazing video that helped me finally understand CSS GRID. I'd recommend it to anyone still learning GRID.

Author

• Basit Korai - a self-taught Full Stack Developer.
• Frontend Mentor - @basit-flash
• Twitter - @basitxkorai

Acknowledgments

• I'd like to thank Brad and Jessica for their videos that helped me out on this project.
• I also took inspiration from Niel's solution for this project.