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.
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"
- Any
- Solution URL: https://github.com/vljones133/intro-component-signup-form
- Live Site URL: https://intro-component-signup-form-vljones133.vercel.app
This past year, I've been getting chummy with React, Bootstrap, and other styling frameworks. For 3.5 years, before my 5-year coding hiatus, I was a front-end developer who focused mainly on vanilla CSS and JavaScript. My goal with this initial Frontend Mentor project was to make sure I kept those vanilla skills sharp and to ensure I haven't gotten too rusty or dependent on libraries and frameworks. Now that I've completed this project, I am happy to say that I've still got it!
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Responsive layout
- Vanilla JavaScript
- Client-side form validation
One thing I did do differently this time was create my own CSS variables. In the past, I had used variables that were already set inside templates, but this time I created my own. Just as easy as setting JS variables, and I'll be using them for continuity from here on out!
Also, in the past, I have deployed projects with Heroku, GitHub Pages, and Netlify. This time I wanted to give Vercel a shot. Easy peasy!
Some code highlights:
:root {
--coral: hsl(0, 100%, 74%);
--green: hsl(154, 59%, 51%);
--blue-purple: hsl(248, 32%, 49%);
--dark-blue: hsl(249, 10%, 26%);
--grayish-blue: hsl(246, 25%, 77%);
}
input.invalid {
border: 2px solid var(--coral) !important;
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-attachment: initial;
background-size: 20px 20px;
background-position: right;
background-position-x: 96%;
}
const form = document.querySelector('form');
const input = document.getElementsByTagName('input');
window.addEventListener('load', () => {
input.className = 'valid';
});
For my next project, I plan to continue working with vanilla JS and DOM, but will also learn and implement SASS/SCSS.
My favorite tutorial websites:
-
freeCodeCamp: https://www.freecodecamp.org/learn/front-end-development-libraries/#sass
-
Codecademy: https://www.codecademy.com/learn/learn-sass
- Mozilla Form Validation - This helped guide me for custom form validation as I used to rely more heavily on the build-in browser validation with the required tag before.
- Mozilla CSS Custom Properties (Variables) - I trust Mozilla as a reference to make sure I'm following best practices.
- Website - Valerie Jones
- Frontend Mentor - @vljones133
- LinkedIn - @valeriejones133