FluentStack

Apa Itu HTML, CSS, dan JavaScript?

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

Apa Itu HTML, CSS, dan JavaScript?

Kenali HTML, CSS, dan JavaScript sebagai tiga bagian dengan tugas berbeda di sebuah web page.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami HTML sebagai penyusun isi dan struktur halaman
  • Memahami CSS sebagai pengatur tampilan halaman
  • Memahami JavaScript sebagai penambah perilaku interaktif
HTMLCSSJavaScriptWeb Fundamentals

Isi lesson

6 blok
  1. 1.
    Tiga nama yang sering muncul di frontendBelum selesaiWajib
  2. 2.
    Struktur, tampilan, dan interaksiBelum selesaiWajib
  3. 3.
    Pikirkan dari fungsi, bukan dari file duluBelum selesaiWajib
  4. 4.
    Contoh kecil HTML, CSS, dan JavaScriptBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Tiga nama yang sering muncul di frontend

Wajib

Setelah tahu cara browser membuka web page, sekarang kamu mulai mengenal bahan yang sering membentuk halaman itu. Kamu belum perlu menghafal kode. Fokus dulu ke pembagian tugas: HTML menyusun isi, CSS mengatur tampilan, dan JavaScript menambahkan interaksi.

Bagian ini memengaruhi progres lesson.

Struktur, tampilan, dan interaksi

Wajib

HTML dipakai untuk menulis isi dan struktur halaman, seperti judul, paragraf, link, dan tombol. CSS dipakai untuk mengatur tampilan, seperti warna, ukuran teks, jarak, dan layout. JavaScript dipakai saat halaman perlu merespons aksi, misalnya ketika tombol diklik atau menu dibuka.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pikirkan dari fungsi, bukan dari file dulu

Kalau kamu melihat halaman FluentStack, coba pisahkan pertanyaannya: bagian mana yang menjadi isi, bagian mana yang membuat tampilan rapi, dan bagian mana yang merespons aksi pengguna.

Bagian ini memengaruhi progres lesson.

Contoh kecil HTML, CSS, dan JavaScript

Wajib
html
<button class="primary-button" id="start-button">
  Mulai belajar
</button>

<style>
  .primary-button {
    background: #22d3ee;
    color: #0f172a;
  }
</style>

<script>
  document.querySelector("#start-button")?.addEventListener("click", () => {
    console.log("Lesson dimulai");
  });
</script>

Kamu belum perlu menghafal kode ini. Fokus pada pembagian tugasnya: button adalah struktur HTML, style mengubah tampilan tombol, dan script menambahkan perilaku saat tombol diklik.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Bagian mana yang paling tepat untuk mengatur warna tombol?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • Gunakan HTML untuk menyusun isi dan struktur halaman.
  • Gunakan CSS untuk mengatur tampilan seperti warna, ukuran, spacing, dan layout.
  • Gunakan JavaScript saat halaman perlu merespons aksi pengguna.
  • Berikutnya, kamu akan melihat bagaimana ketiganya bekerja bersama dalam satu web page.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tiga nama yang sering muncul di frontend.

Memuat progresReview module