JavaScript Curriculum
Responsive Design
mediumThe coffee shop website needs to work on phones too. Mobile customers finding the shop on Google see a broken desktop layout. Let's make it genuinely responsive — mobile first.
Responsive Design
A responsive website adapts its layout, typography, and spacing to any screen size. It's not about making a desktop site "work" on mobile — it's about designing for the smallest screen first, then progressively enhancing for larger ones.
The Viewport Meta Tag — Non-Negotiable
Before any CSS, put this in every <head>:
Without it, mobile browsers render your page at ~980px and zoom out, making everything tiny. This one tag tells the browser: "use the actual device width."
Media Queries
Media queries apply CSS only when certain conditions are true — most commonly, when the viewport is wider than a threshold:
/* base styles — mobile first */
No media query needed. Write base styles for mobile first.
Building Mobile-First — Step by Step
Watch how a layout evolves from mobile base to full desktop:
Start with mobile. Single column, stacked nav, sidebar hidden. No media query needed — these are the defaults.
.nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.cards {
grid-template-columns: 1fr;
}
.sidebar { display: none; }Fluid Units — Scale Without Media Queries
Some things should scale automatically with the viewport or user preferences — no media queries needed:
Relative to root font-size (usually 16px). Scales with user browser font preferences. Best for font-size and spacing.
font-size: 1.25rem; /* 20px at default, scales with user prefs */
Your Challenge
Rebuild the coffee shop page mobile-first with two media query breakpoints and fluid units throughout.
Challenge
Start from a single-column mobile layout. Add a @media (min-width: 768px) query to switch to a 2-column card grid. Add a @media (min-width: 1024px) query to unlock the sidebar. Use rem for font sizes throughout and clamp() for the hero heading.
Responsive Design
mediumThe coffee shop website needs to work on phones too. Mobile customers finding the shop on Google see a broken desktop layout. Let's make it genuinely responsive — mobile first.
Responsive Design
A responsive website adapts its layout, typography, and spacing to any screen size. It's not about making a desktop site "work" on mobile — it's about designing for the smallest screen first, then progressively enhancing for larger ones.
The Viewport Meta Tag — Non-Negotiable
Before any CSS, put this in every <head>:
Without it, mobile browsers render your page at ~980px and zoom out, making everything tiny. This one tag tells the browser: "use the actual device width."
Media Queries
Media queries apply CSS only when certain conditions are true — most commonly, when the viewport is wider than a threshold:
/* base styles — mobile first */
No media query needed. Write base styles for mobile first.
Building Mobile-First — Step by Step
Watch how a layout evolves from mobile base to full desktop:
Start with mobile. Single column, stacked nav, sidebar hidden. No media query needed — these are the defaults.
.nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.cards {
grid-template-columns: 1fr;
}
.sidebar { display: none; }Fluid Units — Scale Without Media Queries
Some things should scale automatically with the viewport or user preferences — no media queries needed:
Relative to root font-size (usually 16px). Scales with user browser font preferences. Best for font-size and spacing.
font-size: 1.25rem; /* 20px at default, scales with user prefs */
Your Challenge
Rebuild the coffee shop page mobile-first with two media query breakpoints and fluid units throughout.
Challenge
Start from a single-column mobile layout. Add a @media (min-width: 768px) query to switch to a 2-column card grid. Add a @media (min-width: 1024px) query to unlock the sidebar. Use rem for font sizes throughout and clamp() for the hero heading.