Css | Acarya Wibawantra

Modul 1.1: Web Foundations & HTML

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

Modul 1.2: Cascading Style Sheets (CSS)

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

Modul 1.3: Dasar-dasar JavaScript

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

Modul 1.4: Web Foundations Workshop (Study Case)

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