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
formis submitted if:- Any
inputfield 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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
This has been an interesting exercise. I've been trying to create my own utility folder to create things fasted based on the things that I normaly used. Never the less I've stumbled upon a couple of problems that make it hard to overwrite styles. But has been interesting. I realized that if you want to change the color of the input when it is in "focus" you need to use the "outline" property instead of the border. I spend some minutes in there figuring out what was going on with that.
I need to keep practicing javascript. The solution that I came up with is too obvious and I feel that I'm not taking advantage of the programing language. I need to make it simpler and more reusable.
- resource 1 - This is the solution @KirstChat used for another challenge and I thought it worked really good. So I used it here.
- Website - @lorenzo.francos
- Instagram - @lorenzo.francos
- Github - @Lfrancos
- Frontend Mentor - @Lfrancos