🎯 JADWAL INTENSIVE 30 HARI PRE-BOOTCAMP DUMBWAYS

Full Stack Developer Preparation Program

Untuk: Anak yang udah daftar DumbWays Fullstack

Timeline: 30 hari sebelum Stage 1 dimulai

Target: Siap 100% untuk Stage 1 Online

📖 Prolog: Apa itu Full Stack Developer?

Full Stack Developer = Orang yang bisa build complete web application dari depan sampai belakang.

Tidak cuma frontend (tampilan), bukan cuma backend (server), tapi KEDUANYA.

Alur Kerja Full Stack:

User di browser
    ↓
[FRONTEND] ← JavaScript, React, HTML, CSS
    ↓ (komunikasi via API)
[BACKEND] ← Node.js, Express, Database
    ↓ (process & save data)
[DATABASE] ← PostgreSQL
    ↓ (return data)
[BACKEND] (format response)
    ↓ (send back)
[FRONTEND] (display hasil)
    ↓
User lihat hasilnya di browser
                

Kenapa Full Stack Penting?

  • Flexibility: Bisa kerja di team backend, frontend, atau both
  • Career Options: Full stack roles lebih banyak opening & salary lebih tinggi
  • Real Product Understanding: Understand bagaimana semua pieces bekerja bersama
  • Startup Value: Startup perlu full stack, bisa move faster
  • Problem Solving: Bisa see whole picture, solve dari berbagai angle

Skills yang Dibutuhkan:

Frontend: HTML, CSS, JavaScript, React, API integration, Responsive design

Backend: Node.js, Express.js, Database design, SQL, API design, Authentication

DevOps: Git, Terminal, Deployment basics

Soft Skills: Problem solving, Communication, Learning ability

📅 HARI 1
Setup + JavaScript Basic Concepts (Part 1)
Jumat, 11 Juli 2025 | 08:00 - 12:00 (4 jam pagi)
🎯 TARGET HARI INI
✅ Setup VSCode & environment
✅ Understand JavaScript fundamentals (variables, data types, operators)
✅ Write first JavaScript code
✅ Understand why these concepts matter
⏰ JADWAL DETAIL (4 JAM PAGI)
08:00 - 08:30 (30 menit)
Setup & Introduction
Tujuan: Understand course structure & environment setup
Materi:
• Why JavaScript? (most popular, can do frontend & backend)
• What is programming? (instructions untuk computer)
• IDE setup: Install Visual Studio Code
🔥 Kenapa Penting: Proper setup = smooth development. VSCode adalah standard editor untuk web developers.
📌 Praktik:
1. Download & install VSCode
2. Create folder "DumbWays-30days"
3. Open folder in VSCode
4. Create file "day1.js"
08:30 - 09:15 (45 menit)
Variables & Data Types
Tujuan: Understand how to store & manipulate data
Materi:
• What is variable? (container untuk data)
• Data types: String, Number, Boolean, Null, Undefined
• Declaration: var, let, const (apa bedanya?)
• typeof operator
🔥 Kenapa Penting: Everything dalam programming adalah DATA. Kalau tidak paham data types, akan error terus. Contoh: "2" + 3 = "23" (string) vs 2 + 3 = 5 (number).
📌 Praktik:
Buka day1.js, write code:
let name = "Anak";
let age = 20;
let isProgrammer = true;
console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isProgrammer); // "boolean"

Run dengan: node day1.js
☕ BREAK 15 MENIT (09:15 - 09:30)
09:30 - 10:15 (45 menit)
Operators & Expressions
Tujuan: Manipulate data menggunakan operators
Materi:
• Arithmetic: +, -, *, /, %, **
• Comparison: ==, ===, !=, !==, <, >, <=, >=
• Logical: &&, ||, !
• Assignment: =, +=, -=, *=, /=
🔥 Kenapa Penting: Operators adalah kunci untuk manipulate data. === vs == adalah common bug - always use ===!
📌 Praktik:
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10 && b === 5); // true
console.log(a === 10 || b === 10); // true
10:15 - 11:00 (45 menit)
Conditional Statements (IF-ELSE)
Tujuan: Make decisions based on conditions
Materi:
• If statement: if (condition) { do this }
• If-else: if (condition) { ... } else { ... }
• If-else if-else: multiple conditions
• Ternary operator: condition ? true : false
🔥 Kenapa Penting: Programs need to make decisions. If user logged in → show dashboard. Else → show login page.
📌 Praktik:
let age = 20;
if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("Too young");
}
11:00 - 11:45 (45 menit)
Loops (For, While)
Tujuan: Repeat code multiple times
Materi:
• For loop: for (init; condition; increment) { }
• While loop: while (condition) { }
• Loop control: break, continue
🔥 Kenapa Penting: Need to repeat action banyak kali. Without loops, code akan sangat panjang dan repetitive.
📌 Praktik:
// Print 1-10
for (let i = 1; i <= 10; i++) {
  console.log(i);
}
✅ TARGET AKHIR HARI 1
  • ✓ VSCode terinstall & ready
  • ✓ Understand variables & data types
  • ✓ Bisa write basic operators & conditionals
  • ✓ Understand loops concept
  • ✓ Day1.js file dengan semua practice code
📅 HARI 2
Setup + JavaScript Basic Concepts (Part 2 - Sore)
Jumat, 11 Juli 2025 | 14:00 - 18:00 (4 jam sore)
🎯 TARGET HARI INI
✅ Understand functions & scope
✅ Understand arrays & objects
✅ Build first mini project (Calculator)
✅ Understand code organization
⏰ JADWAL DETAIL (4 JAM SORE)
14:00 - 14:45 (45 menit)
Functions & Scope
Tujuan: Write reusable code blocks
Materi:
• Function declaration: function name() { }
• Function call/invocation
• Parameters & arguments
• Return value
• Scope: global vs local variables
🔥 Kenapa Penting: DRY Principle: Don't Repeat Yourself. Functions let you write code once, use many times.
📌 Praktik:
function greet(name) {
  return "Hello " + name;
}
console.log(greet("Anak")); // Hello Anak
console.log(greet("Bro")); // Hello Bro
14:45 - 15:30 (45 menit)
Arrays & Array Methods
Tujuan: Store & manipulate collections of data
Materi:
• Array creation: [1, 2, 3]
• Accessing elements: array[0], array[1]
• Array methods: push, pop, shift, unshift
• Length property
• Looping: for, forEach
🔥 Kenapa Penting: Real data adalah collections (list of users, products, posts). Must know how to add/remove items.
📌 Praktik:
let fruits = ["apple", "banana", "orange"];
fruits.push("mango");
console.log(fruits); // 4 items
fruits.pop();
console.log(fruits); // 3 items
☕ BREAK 15 MENIT (15:30 - 15:45)
15:45 - 16:30 (45 menit)
Objects & Object Methods
Tujuan: Store related data properties together
Materi:
• Object creation: {key: value}
• Accessing properties: obj.key
• Methods: functions inside objects
• 'this' keyword
🔥 Kenapa Penting: Real data: User {name, email, age} bukan separate variables. Objects connect related data + methods.
📌 Praktik:
let user = {
  name: "Anak",
  email: "anak@gmail.com",
  greet: function() {
    return "Hello " + this.name;
  }
};
console.log(user.name); // "Anak"
console.log(user.greet()); // "Hello Anak"
16:30 - 17:30 (1 jam)
MINI PROJECT: Simple Calculator
Tujuan: Apply semua concepts dari hari ini
Project Requirements:
• Create functions untuk: add, subtract, multiply, divide
• Each function takes 2 parameters
• Each function returns result
• Use object untuk store calculator data
• Test each function dengan console.log
💡 Mengapa Mini Project Penting: Apply theory langsung to practice. Build confidence. Portfolio piece!
📌 Deliverable:
• Working calculator dengan 4 operations
• Code organized dengan functions
• File: calculator.js
✅ TARGET AKHIR HARI 2
  • ✓ Understand functions & scope fully
  • ✓ Comfortable dengan arrays
  • ✓ Comfortable dengan objects
  • ✓ Completed calculator project
  • ✓ Total code written: 100+ lines
📅 HARI 3
JavaScript Intermediate + DOM Basics
Sabtu, 12 Juli 2025 | 08:00 - 18:00 (Full Day)
🎯 TARGET HARI INI
✅ Understand callbacks & async operations
✅ Learn promises & async/await
✅ Understand array methods (map, filter)
✅ Understand DOM basics
✅ Manipulate HTML dengan JavaScript
✅ Handle events
⏰ JADWAL DETAIL
08:00 - 09:00 (1 jam)
Callbacks & Async Basics
Tujuan: Handle operations yang take time
Materi:
• Callbacks: passing function as argument
• forEach dengan callback
• setTimeout untuk delay
• Why async matters (API calls, databases)
🔥 Kenapa Penting: Web development adalah async! API calls, databases, file uploads semua butuh async handling.
📌 Praktik:
setTimeout(() => {
  console.log("This runs after 2 seconds");
}, 2000);
09:00 - 10:00 (1 jam)
Promises & Async/Await
Tujuan: Handle asynchronous operations properly
Materi:
• Promise basics: resolve, reject
• .then() & .catch()
• async/await syntax
• Error handling dengan try-catch
🔥 Kenapa Penting: Modern JavaScript uses async/await. Must understand untuk work dengan APIs.
📌 Praktik:
async function getData() {
  try {
    let data = await fetch("url");
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}
☕ BREAK 15 MENIT (10:00 - 10:15)
10:15 - 11:15 (1 jam)
Array Methods: map(), filter(), reduce()
Tujuan: Transform & manipulate arrays efficiently
Materi:
• map(): transform setiap element
• filter(): keep hanya matching elements
• reduce(): combine jadi single value
• Chaining methods
🔥 Kenapa Penting: Very common dalam real code. Process large amounts of data efficiently.
📌 Praktik:
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
let evens = numbers.filter(n => n % 2 === 0);
let sum = numbers.reduce((a, b) => a + b, 0);
11:15 - 12:15 (1 jam)
DOM Basics & HTML Structure
Tujuan: Understand struktur HTML & access dari JS
Materi:
• DOM = Document Object Model
• HTML elements & tags
• Attributes: id, class, data-*
• DOM hierarchy: parent, child, sibling
🔥 Kenapa Penting: JavaScript manipulate DOM untuk update UI. Must understand HTML structure first.
📌 Praktik:
Create index.html dengan:
<div id="app">
  <p class="text">Hello</p>
  <button class="btn">Click me</button>
</div>
🍽️ LUNCH BREAK (12:15 - 13:15)
13:15 - 14:15 (1 jam)
DOM Manipulation & Accessing Elements
Tujuan: Select & modify HTML elements dari JS
Materi:
• getElementById, querySelector
• Changing content: textContent, innerHTML
• Changing styles: element.style.color
• Adding classes: classList.add()
• Creating elements: createElement
🔥 Kenapa Penting: Core skill untuk web development. Interactive features require DOM manipulation.
📌 Praktik:
let btn = document.getElementById("myButton");
btn.textContent = "Clicked!";
btn.style.color = "red";
btn.classList.add("active");
14:15 - 15:15 (1 jam)
Event Handling
Tujuan: Respond to user interactions
Materi:
• Events: click, change, submit, keyup
• addEventListener
• Event object: event.target
• preventDefault
🔥 Kenapa Penting: Web apps adalah interactive! User clicks, types, submits - must handle these events.
📌 Praktik:
button.addEventListener("click", (event) => {
  console.log("Button clicked!");
});
☕ BREAK 15 MENIT (15:15 - 15:30)
15:30 - 17:30 (2 jam)
MINI PROJECT: Interactive Todo List
Tujuan: Combine DOM manipulation + events + array methods
Requirements:
• HTML: Input field untuk task, button untuk add
• CSS: Basic styling (optional but encouraged)
• JS: Listen to button click
• JS: Create list item & add to DOM
• JS: Allow delete item (click X button)
• JS: Mark complete (strikethrough style)
💡 Mengapa Mini Project Penting: Combine semua skills dari hari 1-3. Build real interactive app!
📌 Deliverable:
• Fully working todo list
• Can add, delete, mark complete
• HTML + CSS + JS (3 files)
• Deploy to GitHub
✅ TARGET AKHIR HARI 3
  • ✓ Understand callbacks & async
  • ✓ Know async/await & promises
  • ✓ Master array methods (map, filter)
  • ✓ Can manipulate DOM
  • ✓ Can handle events
  • ✓ Completed interactive todo list
  • ✓ Code on GitHub
📋 RINGKASAN & LANJUTAN
Week 1-4 Overview
📌 WEEK 1: JAVASCRIPT FUNDAMENTALS (HARI 1-7)
Hari 1-3: JavaScript basics (variables, functions, arrays, objects)
Hari 4-5: DOM manipulation & events
Hari 6-7: Advanced JS (closures, classes, fetch API)

Mini Projects:
✓ Calculator
✓ Todo List
✓ Data processing app

By End of Week 1: Strong JavaScript foundation, comfortable dengan DOM & events
📌 WEEK 2: HTML/CSS + ADVANCED JS (HARI 8-14)
Hari 8-9: HTML & CSS fundamentals (semantic, flexbox, grid, responsive)
Hari 10-11: CSS styling & effects (fonts, colors, animations)
Hari 12-14: Advanced JS (regex, modules, localStorage)

Mini Projects:
✓ Responsive website
✓ API data display
✓ Improved todo list with localStorage

By End of Week 2: Can build styled, responsive websites dengan JavaScript interactivity
📌 WEEK 3: REACT BASICS (HARI 15-21)
Hari 15-16: React fundamentals (components, JSX, props)
Hari 17-18: React hooks (useState, useEffect)
Hari 19-20: React advanced (routing, context, styling)
Hari 21: Major project - E-commerce app

Mini Projects:
✓ Recipe finder app
✓ E-commerce product page
✓ Multiple deployed projects

By End of Week 3: Can build modern React applications dengan routing & state management
📌 WEEK 4: NODE.JS & BACKEND (HARI 22-30)
Hari 22-23: Node.js & Express fundamentals
Hari 24-25: REST API & database
Hari 26-27: Authentication & middleware
Hari 28-30: Full-stack integration (React + Backend)

Mini Projects:
✓ Simple REST API
✓ Full-stack todo app
✓ Database integration

By End of Week 4: Can build complete full-stack applications dari frontend sampai database
🎯 TOTAL PENCAPAIAN 30 HARI
JavaScript Skills: ✅ Fundamentals, async, classes, module system
Frontend Skills: ✅ HTML, CSS (responsive, flexbox, grid), React
Backend Skills: ✅ Node.js, Express, REST API, database
Dev Tools: ✅ Git, GitHub, VS Code, Postman
Projects Completed: ✅ 10+ projects (portfolio ready)
Code Written: ✅ 2000+ lines (real experience)
Mental Readiness: ✅ 100% ready untuk Stage 1 DumbWays!