FluentStack

Peran HTML, CSS, dan JavaScript

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 1: Web FoundationsBeginner24 menitBahasa Indonesia

Peran HTML, CSS, dan JavaScript

Lihat bagaimana HTML, CSS, dan JavaScript saling melengkapi dalam satu web page sederhana.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan cara HTML, CSS, dan JavaScript bekerja bersama di satu halaman
  • Membedakan struktur, tampilan, dan interaksi dalam satu halaman
  • Mengenali perubahan visual dan perilaku interaktif tanpa masuk ke detail JavaScript
HTMLCSSJavaScriptBrowser

Isi lesson

6 blok
  1. 1.
    Satu halaman, tiga peranBelum selesaiWajib
  2. 2.
    Amati satu bagian UIBelum selesaiWajib
  3. 3.
    Browser tidak membaca semuanya sebagai satu halBelum selesaiWajib
  4. 4.
    Contoh satu komponen sederhanaBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Satu halaman, tiga peran

Wajib

Di lesson sebelumnya, kamu sudah mengenal HTML, CSS, dan JavaScript secara terpisah. Sekarang lihat cara ketiganya bekerja bersama. HTML memberi struktur awal, CSS membuat struktur itu terlihat rapi, dan JavaScript menambahkan perilaku saat pengguna berinteraksi.

Bagian ini memengaruhi progres lesson.

Amati satu bagian UI

Wajib

Bayangkan satu card lesson di FluentStack. Judul, deskripsi, dan tombolnya adalah isi yang perlu disusun. Warna, jarak, dan bentuk card adalah tampilan. Saat tombol membawa kamu ke halaman lain atau membuka sesuatu, itu adalah perilaku. Kamu cukup mengenali perbedaannya dulu.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Browser tidak membaca semuanya sebagai satu hal

HTML, CSS, dan JavaScript bekerja sama, tetapi tugasnya tetap berbeda. Kalau isi halaman berubah struktur, pikirkan HTML. Kalau tampilan berubah, pikirkan CSS. Kalau ada respons terhadap klik atau input, biasanya JavaScript terlibat.

Bagian ini memengaruhi progres lesson.

Contoh satu komponen sederhana

Wajib
html
<article class="lesson-card">
  <h2>Dasar HTML</h2>
  <p>Mulai dari struktur halaman.</p>
  <button id="continue-button">Lanjut belajar</button>
</article>

Contoh ini baru menunjukkan struktur HTML. CSS bisa membuatnya terlihat seperti card. JavaScript bisa membuat tombol Lanjut belajar merespons klik. Fokusnya adalah mengenali peran, bukan menulis JavaScript dulu.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Jika tombol berubah warna saat hover, bagian mana yang biasanya mengatur perubahan itu?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • Kenali HTML sebagai struktur dan isi awal halaman.
  • Kenali CSS sebagai aturan yang membuat struktur itu terlihat rapi.
  • Kenali JavaScript sebagai bagian yang menambahkan perilaku interaktif.
  • Berikutnya, kamu akan mengenal file dasar yang biasanya dipakai untuk menyimpan HTML, CSS, dan JavaScript.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Satu halaman, tiga peran.

Memuat progresReview module