Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author
• Acknowledgments

Overview

This project was created as part of the Frontend Mentor challenge to help improve my skills and create realistic portfolio ready work.

The challenge

The challenge is to create an early access landing page.

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
  • The Email address field is empty should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! Please check your email"

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-pod-landing-page-with-js-email-validation-gSY9QXh7Dj
• Live Site URL: https://podme-landing.netlify.app

Screenshot

My process

Built with

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

Useful resources

• StackOverflow - This question introduced me to regex and its role in email validation.
• Official Standard RFC 5322 - This is an amazing article which helped me undestand regex by breaking it down in detail, including its limitations.

Author

• Website - Personal Website
• Frontend Mentor - @yazzybandyham
• Twitter - @yazzybandyham

Acknowledgments

Client-Side Form Validation - Florin Pop

Thank you to Florin Pop's tutorial on form validation, it helped me so much.