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.
...