{
  "course": {
    "id": "course-web",
    "title": "Web Programming Foundation",
    "summary": "HTML, CSS, JavaScript, deployment, dan portfolio website responsif.",
    "duration": "10 minggu",
    "level": "INTERMEDIATE"
  },
  "modules": [
    {
      "id": "module-web-1",
      "title": "Fondasi HTML5 Semantik",
      "lessons": [
        {
          "id": "lesson-html",
          "title": "HTML semantic dan struktur halaman",
          "content": "Membuat struktur landing page profesional dengan tag semantic dan komponen section.",
          "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
          "materialUrl": "https://developer.mozilla.org/",
          "completed": true,
          "quiz": {
            "id": "quiz-html-semantic",
            "title": "Kuis HTML Semantik"
          }
        },
        {
          "id": "lesson-html-forms",
          "title": "Form & Validasi Form Dasar",
          "content": "Membuat input teks, email, password, tombol submit, serta atribut required.",
          "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
          "materialUrl": "https://developer.mozilla.org/",
          "completed": true,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-2",
      "title": "CSS Responsive Layout & Styling",
      "lessons": [
        {
          "id": "lesson-css",
          "title": "CSS responsive layout",
          "content": "Grid, flexbox, spacing, warna, dan responsive constraints untuk tampilan mobile/desktop.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://web.dev/learn/css/",
          "completed": true,
          "quiz": null
        },
        {
          "id": "lesson-css-box",
          "title": "CSS Box Model & Tipografi",
          "content": "Mengatur margin, padding, border, ukuran font, dan import font dari Google Fonts.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://web.dev/learn/css/",
          "completed": true,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-3",
      "title": "CSS Grid & Animasi",
      "lessons": [
        {
          "id": "lesson-css-grid",
          "title": "CSS Grid System",
          "content": "Membuat tata letak dashboard kompleks 2 dimensi dengan grid-template-columns.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://web.dev/learn/css/",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-css-animation",
          "title": "Transisi & Efek Hover",
          "content": "Penerapan efek animasi transisi halus pada tombol dan link aktif.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://web.dev/learn/css/",
          "completed": false,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-4",
      "title": "JavaScript Frontend Dasar",
      "lessons": [
        {
          "id": "lesson-js",
          "title": "Interaksi dasar dengan JavaScript",
          "content": "Event, state sederhana, validasi form, dan pola berpikir interaktif.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://javascript.info/",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-js-dom",
          "title": "Logika Pemrograman & DOM Manipulation",
          "content": "Belajar variabel, fungsi, kondisi, serta cara menangkap element HTML.",
          "videoUrl": "https://www.youtube.com/",
          "materialUrl": "https://javascript.info/",
          "completed": false,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-5",
      "title": "Modul Proyek Akhir",
      "lessons": [
        {
          "id": "lesson-project-slicing",
          "title": "Slicing Landing Page",
          "content": "Menghubungkan HTML, CSS, JS menjadi satu halaman portfolio utuh.",
          "videoUrl": null,
          "materialUrl": "https://github.com/",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-project-git",
          "title": "Git & Github Version Control",
          "content": "Mengunggah source code ke repository Github secara terstruktur.",
          "videoUrl": null,
          "materialUrl": "https://git-scm.com/",
          "completed": false,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-6",
      "title": "Deployment & Hosting",
      "lessons": [
        {
          "id": "lesson-deploy",
          "title": "Deploy ke Vercel / Netlify",
          "content": "Cara menghubungkan repository Github ke Vercel untuk hosting gratis selamanya.",
          "videoUrl": null,
          "materialUrl": "https://vercel.com/docs",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-seo",
          "title": "Optimasi SEO & Performance Check",
          "content": "Menguji performa website dengan Lighthouse dan menambahkan meta tag SEO dasar.",
          "videoUrl": null,
          "materialUrl": "https://web.dev/lighthouse/",
          "completed": false,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-7",
      "title": "Dasar-dasar React & Framework Modern",
      "lessons": [
        {
          "id": "lesson-react-intro",
          "title": "Pengenalan React & Component-based UI",
          "content": "Memahami konsep Virtual DOM, pembuatan komponen JSX, dan passing props.",
          "videoUrl": null,
          "materialUrl": "https://react.dev/",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-react-state",
          "title": "React State & State Management Sederhana",
          "content": "Menggunakan hook useState untuk interaktivitas dinamis.",
          "videoUrl": null,
          "materialUrl": "https://react.dev/",
          "completed": false,
          "quiz": null
        }
      ]
    },
    {
      "id": "module-web-8",
      "title": "API Integration",
      "lessons": [
        {
          "id": "lesson-api-fetch",
          "title": "Fetching Data dari Public API",
          "content": "Cara mengambil data eksternal menggunakan async/await fetch dan merendernya ke UI.",
          "videoUrl": null,
          "materialUrl": "https://javascript.info/fetch",
          "completed": false,
          "quiz": null
        },
        {
          "id": "lesson-api-handling",
          "title": "Handling Error & Loading State",
          "content": "Mengelola state loading dan error pada UI ketika memproses HTTP request.",
          "videoUrl": null,
          "materialUrl": "https://javascript.info/fetch",
          "completed": false,
          "quiz": null
        }
      ]
    }
  ],
  "generatedAt": "2026-06-11T23:22:31.245Z"
}