What “mobile-first” means

Part of the Practical Frontend section of Coddy's HTML journey — lesson 6 of 35.

Mobile-first is a design strategy where you build your website for mobile devices first, then progressively enhance it for larger screens.
The main idea is that most users now browse the web on their phones, so starting small ensures your site works well for the majority of visitors.

Start by writing mobile styles:

body {
  font-size: 16px;
  padding: 10px;
}

Then use media queries to adapt your design for larger screens:

/* Styles for devices wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

This approach ensures your site works well on small screens first, then enhances the experience for users on larger devices.

Challenge

Easy

You are given HTML with a simple navigation menu. Your task is to style it using the mobile-first approach.

1. Mobile styles first

Make each menu item take the full width of the container (stacked vertically).
Make the links display: block so they take the full width. The rest of the styling (colors, borders, etc.) is up to you. It may look like this in the example image below.

2. Bigger screen styles

A media query is already provided for screens min-width: 768px.
Inside it, change the menu layout to horizontal by using display: flex for the .menu.
Adjust spacing between menu items so it matches the example image below.

Cheat sheet

Mobile-first is a design strategy where you build your website for mobile devices first, then progressively enhance it for larger screens.

Start by writing mobile styles:

body {
  font-size: 16px;
  padding: 10px;
}

Then use media queries to adapt your design for larger screens:

/* Styles for devices wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

This approach ensures your site works well on small screens first, then enhances the experience for users on larger devices.

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>