DEV Community

Sayan Mandal
Sayan Mandal

Posted on • Updated on


Day 1 of Responsive Web Design

VSCode on PC


In the first section, I'm supposed to build CatPhotoApp, a simple webpage that will show some cat photos and take user input in the form of a small form.

This whole section is divided into 69 steps. At first, I learned how elements are used in a webpage. These are the fundamental structures of a webpage, and we can add content using different element tags. Generally, in HTML, tags have closing tags, but there are a few self-closing tags that don't require any closing tag.

The role of attributes in tags is very crucial as they add various functionalities to a webpage. For example, we can use <img> to show an image, but we have to put the source of the image as src="/link" to display it on the webpage. Another important tag is the anchor tag, which is used for anchoring a link into the web page. It's written as <a>, and we have to use the href="/link" attribute to specify the link to which it will redirect.

The section tag is used to specify each section in a webpage, which helps us customize a website better.

The <form> tag is for collecting information/feedback from the user. Inside the form tag, we can put <input> which takes any kind of input. We can specify the input by setting different values of the type attribute. With the help of the type attribute, we can set the input type as checkbox, radio, and other options like that. In order to select the radio or checkbox by clicking only the text, we can wrap the whole <input> inside <label>. Another way to do the same is to put <label> nested inside <input>, but we have to use the value of the id attribute from the input as the for attribute in the label. I got stuck in this step, so I did what every other programmer would do: GOOGLE. Reddit came to the rescue, and thanks to karaoty, I was able to move forward.

The first day was easy and fun, and I'm looking forward to learning and playing with more tools.

I have also published the webpage and notes on my GitHub.


Productivity Score: 6
Enjoyment Score: 8

I'm using this productivity score and enjoyment score after getting inspired by Ruby Granger's Daily Study Planner.

I could have been more productive, but I got distracted while taking notes and switching through tabs, as well as replying to people. Nonetheless, I enjoyed it once I finished building the whole webpage. However, I do wish I could have completed it a bit faster.

Outside Links:

Wallpaper on my PC: Marko

Some Music while I took the lesson.

Top comments (0)