CURRICULUM + CODING LAB + CLASSROOM

Materi sudah siap.
Dosen fokus mengajar.
Mahasiswa langsung praktik.

NgodingLab menyediakan struktur satu semester lengkap—CPMK, Sub-CPMK, materi bertahap, praktikum terhubung editor, kuis, summary, Teacher Guide, progress, dan penilaian kelas.

16 pertemuan siap pakai Hybrid by default Template langsung dikelola Admin Belajar mandiri tanpa kode
TI-2A · Ganjil 2026/2027
PEMROGRAMAN WEBSITE & MOBILE

Pertemuan 04 — Bootstrap Layout

24 dari 32 mahasiswa selesai · rata-rata progress 72%

HYBRID
ON TRACK24mahasiswa
PERLU PERHATIAN6mahasiswa
BELUM MULAI2mahasiswa
MATERIBootstrap Grid System
PRAKTIKUM 1Responsive Product Layout
PRAKTIKUM 2Bangun Product Card
24/32
QUIZCek pemahaman
TEACHER GUIDEAlur mengajar 150 menit
FREE SELF LEARNING

Tidak punya kode kelas? Tetap bisa belajar.

Mahasiswa dapat memilih Master Course dan belajar mandiri secara gratis. Mode ini sengaja sederhana: materi, contoh, dan simulator tersedia; tugas, quiz penilaian, submission, feedback dosen, dan gradebook hanya ada di mode kelas.

Tanpa kode kelas Progress tersimpan Simulator langsung Tanpa tugas & nilai
Belajar MandiriGratis untuk mahasiswaMulai Belajar
NgodingLab menyiapkan 80%. Dosen mengendalikan 20%.
Curriculum Coding Lab Assessment Progress
TEACH WITHOUT STARTING FROM ZERO

Dari daftar sampai siap mengajar, hanya beberapa langkah.

Dosen tidak perlu menyusun 16 pertemuan dari halaman kosong. NgodingLab menyediakan template mata kuliah; dosen membuat kelas dari template lalu menyesuaikannya sesuai kebutuhan.

01

Pilih Master Course

Pilih mata kuliah lengkap yang sudah disiapkan NgodingLab.

02

Buat Class

Isi nama kelas, semester, jumlah mahasiswa, dan mode belajar.

03

Bagikan Kode

Mahasiswa join dengan kode kelas, dosen menerima permintaan.

04

Fokus Mengajar

Pantau progress, buka pertemuan, beri feedback, dan tambah 20% materi Anda.

MASTER COURSE LIBRARY

Satu semester perkuliahan pemrograman yang siap digunakan.

Admin mengelola template secara langsung. Saat dosen membuat kelas, NgodingLab menyalin template menjadi snapshot independen sehingga kelas yang sedang berjalan tidak berubah saat template Admin diperbarui.

3 SKS16 PertemuanTemplate siap pakai

Algoritma & Pemrograman Dasar

Belajar berpikir komputasional dan membangun program dasar dengan JavaScript melalui latihan algoritma dan Coding Lab.

Materi · Praktikum · Kuis · Summary · Teacher Guide
3 SKS16 PertemuanTemplate siap pakai

Pemrograman Web Dasar

Satu semester membangun fondasi web: HTML, CSS, Bootstrap, JavaScript, DOM, responsive design, dan mini project.

Materi · Praktikum · Kuis · Summary · Teacher Guide
3 SKS16 PertemuanTemplate siap pakai

Pemrograman Website & Mobile

Pembelajaran terpadu web dan konsep mobile berbasis web: UI responsif, navigasi, data, API, dan final project.

Materi · Praktikum · Kuis · Summary · Teacher Guide
3 SKS16 PertemuanTemplate siap pakai

Basis Data

Konsep basis data relasional, ERD, SQL, normalisasi, integrity, transaksi, dan praktik melalui Virtual Database NgodingLab.

Materi · Praktikum · Kuis · Summary · Teacher Guide
3 SKS16 PertemuanTemplate siap pakai

Pengujian Perangkat Lunak

Dari test case hingga regression testing: mahasiswa menguji aplikasi nyata, melaporkan defect, dan menyusun test report.

Materi · Praktikum · Kuis · Summary · Teacher Guide
3 SKS16 PertemuanTemplate siap pakai

Perawatan Perangkat Lunak

Memahami aplikasi existing, reproduksi bug, corrective/adaptive/perfective maintenance, refactoring, database, keamanan, dan release.

Materi · Praktikum · Kuis · Summary · Teacher Guide
INDONESIAN CAMPUS READY

Lebih dari daftar HTML, CSS, atau JavaScript.

Course disusun seperti mata kuliah kampus: identitas, CPMK, Sub-CPMK, indikator, pertemuan 1–16, UTS, UAS/Final Project, rubrik, dan Teacher Guide.

  • CPMK & Sub-CPMK setiap pertemuan
  • 16 pertemuan termasuk UTS dan UAS/Final Project
  • Tujuan, materi, aktivitas, assessment, dan rubrik
  • Snapshot kelas tetap stabil selama semester
01Pembelajaran & PraktikumMateri · Praktikum · Kuis
02Pembelajaran & PraktikumMateri · Praktikum · Kuis
03Pembelajaran & PraktikumMateri · Praktikum · Kuis
04Pembelajaran & PraktikumMateri · Praktikum · Kuis
05Pembelajaran & PraktikumMateri · Praktikum · Kuis
06Pembelajaran & PraktikumMateri · Praktikum · Kuis
07Pembelajaran & PraktikumMateri · Praktikum · Kuis
08UTSAssessment
09Pembelajaran & ProjectMateri · Praktikum · Kuis
10Pembelajaran & ProjectMateri · Praktikum · Kuis
11Pembelajaran & ProjectMateri · Praktikum · Kuis
12Pembelajaran & ProjectMateri · Praktikum · Kuis
13Pembelajaran & ProjectMateri · Praktikum · Kuis
14Pembelajaran & ProjectMateri · Praktikum · Kuis
15Pembelajaran & ProjectMateri · Praktikum · Kuis
16FINAL PROJECTAssessment
CODING LAB IS THE CORE

Mahasiswa tidak hanya membaca. Mereka langsung membangun.

Setelah materi dan contoh, Coding Lab membuka starter code, instruksi, editor, dan preview. Hasil dapat disimpan sebagai Project atau langsung dikumpulkan.

Starter Code Live Preview Save to Project Submission
index.htmlstyle.cssscript.js Preview
LAB 4.1Membuat Product Card
  1. Tambahkan gambar produk.
  2. Buat judul dan harga.
  3. Gunakan Bootstrap Card.
  4. Buat tombol aksi.
<div class="card">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5>Produk Lokal</h5>
    <p>Rp125.000</p>
    <button class="btn btn-primary">
      Lihat Produk
    </button>
  </div>
</div>
PANDUAN MENGAJAR · PERTEMUAN 04

Bootstrap Layout — 150 menit

15
Pembukaan

Review CSS dan responsive layout.

30
Penjelasan

Container, row, column, breakpoint.

25
Live Demo

Membangun layout bersama mahasiswa.

60
Coding Lab

Mahasiswa mengerjakan Product Card.

20
Review

Diskusi hasil dan kesalahan umum.

Kesalahan umum Pertanyaan diskusi Rubrik
TEACHER GUIDE

Dosen juga dibantu, bukan hanya mahasiswa.

Setiap pertemuan menyediakan alur pengajaran, estimasi waktu, kesalahan umum, pertanyaan diskusi, jawaban latihan, dan rubrik.

Dosen tetap menjadi Instructor + Curator. Materi NgodingLab adalah fondasi, bukan pembatas.

TEACHING MODES

Satu kurikulum, tiga cara mengajar.

Hybrid menjadi default karena memberi ruang belajar mandiri tanpa kehilangan kontrol kelas.

Instructor-led

Dosen menentukan kapan setiap pertemuan dan assessment dibuka.

Self-paced

Mahasiswa maju sesuai kecepatan sendiri setelah menyelesaikan prasyarat.

START FREE

Satu kelas gratis untuk membuktikan manfaatnya.

Materi tidak dipotong. Free tetap dapat mencoba kurikulum lengkap; kapasitas dan fitur monitoring yang membedakan paket.

Lihat Pricing
A
PRODUCT & DEVELOPMENT

NgodingLab dikembangkan oleh Arfadigitech.

Product & Software Development for Education Technology · Dibangun untuk kebutuhan pembelajaran pemrograman di kelas dan kampus Indonesia.

Tentang Pengembang