Latihan: Membuat Mobile Version untuk Halaman Profil

Belajar Dasar Pemrograman Web

Tools

Sudah dua materi kita lewati demi meningkatkan kualitas halaman web. Nah, dengan bekal tersebut, saatnya kita terapkan pada proyek Halaman Profil. Let’s go!

Tujuan

Sebetulnya, kita sudah selesai dalam membangun Halaman Profil. Namun, ada situasi yang mungkin tak kita pikirkan sebelumnya, yaitu mengakses halaman pada perangkat yang lebih kecil (mobile). Nah, pada materi meta tag viewport, kita telah melihat akibat dari hal ini jika dilakukan. Tampilan akan terlihat kecil dan berusaha menyesuaikan dengan ukuran viewport yang ada.

Nah, kita akan memperbaiki masalah ini. Ada dua hal yang perlu dilakukan, yaitu mengatur viewport dengan meta tag dan menerapkan konsep responsif layout dengan media query. Terdengar menarik, kan?

Berikut adalah hasil akhir dari latihan ini.

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil proyek dari latihan terakhir dengan VSCode.
Menerapkan meta tag untuk mengendalikan viewport.
Menjalankan dan melihat hasil perubahan yang dilakukan.
Menentukan styling yang tepat pada suatu ukuran viewport dengan media query.
Menjalankan dokumen HTML pada browser.

Latihan Membuat Mobile Version untuk Halaman Profil

Berikut adalah daftar langkah latihan yang perlu diikuti dan disimak agar latihan berjalan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VSCode.
Pastikan proyek yang digunakan memiliki hasil seperti berikut.

Hal pertama yang perlu dilakukan adalah mengendalikan viewport terlebih dahulu. Silakan sesuaikan kode dalam elemen <head> berikut pada berkas index.html. Perhatikan saja pada kode yang memiliki cetakan tebal.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Halaman Profil Bandung</title>
 
    <!-- My Own Styles -->
    <link rel="stylesheet" href="assets/styles/style.css" />
 
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;700;800&family=Quicksand:wght@400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Kode lainnya disembunyikan -->
  </body>
</html>

Silakan jalankan hasil perubahannya pada browser. Seharusnya, tampilannya akan seperti berikut jika disimulasikan pada perangkat mobile.
Tampilannya belum tampak enak dan baik-baik saja, bukan? Nah, di sinilah peran media query muncul. Kita perlu mengubah susunan letak dari elemen-elemen ini agar menjadi lebih baik. Idenya, kita akan menerapkan ukuran lebar menjadi 100% terhadap parent element pada elemen <div id="content"> dan <aside>. Dengan demikian, elemen <aside> akan turun dan elemen satunya akan memenuhi viewport.

Silakan tambahkan kode bercetak tebal berikut pada style.css.
```
/* Kode lainnya disembunyikan... */
#content {
  float: left;
  width: 75%;
}
 
aside {
  float: right;
  width: 25%;
  padding-left: 20px;
}
 
@media screen and (max-width: 1000px) {
  #content, aside {
    width: 100%;
    padding: 0;
  }
}
```
Pada kode di atas, kita menerapkan media query dengan rincian sebagai berikut.
1. Media yang digunakan untuk menerapkan styling adalah layar perangkat dan kita pilih “screen”.
2. Aturan kode styling akan ditetapkan pada saat ukuran lebar viewport maksimal 1000 piksel. Dengan kata lain, styling akan diterapkan jika lebar viewport di bawah 1000 piksel.
3. Terapkan lebar elemen sebesar 100% pada elemen <div id="content"> dan <aside> terhadap elemen induknya (parent element) supaya elemen sejajar secara vertikal (atas-bawah).
Dengan menerapkan media query, sekarang Halaman Profil dapat menyesuaikan tampilan ketika diakses pada mobile device.

Selamat! Sampai dengan ini, kita sudah dapat membuat sebuah website dengan tampilan yang menarik. Jika ingin lebih jauh memahami tentang konsep responsif, Anda bisa membaca artikel yang ada pada blog kami atau bisa membaca dokumentasi lainnya mengenai ini. Berikut daftarnya.