Day 11 – Responsive Web Design with Media Queries & CSS Grid

📥 Download Full Notes + Example Code (PDF)
[Click here to download Day 11 Notes PDF]

📌 What is Responsive Web Design?

When building a website, structure and layout are important, but responsiveness is equally essential.
Responsiveness means your website should look perfect on mobile, tablet, and desktop — no matter the screen size.

Without responsiveness, your website might look great on a laptop but completely broken on a phone. That’s why responsive design is a must-have skill for every web developer.

🧩 1. Media Queries – Making Your Website Adjust to Any Screen

Media queries allow you to apply different CSS styles depending on the screen size. This means you can design separate layouts for mobile, tablet, and desktop..

💡 Common screen breakpoints:

Mobile: 320px – 480px
Tablet: 481px – 768px
Desktop: 769px – 1024px

Basic Syntax:

📌 Explanation: When the screen width is 768px or less, the background color will change to light blue.

✅ Use Case:

Change font size for smaller screens.
Stack elements vertically on mobile.
Hide unnecessary content on smaller devices.

🧩 2. CSS Grid – Creating Layouts with Rows & Columns

CSS Grid is a powerful layout system that allows you to divide your webpage into rows and columns easily.

Basic Syntax:

📌 Explanation:

display: grid; → Enables grid layout.
grid-template-columns: 1fr 1fr; → Creates two equal-width columns.

✅ Use Case:

Creating a photo gallery.
Structuring content sections side-by-side.
Building complex layouts without extra divs.

💻 Full Example – Responsive Layout with Media Queries & Grid

HTML:

CSS (style.css):

css

body {

font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

.container {

  display: grid;

grid-template-columns: 1fr 1fr;

  gap: 10px;

  padding: 10px;

.box {

  background: #ff9800;

  color: white;

  padding: 20px;

text-align: center;

font-size: 1.2em;

/* Tablet view */



@media (max-width: 768px)

  .container {

    grid-template-columns: 1fr;

  .box {

    background: #03a9f4;

/* Mobile view */

@media (max-width: 480px)

  .box {

    background: #4caf50;

font-size: 1em;

✅ Key Takeaways

Media Queries help websites adapt to different screen sizes.
CSS Grid creates structured, clean, and responsive layouts.
Always test your design on mobile, tablet, and desktop.

📆 What’s Next?
In Day 12, we start JavaScript Basics — making your website interactive!

💬 Comment “day11” to get the Notes + Examples PDF.
📤 Share this post with your friends who are learning web development.