Week 2 Day 3: Responsive web design

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