Frontend Mentor - Base Apparel coming soon page solution

This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor.

Table of contents

• Frontend Mentor - Base Apparel coming soon page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshots
    • Links
  • My process
    • Built with
    • What I learned
    • 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

Screenshots

Desktop design VS Desktop solution

Mobile design VS Mobile solution

Links

• Solution URL: Frontend Mentor Base Apparell Landing Page Solution URL
• Live Site URL: Frontend Mentor Base Apparell Landing Page Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid
• SCSS
• Webpack
• Typescript

What I learned

• How to set up webpack to use it with Typescript, SCSS, HTML.
• Getting to terms with Typescript was quite the challenge given the strict type checking.

Useful resources

• Coder Coder's SCSS Tuts - The SCSS tuts helped me quite the bit to figure out how to use SCSS optimally whilst styling HTML pages.
• Brad Traversy's Webpack Course - This small crash course helped me out to setup webpack. Did an additional research to iron out the details.

Author

• Frontend Mentor - @elroytoscano

Acknowledgments

• This repo was extensively used for setting up the webpack config.
• Coder coder's SCSS tuts were quite useful for SCSS related queries.