Week 2 Day 3: Responsive web design

2025-12-24 16:38:19 +05:30
parent 1a18cc4696
commit 080b555db1
4 changed files with 159 additions and 0 deletions
--- a/Week-2/Day-3/Readme.md
+++ b/Week-2/Day-3/Readme.md
@@ -0,0 +1,34 @@
+# Week 2 – Day 3 Responsive Web Design
+
+### 📅 Date
+24 December 2025
+
+### 🎯 Objective
+To understand the principles of responsive web design and implement layouts that adapt to different screen sizes using CSS media queries.
+
+### 📚 Topics Covered
+- Responsive web design fundamentals
+- Viewport meta tag
+- Responsive units
+- Media queries
+- Mobile-first design approach
+
+### 🛠️ Activities Performed
+- Studied responsive design concepts.
+- Implemented responsive layouts using media queries.
+- Created mobile and desktop-friendly web pages.
+- Tested responsiveness using browser developer tools.
+
+### 🧪 Tools & Technologies Used
+- HTML5
+- CSS3
+- Visual Studio Code
+- Browser DevTools
+
+### 📈 Learning Outcomes
+- Understood how responsive websites work.
+- Learned to write media queries.
+- Improved ability to design mobile-friendly layouts.
+
+### ✅ Status
+Completed
--- a/Week-2/Day-3/index.html
+++ b/Week-2/Day-3/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Design</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <header>
+    <h1>Responsive Web Page</h1>
+  </header>
+
+  <section class="content">
+    <div class="card">Content Box 1</div>
+    <div class="card">Content Box 2</div>
+    <div class="card">Content Box 3</div>
+  </section>
+
+</body>
+</html>
--- a/Week-2/Day-3/responsive-web-design.md
+++ b/Week-2/Day-3/responsive-web-design.md
@@ -0,0 +1,52 @@
+# Responsive Web Design – Notes
+Responsive Web Design (RWD) is an approach to web development that ensures websites adapt smoothly to different screen sizes and devices such as mobiles, tablets, laptops, and desktops.
+
+## Why Responsive Design is Important
+Users access websites from multiple devices.
+Improves user experience on small and large screens.
+Required for modern web applications.
+Helps in SEO and accessibility.
+
+## Viewport Meta Tag
+The viewport controls the layout on mobile browsers.
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+width=device-width sets layout width equal to device width.
+initial-scale=1.0 ensures proper zoom level.
+
+## Responsive Units
+Instead of fixed units (px), responsive units are preferred:
+% → relative to parent
+em / rem → relative to font size
+vw / vh → viewport width & height
+
+Example:
+.container {
+  width: 90%;
+}
+
+## Media Queries
+Media queries apply CSS based on screen size.
+
+Syntax:
+@media (max-width: 768px) {
+  body {
+    background-color: lightgray;
+  }
+}
+
+Common breakpoints:
+Mobile: ≤ 480px
+Tablet: ≤ 768px
+Desktop: ≥ 1024px
+
+## Responsive Layout Techniques
+Flexible widths
+Stacked layouts on small screens
+Scalable images using max-width: 100%
+Using Flexbox/Grid responsively (without deep layout complexity)
+
+## Best Practices
+Mobile-first approach
+Test on different screen sizes
+Avoid fixed widths
+Keep layouts simple and readable
--- a/Week-2/Day-3/style.css
+++ b/Week-2/Day-3/style.css
@@ -0,0 +1,51 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+}
+
+header {
+  background-color: #222;
+  color: white;
+  text-align: center;
+  padding: 15px;
+}
+
+header:hover {
+  background-color: red;
+}
+
+.content {
+  display: flex;
+  justify-content: space-around;
+  padding: 20px;
+}
+
+.card {
+  width: 30%;
+  background-color: #eee;
+  padding: 20px;
+  text-align: center;
+}
+
+.card:hover {
+  background-color: green;
+}
+
+@media (max-width: 768px) {
+  .content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card {
+    width: 80%;
+    margin-bottom: 15px;
+  }
+}
+
+/* Mobile View */
+@media (max-width: 480px) {
+  header h1 {
+    font-size: 20px;
+  }
+}