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

Week 2 Day 3: Responsive web design

Browse Source
This commit is contained in:
Harshit Sachdev
2025-12-24 16:38:19 +05:30
parent 1a18cc4696
commit 080b555db1
4 changed files with 159 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

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

@@ -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>

52
Week-2/Day-3/responsive-web-design.md Normal file
View File

@@ -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

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

@@ -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;
}
}