Web dan App Development

Bootcamp Basic Web Development untuk Website Pertama Anda

Kelas daring bersama mentor untuk Anda yang ingin berhenti menonton tutorial dan mulai menyimpan berkas sendiri. Enam modul berurutan membawa Anda dari tag pertama sampai satu tautan yang bisa dibuka siapa saja.

cyberskill.id
Peserta bootcamp basic web development Cyberskill menyusun halaman HTML dan CSS di layar laptop
DaftarKonsultasi Gratis
  • Program daring 2 minggu bersama mentor
  • Kelas daring lewat Zoom atau Google Meet
  • Akses materi HTML, CSS, dan JavaScript
  • Template siap pakai untuk latihan
  • Review karya oleh mentor
6modul materi
4jenjang kemampuan
1website portofolio tayang

Tentang Program

Kelas Daring untuk Website Pertama Anda

Basic Web Development Bootcamp

Basic Web Development Bootcamp adalah kelas daring Cyberskill selama 2 minggu untuk pemula yang ingin membangun website pertamanya. Materinya menempuh 6 modul berurutan, mulai dari HTML, elemen semantik, CSS, tampilan responsif, JavaScript dasar, sampai website portofolio pribadi. Peserta menulis kode sendiri di sesi live dan menerima review karya dari mentor.

  • Ditujukan untuk siswa SMK jurusan rekayasa perangkat lunak, mahasiswa teknik, pekerja lepas, dan siapa pun yang benar-benar baru menyentuh kode.
  • Materi disusun berurutan supaya Anda memahami alasan tiap baris ditulis sebelum barisnya bertambah rumit.
  • HTML membangun kerangka halaman, CSS mengatur rupanya, JavaScript membuatnya menanggapi klik pengunjung.
  • Setiap perubahan langsung terlihat begitu berkas disimpan dan tab peramban dimuat ulang.
  • Template siap pakai menemani latihan supaya waktu sesi habis untuk memahami, dan tidak untuk mengetik ulang.
  • Tugas akhir berupa website portofolio pribadi yang menjadi bukti kompetensi Anda.
  • Kelas berjalan daring lewat Zoom atau Google Meet, jadi lokasi tempat tinggal Anda tidak menentukan akses.
Materi

Enam Modul, Satu Halaman yang Terus Bertambah

Modul Deskripsi Topik
M1

HTML Dasar

Modul pembuka mengenalkan struktur HTML dan penggunaan tag untuk membangun elemen web dasar seperti teks, gambar, dan tautan. Anda membuat berkas pertama, membukanya di peramban, lalu menambah isi sedikit demi sedikit sambil melihat hasilnya berubah.

Cara peramban membaca berkas dan menampilkannyaKerangka dokumen HTML dan penulisan tagJudul berjenjang, paragraf, dan daftarGambar, teks alternatif, dan tautan antarhalamanKebiasaan indentasi dan penamaan berkas
M2

Elemen dan Semantik

Anda mengenal elemen HTML5 semantik untuk membangun struktur halaman yang rapi dan ramah mesin pencari. Modul ini mengubah halaman latihan Anda dari tumpukan kotak tanpa nama menjadi dokumen yang urutannya terbaca, termasuk oleh pembaca layar.

Elemen header, nav, main, section, article, dan footerUrutan judul yang masuk akal untuk pembaca layarTabel sederhana dan penggunaannya yang tepatFormulir, label, dan jenis isian bawaan HTMLMemeriksa markup dengan alat validasi
M3

CSS Dasar

Modul ini mengatur tampilan website dengan warna, huruf, dan tata letak menggunakan properti dasar CSS. Anda belajar cara memilih elemen yang tepat, mengatur jarak antarbagian, dan menjaga tampilan tetap konsisten dari halaman satu ke halaman berikutnya.

Selector, pewarisan gaya, dan urutan penerapanKotak berlapis, jarak dalam, dan jarak luarWarna, ukuran huruf, dan jarak antarbarisFlexbox untuk menu dan deretan kartuCSS Grid untuk kerangka halaman
M4

Responsive Design

Anda membuat tampilan web yang fleksibel dan nyaman di berbagai ukuran layar menggunakan media query. Latihannya dimulai dari layar ponsel lalu melebar ke desktop, urutan yang menjaga halaman tetap ringan.

Kebiasaan menyusun tampilan dari layar terkecilSatuan lentur seperti persen, rem, dan viewportMedia query dan pemilihan titik putusGambar yang menyesuaikan lebar wadahnyaMenguji halaman di ponsel sendiri
M5

JavaScript Dasar

Modul ini menambahkan interaksi sederhana seperti tombol klik dan validasi formulir dengan logika JavaScript. Anda menulis fungsi pendek, memasangnya ke elemen halaman, lalu menelusuri kesalahan lewat console ketika hasilnya belum sesuai harapan.

Variabel, tipe data, dan operator dasarKondisi, perulangan, dan fungsi pendekMemilih dan mengubah elemen halamanPemasangan event listener pada tombol dan formulirPemeriksaan isian sebelum data terkirim
M6

Portofolio

Modul penutup menggabungkan semua materi menjadi website portofolio pribadi sebagai hasil akhir pembelajaran. Anda menyusun isi, merapikan tampilan, menerbitkannya lewat hosting statis, lalu mempresentasikan keputusan yang Anda ambil kepada mentor.

Sketsa tata letak sebelum kode ditulisMenyusun isi profil dan daftar karyaMengecilkan gambar agar halaman cepat terbukaMenerbitkan berkas ke layanan hosting statisMenceritakan proses pembuatan di depan mentor
Peta Tahap Materi

Satu Jalur, Lima Tahap, Satu Tautan di Ujungnya

Bootcamp ini berjalan sebagai satu jalur yang sama untuk seluruh peserta, karena tujuannya tunggal: website portofolio Anda tayang. Lima tahap berikut adalah tahap materi, dan tiap tahap ditutup satu hal yang bisa diperiksa di layar.

Jalur Website Portofolio Pertama

Pemula

Untuk: Siswa SMK rekayasa perangkat lunak, mahasiswa teknik, pekerja lepas yang ingin menambah layanan, dan pemula yang belum pernah menyentuh kode.

  1. Tahap 1: Kerangka

    • Struktur dokumen HTML
    • Judul, paragraf, gambar, tautan
    • Penamaan berkas dan folder

    Proyek yang dibangunHalaman profil satu layar berisi nama, foto, dan satu paragraf perkenalan.

    Berkas Anda terbuka di peramban dan isinya persis seperti yang Anda tulis.

  2. Tahap 2: Makna

    • Elemen semantik HTML5
    • Urutan judul yang runtut
    • Formulir dan label

    Proyek yang dibangunHalaman profil yang sama disusun ulang memakai header, nav, main, dan footer.

    Alat validasi markup tidak lagi melaporkan kesalahan struktur.

  3. Tahap 3: Rupa

    • Selector dan kotak berlapis
    • Skala huruf dan palet warna
    • Flexbox dan CSS Grid

    Proyek yang dibangunDeretan kartu karya dengan menu di atas dan jarak antarbagian yang seragam.

    Seluruh halaman memakai satu palet warna dan satu skala huruf.

  4. Tahap 4: Layar dan Interaksi

    • Media query dan titik putus
    • Gambar yang menyesuaikan wadah
    • Event listener dan pemeriksaan isian

    Proyek yang dibangunMenu yang berubah bentuk di ponsel dan formulir kontak yang memeriksa isian.

    Halaman dibuka dari ponsel Anda sendiri tanpa teks yang perlu digeser.

  5. Tahap 5: Terbit

    • Pengecilan gambar
    • Perapian struktur folder
    • Penerbitan ke hosting statis

    Proyek yang dibangunWebsite portofolio pribadi yang tayang di alamat publik sebagai tugas akhir.

    Tautan karya Anda dibuka mentor dan diulas bagian demi bagian.

Dibawa ke mana Pembuat halaman web pemula yang karyanya bisa dibuka publik Anda bisa membangun dan memperbarui sendiri halaman profil, halaman acara, atau katalog sederhana milik usaha keluarga. Portofolio pribadiHalaman profil usaha kecilHalaman acara kampusBekal masuk materi framework

Rangkaian pertemuan dan tanggal mulai tiap angkatan dikonfirmasi tim sebelum kelas berjalan.

Teknik Inti Halaman Web

Enam Teknik yang Membuat Halaman Anda Berdiri Rapi

Enam teknik berikut adalah hal yang paling sering menyelamatkan pemula ketika halaman tampil berantakan. Semuanya dilatih di berkas latihan yang sama, diulang di tiap modul, dan diperiksa mentor saat Anda menunjukkan hasilnya.

1

Kerangka semantik sebelum satu gaya dipasang

Anda menyusun halaman memakai elemen yang menyebutkan perannya sendiri: header untuk bagian atas, nav untuk menu, main untuk isi utama, footer untuk bagian bawah. Kebiasaan ini membantu pembaca layar dan mesin pencari mengenali urutan halaman, sekaligus menjaga berkas Anda tetap terbaca ketika isinya bertambah panjang.

2

Kotak berlapis dan ritme jarak yang disengaja

Peramban memperlakukan tiap elemen sebagai kotak berlapis: isi di tengah, jarak dalam di sekelilingnya, garis tepi, lalu jarak luar. Anda berlatih menghitung lapisan itu supaya saat tata letak meleset beberapa piksel, penyebabnya ketemu tanpa menebak.

3

Satu baris fleksibel dan satu papan dua arah

Flexbox merapikan elemen dalam satu baris atau satu kolom, cocok untuk menu dan deretan tombol. CSS Grid menata baris dan kolom sekaligus seperti papan bergaris, cocok untuk kerangka halaman utuh. Anda berlatih memilih di antara keduanya lewat pertanyaan sederhana: apakah yang Anda atur satu arah atau dua arah.

4

Titik putus layar yang diuji di perangkat sendiri

Media query menyalakan sekumpulan aturan gaya hanya pada rentang lebar layar tertentu. Anda menulisnya sambil menyempitkan jendela peramban dan membuka halaman dari ponsel sendiri, sehingga titik putus yang dipilih berasal dari tampilan yang benar-benar sesak, dan tidak disalin begitu saja dari tutorial.

5

Kejadian pengguna diubah menjadi logika

JavaScript menunggu kejadian seperti klik tombol atau pengiriman formulir, lalu menjalankan fungsi yang Anda tulis. Anda merangkai variabel, kondisi, dan fungsi menjadi tombol menu yang membuka dan menutup, tab yang berganti isi, serta pemeriksaan isian yang memberi tahu pengunjung sebelum data terkirim.

6

Menelusuri pesan merah di console

Console adalah bagian panel peramban tempat kesalahan kode dilaporkan beserta nomor barisnya. Anda dilatih membacanya dengan tenang, menyalin potongannya, dan menelusuri penyebabnya berurutan. Kemampuan ini yang membedakan peserta yang macet berjam-jam dari peserta yang selesai dalam beberapa menit.

Urutan Naik Kemampuan
TAG Mengenal tag: menulis kerangka halaman dan menampilkannya di peramban
GAYA Mengatur gaya: warna, huruf, jarak, dan tata letak yang konsisten
RESP Menyesuaikan layar: satu halaman yang nyaman dibaca di ponsel dan desktop
TERBIT Menerbitkan karya: alamat web yang hidup dan siap dikirim ke siapa pun
Tiap anak tangga diperiksa lewat satu hal yang bisa Anda tunjukkan di layar, dan tidak lewat rasa sudah paham.
Jenjang

Empat Jenjang Kemampuan di Bootcamp Ini

Jenjang berikut memetakan pekerjaan yang sanggup Anda selesaikan tanpa bantuan di ujung tiap tahap. Peserta masuk dari titik berbeda, dan mentor menyesuaikan porsi latihan supaya tidak ada yang tertinggal di tahap kerangka.

  1. Pengenal Tag

    Halaman pertama yang tampil di peramban sendiri belum pernah menulis kode

    Jenjang pembuka untuk peserta yang baru pertama membuka editor kode. Fokusnya membuat Anda nyaman menyimpan berkas, memuat ulang tab, dan melihat tulisan sendiri muncul di layar.

    Menyiapkan editor kode dan folder proyekMenulis kerangka dokumen HTML dari awalMenyusun judul, paragraf, gambar, dan tautanMembuka berkas lokal di perambanMembaca kesalahan penulisan tag yang paling umum
    Membuat halaman profil sederhana tanpa contoh di depan mataMenjelaskan beda antara isi halaman dan tampilan halamanMenyimpan pekerjaan dengan penamaan berkas yang rapi

  2. Penata Tampilan

    Halaman yang enak dilihat dan konsisten sudah bisa menulis HTML dasar

    Jenjang ini memindahkan perhatian dari isi ke rupa. Anda mengatur warna, huruf, dan jarak sampai halaman terasa disengaja. Di sini pula Anda mulai memakai Flexbox dan CSS Grid untuk menata bagian halaman tanpa mendorongnya dengan cara yang rapuh.

    Selector CSS dan urutan penerapan gayaKotak berlapis, jarak dalam, dan jarak luarSkala huruf dan pasangan warna yang terbacaFlexbox untuk menu dan deretan kartuCSS Grid untuk kerangka halaman utuh
    Menyusun deretan kartu karya yang sejajar rapiMenjaga satu palet warna di seluruh halamanMemperbaiki tata letak yang meleset tanpa menebak

  3. Penjaga Layar

    Satu halaman yang nyaman di ponsel dan desktop sudah menguasai tata letak dasar

    Jenjang ini menguji halaman Anda di lebar yang berbeda. Anda memilih titik putus berdasarkan tampilan yang benar-benar sesak, merapikan gambar agar tidak melebihi wadahnya, dan memastikan tombol tetap cukup besar untuk ditekan jempol.

    Kebiasaan menyusun dari layar terkecilSatuan lentur dan lebar maksimum wadahMedia query dan pemilihan titik putusGambar dan media yang menyesuaikan wadahPengujian di ponsel dan panel peramban
    Membuka halaman sendiri dari ponsel dan memperbaikinya di tempatMenjaga teks tetap terbaca tanpa perlu digeser ke sampingMenyusun menu yang berubah bentuk di layar sempit

  4. Penerbit Karya

    Tautan publik yang bisa dinilai orang lain sudah punya halaman yang siap dirapikan

    Jenjang penutup mengubah folder di laptop Anda menjadi alamat yang bisa dibuka siapa pun. Anda menambahkan interaksi JavaScript secukupnya, mengecilkan gambar, menerbitkan berkas, lalu menyiapkan cerita singkat tentang keputusan yang Anda ambil di tiap bagian.

    Interaksi JavaScript pada menu dan formulirPemeriksaan isian sebelum data terkirimPerapian struktur folder dan nama berkasPenerbitan ke layanan hosting statisPenyusunan cerita proses untuk calon klien
    Mengirim tautan karya lewat pesan singkat dan yakin halamannya terbukaMemperbarui isi halaman lalu menerbitkan ulang tanpa bantuanMenjawab pertanyaan tentang alasan di balik tiap keputusan tampilan
Metode

Empat Tahap dari Berkas Kosong ke Tautan yang Bisa Dibuka

Web punya satu keunggulan yang jarang dimiliki keterampilan lain: hasil kerja Anda muncul di layar detik itu juga. Empat tahap berikut memanfaatkan umpan balik cepat tersebut agar Anda belajar dari halaman yang tampil melenceng, lalu memperbaikinya sendiri.

1

Eksplorasi

Sesi pembuka membedah dua atau tiga situs yang Anda sukai lewat panel peramban, lalu memetakan bagian mana yang HTML, mana yang CSS, dan mana yang JavaScript. Anda juga memilih tema website portofolio yang akan dibangun sampai akhir kelas.

2

Fundamental

Anda menulis tag, memberi gaya, lalu menyimpan dan memuat ulang tab untuk melihat akibatnya. Tiap konsep dipasang di halaman yang sama, sehingga berkas latihan Anda tumbuh sedikit demi sedikit dan tidak pernah dimulai dari nol lagi.

3

Project Build

Potongan latihan disatukan menjadi bagian utuh: kepala halaman dengan menu, bagian sambutan, deretan kartu karya, dan formulir kontak yang memeriksa isian sebelum dikirim. Mentor mengulas struktur folder dan penamaan berkas Anda di tahap ini.

4

Portfolio

Halaman dirapikan, gambarnya dikecilkan supaya cepat terbuka, lalu diterbitkan ke layanan hosting statis. Anda mendapat tautan yang bisa dikirim lewat pesan singkat, dibuka dari ponsel siapa pun, dan dipasang di profil LinkedIn Anda.

Rujukan Terbuka Web

Materi Bersandar pada Spesifikasi Web yang Terbuka

Web dibangun di atas spesifikasi terbuka yang bisa dibaca siapa pun tanpa membayar. Materi bootcamp ini mengacu ke sumber tersebut supaya kebiasaan yang Anda bawa pulang tetap sahih ketika versi peramban berganti.

WHATWG

HTML Living Standard

Rujukan resmi daftar elemen HTML beserta arti dan aturan pemakaiannya, dipakai saat memilih tag yang tepat.

W3C

Spesifikasi CSS

Sumber aturan tata letak, satuan ukuran, dan media query yang menjadi dasar pembahasan tampilan responsif.

Mozilla

MDN Web Docs

Dokumentasi harian untuk HTML, CSS, dan JavaScript. Anda dilatih membacanya sendiri sejak modul awal.

W3C

Panduan Aksesibilitas WCAG

Acuan kontras warna, teks alternatif gambar, dan urutan navigasi papan ketik yang dipakai saat merapikan halaman.

Cyberskill mengajarkan cara membaca rujukan ini. Penerbitnya berdiri sendiri dan tidak berafiliasi dengan program ini.

Keunggulan

Alasan Peserta Memilih Bootcamp Ini untuk Memulai

Alasan Cyberskill unggul untuk pelatihan IT dan digital di Indonesia dibanding kelas rekaman massal, bootcamp generik, atau tutorial YouTube gratis.

Keunggulan 1

Materi berurutan, jadi tidak ada lompatan yang membingungkan

Keluhan paling sering dari belajar sendiri adalah materi yang tidak berurutan. Di sini HTML dituntaskan lebih dulu, CSS menyusul di atas halaman yang sudah ada, JavaScript menutup dengan menghidupkan halaman itu. Anda selalu tahu bagian mana yang sedang dikerjakan dan mengapa bagian itu datang sekarang.

Keunggulan 2

Ada mentor yang membaca kode Anda

Video tutorial tidak bisa melihat berkas Anda. Mentor bisa. Ketika halaman tampil melenceng, Anda menunjukkan layar dan penyebabnya ditelusuri bersama sampai ketemu. Umpan balik seperti ini yang memangkas jam macet yang biasanya membuat pemula berhenti di tengah jalan.

Keunggulan 3

Satu berkas latihan yang tumbuh sampai akhir

Latihan tiap modul menempel di halaman yang sama, jadi Anda tidak pernah memulai proyek baru dari folder kosong. Di modul penutup, halaman itu sudah berisi hampir seluruh bagian portofolio Anda dan tinggal dirapikan sebelum diterbitkan.

Keunggulan 4

Template siap pakai untuk menghemat waktu sesi

Peserta menerima template siap pakai sebagai titik berangkat latihan. Waktu sesi live jadi habis untuk memahami keputusan di balik tiap baris, dan tidak untuk mengetik ulang isi yang sudah jelas. Anda tetap menulis bagian intinya sendiri supaya kemampuannya benar-benar menempel.

Keunggulan 5

Kelas daring yang menjangkau kota besar dan kota kecil

Seluruh sesi berjalan lewat Zoom atau Google Meet, ditambah akses ke materi HTML, CSS, dan JavaScript. Peserta dari kota kecil mendapat mentor dan bahan yang sama dengan peserta di kota besar.

Keunggulan 6

Berakhir di karya yang bisa dibuka orang lain

Tugas akhir bootcamp ini wajib: satu website portofolio pribadi sebagai bukti kompetensi. Mentor mengulas hasilnya bagian demi bagian, dari kerapian kode sampai kenyamanan dibaca di ponsel, sehingga yang Anda bawa pulang berbentuk tautan yang bisa dinilai orang lain.

Empat Jalan ke Halaman Pertama

Empat Cara Menuju Website Pertama, Ditimbang Jujur

Menulis kode bisa dipelajari lewat banyak jalan, dan tiap jalan menagih harga yang berbeda: ada yang menagih uang, ada yang menagih waktu, ada yang menagih ketekunan menembus rasa buntu sendirian. Timbangan di bawah memakai satu pertanyaan yang paling terasa buat pemula, yaitu siapa yang membantu ketika halaman Anda tampil melenceng dari contoh.

Cyberskill

Bootcamp Cyberskill

  • Urutan materi Enam modul berurutan, HTML sampai penerbitan
  • Ketika halaman tampil melenceng Layar Anda dibaca mentor di sesi live
  • Bentuk hasil akhir Website portofolio pribadi yang tayang publik
  • Beban waktu Sesi live terjadwal ditambah latihan mandiri
  • Titik masuk untuk yang belum pernah koding Dirancang dari nol, tanpa syarat pengalaman
  • Biaya dan jangkauan Kelas daring berbayar, bisa diikuti dari mana saja
Alternatif

Tutorial gratis di YouTube

  • Urutan materi Ditentukan rekomendasi kanal, sering tumpang tindih
  • Ketika halaman tampil melenceng Menebak sendiri dari kolom komentar
  • Bentuk hasil akhir Halaman tiruan yang mirip milik pembuat video
  • Beban waktu Sepenuhnya bebas, karena itu mudah tertunda
  • Titik masuk untuk yang belum pernah koding Perlu menyaring sendiri mana yang untuk pemula
  • Biaya dan jangkauan Tanpa biaya, tanpa pendamping
Alternatif

Kelas rekaman massal

  • Urutan materi Sudah tersusun, jarang menyesuaikan peserta
  • Ketika halaman tampil melenceng Bertanya di forum, jawabannya menunggu
  • Bentuk hasil akhir Tugas seragam sekelas
  • Beban waktu Mengikuti tempo sendiri sampai kehilangan ritme
  • Titik masuk untuk yang belum pernah koding Menganggap dasar peserta sudah seragam
  • Biaya dan jangkauan Berbayar terjangkau, isi seragam untuk semua
Alternatif

Bootcamp fullstack intensif

  • Urutan materi Padat dan cepat, menuntut fondasi lebih dulu
  • Ketika halaman tampil melenceng Ada asisten, antre bergantung ukuran angkatan
  • Bentuk hasil akhir Proyek besar berkelompok
  • Beban waktu Menuntut komitmen harian yang besar
  • Titik masuk untuk yang belum pernah koding Lebih nyaman bagi yang sudah punya bekal
  • Biaya dan jangkauan Biaya besar dengan durasi panjang
Ruang Mencoba Dulu

Tiga Hal yang Bisa Anda Tagih ke Kami

Janji kami menyangkut proses, dan proses itu bisa Anda tagih. Keputusan pemberi kerja dan arah karier setelah kelas berada di luar kendali kami, jadi tidak ada yang kami janjikan di sana.

Jaminan 1

Tanya sepuasnya sebelum memutuskan ikut

Sebelum mengambil kursi, Anda bisa mengobrol dengan tim untuk memeriksa kecocokan bootcamp ini dengan bekal dan target Anda. Kalau ternyata program lain lebih pas, kami katakan apa adanya.

Jaminan 2

Mentor bisa disesuaikan bila cara menjelaskannya kurang nyambung

Gaya menerangkan yang cocok berbeda untuk tiap orang. Bila penjelasan terasa terlalu cepat atau terlalu berjarak, beri tahu kami, lalu pasangan mentor Anda diatur ulang.

Jaminan 3

Karya Anda diulas bagian demi bagian

Website portofolio Anda mendapat review dari mentor: kerapian kode, konsistensi tampilan, dan kenyamanan dibaca di layar sempit. Catatan itu diberikan dalam bentuk yang bisa langsung Anda kerjakan.

Tanya Dulu Lewat WhatsApp
Kesiapan Anda

Menyiapkan Editor, Peramban, dan Waktu Latihan

Persiapan kecil di awal membuat sesi pertama terasa ringan. Periksa tiga hal berikut sebelum Anda memilih jadwal batch, lalu sampaikan saat konsultasi bila ada butir yang belum terpenuhi.

  1. Titik Periksa1

    Perangkat dan ruang kerja

    • Laptop dengan RAM 4 GB ke atas yang lancar menjalankan editor kode dan peramban secara bersamaan.
    • Peramban modern seperti Chrome atau Firefox yang selalu diperbarui, karena panelnya menjadi alat harian Anda.
    • Koneksi internet stabil untuk sesi daring, mengunduh aset gambar, dan menerbitkan proyek ke hosting.
    • Layar yang cukup lebar atau monitor tambahan, supaya kode dan hasil tampilan bisa dilihat berdampingan.
  2. Titik Periksa2

    Bekal awal yang cukup

    • Terbiasa mengetik, mengelola folder, dan memasang aplikasi di komputer sendiri.
    • Sanggup membaca teks Inggris teknis sederhana, karena pesan kesalahan dan dokumentasi umumnya berbahasa Inggris.
    • Bersedia membaca pesan kesalahan dengan tenang lalu menelusurinya baris demi baris bersama mentor.
    • Punya gambaran situs yang ingin dibuat, misalnya profil pribadi, katalog produk UMKM, atau halaman acara.
  3. Titik Periksa3

    Waktu dan ritme batch

    • Sisihkan jam tetap untuk mengikuti sesi cohort sesuai jadwal batch yang Anda pilih.
    • Siapkan tambahan tiga sampai lima jam per pekan untuk latihan mandiri di luar sesi.
    • Pastikan tenggat proyek batch berjarak aman dari puncak kesibukan kantor atau pekan ujian kampus.
    • Kabari mentor lebih awal bila ada pekan padat, agar tempo materi disesuaikan sejak jauh hari.
Kosakata Harian di Kelas

Istilah yang Terdengar Tiap Kali Anda Menyimpan Berkas

Tiga belas istilah berikut muncul berulang di sesi live dan di dalam berkas Anda sendiri. Penjelasannya memakai bahasa percakapan, disusul contoh momen kerja saat istilah itu benar-benar terpakai.

Peramban

Program yang membaca berkas HTML, CSS, dan JavaScript lalu menggambarnya menjadi halaman, misalnya Chrome, Firefox, dan Safari. Di kelas ini peramban berperan sebagai penilai pertama: apa pun yang Anda tulis, kebenarannya terlihat begitu tab dimuat ulang.

HTML semantik

Menulis halaman memakai elemen yang menjelaskan perannya sendiri, seperti header, nav, main, dan footer. Anda memakainya sejak modul kedua supaya pembaca layar dan mesin pencari mengenali bagian halaman tanpa menebak dari nama kelas.

Kotak berlapis

Cara peramban menghitung ukuran tiap elemen sebagai kotak bertingkat: isi, jarak dalam, garis tepi, lalu jarak luar. Istilah aslinya box model, dan pemahamannya terpakai saat Anda mencari lapisan mana yang menambah lebar.

Flexbox

Aturan CSS untuk merapikan elemen dalam satu baris atau satu kolom, lengkap dengan pengaturan jarak dan perataan. Anda memakainya di menu navigasi, deretan kartu karya, dan tombol yang harus tetap sejajar pada layar sempit.

CSS Grid

Aturan CSS yang menata halaman dalam baris dan kolom sekaligus, mirip papan bergaris. Terpakai saat Anda merancang kerangka halaman utuh, misalnya kolom menu di kiri dengan area isi lebar di kanan.

Media query

Perintah CSS yang menyalakan sekumpulan gaya hanya pada rentang lebar layar tertentu. Anda menulisnya ketika tampilan desktop terasa sesak di ponsel, sehingga ukuran huruf dan jumlah kolom ikut menyesuaikan.

Titik putus

Lebar layar tempat tampilan berganti susunan, misalnya dari satu kolom menjadi tiga kolom. Istilah aslinya breakpoint. Di kelas ini Anda memilihnya dengan menyempitkan jendela sampai tampilan mulai terasa sesak, lalu menandai lebar itu.

Variabel CSS

Nilai yang disimpan sekali lalu dipanggil di banyak tempat, misalnya warna utama atau jarak baku antarbagian. Berguna saat Anda ingin mengganti warna seluruh halaman: satu baris diubah, seluruh bagian ikut menyesuaikan dalam sekali simpan.

DOM

Singkatan Document Object Model, peta seluruh elemen halaman yang disimpan peramban di memori. JavaScript membaca dan mengubah peta ini, jadi istilahnya muncul tiap kali Anda menambah kelas, mengganti teks, atau menyembunyikan satu bagian.

Event listener

Potongan JavaScript yang menunggu satu kejadian, misalnya klik tombol atau pengiriman formulir, lalu menjalankan fungsi. Anda memasangnya ketika membuat menu ponsel yang bisa dibuka dan ditutup, serta tab yang berganti isi.

Console

Bagian panel peramban tempat pesan kesalahan JavaScript dilaporkan beserta nomor barisnya. Anda membukanya tiap kali tombol tidak bereaksi, membaca pesannya pelan-pelan, lalu menelusuri berkas dan baris yang disebutkan di sana.

Validasi sisi klien

Pemeriksaan isian formulir yang berjalan di peramban pengunjung sebelum data terkirim. Anda menulisnya agar pengunjung langsung tahu format surel yang keliru pada detik yang sama, sementara pemeriksaan di sisi server tetap dibutuhkan demi keamanan data.

Hosting statis

Layanan yang menyimpan berkas HTML, CSS, dan JavaScript lalu menyajikannya lewat alamat web publik. Anda memakainya di modul penutup supaya proyek terbuka lewat tautan yang bisa dibagikan ke calon klien atau pewawancara kerja.

Yang Anda Bawa Pulang

Kemampuan yang Bisa Ditunjukkan di Layar

Empat angka berikut punya satu sumber saja, yaitu isi halaman ini. Tidak ada yang perlu Anda percayai begitu saja, karena semuanya bisa dicocokkan dengan daftar modul, jenjang, dan tahap di atas.

6 modul materi HTML dasar sampai portofolio yang diterbitkan
4 jenjang kemampuan Pengenal tag, penata tampilan, penjaga layar, penerbit karya
5 tahap jalur belajar Kerangka, makna, rupa, layar dan interaksi, terbit
1 website portofolio Tugas akhir wajib sebagai bukti kompetensi

Keputusan penerimaan kerja ada di pemberi kerja. Yang bootcamp ini kerjakan adalah menaikkan kemampuan Anda dari titik hari ini.

FAQ

Yang Paling Sering Ditanyakan Sebelum Ambil Kursi

Pengalaman koding saya nol besar. Apakah tetap boleh mendaftar?
Boleh, dan justru untuk itulah bootcamp ini dirancang. Peserta tanpa latar belakang koding adalah sasaran utamanya. Materi dimulai dari cara peramban membaca sebuah berkas, dilanjutkan panduan langkah demi langkah, lalu praktik langsung membangun halaman. Yang Anda butuhkan cukup komitmen mengikuti seluruh sesi dan kesediaan mencoba ulang ketika hasil pertama belum sesuai harapan.
Spesifikasi laptop saya pas-pasan. Apakah masih memadai untuk kelas ini?
Untuk materi dasar web, laptop yang lancar menjalankan peramban modern dan satu editor kode secara bersamaan sudah memadai. Anda tidak memerlukan kartu grafis khusus atau prosesor kelas atas, karena berkas yang dikerjakan berukuran kecil. Yang lebih menentukan adalah koneksi internet yang stabil untuk sesi live. Kalau Anda ragu dengan perangkat yang ada, sebutkan spesifikasinya saat mengobrol dengan tim supaya bisa dicek lebih dulu.
Bootcamp ini berjalan daring atau tatap muka?
Bootcamp Basic Web Development berjalan dalam format daring dan bisa diikuti dari mana saja. Sesi live berlangsung lewat Zoom atau Google Meet bersama mentor, ditambah akses ke materi HTML, CSS, dan JavaScript yang bisa Anda buka kembali di luar jam kelas. Peserta dari kota kecil mendapat pendampingan yang sama dengan peserta di kota besar, tanpa ongkos perjalanan.
Kapan angkatan berikutnya dibuka dan bagaimana jadwalnya diatur?
Satu angkatan bootcamp ini berjalan selama 2 minggu. Tanggal angkatan terbaru diumumkan per batch di laman bootcamp ini dan di akun Instagram resmi Cyberskill. Anda juga bisa menitipkan minat lebih dulu supaya menjadi yang pertama dihubungi begitu kelas berikutnya dibuka. Rincian pertemuan beserta jam mulainya dikirimkan tim lewat briefing sebelum sesi pertama berjalan, sehingga Anda punya waktu menyesuaikan agenda kuliah atau pekerjaan sebelum kelas benar-benar dimulai.
Saya kuliah dan bekerja. Apakah bootcamp ini masih terkejar?
Mayoritas peserta Cyberskill memang mahasiswa dan karyawan, jadi jadwal bootcamp disusun agar tetap bisa diikuti di luar jam kuliah dan jam kantor. Yang perlu Anda siapkan adalah waktu latihan mandiri di luar sesi live, karena keterampilan menulis kode tumbuh dari pengulangan. Menyisihkan beberapa jam per pekan biasanya cukup untuk menjaga ritme. Kabari mentor lebih awal bila ada pekan yang padat supaya tempo materi bisa disesuaikan.
Apa yang saya bawa pulang setelah kelas selesai?
Hasil utamanya adalah website portofolio pribadi yang tayang di alamat publik dan bisa dibuka dari ponsel siapa pun. Anda juga membawa akses ke materi HTML, CSS, dan JavaScript, template siap pakai yang dipakai selama latihan, serta catatan review dari mentor. Yang paling berumur panjang biasanya kebiasaan kerjanya: menyusun kerangka dulu, menguji di ponsel, dan membaca pesan kesalahan dengan tenang.
Apa bedanya dengan menonton tutorial gratis yang jumlahnya melimpah?
Tutorial gratis berguna sebagai bahan tambahan, dan banyak peserta tetap memakainya setelah kelas usai. Perbedaannya ada pada dua hal. Pertama, urutan materi sudah ditetapkan sehingga Anda tidak menghabiskan waktu memilih harus mulai dari mana. Kedua, ada mentor yang membaca berkas Anda ketika halaman tampil melenceng, sesuatu yang tidak bisa dilakukan video. Kombinasi itu memangkas jam macet yang paling sering membuat pemula berhenti di tengah jalan.
Saya siswa SMK rekayasa perangkat lunak dan sudah pernah menyentuh HTML. Masih ada gunanya?
Masih, terutama pada bagian yang biasanya terlewat di pelajaran sekolah. Banyak peserta dengan bekal serupa sudah bisa menulis tag, tetapi belum terbiasa memilih elemen semantik yang tepat, menyusun tampilan responsif dari layar terkecil, atau menerbitkan karya ke alamat publik. Ketiga hal itu mendapat porsi khusus di sini. Sampaikan bekal Anda saat mengobrol dengan tim supaya mentor bisa memberi latihan tambahan pada bagian yang sudah Anda kuasai.
Apakah lulusan bootcamp ini dipastikan diterima kerja sebagai web developer?
Tidak ada janji seperti itu dari kami, dan sebaiknya Anda meragukan lembaga mana pun yang menjanjikannya. Keputusan penerimaan kerja ada di tangan pemberi kerja. Yang bootcamp ini kerjakan adalah menaikkan kemampuan Anda dari titik hari ini lewat enam modul, satu karya yang tayang, dan kebiasaan kerja yang menempel. Banyak peserta melanjutkan ke materi framework, mengerjakan halaman untuk usaha keluarga, atau menawarkan jasa pembuatan halaman sederhana.
Urutan Mendaftar

Dari Pesan Pertama Sampai Briefing Angkatan

Empat langkah berikut mengikuti alur pendaftaran yang berlaku di bootcamp Cyberskill. Anda bisa berhenti di langkah mana pun kalau merasa program ini belum cocok.

1

Kirim pesan atau isi formulir

Ceritakan bekal Anda sekarang beserta gambaran halaman yang Anda incar. Tim membantu memeriksa apakah bootcamp Basic Web Development memang jalur yang paling masuk akal untuk target itu.

2

Tunggu konfirmasi tim

Tim mengabari ketersediaan kursi pada angkatan terdekat beserta rincian yang perlu Anda ketahui sebelum memutuskan. Di tahap ini Anda masih bebas bertanya apa pun tentang materi dan cara kelas berjalan.

3

Selesaikan administrasi

Setelah Anda mantap, kursi dikunci lewat proses administrasi yang dipandu tim. Bukti penyelesaiannya menjadi penanda bahwa nama Anda masuk daftar peserta angkatan tersebut.

4

Terima jadwal dan briefing

Sebelum kelas berjalan, Anda menerima jadwal beserta briefing berisi persiapan editor kode dan tautan sesi. Sesi pertama dimulai dari berkas kosong, jadi tidak ada yang perlu Anda kuasai lebih dulu.

Chat WhatsApp Sekarang
Selanjutnya

Program Terkait

Web DevelopmentBangun website dari HTML, CSS, dan JavaScript sampai siap tayang di domain sendiri.CodingFondasi logika pemrograman, struktur data dasar, dan kebiasaan menulis kode yang rapi.PythonKuasai Python dari sintaks dasar sampai skrip otomasi dan pengolahan data harian.Build Your First Portofolio Website BootcampMobile App Development BootcampBangun aplikasi mobile pertama Anda dari rancangan layar sampai build yang bisa dipasang.Python For BeginnerLangkah pertama Python untuk pemula: variabel, perulangan, fungsi, dan proyek kecil.

Website Pertama Anda Menunggu Satu Berkas Kosong

Ceritakan halaman seperti apa yang ingin Anda bangun, dan tim membantu memeriksa apakah angkatan terdekat cocok dengan waktu Anda. Satu pesan singkat sudah cukup untuk memulai.

Konsultasi Gratis via WhatsApp

Tiap angkatan dibuka dengan kursi terbatas agar mentor sempat mengulas karya setiap peserta.