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

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"

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Media Queries
• Flexbox
• Javascript

What I learned

This is my second Frontend Mentor Challenge!

I started this challenge with all the HTML and CSS first. I learned to use the CSS pre-line property and practiced line-height with the main text. I had some trouble positioning everything at first, but then I figured it out. I also learned how to put a color filter on a background image.

After styling everything I started with the JS part. I'm not gonna lie, I struggled a lot and had to google many things, many times. I learned validation methods and properties and got to practice my DOM manipulation skills. I created a function that validated all inputs when the Submit button was clicked or when the input itself was changed. At the beggining it was very hard, but at the end I managed to solve all the problems I had, and learned a lot in the way. I'm happy with my JS code, though I think there's a way to make it cleaner (any help would be appreciated).

When the desktop version (1440px) was finished, it was time for Media Queries. If the JS was difficult, the Media Queries were a complete headache. I spent hours fixing display problems and changing design properties to make it fit most resolutions. I think it could have been done better, but I am new to this, and this is the best I could do for now (will try to improve it in the future).

I really liked this challenge cuz it was really challenging. It helped me to learn lots of new things and to discover some weaknesses I have, as well as some abilities I could improve. It was a little stressful at times, but everytime I figured how to do something it felt amazing :)

Continued development

I want to keep using and practicing responsive design and Media Queries, because that was the thing I struggled the most.
I also want to expand my Flexbox and Grid knowledge and learn some design theory and UI/UX.
Backend coming soon too.

Useful resources

• Javascript Form Validation (in spanish) - This really helped me to understand form validation and displaying error messages with javascript.
• Applying color overlay to a background image - This Stackoverflow post teached me to add a color filter to bg image.

Author

• Frontend Mentor - @Rich15
• Twitter - @rich_osio

Acknowledgments

Shootout to Mozilla Developer and all the Stack Overflow community :D