Intro component with sign-up form from frontend Mentor

Frontend Mentor

In this post we are going to do a frontend mentor challenge which is Intro component with sign-up form.

Intro Challenge

After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

Basic folder

Next, we will add required HTML tags. Here, we are wrapping everything with container class. Then the two sides will be wrapped in two different divs.

The right side also have a form containing our four input fields and a button.

Now, our project is looking much better.

Much better

Now, we will add the basic CSS first. All the colors and images are provided by frontend mentor, including the fonts.

Now, our app is taking shape and looking like below.

Our App

We need to fix the padding and margin a bit for the container and also add style for h1 and p.


Now, we will add the rest of the styles. We are adding styles for box, input and button.

Now, our desktop view is almost complete and we will move to the bit JavaScript part next.


Now, we will start to write the code for our JavaScript file. But before that we need to add the main.js file and give form an id in form tag in the index.html file.


Now, we need to add some new styles for the small tag, which will be shown in case of error in the style.css file.


Also need to update a bit more style for box, box-blue and button.


Now our app looks perfect in local.

Perfect App

We need to do a bit of media queries for mobile view, before moving forward to form validations in JavaScript. Put the below code at the end of style.css file.

We forgot to add the error icons in index.html file, so we willadd it. Also, we will remove text from small tags.


Next, add styles for these in style.css file.


Now, it’s time to do the JavaScript validations. Here, we are listening on the form submit. If the field is empty, we are passing to a function addError, which simply adds the error and small tag classes.

If these is no error, we pass the id to a removeError function, which simply remove it from CSS. Also have a isValid function to check regex for email.

Now our small app is complete and is looking awesome.


You can find the code for the same in this github link.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store