Home / Tech / Web Development

Full-Stack Web Developer

Dari nol sampai bisa membuat website profesional dan aplikasi web modern. Kurikulum 12 minggu dengan 48 modul, menggunakan teknologi terbaru 2026.

⏱️ 12 Minggu
📚 48 Modul
🎥 100+ Video
📱 Mobile-Friendly

🎥 Video Pembelajaran

Playlist pilihan untuk mendukung pembelajaran:

Minggu 1: HTML & CSS Fundamentals

Di minggu pertama, kamu akan mempelajari dasar-dasar web: cara kerja website, struktur HTML, dan styling dengan CSS. Ditutup dengan project pertama - membuat landing page profesional.

Modul 1: Pengenalan Web Development

⏱️ 60 menit

Pelajari bagaimana website bekerja, perbedaan frontend dan backend, tools yang dibutuhkan, dan setup environment development. Module ini memberikan foundation penting sebelum masuk ke coding.

Topik yang akan dipelajari:

How Internet Works Client vs Server Browser DevTools VS Code Setup Git Basics Terminal Command Line

📚 Resource Pembelajaran:

  • 🎬
    How the Internet Works - Traversy Media
    Video YouTube • 20 menit
    Watch →
  • 🎬
    Git & GitHub Crash Course - Traversy Media
    Video YouTube • 45 menit
    Watch →
  • 📖
    MDN Web Docs - Getting Started
    Dokumentasi • Reading
    Read →
  • 💻
    FreeCodeCamp - Basic HTML
    Interactive Course
    Start →
🎯 Project: Personal Website Sederhana
Next: HTML5 →

Modul 2: HTML5 - Struktur Dasar

⏱️ 90 menit

Kuasai HTML5 semantic elements, form handling, media embedding, dan best practices untuk struktur yang clean dan accessible. Module ini penting untuk foundational knowledge.

Topik yang akan dipelajari:

HTML5 Semantic Tags Forms & Input Types Media (img, video, audio) Links & Navigation Tables & Lists Accessibility (ARIA) SEO Basics

📚 Resource Pembelajaran:

  • 🎬
    HTML Full Course - Bro Code
    Video YouTube • 4.5 jam
    Watch →
  • 💻
    FreeCodeCamp - HTML Certification
    Interactive Exercises
    Start →
  • 📖
    HTML Reference - W3Schools
    Cheatsheet
    Open →
🎯 Project: Recipe Page dengan HTML
Next: CSS3 →

Modul 3: CSS3 - Styling Modern

⏱️ 120 menit

Pelajari selector, box model, typography, colors, dan styling fundamentals. Module ini membangun skill CSS yang solid sebelum masuk ke teknik layout yang lebih advanced.

Topik yang akan dipelajari:

CSS Selectors Box Model Deep Dive Typography & Fonts Colors & Gradients Shadows & Effects Pseudo-classes/elements CSS Variables

📚 Resource Pembelajaran:

  • 🎬
    CSS Full Course - Bro Code
    Video YouTube • 5 jam
    Watch →
  • 🎬
    CSS Variables Tutorial - Kevin Powell
    Video YouTube • 25 menit
    Watch →
  • 💻
    CSSBattle - Practice CSS Skills
    Practice
    Try →
🎯 Project: Styled Profile Card
Next: Flexbox & Grid →

Modul 4: Flexbox & Grid Layout

⏱️ 90 menit

Pelajari flexbox & grid layout. Module inicover fundamental concepts, practical applications, dan hands-on exercises untuk membangun pemahaman mendalam.

Topik yang akan dipelajari:

Flexbox Layout Grid Layout Alignment Responsive Grids

📚 Resource Pembelajaran:

    <
  • 🎬
    Flexbox & Grid Layout Tutorial
    Video YouTube
    Access →
    • <
  • 📖
    Flexbox & Grid Layout Guide
    Documentation
    Access →
    • <
  • 💻
    Flexbox & Grid Layout Course
    Interactive
    Access →

📝 Quiz

Flexbox is used for?

✏️ Latihan:

  • Build Flexbox layouts
  • Create Grid systems
  • Align items
  • Build responsive grids
🎯 Project: Flexbox & Grid Layout
Next Module →

Modul 5: Responsive Design

⏱️ 90 menit

Pelajari responsive design. Module inicover fundamental concepts, practical applications, dan hands-on exercises untuk membangun pemahaman mendalam.

Topik yang akan dipelajari:

Media Queries Mobile First Viewport Breakpoints

📚 Resource Pembelajaran:

    <
  • 🎬
    Responsive Design Tutorial
    Video YouTube
    Access →
    • <
  • 📖
    Responsive Design Guide
    Documentation
    Access →
    • <
  • 💻
    Responsive Design Course
    Interactive
    Access →

📝 Quiz

Media queries are used for?

✏️ Latihan:

  • Write media queries
  • Apply mobile-first
  • Test breakpoints
  • Responsive testing
🎯 Project: Responsive Site
Next Module →

Modul 6: JavaScript Fundamentals

⏱️ 120 menit

Pelajari javascript fundamentals. Module inicover fundamental concepts, practical applications, dan hands-on exercises untuk membangun pemahaman mendalam.

Topik yang akan dipelajari:

Variables & Types Functions DOM Intro Events

📚 Resource Pembelajaran:

    <
  • 🎬
    JavaScript Fundamentals Tutorial
    Video YouTube
    Access →
    • <
  • 📖
    JavaScript Fundamentals Guide
    Documentation
    Access →
    • <
  • 💻
    JavaScript Fundamentals Course
    Interactive
    Access →

📝 Quiz

JavaScript is?

✏️ Latihan:

  • Write JavaScript
  • Use variables
  • Create functions
  • Handle events
🎯 Project: JavaScript Basics
Next Module →

Modul 7: DOM Manipulation

⏱️ 90 menit

Pelajari dom manipulation. Module inicover fundamental concepts, practical applications, dan hands-on exercises untuk membangun pemahaman mendalam.

Topik yang akan dipelajari:

Selectors Travesal Manipulation Event Listeners

📚 Resource Pembelajaran:

    <
  • 🎬
    DOM Manipulation Tutorial
    Video YouTube
    Access →
    • <
  • 📖
    DOM Manipulation Guide
    Documentation
    Access →
    • <
  • 💻
    DOM Manipulation Course
    Interactive
    Access →

📝 Quiz

DOM stands for?

✏️ Latihan:

  • Select DOM elements
  • Manipulate content
  • Handle events
  • Traverse DOM
🎯 Project: DOM Manipulation
Next Module →

Modul 8: ES6+ Features

⏱️ 90 menit

Pelajari es6+ features. Module inicover fundamental concepts, practical applications, dan hands-on exercises untuk membangun pemahaman mendalam.

Topik yang akan dipelajari:

Arrow Functions Destructuring Spread/Rest Modules

📚 Resource Pembelajaran:

    <
  • 🎬
    ES6+ Features Tutorial
    Video YouTube
    Access →
    • <
  • 📖
    ES6+ Features Guide
    Documentation
    Access →
    • <
  • 💻
    ES6+ Features Course
    Interactive
    Access →

📝 Quiz

Arrow functions were introduced in?

✏️ Latihan:

  • Use arrow functions
  • Destructure objects
  • Use spread operator
  • Import/export modules
🎯 Project: ES6+ App
Next Module →