DEV Community

Sayan Mandal
Sayan Mandal

Posted on


Day 2 of Responsive Web Design

VSCode on PC


In this section, I'm supposed to create a Cafe Menu with the help of HTML and CSS. I have to add two sections in the menu one for Coffee and Desserts.

Cafe Menu

I learnt how to add CSS codes inside the HTML itself with the help of <script> tag. But it gets difficult to manage, rather having separate file with .css extension and linking that with <link> tag.

Code Snipet:

<link href="styles.css" rel="stylesheet"/>
Enter fullscreen mode Exit fullscreen mode

Here rel defines the relationship between linked resource and the document HTML.

background property sets the background. We can constiuent properties like background-color to change the color, background-image to change the backgorund image and many more.

text-align to set up the alignment of content.

margin-left, margin-right for setting the margin in left and right.

display property for setting the element as block, inline and some more.

In order to properly change the styling at a micro level, we can use <div> and create new division just to add new styling properties on them. Also, we can class attribute to style and access specific contents.

padding property to set padding on 4 sides of an element. Some constituent properties are padding-left, padding-right, padding-top, padding-bottom.

font-family, font-size these are properties to change the styling of fonts in an element. There are some more.

While creating the Cafe Menu, I didn't face any challenges or errors. So, it was a very smooth session today.

I also have published the notes on my GitHub.


Productivity Score: 7
Enjoyment Score: 7

Compared to yesterday, I had a more productive day today, but there is still a lot of room for improvement. I enjoy tackling challenges and debugging because they allow me to delve deeper. While I was satisfied with the final webpage, I found it to be too easy.

Outside Links:

Wallpaper on my PC: Marko
Productivity Score: Ruby Granger

Some Music while I took the lesson.

Top comments (0)