Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Start with smallest screens
Use percentages, not pixels
Images scale with container
Use relative units (%, fr, rem) instead of fixed pixels
width: 80%; /* Not width: 800px; */Make images scale with their container
img { max-width: 100%; height: auto; }Apply different styles at different breakpoints
@media (min-width: 768px) { ... }<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<h1>📱 Responsive Card Grid</h1>
<div class="grid">
<div class="card">
<h2>Card 1</h2>
<p>Resize browser to see responsive behavior</p>
</div>
<div class="card">
<h2>Card 2</h2>
<p>Mobile: 1 column<br>Tablet: 2 columns<br>Desktop: 3 columns</p>
</div>
<div class="card">
<h2>Card 3</h2>
<p>Built with CSS Grid and media queries</p>
</div>
<div class="card">
<h2>Card 4</h2>
<p>Mobile-first approach</p>
</div>
<div class="card">
<h2>Card 5</h2>
<p>Fluid typography</p>
</div>
<div class="card">
<h2>Card 6</h2>
<p>Flexible layout</p>
</div>
</div>
</div>
</body>
</html>Loading preview...
<meta name="viewport" content="width=device-width, initial-scale=1.0">Start with mobile styles, use min-width media queriesUse %, rem, em, vw, vh instead of px where possibleimg { max-width: 100%; height: auto; }Browser DevTools + actual phones/tablets