Beginner · Level 1: Web FoundationsBeginner18 menitBahasa Indonesia

Struktur Project Frontend Kecil

Baca struktur folder project frontend kecil setelah mengenal index.html, style.css, dan script.js.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membaca file tree project frontend kecil
Mengenali posisi file HTML, CSS, dan JavaScript dalam folder project
Mengenali folder assets untuk gambar, ikon, dan file pendukung

Project StructureHTMLCSSJavaScript

Isi lesson

5 blok

1.
Dari file ke folder projectBelum selesaiWajib
2.
Contoh file tree sederhanaBelum selesaiWajib
3.
Cara membaca file treeBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Dari file ke folder project

Wajib

Di lesson sebelumnya, kamu sudah mengenal index.html, style.css, dan script.js. Saat project masih kecil, semua file bisa terlihat sederhana. Tetapi ketika gambar, ikon, dan file pendukung mulai bertambah, folder membantu kamu menemukan sesuatu tanpa menebak-nebak.

Bagian ini memengaruhi progres lesson.

Contoh file tree sederhana

Wajib

bash

my-frontend-project/
  index.html
  styles/
    style.css
  scripts/
    script.js
  assets/
    logo.svg
    hero-image.png

index.html tetap menjadi pintu masuk halaman. Folder styles berisi CSS, scripts berisi JavaScript, dan assets berisi gambar, ikon, atau file pendukung.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Cara membaca file tree

Mulai dari baris paling atas sebagai nama project. Lalu lihat file utama seperti index.html. Setelah itu, cek folder pendukung: styles untuk tampilan, scripts untuk interaksi, dan assets untuk gambar atau ikon.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Di struktur contoh, file mana yang biasanya menjadi pintu masuk halaman web sederhana?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Baca file tree dari nama project, lalu file utama, lalu folder pendukung.
Gunakan folder styles untuk CSS dan folder scripts untuk JavaScript ketika project mulai bertambah.
Simpan gambar, ikon, dan file pendukung di folder assets.
Berikutnya, kamu akan menutup Web Foundations dengan checkpoint singkat sebelum masuk ke HTML Basics.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Dari file ke folder project.

Memuat progres Review module