Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
User Experience Teaching Guide
CSS.4: Responsive Design

Overview

This lesson dives deeper into responsive design and answers the age old question of mobile first or desktop first.
Answer: It depends...

Pre-Class Material

HTML

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
<link rel="stylesheet" href="style.css" />
8
<title>Responsive Design</title>
9
</head>
10
<body>
11
<h1>I am responsive design</h1>
12
</body>
13
</html>
Copied!
Demo how adding the meta tag helps with the mobile view by removing it and adding it back again
Demo the difference when changing the width=device-width to width=500

CSS

1
@media only screen and (min-width: 768px) {
2
h1 {
3
color: black;
4
}
5
}
Copied!
Demo how media queries work
Discuss how we can have two ways of doing it
  1. 1.
    Use media queries after designing in mobile view
  2. 2.
    Use media queries after designing in desktop view
Demo one use case of this
  • When a website is only optimised for desktop so you could do a display: none

Instagram

Ask everyone to visit https://www.instagram.com/instagram/?hl=en on a chrome browser
Open the dev tools and show that they also added the meta tag
Make a joke about how FB changed their name because of this tag (i'm kidding please don't)
Ask them if they are able to zoom in
Demo on your HTML above how to prevent a user from zooming in by adding maximum-scale=1

Further Reading

Last modified 1mo ago