Arti mobile-first

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 6 dari 35.

Mobile-first adalah strategi desain yang mengutamakan pembuatan situs web untuk perangkat seluler, lalu meningkatkannya secara bertahap untuk layar yang lebih besar.
Ide utamanya adalah saat ini sebagian besar pengguna menjelajahi web melalui ponsel, jadi memulai dari layar kecil memastikan situsmu berfungsi dengan baik bagi sebagian besar pengunjung.

Mulailah dengan menulis style untuk perangkat seluler:

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

Kemudian gunakan media queries untuk menyesuaikan desainmu agar cocok dengan layar yang lebih besar:

/* Gaya untuk perangkat dengan lebar lebih dari 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Pendekatan ini memastikan situsmu berfungsi dengan baik di layar kecil terlebih dahulu, lalu meningkatkan pengalaman pengguna di perangkat yang lebih besar.

Tantangan

Mudah

Kamu diberi HTML dengan menu navigasi sederhana. Tugasmu adalah menatanya menggunakan pendekatan mobile-first.

1. Gaya untuk perangkat seluler terlebih dahulu

Buat setiap item menu memenuhi seluruh lebar kontainer (tersusun vertikal).
Buat tautannya menggunakan display: block agar memenuhi seluruh lebar. Gaya lainnya (warna, batas, dan sebagainya) terserah kamu. Tampilannya bisa seperti pada gambar contoh di bawah.

2. Gaya untuk layar yang lebih besar

Media query untuk layar min-width: 768px sudah disediakan.
Di dalamnya, ubah tata letak menu menjadi horizontal dengan menggunakan display: flex untuk .menu.
Atur jarak antaritem menu agar sesuai dengan gambar contoh di bawah.

Coba sendiri

<!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>