FluentStack

DevTools Dasar untuk Static Page

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner40 menitBahasa Indonesia

DevTools Dasar untuk Static Page

Gunakan DevTools untuk inspect elemen HTML dan melihat style CSS yang berlaku.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membuka browser DevTools
  • Menggunakan Inspect Element
  • Melihat struktur HTML dari browser
  • Melihat CSS yang berlaku pada elemen
  • Memahami DevTools sebagai alat observasi dan debugging
DevToolsDebuggingHTMLCSS

Isi lesson

6 blok
  1. 1.
    DevTools membantu melihat apa yang browser bacaBelum selesaiWajib
  2. 2.
    Resource Chrome DevToolsBelum selesaiOpsional
  3. 3.
    Case study: padding card tidak terlihatBelum selesaiWajib
  4. 4.
    Checklist local taskBelum selesaiWajib
  5. 5.
    DevTools bukan pengganti file projectBelum selesaiOpsional
  6. 6.
    RingkasanBelum selesaiWajib

DevTools membantu melihat apa yang browser baca

Wajib

DevTools adalah alat di browser untuk melihat struktur halaman, style CSS, error, dan banyak hal lain. Chrome DevTools sudah built-in di Chrome, jadi tidak perlu instalasi terpisah.

Untuk tahap ini, fokus cukup pada dua area: Elements dan Styles. Elements membantu kamu melihat HTML yang sedang dibaca browser. Styles membantu kamu melihat CSS yang berlaku pada elemen yang dipilih.

Bagian ini memengaruhi progres lesson.

Resource resmi

Opsional

Resource Chrome DevTools

Gunakan resource resmi ini untuk membuka DevTools dan memahami cara inspect HTML/CSS. Fokus pada langkah dasar dulu.

Chrome DevTools DocsDirekomendasikan

Open Chrome DevTools

Panduan resmi untuk membuka DevTools dari Chrome.

Buka panduan DevTools
Chrome DevTools DocsDirekomendasikan

Inspect CSS and HTML

Panduan resmi untuk melihat HTML yang dipilih dan CSS yang berlaku pada elemen.

Buka panduan inspect CSS

Opsional, tidak menghambat penyelesaian lesson.

Case study: padding card tidak terlihat

Wajib

Bayangkan kamu membuat .card, tetapi padding tidak terlihat. Cara mengeceknya:

  • Buka halaman lokal di Chrome.
  • Klik kanan pada elemen card.
  • Pilih Inspect.
  • Cek panel Elements dan pastikan elemen punya class card.
  • Cek panel Styles dan cari rule .card.
  • Lihat apakah property padding muncul.

Dengan cara ini, kamu tidak hanya menebak. Kamu melihat langsung apakah HTML dan CSS dibaca oleh browser.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di browser kamu:

  • Buka halaman lokal.
  • Klik kanan elemen utama, lalu pilih Inspect.
  • Pilih elemen .card di panel Elements.
  • Temukan class pada HTML di panel Elements.
  • Temukan rule CSS di panel Styles.
  • Ubah sementara nilai padding di DevTools jika memungkinkan.
  • Refresh halaman dan perhatikan bahwa perubahan DevTools tidak otomatis tersimpan ke file.
  • Jika perubahan DevTools ingin dipakai permanen, salin perubahannya ke style.css lalu simpan file.

Tandai selesai setelah kamu berhasil menemukan elemen dan style yang berlaku.

Bagian ini memengaruhi progres lesson.

Catatan penting

Opsional

DevTools bukan pengganti file project

Perubahan di DevTools berguna untuk eksperimen cepat. Namun perubahan permanen tetap harus ditulis dan disimpan di file project, misalnya style.css.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Kamu bisa memakai Inspect Element untuk melihat HTML.
  • Panel Styles membantu melihat CSS yang berlaku.
  • DevTools membantu debugging tanpa menebak-nebak.
  • Perubahan di DevTools bersifat sementara sampai kamu menulisnya di file.
  • Berikutnya kamu akan menyimpan project dengan Git dan GitHub.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: DevTools membantu melihat apa yang browser baca.

Memuat progresReview module