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
  • Built with
  • What I learned
• Author

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

• Solution URL: https://github.com/seekinfox/base-apparel-coming-soon-master
• Live Site URL: https://seekinfox.github.io/base-apparel-coming-soon-master/

My process

• plan a design structure
• build structure with html
• use outline and style them without content or use text to get a idea.
• add content and adjust style
• write a function to verify email
• adjust some small details.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• javaScript
• DOM

What I learned

The challenge was unexpectedly challenging in terms of layout. I have made some silly errors in creating this layout but, it works for now. It solidified my relative and fixed units understanding. Creating a function to verify a email and using dom was a good practice. I will build more mini-javascript projects.

Author

• Frontend Mentor - @seekinfox