harshit.sachdev/Harshit-Sachdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Week 2 Day 2: CSS Flexbox and Grid layout systems

Browse Source
This commit is contained in:
Harshit Sachdev
2025-12-23 16:42:55 +05:30
parent d38fa637b6
commit 1a18cc4696
5 changed files with 116 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Week-2/Day-1/Readme.md
View File

@@ -1,7 +1,7 @@
# Week 2 – Day 1 Advanced HTML – Forms # Week 2 – Day 1 Advanced HTML – Forms
### Date ### Date
18 December 2025 22 December 2025
### Objective ### Objective
To understand and implement HTML forms for collecting user input and apply basic validation techniques. To understand and implement HTML forms for collecting user input and apply basic validation techniques.

32
Week-2/Day-2/Readme.md Normal file
View File

@@ -0,0 +1,32 @@
# Week 2 – Day 2 CSS Layouts – Flexbox & Grid
### Date
23 December 2025
### Objective
To understand modern CSS layout techniques using Flexbox and Grid for building structured web layouts.
### Topics Covered
- CSS Flexbox fundamentals
- Alignment and spacing
- CSS Grid basics
- Layout comparison
### Activities Performed
- Built navigation layout using Flexbox.
- Practiced content alignment techniques.
- Created grid-based page layout.
- Compared Flexbox and Grid usage.
### Tools & Technologies Used
- HTML5
- CSS3
- Visual Studio Code
### Learning Outcomes
- Gained confidence in CSS layouts.
- Learned modern layout best practices.
- Improved UI structuring skills.
### Status
Completed

35
Week-2/Day-2/css-flexbox-grid.md Normal file
View File

@@ -0,0 +1,35 @@
## CSS Layout Systems
### CSS Flexbox
Flexbox is a one-dimensional layout system used to align elements in rows or columns.
### Key properties:
display: flex
flex-direction
justify-content
align-items
gap
### Use cases:
Navigation bars
Centering content
Cards layout
### CSS Grid
Grid is a two-dimensional layout system used for complex page layouts.
### Key properties:
display: grid
grid-template-columns
grid-template-rows
gap
### Use cases:
Page layouts
Dashboards
Galleries
### Flexbox vs Grid
Flexbox → one direction (row OR column)
Grid → rows AND columns
Flexbox for components, Grid for pages

24
Week-2/Day-2/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Layouts</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>
<div class="grid">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
</body>
</html>

24
Week-2/Day-2/style.css Normal file
View File

@@ -0,0 +1,24 @@
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-around;
background-color: #333;
color: white;
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 20px;
}
.box {
background-color: #ddd;
padding: 20px;
text-align: center;
}