FluentStack

Uji Kompetensi Local Vanilla JavaScript App

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner70 menitBahasa Indonesia

Uji Kompetensi Local Vanilla JavaScript App

Cek kesiapan membangun, menjalankan, men-debug, menyimpan, dan menjelaskan mini app Vanilla JavaScript lokal.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengecek kesiapan membuat project Vanilla JavaScript lokal
  • Mengecek hubungan index.html, style.css, dan script.js
  • Mengecek interaksi DOM dan event
  • Mengecek penggunaan localStorage atau fetch sederhana
  • Mengecek kemampuan debug dengan DevTools dan dokumentasi resmi
  • Mengecek kemampuan menjelaskan project dan readiness ke module berikutnya
JavaScriptLocal WorkflowDebuggingGitHubCheckpoint

Isi lesson

5 blok
  1. 1.
    Apa yang dicek di checkpoint iniBelum selesaiWajib
  2. 2.
    Local project checklistBelum selesaiWajib
  3. 3.
    Dokumentasi untuk self-review terakhirBelum selesaiOpsional
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Apa yang dicek di checkpoint ini

Wajib

Checkpoint ini mengecek readiness local Vanilla JavaScript workflow. Kamu tidak sedang membuktikan bahwa app kamu besar atau sempurna. Kamu sedang membuktikan bahwa kamu bisa membuat mini app lokal yang punya struktur file jelas, behavior JavaScript nyata, data kecil atau data fetch sederhana, proses debug yang masuk akal, dan catatan project yang bisa dibaca orang lain.

FluentStack tidak bisa membaca folder lokal, terminal, browser, atau akun GitHub kamu secara otomatis. Karena itu, checklist di checkpoint ini adalah self-review. Tandai selesai hanya setelah kamu benar-benar mengecek project di perangkat sendiri.

Bagian ini memengaruhi progres lesson.

Local project checklist

Wajib

Pastikan mini app lokal kamu memenuhi checklist ini:

  • Project punya folder sendiri.
  • Project punya index.html, style.css, script.js, dan README.md.
  • index.html menghubungkan style.css dengan link rel stylesheet.
  • index.html menghubungkan script.js dengan script src dan defer.
  • Halaman bisa dibuka di browser lokal.
  • CSS terlihat diterapkan di halaman.
  • JavaScript memilih elemen DOM dengan selector yang jelas.
  • Ada minimal satu event user, misalnya click atau submit.
  • Ada output yang berubah di halaman setelah user berinteraksi.
  • Ada data kecil yang disimpan dengan localStorage atau data sederhana yang ditampilkan dari fetch.
  • Console dicek dan tidak menyimpan error yang kamu abaikan.
  • Kamu memakai dokumentasi resmi saat debug minimal satu masalah.
  • Project punya minimal satu commit Git.
  • Project sudah dipush ke repository GitHub atau minimal siap dipush.
  • README menjelaskan tujuan app, cara menjalankan, fitur utama, dan hal yang dipelajari.

Checklist ini bukan auto-validation. Jangan tandai selesai jika kamu belum membuka project lokal dan mengeceknya langsung.

Bagian ini memengaruhi progres lesson.

Documentation Bridge

Opsional

Dokumentasi untuk self-review terakhir

Gunakan link ini untuk mengecek ulang bagian project yang masih rapuh. Baca bagian yang relevan dengan masalah project kamu saja.

MDN Web Docs

Using the Fetch API

Fokus baca

  • fetch mengembalikan Promise
  • membaca response JSON
  • menangani flow request sederhana

Abaikan dulu

  • request body kompleks
  • streaming response
  • advanced headers
Buka dokumentasi

MDN Web Docs

Window: localStorage property

Fokus baca

  • menyimpan data sederhana
  • membaca data saat halaman dibuka
  • batasan localStorage untuk data sensitif

Abaikan dulu

  • storage event antar tab
  • quota edge case
  • sync antar device
Buka dokumentasi

GitHub Docs

Hello World

Fokus baca

  • repository
  • commit
  • basic GitHub workflow

Abaikan dulu

  • pull request workflow advanced
  • GitHub Actions
  • organization workflow
Buka dokumentasi

Aksi setelah membaca

Pilih satu bagian project yang paling mudah rusak, baca dokumentasi yang relevan, lalu update README dengan catatan kecil tentang cara menjalankan atau men-debug app.

Opsional, tidak menghambat penyelesaian lesson.

Writing practice

Wajib

Latihan menulis

Tulis catatan project untuk README atau update mentor. Jelaskan tujuan mini app, struktur file, fitur JavaScript, cara menjalankan, cara kamu men-debug, dan status readiness.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/360 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Ringkasan

Wajib
  • Checkpoint ini mengukur readiness local Vanilla JavaScript workflow, bukan hafalan API.
  • Project yang lulus punya struktur file jelas, koneksi file benar, interaksi DOM nyata, dan data kecil atau fetch sederhana.
  • DevTools dan dokumentasi resmi menjadi bagian dari proses belajar, bukan tambahan opsional.
  • README dan catatan project membantu kamu menjelaskan hasil kerja seperti engineer.
  • Jika belum siap, ulangi bagian file connection, DOM event, localStorage/fetch, Console, Git, dan README.
  • Jika sudah siap, kamu bisa lanjut ke JavaScript Advanced dengan dasar local workflow yang lebih kuat.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

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