Frontend Mentor - Intro component with sign up form

🗺️ Table of contents

• Frontend Mentor - Intro component with sign up form
  • 🗺️ 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

• Challenge URL: Frontend Mentor
• Solution URL: https://github.com/NoaSalgado/Sign-Up-Form-Intro-Component
• Live Site URL: https://noasalgado.github.io/Sign-Up-Form-Intro-Component/

🚀 My process

🏗️ Built with

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

🧠 What I learned

With this challenge I learned and practiced about some basic form validations on the client side.

I also learned how to hide labels, by design requirement in an accesible way:

<label for="password" class="visually-hidden">Password</label>

.visually-hidden {
  border-width: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

🎯 Continued development

In future projects I would like to focus on learn and improving accessibility and especially accessibility in forms.

🛠️ Useful resources

• HTML Inputs and Labels: A Love Story - This article helped me understand the importance of label elements for accessibility and how to hide them visually, but still be available to screen readers.

🙍‍♀️ Author

• Frontend Mentor - @NoaSalgado
• Twitter - @noasalgadodev