!DOCTYPE html>
html lang="id">
head>
  meta charset="UTF-8">
  meta name="viewport" content="width=device-width, initial-scale=1.0">
  title>OpenClaw Academy - Belajar AI dari Noltitle>
  style>
:root{--navy:#0a0e27;--purple:#2d1b69;--purple-l:#4a2c8a;--teal:#00d4aa;--teal-d:#00a888;--bg:#060918;--white:#e8e8f0;--gray:#8888a8}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--white);line-height:1.6}
header{background:linear-gradient(135deg,var(--navy),var(--purple));border-bottom:2px solid var(--teal);padding:0 2rem;position:sticky;top:0;z-index:100}
.hdr{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--white)}
.logo-badge{background:var(--teal);color:var(--navy);font-weight:800;padding:.3rem .6rem;border-radius:8px;font-size:.85rem}
.logo-text{font-size:1.25rem;font-weight:700}
.logo-text span{color:var(--teal)}
nav ul{display:flex;list-style:none;gap:1.5rem}
nav a{color:var(--gray);text-decoration:none;font-size:.95rem;transition:color .2s;padding:.5rem 0}
nav a:hover{color:var(--teal)}
.hero{background:linear-gradient(160deg,var(--navy),var(--bg) 50%,var(--purple));padding:5rem 2rem;text-align:center}
.hero h1{font-size:2.8rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,var(--white),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.15rem;color:var(--gray);max-width:600px;margin:0 auto 2rem}
.badge{display:inline-block;background:rgba(0,212,170,.15);border:1px solid var(--teal);color:var(--teal);padding:.3rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;margin-bottom:1.5rem}
.stats{display:flex;justify-content:center;gap:3rem;margin-top:2.5rem}
.stat{text-align:center}
.stat-num{font-size:1.8rem;font-weight:800;color:var(--teal)}
.stat-lbl{font-size:.85rem;color:var(--gray)}
section{padding:3.5rem 2rem}
.container{max-width:1200px;margin:0 auto}
.sec{text-align:center;margin-bottom:2.5rem}
.sec h2{font-size:2rem;font-weight:700;margin-bottom:.5rem}
.sec h2 span{color:var(--teal)}
.sec p{color:var(--gray);max-width:550px;margin:0 auto}
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.mcard{background:var(--navy);border:1px solid rgba(0,212,170,.1);border-radius:14px;padding:1.75rem;transition:transform .2s,border-color .2s}
.mcard:hover{transform:translateY(-3px);border-color:var(--teal)}
.micon{width:44px;height:44px;background:rgba(0,212,170,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.mcard h3{font-size:1.05rem;margin-bottom:.4rem}
.mcard p{font-size:.88rem;color:var(--gray)}
.modules-area{display:grid;grid-template-columns:280px 1fr;gap:0;background:var(--navy);border-radius:18px;border:1px solid rgba(0,212,170,.1);overflow:hidden;min-height:420px}
.module-list{padding:1.5rem;overflow-y:auto;background:var(--bg)}
.module-list h3{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--teal);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid rgba(0,212,170,.2)}
.mod-btn{display:flex;align-items:center;gap:.65rem;width:100%;padding:.75rem;background:none;border:none;border-radius:8px;color:var(--gray);cursor:pointer;text-align:left;transition:all .2s;font-size:.88rem;margin-bottom:.25rem}
.mod-btn:hover{background:rgba(0,212,170,.05);color:var(--white)}
.mod-btn.active{background:rgba(0,212,170,.12);border-color:var(--teal);color:var(--white)}
.mod-num{width:26px;height:26px;background:rgba(0,212,170,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--teal);flex-shrink:0}
.mod-btn.active .mod-num{background:var(--teal);color:var(--navy)}
.lesson-panel{padding:2rem;overflow-y:auto}
.panel-welcome{text-align:center;padding:4rem 1rem;color:var(--gray)}
.panel-welcome .picon{font-size:2.5rem;margin-bottom:1rem}
.panel-welcome h3{color:var(--white);margin-bottom:.5rem}
.panel-welcome p{font-size:.95rem}
.lesson-content{display:none}
.lesson-content h3{font-size:1.3rem;color:var(--teal);margin-bottom:.75rem}
.lesson-content p{color:var(--gray);font-size:.95rem;margin-bottom:.75rem;line-height:1.7}
.lesson-content ul{list-style:none;margin-bottom:1rem}
.lesson-content ul li{color:var(--gray);font-size:.92rem;padding:.3rem 0;padding-left:1.25rem;position:relative}
.lesson-content ul li::before{content:'▹';color:var(--teal);position:absolute;left:0}
.quiz-section{margin-top:1.5rem;padding:1.5rem;background:var(--navy-light);border-radius:12px;border:1px solid rgba(0,212,170,.1)}
.quiz-section h4{font-size:1rem;margin-bottom:1rem;color:var(--white)}
.quiz-options{display:flex;flex-direction:column;gap:.5rem}
.qopt{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;background:none;border:1px solid rgba(0,212,170,.15);border-radius:8px;cursor:pointer;transition:all .2s;color:var(--gray);font-size:.92rem}
.qopt:hover{border-color:var(--teal);background:rgba(0,212,170,.05)}
.qopt.correct{border-color:#00e676;background:rgba(0,230,118,.08);color:#00e676}
.qopt.wrong{border-color:#ff5252;background:rgba(255,82,82,.08);color:#ff5252}
.qopt input{accent-color:var(--teal)}
.qbtn{margin-top:1rem;padding:.6rem 1.5rem;background:var(--teal);color:var(--navy);border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:.92rem;transition:transform .15s}
.qbtn:hover{transform:translateY(-1px)}
.qfeedback{margin-top:.75rem;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;display:none}
.qfeedback.show{display:block}
.qfeedback.ok{background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.2);color:#00e676}
.qfeedback.no{background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.2);color:#ff5252}
footer{background:var(--navy);border-top:1px solid rgba(0,212,170,.1);padding:2rem;text-align:center}
.footer-note{background:rgba(0,212,170,.05);border:1px solid rgba(0,212,170,.15);border-radius:10px;padding:1.25rem;max-width:650px;margin:0 auto 1.5rem;font-size:.85rem;color:var(--gray);line-height:1.6}
.footer-note strong{color:var(--teal)}
.footer-copy{color:var(--gray);font-size:.82rem}
.footer-copy a{color:var(--teal);text-decoration:none}
@media(max-width:768px){.hero h1{font-size:2rem}.stats{gap:1.5rem}.modules-area{grid-template-columns:1fr}.module-list{max-height:200px}nav ul{display:none}section{padding:2.5rem 1rem}}
style>
head>
body>
header>
 div class="hdr">
 a href="#" class="logo">
 span class="logo-badge">OCspan>
 span class="logo-text">OpenClaw Academy - Belajar AI dari nolspan>
 a>
 nav aria-label="Navigasi">
 ul>
 li>a href="#metode">Metodeli>
 li>a href="#kurikulum">Kurikulumli>
 li>a href="#catatan">Catatanli>
 ul>
 nav>
 div>
header>
div class="hero">
 div class="badge">🚀 Mulai dari nol - Tanpa pengalaman div>
 h1>Belajar OpenClaw mulai dari nolh1>
 p>Hai, saya OpenClaw - asistan AI kamu. Mari belajar bersama dengan metode interaktif dan menyenangkan!p>
 a href="#kurikulum" class="qbtn" style="display:inline-flex;text-decoration:none">Mulai Belajar -&a>
 div class="stats">
 div class="stat">
 div class="stat-num">9mod>
 div class="stat-lbl">Modul Pembelajarandiv>
 div class="stat">
 div class="stat-num">100%mod>
 div class="stat-lbl">Gratis & Terbucadiv>
 div class="stat">
 div class="stat-num">∞mod>
 div class="stat-lbl">Belajar Serudiv>
 div>
 div>
section id="metode" class="method-section">
 div class="container">
 div class="sec">
 h2>Metode Pembelajaran kamih2>
 p>Tiga pendekatan yang membuat belajar jadi mudah dan menyenangkanp>
 div>
 div class="methods">
 div class="mcard">
 div class="micon">📖div>
 h3>Belajar Bertahaph3>
 p>Mulai dari konsep dasar hingga mahir dengan kurikulum terstruktur yang mudah diikuti.p>
 div>
 div class="mcard">
 div class="micon">🎯div>
 h3>Latihan Interaktifh3>
 p>Setiap modul dilengkapi latihan praktis untuk menguji pemahaman kamu.p>
 div>
 div class="mcard">
 div class="micon">🏆div>
 h3>Kuis & Evaluasih3>
 p>Uji kemampuan dengan kuis di setiap modul dan lihat perkembanganmu.p>
 div>
 div>
 div>
section>
section id="kurikulum">
 div class="container">
 div class="sec">
 h2>Kurikulum & Modulh2>
 p>Pilih modul untuk mulai belajar - setiap modul memiliki kuis interaktif!p>
 div>
 div class="modules-area">
 div class="module-list">
 h3>Modul Pembelajaranh3>
 button class="mod-btn" onclick="showLesson(1)" data-mod="1">
 span class="mod-num">1span>
 Mod 1: Pengenalan AIbutton>
 button class="mod-btn" onclick="showLesson(2)" data-mod="2">
 span class="mod-num">2span>
 Mod 2: Prompt Engineeringbutton>
 button class="mod-btn" onclick="showLesson(3)" data-mod="3">
 span class="mod-num">3span>
 Mod 3: Kode & Teknologist>
 button class="mod-btn" onclick="showLesson(4)" data-mod="4">
 span class="mod-num">4span>
 Mod 4: Analisis Datam>
 button class="mod-btn" onclick="showLesson(5)" data-mod="5">
 span class="mod-num">5span>
 Mod 5: Pemrograman dasarbutton>
 button class="mod-btn" onclick="showLesson(6)" data-mod="6">
 span class="mod-num">6span>
 Mod 6: Automasi tugasbutton>
 button class="mod-btn" onclick="showLesson(7)" data-mod="7">
 span class="mod-num">7span>
 Mod 7: Analisis Wujudd>
 button class="mod-btn" onclick="showLesson(8)" data-mod="8">
 span class="mod-num">8span>
 Mod 8: Pemrosesan Bahasabutton>
 button class="mod-btn" onclick="showLesson(9)" data-mod="9">
 span class="mod-num">9span>
 Mod 9: Proyek Akhirbutton>
 div>
 div class="lesson-panel">
 div id="panel-welcome" class="panel-welcome">
 div class="picon">📚div>
 h3>Pilih salah satu modul di sisi kiri untuk mulai belajar!h3>
 p>Klik modul untuk melihat penjelasan, materi, dan kuis interaktif.p>
 div>
 div id="lesson-1" class="lesson-content">
 h3>Modul 1: Pengenalan AIh3>
 p>Di modul ini kamu akan belajar dasar-dasar kecerdasan buatan dan bagaimana OpenClaw bekerja.p>
 ul>
 li>Definisi dan jenis-jenis AIli>
 li>Bagaimana AI memahami dan merespon bahasa manusia (NLP)li>
 li>Etika dan tanggung jawab dalam penggunaan AIli>
 li>Pengenalan OpenClaw sebagai asistan AI li>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa kepanjangan dari AI?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q1" value="a">
 Artificial Intelligencelabel>
 label class="qopt">
 input type="radio" name="q1" value="b">
 Automated Integrationlabel>
 label class="qopt">
 input type="radio" name="q1" value="c">
 Advanced Interfacelabel>
 div>
 button class="qbtn" onclick="checkQuiz('q1','a','fb1')">Periksa Jawabbutton>
 div id="fb1" class="qfeedback">div>
 div>
 div id="lesson-2" class="lesson-content">
 h3>Modul 2: Prompt Engineeringh3>
 p>Belajar teknik membuat prompt yang efektif untuk mendapatkan hasil terbaik dari AI.p>
 ul>
 li>Prinsip prompt yang jelas dan spesifikli>
 li>Teknik few-shot dan zero-shot promptingli>
 li>Struktur prompt yang optimalli>
 li>Iterasi dan perbaikan promptli>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa teknik prompting yang memberikan beberapa contoh?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q2" value="a">
 Few-shot Promptinglabel>
 label class="qopt">
 input type="radio" name="q2" value="b">
 Zero-shot Promptinglabel>
 label class="qopt">
 input type="radio" name="q2" value="c">
 Random Promptinglabel>
 div>
 button class="qbtn" onclick="checkQuiz('q2','a','fb2')">Periksa Jawabbutton>
 div id="fb2" class="qfeedback">div>
 div>
 div id="lesson-3" class="lesson-content">
 h3>Modul 3: Kode & Teknologi AIh3>
 p>Kenali tools dan teknologi yang digunakan dalam pengembangan dan penggunaan AI.p>
 ul>
 li>Pengenalan Python untuk AIli>
 li>Library populer: TensorFlow, PyTorch, Scikit-learnli>
 li>API dan layanan cloud AIli>
 li>Environment development untuk AIli>
 ul>
 div class="quiz-section">
 h4>Kuis: Library mana yang dikembangkan oleh Google?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q3" value="a">
 Scikit-learnlabel>
 label class="qopt">
 input type="radio" name="q3" value="b">
 PyTorchlabel>
 label class="qopt">
 input type="radio" name="q3" value="c">
 TensorFlowlabel>
 div>
 button class="qbtn" onclick="checkQuiz('q3','c','fb3')">Periksa Jawabbutton>
 div id="fb3" class="qfeedback">div>
 div>
 div id="lesson-4" class="lesson-content">
 h3>Modul 4: Analisis Data dengan AIm>
 p>Gunakan AI untuk menganalisis dan menginterpretasikan data secara efektif.p>
 ul>
 li>Pengenalan analisis data deskriptifli>
 li>Visualisasi data dengan bantuan AIli>
 li>Mengidentifikasi pola dan trenli>
 li>Pelaporan dan presentasi hasilli>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa tujuan utama analisis data deskriptif?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q4" value="a">
 Memprediksi masa depanlabel>
 label class="qopt">
 input type="radio" name="q4" value="b">
 Meringkas dan memahami data historislabel>
 label class="qopt">
 input type="radio" name="q4" value="c">
 Membuat kode programlabel>
 div>
 button class="qbtn" onclick="checkQuiz('q4','b','fb4')">Periksa Jawabbutton>
 div id="fb4" class="qfeedback">div>
 div>
 div id="lesson-5" class="lesson-content">
 h3>Modul 5: Pemrograman Dasar untuk AIm>
 p>Pelajari dasar-dasar pemrograman yang diperlukan untuk berinteraksi dengan AI.p>
 ul>
 li>Variabel dan tipe datoli>
 li>Kondisional (if/else)li>
 li>Perulangan (for, while)li>
 li>Fungsi dan modulli>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa output dari print(2 + 3 * 4)?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q5" value="a">
 20label>
 label class="qopt">
 input type="radio" name="q5" value="b">
 14label>
 label class="qopt">
 input type="radio" name="q5" value="c">
 24label>
 div>
 button class="qbtn" onclick="checkQuiz('q5','b','fb5')">Periksa Jawabbutton>
 div id="fb5" class="qfeedback">div>
 div>
 div id="lesson-6" class="lesson-content">
 h3>Modul 6: Automasi Tugas dengan AIh3>
 p>Belajar mengotomatisasi tugas-tugas rutin menggunakan AI dan script.p>
 ul>
 li>Pengenalan automasili>
 li>Script scheduling dan triggerli>
 li>Integrasi dengan tools lainli>
 li>Monitoring dan debuggingautomasil>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa kepanjangan API?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q6" value="a">
 Application Programming Interfacelabel>
 label class="qopt">
 input type="radio" name="q6" value="b">
 Auto Process Integrationlabel>
 label class="qopt">
 input type="radio" name="q6" value="c">
 Automated Program Interactionlabel>
 div>
 button class="qbtn" onclick="checkQuiz('q6','a','fb6')">Periksa Jawabbutton>
 div id="fb6" class="qfeedback">div>
 div>
 div id="lesson-7" class="lesson-content">
 h3>Modul 7: Analisis Wujud dengan AIm>
 p>Gunakan AI untuk analisis dan pengenalan objek dalam gambar dan video.p>
 ul>
 li>Pengenalan Computer Visionli>
 li>Teknik deteksi dan klasifikasi objekli>
 li>Model CNN (Convolutional Neural Network)li>
 li>Implementasi sederhana analisis wid>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa kepanjangan CNN?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q7" value="a">
 Central Neural Networklabel>
 label class="qopt">
 input type="radio" name="q7" value="b">
 Convolutional Neural Networklabel>
 label class="qopt">
 input type="radio" name="q7" value="c">
 Connected Neural Networklabel>
 div>
 button class="qbtn" onclick="checkQuiz('q7','b','fb7')">Periksa Jawabbutton>
 div id="fb7" class="qfeedback">div>
 div>
 div id="lesson-8" class="lesson-content">
 h3>Modul 8: Pemrosesan Bahasa Alami (NLP)h3>
 p>Dalami cara AI memahami dan memproses bahasa manusia.p>
 ul>
 li>Tokenisasi dan preprocessing textli>
 li>Sentiment analysisli>
 li>Machine translationli>
 li>Text generation dengan model modernli>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa nama teknik untuk mengubah teks menjadi angka?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q8" value="a">
 Embeddinglabel>
 label class="qopt">
 input type="radio" name="q8" value="b">
 Tokenizationlabel>
 label class="qopt">
 input type="radio" name="q8" value="c">
 Normalizationlabel>
 div>
 button class="qbtn" onclick="checkQuiz('q8','a','fb8')">Periksa Jawabbutton>
 div id="fb8" class="qfeedback">div>
 div>
 div id="lesson-9" class="lesson-content">
 h3>Modul 9: Proyek Akhirh3>
 p>Terapkan semua yang telah dipelajari dalam proyek akhir yang nyata dan praktis.p>
 ul>
 li>Merancang proyek AI end-to-endli>
 li>Mengumpulkan dan membersihkan datoli>
 li>Membangun dan menguji model sederhanali>
 li>Menyajikan hasil dan refleksip>
 ul>
 div class="quiz-section">
 h4>Kuis: Apa langkah terakhir dalam siklus proyek AI?h4>
 div class="quiz-options">
 label class="qopt">
 input type="radio" name="q9" value="a">
 Mengumpulkan datol>
 label class="qopt">
 input type="radio" name="q9" value="b">
 Menyajikan hasil dan refleksil>
 label class="qopt">
 input type="radio" name="q9" value="c">
 Melatih model label>
 div>
 button class="qbtn" onclick="checkQuiz('q9','b','fb9')">Periksa Jawabbutton>
 div id="fb9" class="qfeedback">div>
 div>
 div>
 div>
 section>
section id="catatan">
 div class="container">
 div class="sec">
 h2>Selamat Belajar!h2>
 p>Setiap langkah membawa kamu lebih dekat menjadi ahli AIp>
 div>
 div class="methods">
 div class="mcard">
 div class="micon">💡div>
 h3>Jangan Takut MencobaDiv>
 p>Salah itu bagian dari belajar. Eksperimen tanpa henti!Div>
 div>
 div class="mcard">
 div class="micon">🤝div>
 h3>Berbagi IlmDiv>
 p>Diskusikan dengan komunitas dan saling membantu berkembang.Div>
 div>
 div class="mcard">
 div class="micon">🌱div>
 h3>Tumbuh Setiap HarDiv>
 p>Setiap hari adalah kesempatan baru untuk belajar sesuatu yang baru.Div>
 div>
 div>
 div>
section>
footer>
 div class="footer-note">
 strong>⚠️ Catatan:strong> Halaman ini dibuat untuk tujuan edukasi. Konten disediakan sebagaimana adanya tanpa jaminan apapun. OpenClaw Academy adalah platform belajar gratis yang dirancang untuk membantu pemula memulai perjalanan AI mereka.
 div>
 p class="footer-copy">© 2025 OpenClaw Academy - Belajar AI dimulai dari sini. Dibuat dengan ❤️ oleh komunitas.
 p>
 footer>
script>
function showLesson(n){
var pw=document.getElementById('panel-welcome');
var lessons=document.querySelectorAll('.lesson-content');
var buttons=document.querySelectorAll('.mod-btn');
if(pw)pw.style.display='none';
lessons.forEach(function(l){l.style.display='none'});
buttons.forEach(function(b){b.classList.remove('active')});
var lesson=document.getElementById('lesson-'+n);
if(lesson)lesson.style.display='block';
var btn=document.querySelector('.mod-btn[data-mod="'+n+'"]');
if(btn)btn.classList.add('active');
}
function checkQuiz(name,correct,fbid){
var radios=document.getElementsByName(name);
var selected=null;
radios.forEach(function(r){if(r.checked)selected=r.value});
if(!selected){return}
var fb=document.getElementById(fbid);
var options=fb.parentElement.querySelectorAll('.qopt');
options.forEach(function(o){o.classList.remove('correct','wrong')});
var isCorrect=selected===correct;
radios.forEach(function(r){
if(r.value===correct){r.parentElement.classList.add('correct')}
if(r.checked&&r.value!==correct){r.parentElement.classList.add('wrong')}
});
fb.className='qfeedback show '+(isCorrect?'ok':'no');
fb.innerHTML=isCorrect?'✅ Benar! Jawaban kamu tepat.':'❌ Salah! Jawaban yang benar: '+correct+'. Coba lagi!';
}
script>
body>
html>