What does mobile-first design mean?

Mobile-first means writing your base styles for small screens and then using min-width media queries to progressively add complexity for larger ones.

Traditional (desktop-first):

/* Desktop default */
.column { width: 33%; }

/* Override for mobile */
@media (max-width: 600px) {
    .column { width: 100%; }
}

Mobile-first:

/* Mobile default */
.column { width: 100%; }

/* Enhance for desktop */
@media (min-width: 601px) {
    .column { width: 33%; }
}

Why mobile-first?

• Forces focus on essential content
• Simpler base styles
• Progressive enhancement over graceful degradation
• More users access web on mobile than desktop

W3.CSS is mobile-first: Base styles are for small screens, larger breakpoints add complexity.

Go deeper:

• web.dev — Learn Responsive Design — Google's free course on mobile-first layout, media queries, and breakpoints.