★ Platform Resmi Persiapan Sertifikasi BNSP

Kuasai Skema
Junior Web Developer
dengan Percaya Diri

Platform pembelajaran interaktif berbasis Laravel 11 untuk mempersiapkan asesi menghadapi uji kompetensi BNSP Skema J.620100 Junior Web Developer. Materi lengkap, studi kasus nyata, self assessment otomatis, dan admin panel terintegrasi.

Buka Aplikasi Lihat Fitur
JWD Playground
Laravel 11 • PHP 8.3 • PostgreSQL
HTML CSS JS PHP Laravel
6
Unit Kompetensi BNSP
20+
Seksi Materi Belajar
17
Soal Self Assessment
5
Kategori Penilaian
100%
Berbasis Laravel 11
FITUR LENGKAP

Semua yang Kamu Butuhkan
dalam Satu Platform

Dari materi belajar hingga ujian simulasi — semuanya tersedia

Self Assessment
Core Feature

17 soal terstruktur dalam 5 kategori untuk mengukur kesiapan asesi. Hasil instan: 5 level dari Pemula Absolut hingga Siap Sertifikasi BNSP.

  • 17 soal, 5 kategori
  • Skor & level otomatis
  • Rekam mood saat tes
  • Riwayat tersimpan
J.620100.005.02 J.620100.006.01
Materi HTML, CSS & JS
Materi Utama

20+ seksi terstruktur: HTML semantik, CSS Flexbox/Grid, Bootstrap 5, JavaScript ES6+, Array methods, Object, localStorage, Blob API.

  • 20+ seksi interaktif
  • Contoh kode langsung
  • Array & localStorage
  • CSS Animations
J.620100.005.02 J.620100.010.01
Studi Kasus JWD
Live Demo

Demo katalog produk di browser mockup: Navbar Flexbox, Grid Filter, Form Validasi JS, Tabel Order — setiap komponen punya tab Preview/HTML/CSS/JS.

  • Live demo di mockup
  • 4 komponen terpisah
  • Tab Preview/HTML/CSS/JS
  • Array sebagai data store
J.620100.015.01 J.620100.016.01
Sistem Order (CRUD)
Full CRUD

CRUD produk & order nyata dengan PostgreSQL, kalkulasi total, dan 4 visualisasi Chart.js (Bar, Line, Doughnut, Mixed) untuk analitik.

  • CRUD produk & order
  • 4 chart visualisasi
  • Export CSV & Print
  • Aggregate SQL query
J.620100.018.02 J.620100.020.02 J.620100.021.02
Unit Kompetensi BNSP
BNSP Ready

Panduan 6 Unit Kompetensi Skema J.620100 yang relevan untuk implementasi antarmuka web: KUK, elemen kompetensi, kriteria unjuk kerja, dan peta implementasi dalam kode.

  • 6 KUK relevan
  • Elemen & kriteria
  • Mapping ke source code
  • Peta kompetensi FE & BE
J.620100.017.02 J.620100.019.02
Sistem Akses Keycode
Keamanan

Akses menggunakan keycode unik per peserta. Admin kelola keycode dari panel: batas uses, batas records, dan sesi berbasis keycode.

  • Keycode per peserta
  • Batas uses & records
  • Auto-login via keycode
  • Kelola dari admin panel
J.620100.023.02 J.620100.027.02
Admin Panel Superadmin
Admin

Kelola user & approval, generate keycode, pantau hasil self assessment semua peserta, access log, pengaturan app, mail health check, inbox.

  • User management & approval
  • Keycode generator
  • Monitor self assessment
  • Mail health check
J.620100.044.01 J.620100.047.01
Inbox & Feedback
Komunikasi

Notifikasi dua arah user ↔ admin: auto inbox saat akun approved, pesan dari admin, thread feedback. Unread badge real-time di sidebar.

  • Auto notif saat approval
  • Thread feedback dua arah
  • Unread badge real-time
  • Admin broadcast message
J.620100.044.01
Mood Tracker
UX

Pilih mood setelah login — tersimpan per sesi dan dicatat saat mengisi self assessment. Live mood board distribusi semua peserta di navbar admin.

  • Pilih mood per sesi
  • Mood dicatat di assessment
  • Live mood board navbar
  • Analisis distribusi mood
J.620100.006.01

Teknologi Modern & Relevan

Laravel 11
PHP Framework (MVC)
PHP 8.3
Server-side Language
PostgreSQL
Relational Database
Bootstrap 5
CSS Framework
Vite + Tailwind
Build Tool + CSS
Chart.js
Data Visualization
FontAwesome
Icon Library
Composer / npm
Package Manager

Cocok Untuk Siapa?

Calon Asesi
Persiapkan diri menghadapi uji kompetensi BNSP. Self assessment untuk tahu kesiapan, materi untuk mengisi gap, studi kasus untuk latihan praktik.
Asesor & Instruktur
Pantau perkembangan peserta dari admin panel: hasil self assessment, distribusi level, mood, dan kelola keycode akses per individu.
TUK / LSP
Platform siap pakai dengan multi-user keycode, approval workflow, dan activity log. Dapat dikustomisasi sesuai kebutuhan TUK.
BNSP J.620100

6 Unit Kompetensi BNSP yang Relevan

Unit Kompetensi Skema J.620100 yang berkaitan langsung dengan pengembangan antarmuka web

J.620100.005.02 Mengimplementasikan User Interface
J.620100.006.01 Membuat User Experience
J.620100.010.01 Teks, Grafik & Multimedia
J.620100.015.01 Organisasi File & Fungsi
J.620100.016.01 Coding Guidelines & Best Practices
J.620100.047.01 Tools Pendukung Web Dev
Versi 2026v03.06.a

Siap Memulai Perjalanan Menuju Sertifikasi BNSP?

Akses JWD Playground membutuhkan keycode dari asesor atau instruktur. Hubungi penyelenggara program untuk mendapatkan keycode kamu.

Masuk dengan Keycode Admin / Asesor Login