Arti mobile-first

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

Mobile-first adalah strategi desain dengan membangun situs web untuk perangkat seluler terlebih dahulu, lalu meningkatkannya secara bertahap untuk layar yang lebih besar.
Gagasan utamanya adalah sekarang sebagian besar pengguna menjelajahi web lewat ponsel, jadi memulai dari ukuran kecil memastikan situsmu berfungsi dengan baik untuk sebagian besar pengunjung.

Mulailah dengan menulis gaya untuk perangkat seluler:

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

Lalu gunakan media queries untuk menyesuaikan desainmu pada 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 wadah, dengan susunan vertikal.
Buat tautannya menggunakan display: block agar memenuhi seluruh lebar. Gaya lainnya, seperti warna dan batas, terserah kamu. Tampilannya bisa seperti pada gambar contoh di bawah ini.

2. Gaya untuk layar yang lebih besar

Kueri media untuk layar min-width: 768px sudah tersedia.
Di dalamnya, ubah tata letak menu menjadi horizontal dengan menggunakan display: flex untuk .menu.
Tambahkan margin-right ke setiap item menu (.menu li) untuk memberi jarak antaritem, seperti pada gambar contoh di bawah ini.

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>