FluentStack

Uji Kompetensi Local Static Website Project

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

Uji Kompetensi Local Static Website Project

Cek kesiapan kamu membuat, menjalankan, memeriksa, menyimpan, dan menjelaskan website statis lokal.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengecek kemampuan membuat folder project lokal
  • Mengecek kemampuan membuat file index.html dan style.css
  • Mengecek kemampuan membuka HTML di browser
  • Mengecek kemampuan inspect elemen dengan DevTools
  • Mengecek kemampuan menyimpan project dengan Git dan GitHub
  • Mengecek kemampuan menjelaskan project secara singkat
Local WorkflowHTMLCSSGitGitHubCheckpoint

Isi lesson

7 blok
  1. 1.
    Apa yang dicek di checkpoint iniBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Resource tool untuk self-reviewBelum selesaiOpsional
  4. 4.
    Local project checklistBelum selesaiWajib
  5. 5.
    Writing practiceBelum selesaiWajib
  6. 6.
    Baca dokumentasi resmi secara terarahBelum selesaiOpsional
  7. 7.
    RingkasanBelum selesaiWajib

Apa yang dicek di checkpoint ini

Wajib

Checkpoint ini mengecek workflow local static website. Kamu akan membuktikan bahwa kamu bisa menyiapkan folder project, membuat index.html dan style.css, membuka halaman di browser, memakai DevTools untuk inspect HTML/CSS, menyimpan project dengan Git/GitHub, dan menjelaskan project dengan singkat.

FluentStack tidak bisa memeriksa file di perangkat kamu secara otomatis. Karena itu, checklist lokal di checkpoint ini adalah self-review yang harus kamu kerjakan dengan jujur.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Local Static Website Project

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 10

Target lulus: 70

Apa fungsi utama folder project lokal?

Resource resmi

Opsional

Resource tool untuk self-review

Gunakan link resmi ini jika kamu perlu mengecek ulang code editor, Git, GitHub, atau DevTools sebelum menyelesaikan checkpoint.

Visual Studio CodeDirekomendasikan

Download Visual Studio Code

Code editor yang direkomendasikan untuk beginner path ini.

Download VS Code
GitWajib

Git Downloads

Install Git agar command Git tersedia di terminal.

Install Git
Chrome DevTools DocsDirekomendasikan

Open Chrome DevTools

Panduan resmi membuka DevTools di Chrome.

Buka panduan DevTools

Opsional, tidak menghambat penyelesaian lesson.

Local project checklist

Wajib

Tool readiness self-review:

  • Code editor sudah terinstall atau tersedia. VS Code direkomendasikan.
  • Browser modern tersedia. Chrome direkomendasikan untuk DevTools.
  • Git sudah terinstall.
  • Akun GitHub sudah siap dipakai.

Pastikan project lokal kamu memenuhi checklist ini:

  • Project punya folder sendiri.
  • Project punya index.html.
  • Project punya style.css.
  • HTML memakai struktur semantic sederhana.
  • CSS terhubung ke HTML lewat link stylesheet.
  • Halaman bisa dibuka di browser.
  • DevTools bisa inspect elemen utama.
  • Project punya minimal satu commit Git.
  • Project sudah dipush ke GitHub.
  • README singkat sudah ditulis.

Checklist ini adalah self-review. FluentStack tidak memeriksa perangkat lokal, terminal, atau akun GitHub kamu secara otomatis. Tandai blok ini selesai setelah kamu mengecek project lokalmu. Jangan tandai hanya karena sudah membaca checklist.

Bagian ini memengaruhi progres lesson.

Writing practice

Wajib

Latihan menulis

Jelaskan project website statis kamu dalam 5 sampai 7 kalimat. Tulis seperti kamu sedang menjelaskan project kecil kepada mentor atau calon reviewer.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/260 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Opsional

Baca dokumentasi resmi secara terarah

Gunakan bagian ini sebagai panduan membaca dokumentasi workflow dasar, bukan tugas menghafal. Fokus pada bagian yang langsung membantu project lokalmu.

MDN Web Docs

Getting started with the web

Fokus baca

  • struktur website sederhana
  • file HTML/CSS
  • workflow belajar web dasar

Abaikan dulu

  • deployment
  • JavaScript advanced
  • framework
Buka dokumentasi

GitHub Docs

Hello World

Fokus baca

  • repository
  • commit
  • basic GitHub workflow

Abaikan dulu

  • pull request workflow advanced
  • GitHub Actions
  • team collaboration flow
Buka dokumentasi

Chrome DevTools Docs

Inspect CSS and HTML

Fokus baca

  • inspect element
  • view applied CSS
  • test style changes temporarily

Abaikan dulu

  • performance profiling
  • network debugging
  • source maps
Buka dokumentasi

Aksi setelah membaca

Buka project lokal kamu, inspect elemen utama, lalu tulis satu hal yang kamu lihat di DevTools dan satu perubahan yang kamu simpan di file project.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Kamu membuktikan bahwa kamu bisa membuat project website statis lokal.
  • Kamu membuktikan bahwa kamu bisa membuka HTML di browser dan melihat perubahan setelah menyimpan file.
  • Kamu membuktikan bahwa kamu bisa memakai DevTools untuk inspect HTML dan CSS dasar.
  • Kamu membuktikan bahwa kamu bisa menyimpan project dengan Git/GitHub.
  • Jika checkpoint belum lulus, review lagi folder project, link CSS, browser refresh, DevTools Elements/Styles, Git commit, GitHub push, dan README singkat.
  • Setelah kamu bisa membuat project statis lokal, berikutnya kamu bisa mulai belajar layout CSS yang lebih terarah seperti Flexbox dan Grid.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Apa yang dicek di checkpoint ini.

Memuat progresReview module