Belajar coding web dari nol: urutan HTML, CSS, JavaScript, lalu TypeScript

Jawaban singkatnya: belajar coding web dari nol sebaiknya dimulai dari HTML, lalu CSS, lalu JavaScript, dan baru setelah itu TypeScript. Urutan ini bukan selera redaksi. Materi belajar resmi MDN menyusun modul intinya dengan urutan yang sama dan mensyaratkan HTML sebelum CSS serta HTML dan CSS dasar sebelum JavaScript, sementara dokumentasi TypeScript menyatakan TypeScript tidak bisa dipelajari tanpa JavaScript. Penilaian redaksi di artikel ini berdasarkan sumber yang dicantumkan di bagian akhir.

Di KelasGratis, keempat tahap itu masing-masing punya kelas gratis dengan editor dan pemeriksa otomatis di browser, jadi kamu tidak perlu memasang apa pun untuk mulai. Bagian di bawah menjelaskan kenapa urutannya begitu, apa isi tiap kelas, target yang bisa kamu uji sendiri, dan kapan alat pendamping seperti Git perlu masuk.

Kenapa urutannya HTML, CSS, JavaScript

MDN menggambarkan tiga teknologi ini sebagai lapisan yang ditumpuk. HTML memberi struktur dan makna pada isi halaman: paragraf, judul, tabel, gambar. CSS berisi aturan gaya yang diterapkan pada isi HTML itu: warna, huruf, dan tata letak. JavaScript adalah lapisan paling atas yang membuat halaman bereaksi, misalnya menjalankan kode saat tombol diklik atau mengubah HTML dan CSS lewat DOM.

Karena setiap lapisan bekerja di atas lapisan di bawahnya, melompat justru memperlambat. Selektor CSS memilih elemen HTML, jadi orang yang belum paham struktur HTML akan kebingungan kenapa gayanya tidak kena. JavaScript di browser paling sering dipakai untuk mencari elemen lalu mengubah teks atau kelas CSS-nya, jadi tanpa dua lapisan pertama, separuh pelajaran JavaScript terasa abstrak.

Peta kelasnya: jumlah pelajaran, latihan, dan menit

Totalnya 65 pelajaran, 178 latihan, dan 787 menit materi, atau sekitar tiga belas jam. Keempat kelas bertingkat Pemula dan setiap modulnya ditutup satu misi yang menggabungkan isi modul itu. Tiga kelas pertama menjadi kelas jalur Web Developer Pemula; TypeScript ada di jalur yang sama sebagai kelas pilihan.

Perkiraan redaksi: dengan setengah jam sehari, materi keempat kelas habis dalam kira-kira empat sampai enam minggu. Angka itu belum termasuk waktu mengulang latihan yang gagal, dan justru bagian mengulang itulah tempat pemahaman terbentuk.

Tahap 1: HTML dan CSS dasar

Kelas pertama dimulai dari heading dan paragraf, lalu kerangka dokumen dengan bagian head, elemen semantik seperti header, nav, main, dan footer, tautan relatif dan absolut, gambar dengan teks alternatif, tabel data, dan formulir berlabel. Modul terakhirnya baru masuk CSS: selektor, warna, huruf, lalu padding, border, dan margin. Semua latihannya berupa editor HTML dan CSS dengan preview terisolasi.

Target yang bisa kamu uji sendiri: dari halaman kosong, tulis satu halaman profil yang punya judul, navigasi, satu tabel, satu formulir dengan label, dan gambar berteks alternatif, tanpa mencontek. Kalau kamu bisa menjelaskan kenapa sebuah bagian dibungkus nav dan bukan div biasa, tahap ini selesai.

Tahap 2: tata letak dan halaman yang rapi di HP

Banyak pemula merasa sudah bisa CSS setelah bisa mengganti warna, lalu macet saat harus menaruh tiga kartu berjajar yang turun jadi satu kolom di layar HP. Kelas CSS Tata Letak mengurus persis itu: model kotak dan box-sizing, satuan px dan rem, Flexbox dengan justify-content dan flex-wrap, Grid dengan repeat, media query dengan pendekatan mobile-first, lalu position sticky dan custom property. Latihannya campuran editor, soal hitung ukuran kotak, dan pilihan ganda.

Target tahap ini: buat baris kartu produk yang berjajar di laptop dan menumpuk di HP hanya dengan satu media query, lalu jelaskan kenapa lebar kotaknya berubah saat box-sizing diganti.

Tahap 3: JavaScript sampai bisa menyentuh halaman

JavaScript adalah tahap terpanjang: 22 pelajaran dalam lima modul. Empat modul pertama sama sekali tidak menyentuh halaman. Isinya variabel dengan let dan const, operator, template literal, fungsi, if dan else, array, objek, perulangan, serta map, filter, dan reduce. Baru modul kelima memakai querySelector, classList, dan addEventListener untuk membuat tombol yang menghitung total. Setiap latihan dijalankan dengan JavaScript sungguhan di browser dan diperiksa dengan test yang terlihat.

Penilaian redaksi: urutan logika dulu, DOM belakangan, membuat awal kelas terasa jauh dari web. Tetapi orang yang langsung menempel kode DOM dari internet biasanya tidak bisa memperbaikinya saat rusak, karena yang rusak hampir selalu logikanya, bukan pemanggilan DOM-nya.

Tahap 4: TypeScript, setelah JavaScript terasa nyaman

Dokumentasi resmi TypeScript menyebut TypeScript sebagai superset JavaScript: sintaks JavaScript sah di TypeScript, dan TypeScript memeriksa program sebelum dijalankan berdasarkan jenis nilainya. Setelah pemeriksaan, tipe dihapus dan yang tersisa adalah JavaScript biasa. Konsekuensinya jelas: semua perilaku program tetap perilaku JavaScript, jadi TypeScript tidak menggantikan tahap 3.

Kelas TypeScript Dasar memang ditulis untuk yang sudah bisa JavaScript dasar. Kompiler berjalan di browser, jadi kode diperiksa tipenya lebih dulu lalu dijalankan terhadap test; latihan dianggap lulus kalau tidak ada error tipe dan semua test lulus. Isinya anotasi tipe, interface dan type alias, Partial dan Pick, union dan literal, penyempitan dengan typeof dan in, unknown dibanding any, sampai fungsi generik sederhana.

• Mulai TypeScript kalau kamu sudah bisa menulis fungsi yang menerima array objek dan mengembalikan ringkasannya tanpa melihat contoh.
• Tunda TypeScript kalau kamu masih sering bingung kapan memakai return atau kenapa sebuah variabel bernilai undefined. Pesan error tipe akan menumpuk di atas kebingungan itu.

Alat pendamping: terminal, Git, dan membaca error

Begitu kodemu keluar dari editor browser, tiga kemampuan lain mulai dipakai setiap hari. Kelas-kelas ini tidak wajib untuk menyelesaikan urutan di atas, tetapi masuk akal diambil di sela tahap 3 dan 4.

Buku resmi Git mendefinisikan version control sebagai sistem yang mencatat perubahan berkas dari waktu ke waktu supaya versi tertentu bisa dipanggil lagi. Untuk pemula web, manfaat praktisnya sederhana: kamu berani mencoba mengubah tata letak karena tahu bisa kembali ke versi yang masih jalan.

Kesalahan pemula yang sering redaksi temui

1. Menghafal daftar tag dan properti CSS. Yang perlu dikuasai adalah cara mencarinya di MDN dan membaca contohnya, bukan hafalan.
2. Memakai div untuk semuanya. Elemen semantik seperti nav dan main memberi makna yang dibaca pembaca layar dan mesin pencari.
3. Mengatur tata letak dengan margin besar dan angka coba-coba. Flexbox dan Grid dibuat untuk tugas itu, dan hasilnya tidak berantakan saat layar menyempit.
4. Loncat ke framework sebelum paham DOM. Framework menyembunyikan querySelector dan addEventListener, jadi saat ada perilaku aneh kamu tidak tahu lapisan mana yang salah.
5. Mengabaikan konsol browser. Pesan error JavaScript menyebut jenis galat dan baris tempat ia muncul; membacanya lebih cepat daripada menebak.

Satu proyek kecil di setiap tahap

Latihan di kelas punya soal yang jelas dan test yang memberi tahu kapan kamu benar. Pekerjaan sungguhan tidak begitu: tidak ada yang menyebut elemen mana yang harus dipakai. Saran redaksi: di akhir setiap tahap, buat satu proyek kecil dari nol yang tidak ada di kelas, dengan topik dari kehidupanmu sendiri.

Proyek sekecil ini sengaja dibatasi supaya selesai dalam satu atau dua akhir pekan. Yang penting bukan besarnya, melainkan kamu mengambil keputusan sendiri, macet, lalu mencari jawabannya di dokumentasi. Saat macet, buka halaman referensi MDN untuk elemen atau properti yang sedang kamu pakai dan baca contohnya sampai habis sebelum mencari potongan kode di tempat lain.

Soal sertifikat dan portofolio

Setelah seluruh pelajaran wajib sebuah kelas selesai dan latihannya lulus, KelasGratis menerbitkan sertifikat penyelesaian gratis dengan kode yang bisa diperiksa di halaman verifikasi. Sertifikat itu bukti bahwa latihan di kelas tersebut dikerjakan dan lulus, bukan akreditasi dan bukan sertifikat kompetensi dari lembaga sertifikasi profesi.

Saran redaksi: untuk pekerjaan web, halaman yang benar-benar bisa dibuka orang lain lebih meyakinkan daripada daftar sertifikat. Simpan setiap misi yang kamu selesaikan ke satu repositori Git, tulis README singkat tentang apa yang kamu pelajari dari misi itu, dan perbarui satu halaman profil pribadi setiap kali kamu menyelesaikan satu tahap.