2571 kata
13 menit

Mini Project CSS: Membuat Halaman Profil yang Rapi dan Responsive

2026-10-09ProgrammingCSSWeb Development

Halo, Gabuters!

Akhirnya kita sampai di artikel terakhir dari series belajar CSS.

Pada beberapa artikel sebelumnya, kita sudah mempelajari cara memberikan style pada HTML, menggunakan selector, memahami Box Model, menyusun layout dengan Flexbox, hingga membuat tampilan yang responsive.

Sekarang saatnya menggabungkan semuanya.

Masih ingat mini project halaman profil dari series HTML?

Waktu itu kita membuat halaman yang berisi informasi diri, daftar keterampilan, hobi, dan kontak. Secara struktur, halaman tersebut sudah bisa dibaca oleh browser. Tetapi tampilannya masih sederhana.

Nah, kali ini kita akan mempercantiknya menggunakan CSS.

Target kita bukan membuat website yang paling keren sedunia. Kalau langsung mengejar itu, bisa-bisa kita malah menghabiskan waktu dua jam hanya untuk memilih warna tombol. Hehe.

Kita akan fokus membuat halaman yang rapi, nyaman dibaca, dan bisa menyesuaikan ukuran layar.

Di akhir artikel, Gabuters akan memiliki satu halaman profil yang bisa dijadikan fondasi untuk proyek berikutnya.

1. Apa yang Akan Kita Buat?#

Kita akan membuat halaman profil sederhana dengan beberapa bagian:

  1. Header yang berisi nama website dan menu navigasi.
  2. Bagian perkenalan dengan foto profil.
  3. Bagian tentang saya.
  4. Daftar keterampilan dalam bentuk kartu.
  5. Bagian hobi.
  6. Bagian kontak.
  7. Footer.

Pada layar desktop, beberapa elemen akan disusun berdampingan. Sementara pada HP, susunannya akan menyesuaikan agar tetap nyaman digunakan.

Kita juga akan menggunakan HTML semantik yang sudah dipelajari sebelumnya, seperti <header>, <nav>, <main>, <section>, <article>, dan <footer>.

Jadi, mini project ini sekaligus menjadi pengingat bahwa HTML dan CSS memiliki tugas yang berbeda.

HTML menentukan struktur dan makna konten, sedangkan CSS mengatur tampilannya.

2. Persiapan Folder Project#

Buat sebuah folder bernama profil-bapakgabut.

Di dalamnya, siapkan struktur berikut:

profil-bapakgabut/
├── index.html
├── style.css
└── images/
    └── profil.jpg

Keterangan:

  • index.html berisi struktur halaman.
  • style.css berisi seluruh aturan tampilan.
  • images/profil.jpg adalah gambar profil yang akan digunakan.

Gabuters boleh menggunakan gambar sendiri, ilustrasi, atau gambar placeholder yang memang diizinkan untuk digunakan.

Pastikan nama dan lokasi file gambar sesuai dengan yang ditulis pada HTML.

Untuk mencoba project ini, kita tidak memerlukan backend, database, atau framework JavaScript.

Cukup browser dan text editor.

3. Menyiapkan Struktur HTML#

Kita mulai dengan membuat file index.html.

Ketik atau salin kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    name="description"
    content="Halaman profil BapakGabut, tempat berbagi cerita tentang programming, game, dan hal menarik lainnya."
  >
  <title>Profil BapakGabut</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>


  <header class="header">
    <div class="container header-content">
      <a class="logo" href="#beranda">BapakGabut</a>


      <nav aria-label="Navigasi utama">
        <ul class="menu">
          <li><a href="#tentang">Tentang</a></li>
          <li><a href="#keahlian">Keahlian</a></li>
          <li><a href="#hobi">Hobi</a></li>
          <li><a href="#kontak">Kontak</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <main id="beranda">


    <section class="hero">
      <div class="container hero-content">


        <img
          src="images/profil.jpg"
          alt="Ilustrasi profil BapakGabut"
          class="foto-profil"
        >


        <div class="hero-text">
          <p class="sapaan">Halo, Gabuters!</p>
          <h1>Saya BapakGabut</h1>
          <p>
            Ngoding, main game, dan ngulik apa saja.
            Selamat datang di halaman profil sederhana
            yang kita bangun menggunakan HTML dan CSS.
          </p>


          <a class="tombol" href="#tentang">
            Kenalan Yuk
          </a>
        </div>


      </div>
    </section>


    <section id="tentang" class="section">
      <div class="container">
        <h2>Tentang Saya</h2>


        <p>
          Saya suka mempelajari hal-hal baru,
          terutama yang berkaitan dengan teknologi.
          Mulai dari membuat website, mencoba
          berbagai tools, sampai mencari tahu
          kenapa sebuah program tidak berjalan
          sesuai harapan.
        </p>


        <p>
          Selain ngoding, saya juga suka bermain
          game dan menikmati berbagai hiburan.
          Lewat BapakGabut, saya ingin berbagi
          apa yang sedang saya pelajari.
        </p>
      </div>
    </section>


    <section id="keahlian" class="section section-alt">
      <div class="container">
        <h2>Yang Sedang Saya Pelajari</h2>


        <div class="daftar-kartu">


          <article class="kartu">
            <h3>HTML</h3>
            <p>
              Membuat struktur halaman web
              yang rapi dan bermakna.
            </p>
          </article>


          <article class="kartu">
            <h3>CSS</h3>
            <p>
              Mengatur warna, ukuran, jarak,
              dan layout halaman.
            </p>
          </article>


          <article class="kartu">
            <h3>JavaScript</h3>
            <p>
              Mempelajari logika dan interaksi
              agar halaman lebih dinamis.
            </p>
          </article>


        </div>
      </div>
    </section>


    <section id="hobi" class="section">
      <div class="container">
        <h2>Hobi dan Kegiatan</h2>


        <div class="daftar-hobi">
          <span class="hobi">Ngoding</span>
          <span class="hobi">Main Game</span>
          <span class="hobi">Membaca</span>
          <span class="hobi">Ngulik Teknologi</span>
        </div>
      </div>
    </section>


    <section id="kontak" class="section section-alt">
      <div class="container kontak-content">
        <h2>Mari Terhubung</h2>


        <p>
          Punya ide, pertanyaan, atau ingin
          berbagi pengalaman?
          Silakan kirim pesan melalui email.
        </p>


        <a
          class="tombol"
          href="mailto:bapaklagigabut@gmail.com"
        >
          Kirim Email
        </a>
      </div>
    </section>


  </main>


  <footer class="footer">
    <div class="container">
      <p>
        &copy; 2026 BapakGabut.
        Dibuat sambil belajar HTML dan CSS.
      </p>
    </div>
  </footer>


</body>
</html>

Coba buka file index.html melalui browser.

Halaman sudah memiliki struktur lengkap, tetapi tampilannya masih mengikuti style bawaan browser.

Menu navigasi masih terlihat seperti daftar biasa. Bagian-bagian halaman belum mempunyai jarak yang konsisten, dan foto profil belum tertata.

Tidak masalah.

Justru sekarang kita bisa melihat perbedaan antara halaman yang hanya menggunakan HTML dan halaman yang sudah diberikan CSS.

4. Membuat CSS Dasar#

Buka file style.css.

Kita mulai dengan aturan dasar yang akan digunakan di seluruh halaman.

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background-color: #ffffff;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
}


.container {
  width: min(100% - 32px, 1100px);
  margin-inline: auto;
}


.section {
  padding: 64px 0;
}


.section h2 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.8rem;
}


.section-alt {
  background-color: #f1f5f9;
}

Mari kita bahas beberapa bagian pentingnya.

Menggunakan box-sizing#

* {
  box-sizing: border-box;
}

Aturan ini membuat perhitungan width dan height pada elemen menggunakan model border-box.

Artinya, padding dan border ikut diperhitungkan dalam ukuran yang kita tentukan.

Konsep ini sudah kita bahas pada artikel Box Model.

Mengatur font dan warna dasar#

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #1f2937;
}

Kita menghilangkan margin bawaan pada body, menentukan jenis font, mengatur jarak antarbaris, dan memilih warna teks.

Warna teks abu-abu gelap digunakan agar nyaman dibaca pada latar belakang terang.

Membatasi lebar konten#

.container {
  width: min(100% - 32px, 1100px);
  margin-inline: auto;
}

Aturan ini membuat lebar container mengikuti ruang yang tersedia, dengan jarak total 32 piksel dari sisi viewport ketika ruangnya terbatas.

Namun, pada layar besar, lebarnya tidak akan melebihi 1100 piksel.

margin-inline: auto membantu memusatkan container secara horizontal.

Kita menggunakan fungsi min() untuk memilih nilai yang lebih kecil dari dua ukuran tersebut.

Kalau bagian ini terasa baru, tidak masalah. Yang penting, pahami tujuannya: menjaga konten agar tidak terlalu menempel ke tepi atau melebar berlebihan.

5. Mempercantik Header dan Navigasi#

Sekarang kita atur header agar nama website dan menu navigasi terlihat lebih rapi.

Tambahkan CSS berikut:

.header {
  background-color: #0f172a;
  color: #ffffff;
}


.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
}


.logo {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}


.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;


  margin: 0;
  padding: 0;
  list-style: none;
}


.menu a {
  text-decoration: none;
  font-weight: 500;
}


.menu a:hover {
  color: #93c5fd;
}


.menu a:focus-visible,
.logo:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 4px;
}

Di sini kita mulai menggunakan Flexbox.

Pada .header-content, kita memakai:

display: flex;
flex-direction: column;
align-items: center;

Artinya, logo dan navigasi disusun secara vertikal dan diratakan ke tengah.

Kenapa tidak langsung horizontal?

Karena kita menggunakan pendekatan mobile first.

Pada layar sempit, susunan vertikal lebih mudah diberi ruang. Nanti kita akan mengubahnya menjadi horizontal ketika layar lebih lebar.

Sementara itu, flex-wrap: wrap pada menu membantu item navigasi berpindah baris jika ruangnya tidak cukup.

6. Membuat Hero Section dengan Flexbox#

Bagian hero merupakan area perkenalan yang pertama kali dilihat pengunjung.

Kita ingin menampilkan foto profil, sapaan, nama, deskripsi, dan tombol.

Tambahkan CSS berikut:

.hero {
  padding: 64px 0;
  background: #eff6ff;
}


.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}


.foto-profil {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}


.hero-text {
  min-width: 0;
  text-align: center;
}


.sapaan {
  margin: 0;
  color: #2563eb;
  font-weight: bold;
}


.hero-text h1 {
  margin: 8px 0 16px;
  font-size: 2.25rem;
  line-height: 1.2;
}


.hero-text p {
  max-width: 560px;
}


.tombol {
  display: inline-block;
  padding: 12px 20px;
  margin-top: 12px;


  background-color: #2563eb;
  color: #ffffff;


  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}


.tombol:hover {
  background-color: #1d4ed8;
}


.tombol:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 4px;
}

Ada beberapa konsep CSS yang kita gabungkan di sini.

Flexbox digunakan untuk menyusun foto dan informasi profil.

Box Model digunakan ketika mengatur padding, border, dan margin.

Selector digunakan untuk memilih elemen tertentu, seperti .hero-text h1.

Border radius membuat foto terlihat melingkar.

Box shadow memberikan efek bayangan agar foto sedikit menonjol.

Perhatikan juga:

.hero-text {
  min-width: 0;
}

Aturan ini membantu flex item menyusut ketika ruangnya terbatas, terutama jika nanti kita mengubah layout menjadi horizontal.

Untuk saat ini, foto dan informasi profil masih disusun secara vertikal.

7. Membuat Kartu Keterampilan#

Selanjutnya, kita akan mempercantik bagian keterampilan.

Di dalam HTML, kita sudah memiliki tiga elemen <article> dengan class kartu.

Sekarang tambahkan:

.daftar-kartu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.kartu {
  flex: 1;
  min-width: 0;


  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;


  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}


.kartu h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #1d4ed8;
}


.kartu p {
  margin-bottom: 0;
}

Karena kita masih menggunakan pendekatan mobile first, kartu disusun dari atas ke bawah.

Properti gap memberikan jarak yang konsisten di antara kartu.

Sementara itu, padding, border, dan border-radius membantu setiap kartu terlihat sebagai bagian yang terpisah.

Coba bandingkan tampilannya sebelum dan sesudah CSS ini ditambahkan.

Kontennya tidak berubah, tetapi cara kita menyajikannya menjadi lebih mudah dipahami.

8. Mempercantik Bagian Hobi dan Kontak#

Bagian hobi akan kita tampilkan sebagai kumpulan label sederhana.

Tambahkan:

.daftar-hobi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


.hobi {
  display: inline-block;
  padding: 8px 16px;


  background-color: #dbeafe;
  color: #1e40af;


  border-radius: 999px;
  font-weight: 500;
}

Kita menggunakan flex-wrap: wrap agar label hobi bisa berpindah ke baris berikutnya ketika ruang tidak cukup.

Ini salah satu contoh penggunaan Flexbox yang praktis.

Selanjutnya, untuk bagian kontak:

.kontak-content {
  text-align: center;
}


.kontak-content p {
  max-width: 600px;
  margin-inline: auto;
}

Kita memusatkan konten kontak agar terlihat seperti ajakan untuk menghubungi pemilik website.

Tombol email sudah menggunakan class .tombol yang sebelumnya kita buat pada hero.

Artinya, kita tidak perlu menulis CSS tombol dari awal.

Ini salah satu manfaat penggunaan class yang bisa dipakai ulang.

Footer adalah bagian paling bawah halaman.

Tambahkan:

.footer {
  padding: 24px 0;
  background-color: #0f172a;
  color: #cbd5e1;
  text-align: center;
}


.footer p {
  margin: 0;
}

Footer kita buat sederhana agar tidak mengalihkan perhatian dari konten utama.

Sampai tahap ini, seluruh bagian halaman sudah mempunyai style.

Tetapi kita belum selesai.

Sekarang kita akan mengatur bagaimana tampilannya berubah pada layar yang lebih besar.

10. Membuat Tampilan Responsive#

Masih ingat artikel sebelumnya tentang CSS Responsive?

Kita menggunakan media query untuk menerapkan aturan CSS berdasarkan kondisi tertentu.

Pada mini project ini, kita akan menggunakan breakpoint 768 piksel.

Tambahkan kode berikut di bagian paling bawah style.css:

@media (min-width: 768px) {


  .header-content {
    flex-direction: row;
    justify-content: space-between;
  }


  .hero-content {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }


  .hero-text {
    text-align: left;
  }


  .foto-profil {
    width: 220px;
    height: 220px;
  }


  .hero-text h1 {
    font-size: 3rem;
  }


  .daftar-kartu {
    flex-direction: row;
  }


}

Mari kita perhatikan apa yang berubah.

Pada layar kecil, logo dan navigasi disusun vertikal.

Ketika viewport mencapai 768 piksel, kita menggunakan:

.header-content {
  flex-direction: row;
  justify-content: space-between;
}

Logo dan navigasi akan disusun berdampingan, dengan ruang di antara keduanya.

Hero#

Pada layar kecil, foto berada di atas informasi profil.

Pada layar yang lebih lebar:

.hero-content {
  flex-direction: row;
}

Foto dan informasi profil akan berada dalam satu baris.

Ukuran foto juga diperbesar agar lebih seimbang dengan ruang yang tersedia.

Kartu Keterampilan#

Pada layar kecil, kartu tersusun vertikal.

Pada layar yang lebih lebar:

.daftar-kartu {
  flex-direction: row;
}

Ketiga kartu akan ditampilkan berdampingan.

Karena masing-masing menggunakan flex: 1, kartu dapat berbagi ruang yang tersedia secara lebih merata.

Dengan satu media query, kita sudah mengubah beberapa bagian layout sekaligus.

Namun, ingat bahwa angka 768 piksel bukan ukuran wajib untuk semua website. Jika konten membutuhkan ruang yang berbeda, breakpoint juga bisa disesuaikan.

11. Menambahkan Sentuhan Akhir#

Halaman kita sudah cukup rapi, tetapi masih ada beberapa hal kecil yang bisa ditingkatkan.

Mengatur scroll untuk pengguna yang sensitif terhadap animasi#

Sebelumnya kita menggunakan:

html {
  scroll-behavior: smooth;
}

Efek ini membuat perpindahan ke bagian halaman terasa lebih halus.

Namun, sebagian pengguna memilih mengurangi animasi pada perangkat mereka.

Kita bisa menghormati preferensi tersebut dengan menambahkan:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Aturan ini akan menonaktifkan smooth scrolling ketika pengguna mengaktifkan preferensi pengurangan gerakan.

Menghindari teks panjang yang meluap#

Kadang sebuah halaman terlihat baik-baik saja sampai kita memasukkan teks atau alamat yang sangat panjang.

Untuk membantu menangani kondisi tersebut, kita bisa menambahkan:

.hero-text,
.kartu {
  overflow-wrap: anywhere;
}

Aturan ini memungkinkan browser memutus teks panjang jika diperlukan agar tidak meluap keluar dari area yang tersedia.

Tentu saja, kita tetap perlu menguji hasilnya. Tidak semua masalah overflow dapat diselesaikan dengan satu properti.

12. Melihat Hasil Akhir#

Sekarang simpan kedua file:

  • index.html
  • style.css

Pastikan gambar profil tersedia di folder images.

Kemudian buka index.html melalui browser.

Pada layar kecil, hasilnya kurang lebih seperti ini:

+----------------------------+
|         BapakGabut         |
| Tentang Keahlian Hobi ...  |
+----------------------------+
|                            |
|          ( FOTO )          |
|                            |
|       Halo, Gabuters!      |
|       Saya BapakGabut      |
|                            |
|       [ Kenalan Yuk ]      |
|                            |
+----------------------------+
|         Tentang Saya       |
|                            |
|  Cerita singkat tentang    |
|  BapakGabut                |
+----------------------------+
|    Yang Sedang Dipelajari  |
|                            |
|  +----------------------+  |
|  | HTML                 |  |
|  +----------------------+  |
|  | CSS                  |  |
|  +----------------------+  |
|  | JavaScript           |  |
|  +----------------------+  |
+----------------------------+
|       Hobi dan Kegiatan    |
|                            |
|  [Ngoding] [Main Game]     |
|  [Membaca] [Ngulik]        |
+----------------------------+
|       Mari Terhubung       |
|       [ Kirim Email ]      |
+----------------------------+
|          Footer            |
+----------------------------+

Pada desktop, bagian hero dan kartu keterampilan akan memanfaatkan ruang horizontal yang lebih luas.

Kita tidak membuat dua file HTML berbeda.

Kita hanya mengatur CSS agar susunannya menyesuaikan ruang yang tersedia.

Itulah salah satu kekuatan responsive web design.

13. Cara Menguji Mini Project#

Jangan langsung puas ketika halaman terlihat bagus pada satu ukuran layar.

Coba lakukan beberapa pengujian sederhana.

Uji tampilan mobile#

Buka Developer Tools pada Chrome, lalu aktifkan Device Toolbar.

Coba gunakan viewport sekitar 360 piksel.

Periksa apakah:

  • Menu navigasi tetap bisa dibaca.
  • Foto profil tidak keluar dari container.
  • Teks tidak terpotong.
  • Kartu keterampilan tersusun vertikal.
  • Tombol masih mudah digunakan.
  • Tidak ada scroll horizontal yang tidak diperlukan.

Uji tampilan tablet#

Coba viewport sekitar 768 piksel.

Perhatikan perubahan pada header, hero, dan kartu keterampilan.

Jika ada bagian yang terasa terlalu sempit, coba ubah breakpoint atau ukuran elemen.

Uji tampilan desktop#

Coba viewport sekitar 1200 piksel.

Periksa apakah container tetap berada di tengah dan konten tidak melebar berlebihan.

Uji navigasi#

Klik menu Tentang, Keahlian, Hobi, dan Kontak.

Pastikan masing-masing mengarah ke section yang benar.

Klik tombol Kenalan Yuk dan Kirim Email.

Tombol email akan mencoba membuka aplikasi email yang dikonfigurasi pada perangkat pengguna.

Uji keyboard#

Gunakan tombol Tab untuk berpindah di antara tautan navigasi dan tombol.

Pastikan fokus keyboard terlihat jelas.

Kita sudah menambahkan :focus-visible pada beberapa tautan penting. Jika ingin menyempurnakannya, Gabuters juga bisa menambahkan aturan fokus untuk tautan lain.

14. Latihan Pengembangan#

Kalau sudah berhasil, jangan langsung menutup text editor.

Coba kembangkan mini project ini dengan beberapa tantangan:

  1. Ganti warna utama website dengan kombinasi warna pilihanmu.
  2. Tambahkan satu kartu keterampilan baru.
  3. Ubah bagian hobi menjadi kartu dengan deskripsi singkat.
  4. Tambahkan bagian project yang pernah dibuat.
  5. Coba ubah breakpoint dari 768 piksel menjadi 900 piksel.
  6. Buat tombol navigasi terlihat berbeda ketika di-hover.
  7. Tambahkan aturan :focus-visible untuk seluruh tautan yang dapat menerima fokus.
  8. Coba buka halaman menggunakan HP sungguhan.

Tidak perlu mengerjakan semuanya sekaligus.

Pilih satu atau dua perubahan, lalu lihat bagaimana CSS memengaruhi tampilannya.

Dengan cara ini, kita tidak hanya menyalin kode, tetapi juga belajar memahami alasan di balik setiap aturan.

15. Apa yang Sudah Kita Pelajari?#

Melalui mini project ini, kita sudah mempraktikkan berbagai konsep dari series CSS.

MateriPenerapan pada Mini Project
CSS dasarWarna, font, background, dan ukuran teks
SelectorClass selector, descendant selector, dan pseudo-class
Box ModelMargin, padding, border, dan box-sizing
FlexboxHeader, hero, kartu keterampilan, dan daftar hobi
ResponsiveMobile first dan media query
Styling reusableClass .container, .section, dan .tombol

Kalau diperhatikan, hampir semua konsep yang kita pelajari sebelumnya saling berhubungan.

Saat membuat layout, kita menggunakan Flexbox.

Saat mengatur jarak, kita menggunakan Box Model.

Saat memilih elemen, kita menggunakan selector.

Saat mengatur tampilan untuk layar berbeda, kita menggunakan media query.

Inilah alasan mengapa kita mempelajari CSS secara bertahap.

Setiap materi menjadi bekal untuk memahami materi berikutnya.

16. Penutup Series CSS#

Selamat, Gabuters!

Kita sudah menyelesaikan fondasi CSS, mulai dari mengenal cara kerja styling sampai membuat halaman profil yang responsive.

Tentu saja, CSS masih mempunyai banyak hal menarik untuk dipelajari.

Ada CSS Grid, animasi, custom properties, positioning, dan berbagai teknik layout lainnya.

Namun, kita tidak harus menguasai semuanya sebelum melanjutkan perjalanan belajar web development.

Untuk sekarang, kita sudah mempunyai bekal yang cukup untuk membuat halaman statis dengan tampilan yang lebih nyaman.

Lalu, bagaimana jika kita ingin membuat tombol yang benar-benar melakukan sesuatu?

Bagaimana jika kita ingin menampilkan pesan ketika pengguna mengklik tombol, mengubah isi halaman tanpa reload, atau memvalidasi input pada form?

Nah, di situlah JavaScript mulai berperan.

Pada series berikutnya, kita akan belajar JavaScript dari dasar, memahami variabel, kondisi, perulangan, fungsi, hingga interaksi dengan HTML melalui DOM.

Jadi, kalau HTML adalah struktur dan CSS adalah tampilan, JavaScript akan membantu membuat halaman kita menjadi lebih interaktif.

Sampai jumpa di series JavaScript, Gabuters!

CSS

Selesai

Bagian 6 dari 6Tulisan ini bagian dari seri

Bagikan Artikel

Buat poster berbagi atau salin tautan artikel ini.

Lanjut membaca

Bacaan terkait

Berdasarkan tag dan kategori yang sama

Coba jalur lain

Pilihan konsisten dari artikel lain

Belajar CSS Flexbox: Biar Layout Web Nggak Berantakan
Belajar CSS Responsive: Biar Website Nyaman Dibuka di HP