Mobile First
ELI5 — The Vibe Check
Mobile first means you design for the smallest screen first, then add styles as screens get bigger. It's a mindset flip — instead of 'make desktop look good then shrink it', you 'make mobile look good then grow it'. Forces you to prioritize what actually matters.
Real Talk
Mobile-first is a design and development strategy where the base CSS targets small screens (mobile), and media queries using min-width progressively enhance the layout for larger screens. This approach aligns with how most users access the web and tends to produce cleaner, lighter CSS.
Show Me The Code
/* Mobile first: base styles for small screens */
.card { font-size: 14px; padding: 1rem; }
/* Tablet and up */
@media (min-width: 768px) {
.card { font-size: 16px; padding: 2rem; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.card { font-size: 18px; padding: 3rem; }
}
When You'll Hear This
"Always design mobile first — it forces you to focus on what's important." / "Tailwind is mobile-first by default: sm: md: lg: go upward."
Related Terms
Breakpoint
A breakpoint is like a 'pause game' button you place on a specific line of code.
Media Query
A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.
Responsive Design
Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.
Tailwind
Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.
Viewport
The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor.