Portfolio

Belajar web development untuk pemula sering membuat orang ragu. Yayasan HOPE, SkillNation, dan CUAN menjawab keraguan itu lewat sesi Pengembangan Website Dasar pada 26 September 2026. Sesi ini berlangsung di The Wayang Office Plaza dan menarik 30 peserta. Kegiatan tersebut menjadi bagian dari Inisiatif Pendidikan Digital Yayasan HOPE. Mengapa Belajar Web Development untuk Pemula Itu Penting Sesi ini lahir dari survei kesiapan digital di MI YAPPI Tegalweru. Tim survei menemukan banyak keterbatasan. Ruang kelas belum punya komputer, proyektor, jaringan, dan stopkontak yang memadai. Akibatnya, guru terus memakai metode pengajaran konvensional. Yayasan HOPE kemudian menyiapkan beberapa modul pelatihan. Modul itu mencakup pengembangan web, aksesibilitas web (WCAG), literasi digital, optimasi media sosial, keamanan siber, dan dasar kecerdasan buatan. Karena itu, panitia memilih GO DIGITAL! sebagai langkah awal. Panitia menjadikan sesi web development sebagai pintu masuk. Peserta bisa langsung mempraktikkan bekalnya. Selain itu, mereka membangun pemahaman dasar tentang cara kerja internet. Mengenal Website dari Dasar Aditya Putra Wijayanto, sang pemateri, membuka sesi dengan dua sudut pandang. Secara umum, website adalah sistem informasi global yang pengguna akses lewat web browser. Secara teknis, website berupa kumpulan file teks dan media (HTML, CSS, JS) di server. Browser lalu menerjemahkan file itu menjadi tampilan visual. Peserta juga menelusuri sejarah web. Situs web pertama, info.cern.ch, lahir pada 1991. Pada 1993, World Wide Web terbuka untuk semua orang. Setahun kemudian, W3C berdiri. Lalu era Web 2.0 mulai sekitar 2003. Berikutnya, pemateri membedakan website statis dan dinamis. Penulis harus mengedit halaman statis secara manual, dan formatnya biasanya HTML. Sebaliknya, konten website dinamis bisa berubah tanpa mengubah kode. Peserta juga mengenal berbagai jenis website, misalnya blog, e-commerce, web katalog, forum, portal berita, web organisasi, dan company profile. Memilih Domain yang Tepat Peserta kemudian membandingkan ekstensi domain. Ekstensi .com cocok untuk bisnis dan toko online. Sementara itu, .id menyasar audiens di Indonesia, dan .org pas untuk yayasan, komunitas, serta organisasi nirlaba. Sebaliknya, .co.id menuntut KTP dan dokumen perusahaan seperti SIUP atau NIB. Adapun .ac.id meminta SK pendirian dan KTP penanggung jawab. Dengan demikian, yayasan dan komunitas paling mudah memilih .org atau .id, sebab keduanya tanpa verifikasi dokumen khusus. Memahami Alur Client-Server Pemateri menjelaskan alur akses website lewat diagram bertahap. Contohnya, ia memakai tokoku.com. Pertama, pengguna mengetik alamat di browser. Kemudian, browser bertanya ke DNS server, yang berfungsi sebagai buku alamat web. Selanjutnya, DNS membalas dengan alamat IP. Setelah itu, browser mengirim request HTTP atau HTTPS ke web server untuk meminta halaman utama. Server memproses permintaan itu, lalu mengirim response berupa file HTML, CSS, dan JS. Akhirnya, browser merender file tersebut menjadi halaman di layar. Keamanan Internet: Bekal Penting Sebelum Menulis Kode Sesi ini tidak hanya mengajarkan teknik. Pemateri juga menekankan privasi dan keamanan. Pada HTTP, data berjalan tanpa enkripsi, jadi orang mudah mengintipnya di Wi-Fi publik. Ibaratnya, pesan itu melaju lewat kartu pos terbuka. Sebaliknya, HTTPS memakai enkripsi SSL/TLS, sehingga data aman dari penyadapan. Ibaratnya, pesan itu bepergian dalam brankas yang aman. Peserta juga belajar membedakan informasi yang boleh dan tidak boleh mereka bagikan. Mereka boleh membagikan username media sosial (tanpa password), nama lengkap dan instansi, email bisnis, serta portofolio publik. Sebaliknya, jangan pernah bagikan OTP, PIN, password, dan NIK. Rahasiakan juga nomor KK, nama ibu kandung, kode CVV, dan tanggal kedaluwarsa kartu. Pemateri lalu mengajarkan empat kebiasaan refleks saat browsing: Simpan bookmark untuk situs penting seperti bank, kampus, dan email. Dengan begitu, peserta tidak sembarangan mengklik link dari WA atau SMS. Periksa ekstensi file sebelum mengunduh. Waspadai file .exe atau .apk bila peserta mencari PDF. Tolak pop-up push notification dari website baru. Cara ini mencegah spam promo dan link phishing. Kendalikan cookie dengan memilih Reject All, Decline, atau Essential Only, bukan Accept All. Dasar HTML dan CSS untuk Pemula Setelah itu, peserta masuk ke inti sesi. Inilah jantung belajar web development untuk pemula. HTML menjadi kerangka web, sedangkan CSS mempercantik tampilannya. Pemateri memulai dari struktur dasar dokumen: html, head (tempat title), dan body. Lalu ia membedah anatomi elemen, yaitu tag pembuka dan penutup, atribut, property, dan value. Contohnya, tag img memakai atribut src, alt, width, dan height. Peserta kemudian mengenal elemen yang sering muncul. Elemen itu meliputi teks (h1 sampai h6, p), gambar, link, list, tabel, form, div dan span, serta elemen semantik seperti nav, header, main, footer, article, dan section. Mereka juga mencoba iframe, audio, dan video. Pada sisi CSS, peserta belajar sintaks dasar: satu rule terdiri atas selector dan blok property dengan value. Mereka lalu mengatur teks lewat color, font-size, font-weight, text-align, dan line-height. Setelah itu, pemateri menjelaskan box model, yaitu content, padding (jarak di dalam), border, dan margin (jarak di luar). Untuk tata letak, pemateri mengajarkan Flexbox dan Grid. Flexbox mengatur susunan satu arah, seperti navbar. Grid mengatur baris dan kolom, seperti kumpulan card. Akhirnya, peserta mempelajari position relative dan absolute serta media query. Dengan media query, tampilan berubah dari tiga kolom di desktop menjadi satu kolom di mobile. Responsive design penting karena sebagian besar pengguna mengakses web lewat ponsel. Praktik Langsung dan Dampaknya Sesi berakhir dengan praktik membuat halaman web. Peserta menerapkan konsep HTML dan CSS yang mereka pelajari, lalu mengikuti tanya jawab. Dari sesi ini, peserta memahami cara kerja website, dari permintaan browser sampai tampilan halaman. Mereka juga bisa memilih jenis website dan domain yang sesuai. Selain itu, mereka kini lebih waspada terhadap phishing, file berbahaya, dan permintaan data pribadi. Bagi guru, sesi ini membuka langkah awal keluar dari metode pengajaran konvensional. Bagi pemula yang ingin lanjut, panduan belajar web development dari MDN Web Docs menyediakan materi gratis. Peserta bisa memakainya untuk berlatih mandiri di rumah. Tantangan dan Langkah Berikutnya Namun, tantangan tetap ada. Infrastruktur digital sekolah belum memadai, mulai dari komputer, proyektor, jaringan, Wi-Fi, sampai stopkontak. Kondisi ruang kelas yang sempit juga mengganggu kenyamanan praktik. Selain itu, satu sesi sangat singkat untuk topik seluas ini, dan tingkat pengalaman peserta berbeda-beda. Karena itu, laporan kegiatan merekomendasikan beberapa langkah prioritas: Siapkan Ruang Kelas Pembelajaran Digital dengan komputer, proyektor, internet, Wi-Fi, printer, dan stasiun pengisian daya. Perbaiki instalasi listrik dan tambah stopkontak agar perangkat bisa menyala bersamaan. Adakan sesi lanjutan HTML dan CSS, termasuk pengenalan JavaScript, hosting,