Day 2 – Learning HTML & CSS in payilagam

Today, I continued learning HTML and CSS as part of my web development journey. I focused on images, the

---

tag, CSS selectors, and the basics of Flexbox.
HTML:

---

Tag
In HTML, if we need a horizontal line to separate content, we can use the

---

tag.

About Me

---

This is my introduction.

The

---

tag is useful for creating a visual separation between different sections.

Display Flex
Another important topic I learned today was Flexbox.

When we use:

display: flex;
the child elements are arranged in a row by default.

For example:

.container {
display: flex;
}
If we want to change the direction from a row to a column, we can use:

.container {
display: flex;
flex-direction: column;
}
Note: The correct property is flex-direction, not flex-template-column.

Main Axis and Cross Axis
I also learned about the main axis and cross axis in Flexbox.

Main Axis
The main axis is controlled using:

justify-content
For example:

.container {
display: flex;
justify-content: center;
}
Cross Axis
The cross axis is controlled using:

align-items
For example:

.container {
display: flex;
align-items: center;
}
The direction of these axes depends on the flex-direction.

space-around
I also learned about:

justify-content: space-around;
This distributes the flex items with space around them.

Example:

.container {
display: flex;
justify-content: space-around;
}
This is useful when we want to create even spacing around the items.

What I Learned Today
Today I learned:

tag

alt attribute

Styling the img element using CSS

Using classes with .

---

tag

display: flex

flex-direction

Main axis and cross axis

justify-content

align-items

justify-content: space-around