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
• Author

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

Screensize 1440px - Desktop

Screensize 375px - Mobile

Links

• View my Solution on Frontend Mentor
• View the Live Site here

My process

• HTML semantics
• Importing Google Fonts
• Set variables
• Reset default settings
• Styles (Mobile First)
• JavaScript
• Media Queries

Built with

• JavaScript
• Semantic HTML5 markup
• SASS custom properties
• CSS Grid
• CSS Flexbox
• Mobile-first workflow
• Google Fonts - For Fonts

What I learned

Every project gives me the opportunity to learn something new. This is the first time I worked with the Grid-Template-Area property. It improved my workflow. I will definitely going to use it on future projects to learn more about CSS Grid.

.container {
  max-width: 23.438rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  justify-items: center;
  grid-template-areas:
    "header"
    "hero"
    "main"
    "footer";
  @media only screen and (min-width: $desktop) {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header hero"
      "main hero"
      "footer hero";
    background-image: url(../images/bg-pattern-desktop.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
    background-size: contain;
  }
}

Author

• Frontend Mentor - @kxnzx