Day 3 of Learning Web Development: My Third Day learning HTML & CSS

Vijayaraj Udhayakumar — Fri, 11 Jul 2025 04:17:11 +0000

Hey everyone! 👋

This is my second blog post, Today I have been learned some new Interesting Topics and this is my Day 3 of new adventure.

What is CSS flex?

1.Flex is short for the Flexible Layout module.

2.Flex is a layout method for arranging items in rows or columns.

3.Flex makes it easier to design a flexible responsive layout structure.

Flex Components

a Flex Container - the parent (container)

element.
Flex Items - the items inside the container .

Example

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

The flex-direction property

row
column
row-reverse
column-reverse

Few Example

Row it displays the flex items horizontally:

.flex-container {
  display: flex;
  flex-direction: row;
}

Output:

A B C

Column displays the flex items vertically:

.flex-container{
  display: flex;
  flex-direction: column;
}

Output:

A
B
C

What is CSS Margin?

The Margin are used to create space in Outside of the Elements.

CSS properties

margin-top
margin-right
margin-left
margin-auto
margin-length
margin-width

What is CSS Padding?

Padding is used to create space Inside of the border.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

CSS properties

padding-top
padding-right
padding-bottom
padding-left
length - specifies a padding in px, pt, cm, etc.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Allign Items used for column.
Justify-content used for row. It Always flex direction.
Out of the box use as Margin.
Inside the box use as Padding.

Interesting Website to practice Flex:

Website: https://flexboxfroggy.com

It's a games. To understanding the concept of the Flex concepts.

🎯 This is the Day 3 of learning Web Development. I’m pushing myself to learn something new and share what I explored some core concepts and tools in frontend development.

Getting started with Web Development: My Second Day learning HTML & CSS

Vijayaraj Udhayakumar — Wed, 09 Jul 2025 17:51:20 +0000

Hey everyone!

this is my very first blog post, and I'm excited to share my daily journey into web development with you and today was Day 2 of this new adventure.

Recap of Day 1:

What is HTML & CSS?

In Day 1 class is we discuss about basics of HTML and CSS. Whats is HTML & CSS then in linux which software tools has been use? VS CODIUM software tools is used in linux.

HTML(HyperText Markup language) is used to structure content on the web. It's a skeleton of a web page.
CSS(Cascading Style Sheet) is used to style the content. Its adds colors,layout. It's a humans figures.

Today Discussions:

what is the ** alternative of HTML?**

The alternative of HTML is :

XML(eXtensible Markup Language)
YAML(YAML Ain't Markup Language)
CSV(Comma Seperated Values) etc..

what is GIT?

Git is a Version Control System(VSC). There are two types of VSC. It's no Need Internet.

Centralized VSC
Distributed VSC

What is GITLAB?

Gitlab is Web based DEVOPS platforms.
The developers pull and push the code and they want to customer base. It's needs Internet.

HTML

Now we build a Protfolio Project.
In HTML Structure Contains:

Header
Section
Section
Section
Footer

Header

Navigation Menu
Search Bar

<header>
<h1>Vijayaraj</h1>
</header>

Section

Define a Section of content

HTML Tags

It is a fundamental building blocks of HTML

List

We discuss two types of List:

Ordered List and
Unordered list

-Ordered List - Numbers and Alphabets

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

-Unordered List - Bullets,Square etc

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Anchor Tag

it is used to create hyperlinks in HTML.
it allows users to click and go to another page ,website,section,or file.

<a href="url">link Text</a>

Vijay sir share some Shortcuts:

shift+1 - Boiler plate of HTML
ctrl+shift+i - code allignment
ctrl+ / - Command line.

Tomorrow Discussion is :Ajail Methodology.

And Apart from the class Muthu sir share some Interesting website KANIYAM.COM . then Give some Day plans, very interesting speech.

Today Tasks

5 Blocks.
5 Inline.
Scrum Master Techniques.
Post the Blogs.

Forem: Vijayaraj Udhayakumar

Day 3 of Learning Web Development: My Third Day learning HTML & CSS

What is CSS flex?

Flex Components

The flex-direction property

What is CSS Margin?

CSS properties

What is CSS Padding?

CSS properties

Interesting Website to practice Flex:

Getting started with Web Development: My Second Day learning HTML & CSS

HTML Tags