Frontend Mentor - Intro component with sign up form solution

This is a solution to the Intro component with sign up form 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
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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:
  • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: name@host.tld). The message for this error should say "Looks like this is not an email"

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Intro Component with Sign Up Form

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript
• BEM naming convention

What I learned

• I was able to reuse some of the things I learned from the Base Apparel Coming Soon challenge for this solution, such as how the form elements should be structured with ARIA attributes. Something new I learned from this challenge though is that we should also use the aria-describedby attribute to link the Terms and Conditions text to the Submit button since it provides further information about the button
• I also learned the different available values for the autocomplete attribute which I was able to use here, such as given-name for the First Name field and family-name for the Last Name field

Continued development

I'd like to learn more about standard form accessibility rules and design best practices when implementing forms and custom form validation

Useful resources

• "Sign-in form best practices" by Sam Dutton on web.dev - This article gave good explanations and examples on how to properly implement an accessible sign-in/sign up form
• "Password Forms — 3 Ways to Make Them More Accessible" by Quymbee Chen on Medium - Further readings on making password forms accessible

Author

• Frontend Mentor - @mbdelarosa