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.
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
- The
Desktop view
Mobile view
- Solution URL: https://www.frontendmentor.io/solutions/base-apparel-coming-soon-page-ei8oz2Guyb
- Live Site URL: https://Milleus.github.io/fm-base-apparel-landing/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Using Constraint Validation APIs
- Email typeMismatch allows email addresses without a top-level domain, i.e. x@y is a valid email
- Using patternMismatch to accept only emails with top-level domain
- Setting novalidate with JavaScript instead of HTML allows for native form validation fallback when JavaScript fails
- Considerations for full-height images and larger viewports