codepapa360 / ping-coming-soon-page

Ping coming soon page design challenge on Frontend Mentor. The main challenge was to recreate the design as accurately as possible with email validation.

Ping coming soon page

🚀 Live Site | 💡 Solution

This is my solution for the Ping coming soon page design challenge on Frontend Mentor. The objective was to build a coming soon page with email validation and get it looking as close to the design as possible.

Screenshot

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
• Submit their email address using an input field
• Receive an error message when the form is submitted if:
  • The input field is empty. The message for this error should say "Whoops! It looks like you forgot to add your email"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]). The message for this error should say "Please provide a valid email address"
• Bonus: Dark mode toggle

Built with

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

Installation

• Clone this repo:

git clone https://github.com/CodePapa360/Ping-coming-soon-page.git

• Install dependencies:

npm install

• Build command:

npm run build

• Run command:

npm start

What I learned

Through building this project, I was able to build upon the email validation skills I learned in a previous challenge. This second challenge, the Ping coming soon page, presented new layout and design obstacles to overcome. I gained further experience working with responsive images and honed my CSS skills. Overall, this project allowed me to build upon my previous knowledge and gain new insights in web development.

Useful resources

• RegexMagic - This article by Jan Goyvaerts provides an in-depth explanation of how to use regular expressions to validate email addresses. The article not only explains how to write regular expressions for email validation but also covers the common mistakes made while writing regular expressions for email validation.

It provides clear and concise examples of regular expressions for email validation and also explains the logic behind each regular expression.

Author

👤 Alamin

• Twitter - @CodePapa360
• LinkedIn - @CodePapa360
• Frontend Mentor - @CodePapa360
• Github: @CodePapa360

Feel free to contact me with any questions or feedback!

Show your support

Give a ⭐️ if you liked this project!

Acknowledgments

I would like to express my gratitude to Frontend Mentor for providing this project idea and design. Their platform is an excellent resource for web developers looking to improve their skills.

License

This project is licensed under the MIT license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!