DEV Community

Sayan Mandal
Sayan Mandal

Posted on

Day 4 of Responsive Web Design

Journal 📔:

Today's section was all about creating a registration form.

Project:
Registration Form WebPage

Content 📄:

The process began by using the <form> element to create a structure for a form. Following this, three <fieldset> elements were introduced to divide the form into separate sections. Within each <fieldset>, a <label> element was included to display the name of the input, and an <input> element was added. To link the <label> and <input> elements, the for and id attributes were utilized.

Styling 🎨:

To change only the styling of one element we can get the help of pseudo-classes. To change the first element of all the siblings we can use :first-of-type and to change the last we can use :last-of-type.

To access the styling of a particular type element.
Snipets:

input[type="file"] {

}
Enter fullscreen mode Exit fullscreen mode

to change the color of background we use background-color: and to change the color we use, color:.

I move forward with the Syrver Form Certification Project. I did the desigining on Figma.

The final look:
SereniTea Survey Form

I have already completed the basic structure in HTML and now I'm trying to style all that in CSS.


Productivity 👨‍🎓:

Productivity Score: 9
Enjoyment Score: 8

I completed today's module really fast and also doing all of this was really fun, so overall enjoyed the whole process of building today's web page.


Outside Links 🔗:

Wallpaper on my PC: Marko
Productivity Score: Ruby Granger

Some Music while I took the lesson.

Top comments (0)