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
  • 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: [email protected]). The message for this error should say "Looks like this is not an email"

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/css-grid-javascript-f6nobh6FE
• Live Site URL: https://hansmboron.github.io/signup-form/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid

What I learned

This challenge helped me train and improve my skills with CSS, learning how to use CSS Grid and add an icon inside the input tag.

<form class="form" id="form" method="post">
    <input type="text" name="first-name" id="first-name" placeholder="First Name">
    <div class="error" id="first-name-message"></div>

.error-icon {
    background: url(../images/icon-error.svg) no-repeat 93%;
}

function addErrorIcon(input) {
    input.classList.add('error-icon');
}

function removeErrorIcon(input) {
    input.classList.remove('error-icon');
}

Useful resources

• https://stackoverflow.com - This helped me correcting a bug with the the input that having a width of 100% took up too much space leaving the components misaligned.

Author

• Website - Hans M Boron
• Frontend Mentor - @hansmboron
• GitHub - @hansmboron
• YouTube - @HansMBoron
• LinkedIn - @hansmateusboron