Beginner · Level 1: Web FoundationsBeginner18 menitBahasa Indonesia

Mengenal File index.html, style.css, dan script.js

Kenali fungsi index.html, style.css, dan script.js di project frontend kecil.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami fungsi index.html sebagai halaman utama
Memahami fungsi style.css sebagai tempat aturan tampilan
Memahami fungsi script.js sebagai tempat perilaku interaktif

Project StructureHTMLCSSJavaScript

Isi lesson

6 blok

1.
Tiga file yang sering kamu temuiBelum selesaiWajib
2.
Nama file membantu kamu menemukan tugasnyaBelum selesaiWajib
3.
Contoh struktur file dasarBelum selesaiWajib
4.
Convention membantu tim membaca projectBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Tiga file yang sering kamu temui

Wajib

Setelah tahu fungsi HTML, CSS, dan JavaScript, sekarang hubungkan ke file. Di project frontend kecil, kamu sering melihat index.html, style.css, dan script.js. File-file ini membantu kamu memisahkan struktur, tampilan, dan interaksi supaya lebih mudah dibaca.

Bagian ini memengaruhi progres lesson.

Nama file membantu kamu menemukan tugasnya

Wajib

index.html biasanya menjadi halaman utama yang dibuka browser. style.css biasanya menyimpan aturan CSS untuk tampilan. script.js biasanya menyimpan JavaScript untuk perilaku interaktif. Nama ini adalah convention, yaitu kebiasaan penamaan yang umum dipakai, bukan aturan khusus browser. Yang penting adalah peran setiap file.

Bagian ini memengaruhi progres lesson.

Contoh struktur file dasar

Wajib

bash

my-first-page/
  index.html
  style.css
  script.js
  assets/
    logo.svg

Kamu belum perlu membuat semua file ini sekarang. Cukup amati bahwa struktur halaman, tampilan, interaksi, dan asset bisa ditempatkan di file atau folder yang jelas.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Convention membantu tim membaca project

Banyak project memakai nama seperti index.html, style.css, dan script.js agar mudah dikenali. Project yang lebih besar bisa punya nama berbeda, tetapi ide dasarnya sama: pisahkan file sesuai tugasnya.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

File mana yang biasanya menyimpan aturan tampilan seperti warna dan jarak?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Cari index.html saat ingin melihat struktur awal halaman.
Cari style.css saat ingin melihat aturan tampilan.
Cari script.js saat ingin melihat perilaku interaktif.
Berikutnya, kamu akan melihat bagaimana file-file ini ditaruh dalam struktur folder project kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tiga file yang sering kamu temui.

Memuat progres Review module