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
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources

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

Screenshot

Links

• Solution URL: https://github.com/effycoco/coming-soon-poster-frontendMentor
• Live Site URL: https://effycoco.github.io/coming-soon-poster-frontendMentor/

My process

Built with

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

What I learned

• 使用 JS 自定义表单校验的提示信息及样式
• 不能用 js 获取或修改 svg 的 className，给它加个 wrapper
• pseudo-classes related to forms, :valid, :invalid, :focus
• although a valid email address doesn't have to include a dot, I add this constraint just for practice.

Continued development

对 grid 的使用还不熟练

Useful resources

• 表单校验中文版 - 介绍了如何利用 HTML5 和 JavaScript 进行表单校验，自定义提示信息和样式。
• 表单校验英文版