DEV Community: Sathish Kumar

Daily Web Development Learning:CSS Display & Navigation Bar Basic!

Sathish Kumar — Thu, 17 Sep 2026 11:49:45 +0000

Today, I practiced essential CSS properties used to layout and style navigation bars. Here is a quick breakdown of what I covered:

display: flex; – Converts block-level list items (like Home, About, Contact, Services) into inline elements so they sit neatly side-by-side.

list-style-type: none; – Removes the default bullet points from list items.

gap: 20px; – Adds clean, uniform spacing between navigation links.

text-decoration: none; – Removes default underlines from tags for a cleaner look.

display: none; vs display: block; – Controls element visibility (essential for responsive mobile menus/hamburgers).

Hover Effects (:hover) – Adds dynamic color changes when a user hovers over interactive elements.

Step by step, building a solid frontend foundation!

1. HTML Table:

Sathish Kumar — Wed, 16 Sep 2026 18:20:44 +0000

A table is used to display data in rows and columns.
Basic tags:

→ Creates a table
→ Creates a table row

→ Creates a table heading

→ Creates table data/cell Example: HTML

Name	Age
Arun	20

Table Border:
To give a border to the table:
table, th, td {
border: 1px solid black;
}
border: 1px solid means:
1px → border thickness
solid → solid line
black → border colour
Border Collapse
table {
border-collapse: collapse;
}
border-collapse: collapse → joins the borders of nearby cells into a single border.
Media Query:
Media query is used to make a webpage responsive.
It helps the website look good on different screen sizes like:
Mobile 📱
Tablet 📲
Laptop/PC 💻
Example:
@media (max-width: 760px) {
body {
text-align: right;
}
p {
display: none;
}
}

CSS Flexbox-Basic Notes:

Sathish Kumar — Wed, 16 Sep 2026 18:00:06 +0000

1.display:flex
display:flex;is used to make an element a flex container.
By default,the flex direction is row.

Example:
.container{
display:flex;
}

2.flex-direction
flex-direction is used to change the direction of flex items.

Example:
.container{
display:flex;
flex-direction:colomn;
}

Main Axis and Cross Axis: The flex-direction decides the main axis and cross axis. when flex-direction:row a) Main axis : Row(horizontal) b)Cross axis : Column(vertical) when flex-direction:column a) Main axis : Column(vertical) b)Cross axis : Row(horizontal)

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

Daily Learning Update: Git:

Sathish Kumar — Wed, 16 Sep 2026 04:28:24 +0000

1.Interface Basics

GUI(Graphics User Interface): Using button and menus to navigate.
CLI(Command Line Interface): Using text command to interact with systems directly

2.Basic Git Command & Workflow:

git add -Adds a specific file to the staging area.
git restore --staged Remove a file from the staging area.
git commit -m "message" - Saves your staged changes with a descriptive message.
Flow:Code -git add -Staging Area -Local Repository -Remote Repository(Gitlab).
gitLab-ci.yml -File used to configure CI/CD pipelines in GitLab

PLACEMENT READY PROGRAM

Sathish Kumar — Wed, 16 Sep 2026 04:17:01 +0000

I'm currently doing placement ready program in payilagam institude in chennai.
In before session we strong in basic of HTML and CSS.
I'm successful complete portfolio web site and push in git.
Today session we learn how to handle git.
How to push the project in git lab.