diff --git a/Week-2/Day-1/Readme.md b/Week-2/Day-1/Readme.md index bd35b42..18c6ef5 100644 --- a/Week-2/Day-1/Readme.md +++ b/Week-2/Day-1/Readme.md @@ -1,7 +1,7 @@ # Week 2 – Day 1 Advanced HTML – Forms ### Date -18 December 2025 +22 December 2025 ### Objective To understand and implement HTML forms for collecting user input and apply basic validation techniques. diff --git a/Week-2/Day-2/Readme.md b/Week-2/Day-2/Readme.md new file mode 100644 index 0000000..4abe3b5 --- /dev/null +++ b/Week-2/Day-2/Readme.md @@ -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 diff --git a/Week-2/Day-2/css-flexbox-grid.md b/Week-2/Day-2/css-flexbox-grid.md new file mode 100644 index 0000000..9682a0b --- /dev/null +++ b/Week-2/Day-2/css-flexbox-grid.md @@ -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 \ No newline at end of file diff --git a/Week-2/Day-2/index.html b/Week-2/Day-2/index.html new file mode 100644 index 0000000..9ccc02f --- /dev/null +++ b/Week-2/Day-2/index.html @@ -0,0 +1,24 @@ + + + + + CSS Layouts + + + + +
+
Home
+
About
+
Contact
+
+ +
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
+ + + diff --git a/Week-2/Day-2/style.css b/Week-2/Day-2/style.css new file mode 100644 index 0000000..c7f344b --- /dev/null +++ b/Week-2/Day-2/style.css @@ -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; +}