Welcome to Class 3! In this session, we’ll explore Responsive Web Design (RWD), which is essential for creating websites that look great on all devices, from desktops to tablets and smartphones. By the end of this class, you’ll understand how to use media queries, flexbox, and CSS grid to create responsive layouts.

1. What is Responsive Web Design?

Responsive Web Design ensures that a website adapts to different screen sizes and devices. It improves user experience by making the website look good on desktops, tablets, and mobile phones.

Key principles of RWD:

• Fluid Layouts: Use relative units like percentages instead of fixed units like pixels.
• Flexible Images: Images should resize based on the screen size.
• Media Queries: Apply different styles based on the device’s screen size.

2. Media Queries

Media Queries allow you to apply CSS rules based on the device’s screen size, resolution, orientation, or other properties.

Syntax

@media (condition) {  
  /* CSS rules */  
}  

Common Media Query Conditions

1. max-width: Targets devices with a screen width less than or equal to the specified value.@media (max-width: 768px) { body { background-color: lightblue; } }

2. min-width: Targets devices with a screen width greater than or equal to the specified value.

@media (min-width: 1024px) {  
  body {  
    background-color: lightgreen;  
  }  
}  

3. Combining Conditions: Use and to combine multiple conditions.

@media (min-width: 768px) and (max-width: 1024px) {  
  body {  
    background-color: lightyellow;  
  }  
}  

4. Orientation: Targets devices in portrait or landscape mode.

@media (orientation: portrait) {  
  body {  
    font-size: 18px;  
  }  
}  

3. Flexbox Layout

Flexbox (Flexible Box Layout) is a CSS layout model designed for creating responsive layouts. It simplifies the process of aligning and distributing space among items in a container.

Key Properties of Flexbox

1. Container Properties:
   • display: flex: Defines a flex container.
   • flex-direction: Specifies the direction of the flex items.
     • row (default), row-reverse, column, column-reverse.
   • justify-content: Aligns items horizontally.
     • flex-start, flex-end, center, space-between, space-around, space-evenly.
   • align-items: Aligns items vertically.
     • stretch (default), flex-start, flex-end, center, baseline.
   • flex-wrap: Allows items to wrap onto multiple lines.
     • nowrap (default), wrap, wrap-reverse.
2. Item Properties:
   • flex: Specifies the size of the item relative to others.
   • align-self: Overrides align-items for a specific item.

Example

<div class="flex-container">  
  <div class="item">1</div>  
  <div class="item">2</div>  
  <div class="item">3</div>  
</div>  

.flex-container {  
  display: flex;  
  flex-direction: row;  
  justify-content: space-around;  
  align-items: center;  
  height: 100px;  
  background-color: lightgray;  
}  
  
.item {  
  background-color: lightblue;  
  padding: 20px;  
  border: 1px solid black;  
}  

4. CSS Grid Layout

CSS Grid is a powerful layout system for creating two-dimensional layouts (rows and columns). It provides more control than Flexbox for complex layouts.

Key Properties of CSS Grid

1. Container Properties:
   • display: grid: Defines a grid container.
   • grid-template-columns: Defines the number and size of columns.grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ grid-template-columns: 100px 200px auto; /* Fixed and flexible columns */
   • grid-template-rows: Defines the number and size of rows.
   • gap: Specifies the spacing between rows and columns.gap: 10px; /* Equal spacing */ row-gap: 20px; /* Row spacing */ column-gap: 15px; /* Column spacing */

2. Item Properties:

• grid-column: Specifies the column span for an item.grid-column: 1 / 3; /* Spans from column 1 to column 3 */
• grid-row: Specifies the row span for an item.

Example

<div class="grid-container">  
  <div class="item">1</div>  
  <div class="item">2</div>  
  <div class="item">3</div>  
  <div class="item">4</div>  
</div>  

.grid-container {  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  grid-template-rows: auto auto;  
  gap: 10px;  
  background-color: lightgray;  
}  
  
.item {  
  background-color: lightblue;  
  padding: 20px;  
  border: 1px solid black;  
}  

5. Commonly Used Properties

Here are the most commonly used properties for responsive design:

1. Width and Height:
   • Use percentages or auto for fluid layouts.

   img { width: 100%; height: auto; }

2. Max-Width:

• Prevents elements from becoming too wide.

img {  
  max-width: 100%;  
}  

3. Viewport Units:

• Use vw (viewport width) and vh (viewport height) for responsive sizing.

div {  
  width: 50vw; /* 50% of the viewport width */  
  height: 50vh; /* 50% of the viewport height */  
}  

4. Flexbox and Grid:

• Use flex and grid for responsive layouts.

5. Media Queries:
   • Apply different styles for different screen sizes.

6. Practical Example: Building a Responsive Layout

HTML:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Responsive Design</title>  
  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  <header class="header">Responsive Header</header>  
  <main class="main">  
    <section class="content">Content Area</section>  
    <aside class="sidebar">Sidebar</aside>  
  </main>  
  <footer class="footer">Footer</footer>  
</body>  
</html>  

CSS (styles.css):

/* Base Styles */  
body {  
  margin: 0;  
  font-family: Arial, sans-serif;  
}  
  
.header, .footer {  
  background-color: #333;  
  color: white;  
  text-align: center;  
  padding: 20px;  
}  
  
.main {  
  display: flex;  
  flex-wrap: wrap;  
}  
  
.content {  
  flex: 2;  
  background-color: lightblue;  
  padding: 20px;  
}  
  
.sidebar {  
  flex: 1;  
  background-color: lightgray;  
  padding: 20px;  
}  
  
/* Media Queries */  
@media (max-width: 768px) {  
  .main {  
    flex-direction: column;  
  }  
}  

Homework

1. Build a responsive webpage with a header, main content, sidebar, and footer.
2. Use media queries to adjust the layout for mobile devices.
3. Experiment with flexbox and grid to create different layouts.

This concludes Class 3: Responsive Web Design. In the next class, we’ll dive deeper into CSS Advanced Topics, including animations, transitions, and pseudo-classes. Let me know if you have any questions!

If you missed the previous class complete Class 2: Basics of CSS: Selectors, box model, colors, typography.