Beginner · Level 4: JavaScript FundamentalsBeginner40 menitBahasa Indonesia

Menyiapkan Project Vanilla JS Lokal

Siapkan folder project lokal untuk mini app JavaScript tanpa framework, npm, atau bundler.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami tujuan local Vanilla JavaScript project
Membuat folder project dengan file HTML, CSS, dan JavaScript
Menyiapkan workflow edit-save-refresh
Membedakan kebutuhan local project dari built-in practice

Local WorkflowJavaScriptProject Setup

Isi lesson

6 blok

1.
Saatnya membawa JavaScript ke folder lokalBelum selesaiWajib
2.
Struktur folder awalBelum selesaiWajib
3.
Tool yang dipakaiBelum selesaiOpsional
4.
Checklist local taskBelum selesaiWajib
5.
Local milestone bukan sekadar membaca instruksiBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Saatnya membawa JavaScript ke folder lokal

Wajib

Di module sebelumnya, kamu sudah melatih JavaScript di practice workspace FluentStack: memilih elemen DOM, membaca input, menangani event, menyimpan data kecil, dan mengambil data dengan fetch.

Sekarang fokusnya berubah. Kamu akan membuat mini app JavaScript di perangkat sendiri. Tujuannya bukan memakai framework, npm, atau tool modern yang berat. Tujuannya adalah memahami workflow dasar engineer frontend: membuat folder project, menghubungkan file, membuka halaman di browser, debug dengan DevTools, menyimpan progres dengan Git, lalu menulis catatan project yang jelas.

FluentStack tetap menjadi panduan. Tetapi file, browser, terminal, dan repository berada di perangkat kamu sendiri.

Bagian ini memengaruhi progres lesson.

Struktur folder awal

Wajib

bash

vanilla-js-notes/
  index.html
  style.css
  script.js
  README.md

index.html berisi struktur halaman, style.css mengatur tampilan, script.js berisi behavior JavaScript, dan README.md menjelaskan project secara singkat.

Bagian ini memengaruhi progres lesson.

Resource resmi

Opsional

Tool yang dipakai

Gunakan tool resmi ini jika ada yang belum tersedia di perangkat kamu.

Visual Studio CodeDirekomendasikan

Download Visual Studio Code

Code editor yang direkomendasikan untuk mengikuti local project beginner.

Download VS Code

GitDirekomendasikan

Git Downloads

Install Git agar command git tersedia saat kamu menyimpan riwayat project.

Install Git

GitHub DocsOpsional

Hello World

Panduan awal repository, commit, branch, dan alur GitHub dasar.

Buka GitHub Docs

Opsional, tidak menghambat penyelesaian lesson.

Checklist local task

Wajib

Kerjakan di perangkat kamu:

Buat folder project, misalnya vanilla-js-notes.
Buat file index.html, style.css, script.js, dan README.md.
Buka folder project sebagai workspace di code editor.
Pastikan kamu tahu lokasi folder itu di perangkatmu.
Jangan install framework, npm package, bundler, atau template dulu.
Simpan project di lokasi yang mudah ditemukan, bukan di folder download sementara.

Checklist ini tidak diperiksa otomatis oleh FluentStack. Tandai selesai setelah folder dan semua file benar-benar dibuat.

Bagian ini memengaruhi progres lesson.

Catatan penting

Opsional

Local milestone bukan sekadar membaca instruksi

Progress di module ini bergantung pada tindakan nyata di perangkat kamu. Jika kamu belum membuat folder dan file lokalnya, jangan tandai checklist sebagai selesai.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Local Vanilla JavaScript App adalah latihan workflow di perangkat sendiri.
Project dimulai dari index.html, style.css, script.js, dan README.md.
Kamu belum perlu framework, npm, bundler, atau deployment.
Berikutnya kamu akan menghubungkan HTML, CSS, dan JavaScript agar halaman lokal bisa berjalan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Saatnya membawa JavaScript ke folder lokal.

Memuat progres Review module