Halaman ini berisi kumpulan dokumentasi dan modul pembelajaran Web Development untuk para member GDGOC ITS. Modul ini dirancang secara terstruktur dan terpisah tiap bab agar mudah diikuti.
Webdev at ILITS and TEDx ITS 2026
Web Dev Curriculum GDGoC ITS
Pilih modul di bawah ini untuk mulai membaca materi:
1. Introduction How Website Works ? Computers connected to the internet are called clients and servers. A simplified diagram of how they interact might look like this: Clients are the typical web user’s internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome). Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user’s web browser. ...
4. CSS (Cascading Style Sheets) Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. What is CSS? Like HTML, CSS is not a programming language. It’s not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. ...
5. Javascript What is Javascript? JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). There are also more advanced server side versions of JavaScript such as Node.js, which allow you to add more functionality to a website than downloading files (such as realtime collaboration between multiple computers). Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them. ...
Web Foundations Workshop Sebagai penutup modul Web Foundations, kita akan mempraktikkan semua yang telah dipelajari dengan membuat halaman Event Registration sederhana. Live Demo Anda dapat melihat hasil akhir dari proyek ini secara interaktif di sini: 👉 Live Demo: Event Registration Original Source: GITHUB 1. Structure (HTML) File index.html mendefinisikan struktur dan konten halaman. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GDGoC ITS – Event Registration</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header class="site-header"> <h1>GDGoC ITS – Web Foundations Workshop</h1> <p class="tagline"> Learn HTML, CSS, and JavaScript by building a real mini project. </p> </header> <main class="container"> <section class="card"> <h2>About the Event</h2> <p> In this session, we will learn web fundamentals and build a small event registration page using HTML, CSS, and JavaScript. </p> </section> <section class="card"> <h2>Topics Covered</h2> <ul> <li>HTML: basic structure and semantic elements</li> <li>CSS: selectors, layout, and styling</li> <li>JavaScript: DOM, events, functions, and arrays</li> </ul> </section> <section class="card"> <h2>Event Registration</h2> <form id="registration-form" class="form"> <div class="form-group"> <label for="name">Full Name</label> <input id="name" name="name" type="text" placeholder="Enter your name" required /> </div> <div class="form-group"> <label for="email">Email</label> <input id="email" name="email" type="email" placeholder="Enter your email" required /> </div> <div class="form-group"> <label for="level">Experience Level</label> <select id="level" name="level"> <option value="Beginner">Beginner</option> <option value="Intermediate">Intermediate</option> <option value="Advanced">Advanced</option> </select> </div> <div class="form-group form-group-inline"> <label for="join-wa"> <input id="join-wa" name="join-wa" type="checkbox" /> Join WhatsApp group </label> </div> <button type="submit" class="btn-primary"> Register </button> <p id="error-message" class="message error"></p> <p id="success-message" class="message success"></p> </form> </section> <section class="card"> <h2>Registered Participants</h2> <ul id="participants-list" class="participants-list"> <!-- Filled by JavaScript --> </ul> </section> </main> <footer class="site-footer"> <p>Built for GDGoC ITS Web Foundations.</p> </footer> <script src="script.js"></script> </body> </html> 2. Styling (CSS) File style.css memberikan tampilan visual, tata letak, dan responsivitas. ...
Modul 2.1 – Library vs Framework Pada modul ini, kamu akan belajar: Apa itu library di dunia pemrograman (terutama web). Apa itu framework dan apa bedanya dengan library. Contoh-contoh library dan framework yang sering dipakai web developer. Kenapa penting memahami konsep ini sebelum belajar React dan Next.js. 1. Permasalahan di Pengembangan Web Manual Di modul sebelumnya, kita sudah belajar membuat halaman web dengan: HTML untuk struktur. CSS untuk styling. JavaScript untuk interaktivitas. Semua kita tulis secara manual. Cara ini bagus untuk belajar dasar, tapi saat proyek mulai membesar, akan muncul beberapa masalah: ...
Modul 2.2 – Pengenalan React Pada modul ini, kamu akan belajar: Apa itu React dan kenapa React sangat populer di dunia web development. Konsep dasar komponen (component) dalam membangun UI. Gambaran tentang props dan state secara konsep (tanpa masuk terlalu dalam ke detail teknis). Bagaimana React dipakai di project nyata dan hubungannya dengan Next.js. 1. Kenapa Butuh React? Di modul sebelumnya, kita sudah melihat bahwa: HTML dipakai untuk menyusun struktur halaman. CSS untuk styling. JavaScript untuk menambahkan interaktivitas. Kalau aplikasi web yang kita buat masih kecil dan sederhana, cara ini sudah cukup. ...
Modul 2.3 – Next.js Foundations Pada modul ini, kamu akan belajar: Apa itu Next.js dan bagaimana hubungannya dengan React. Perbedaan React saja vs React + Next.js. Gambaran fitur utama Next.js (routing, struktur folder, rendering). Kenapa Next.js banyak dipakai di project web modern. 1. React Saja vs React + Next.js Di modul sebelumnya, kita sudah mengenal React sebagai library untuk membangun UI berbasis komponen. Kalau kita pakai React saja (tanpa Next.js), biasanya: ...
Modul 2.4 – Tailwind CSS Foundations Pada modul ini, kamu akan belajar: Apa itu Tailwind CSS dan pendekatan utility-first yang dibawanya. Perbedaan mendasar antara CSS biasa vs Tailwind. Cara kerja Tailwind di dalam project Next.js. Kenapa Tailwind sangat populer di ekosistem web modern. 1. Permasalahan Styling CSS Biasa di Project Besar Di Modul 1 kita sudah belajar CSS biasa. Cara ini bekerja dengan baik untuk project kecil, tapi saat project membesar: ...