Mobile-first approach in CSS - Mini Project: Build & Apply

Mobile-First Responsive Layout with CSS

📖 Scenario: You are building a simple webpage that looks great on small mobile screens first, then adjusts for larger screens like tablets and desktops.

🎯 Goal: Create a mobile-first CSS style that sets a background color and font size for small screens, then changes these styles for screens wider than 600px and 900px using media queries.

📋 What You'll Learn

Use a mobile-first approach in CSS

Set a background color and font size for the body on small screens

Add a media query for screens wider than 600px to change background color and font size

Add a media query for screens wider than 900px to change background color and font size

Use rem units for font sizes

Ensure the CSS is valid and applies styles correctly

💡 Why This Matters

🌍 Real World

Mobile-first CSS is essential for building websites that look good on phones and tablets before scaling up to desktops.

💼 Career

Web developers use mobile-first design to create responsive websites that provide a great user experience on all devices.

1

Set base styles for mobile screens

Write CSS to set the body background color to #f0f8ff and font size to 1.2rem for small mobile screens.

CSS

/* Set mobile base styles for body */
/* Your code here */

Need a hint?

Start by styling the body selector with the background color and font size for mobile.

2

Add media query for tablets (min-width 600px)

Add a CSS media query for screens with a minimum width of 600px. Inside it, set the body background color to #add8e6 and font size to 1.4rem.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

/* Add media query for min-width 600px */
/* Your code here */

Need a hint?

Use @media (min-width: 600px) and inside it style the body with the new background and font size.

3

Add media query for desktops (min-width 900px)

Add another CSS media query for screens with a minimum width of 900px. Inside it, set the body background color to #87ceeb and font size to 1.6rem.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  body {
    background-color: #add8e6;
    font-size: 1.4rem;
  }
}

/* Add media query for min-width 900px */
/* Your code here */

Need a hint?

Use @media (min-width: 900px) and inside it style the body with the new background and font size.

4

Complete and verify the mobile-first CSS

Ensure the CSS code includes the base mobile styles and both media queries for 600px and 900px screen widths with the correct background colors and font sizes as specified.

CSS

body {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  body {
    background-color: #add8e6;
    font-size: 1.4rem;
  }
}

@media (min-width: 900px) {
  body {
    background-color: #87ceeb;
    font-size: 1.6rem;
  }
}

/* Verify all styles are present and correct */
/* Your code here */

Need a hint?

Check that all three style blocks are included exactly as specified.