20
25
Web
Development I
Taking Your First Steps in Web
Architecture
Date/Time:
12 December 2025
Presented by:
Nando Abdillah S
i
Table Of
Contents
Setting Up Your Workspace 01
How the Web Works 02
HTML Fundamentals 06
CSS Fundamentals 13
01
Setting Up
Your Environment
Before diving into the code, you need to prepare your
development workspace. We will use Visual Studio Code as
our main tool.
How to Set Up Your Workspace:
[Link] Your Browser: We recommend using the latest
Google Chrome. We will rely heavily on Chrome DevTools
to inspect elements during the session.
[Link] the Code Editor: Download and install the latest
version of Visual Studio Code (VS Code) from the official
website.
[Link] Extensions: Open the Extensions Marketplace in VS
Code (the square icon on the left sidebar) and install these
essential tools:
Live Server: Essential! It auto-refreshes your browser
every time you save a file.
Prettier: Automatically formats your HTML and CSS
code to keep it tidy.
Auto Rename Tag: Updates the closing tag
automatically when you rename the opening tag.
[Link]’re all set up, let’s learn together!
02
How The Web
Works
PART 1: Web Architecture (The
Restaurant Analogy)
Imagine the Internet is a giant restaurant that is open 24 hours
a day.
1. The Client (The Customer)
The Analogy: This is YOU sitting at the table. You are
hungry, but you are strictly forbidden from entering the
kitchen. You can only sit down, look at the menu, and order
what you want.
In the Web World: This is the Browser (Chrome, Edge,
Safari) on your laptop or phone. The browser has one main
job: to ask for data and display data. It does not store all
the websites in the world (your phone would explode if it
did!).
03
2. The Server (The Kitchen & Chef)
The Analogy: This is the closed kitchen area in the back. Inside,
there are master chefs, giant refrigerators, stoves, and
ingredients. The Chef is the one who prepares the meal exactly as
ordered.
In the Web World: This represents the Super Computers (Servers)
owned by companies like Google, Facebook, or Amazon that run
non-stop. This is where the "ingredients" of a website (HTML
files, Images, Videos) are safely stored.
3. The Network / HTTP (The Waiter)
The Analogy: You can't just scream your order into the kitchen,
right? You need a Waiter to take your order ("One burger,
please!") and deliver the food to your table ("Here is your meal,
enjoy!").
In the Web World: This is the Internet Connection (HTTP). It acts
as the bridge or messenger that carries requests from your device
to the Server, and then comes back carrying the data.
PART 2: Web Architecture (The
Restaurant Analogy)
What actually happens when you type [Link] and hit ENTER?
Let's call this the "Food Ordering Cycle”
04
Step 1: The Request (Ordering the Food)
Analogy: You call the waiter and say, "Excuse me, I would like to
order one Spicy Chicken, please!"
Technically: Your Browser (Client) sends a data packet called a
REQUEST to the Server.
"Hello Server, please send me the [Link] file for the home
page!"
Step 2: The Processing (Cooking in the Kitchen)
Analogy: The waiter hands the order slip to the Chef. The Chef
checks the fridge: "Do we have chicken? Do we have spices?" If
yes, the Chef starts frying the chicken and making the sauce.
Technically: The Server receives the request, searches for the
requested file inside its hard drive, and packages it up neatly,
ready to be sent.
Step 3: The Response (The Food Arrives)
Analogy: The waiter brings a hot plate of Spicy Chicken to your
table. "Here you go, enjoy!" And you eat happily.
Technically: The Server sends back a data packet called a
RESPONSE. Your Browser receives this packet, translates the
complex code inside it, and BOOM! The website appears visually
on your screen.
05
PART 3: The "Big Three" Web
Technologies
A website is built using 3 main components. Imagine a website is like a
HUMAN BODY.
1. HTML (Hypertext Markup Language)
Role: The Skeleton & Skull (Structure)
Explanation: HTML is the basic framework. Without a skeleton, a
human is just a pile of jelly on the floor.
Logic: HTML simply says: "This is the head (Header)", "This is the
foot (Footer)", or "This is a hand (Button)."
2. CSS (Cascading Style Sheets)
Role: Skin, Clothes & Makeup (Presentation)
Explanation: Without CSS, our website is boring. CSS makes the
web look aesthetic and beautiful.
Function: It tells the browser: "Make the skeleton's skin tan, put on
a red shirt, and style the hair like a mohawk."
It controls colors, fonts, and layout.
3. JavaScript (JS)
Role: The Brain & Muscles (Behavior)
Explanation: Without JS, our website is like a mannequin statue. It
looks pretty, but it just stands there silently.
Function: JS makes the website come alive.
"If the hand is pinched, scream 'Ouch!'"
06
HTML
Fundamentals
PART 1: Basic Document Structure
Every HTML5 document must follow this standard structure to
be understood by the browser.
The "Must-Have" Components:
[Link] (<!DOCTYPE html>): Tells the browser, "Hey, I
am using modern HTML5!"
[Link] Root (<html>): The container for everything.
[Link] Head (<head>): Information for the machine (Metadata,
Title). Not visible to the user.
[Link] Body (<body>): The main content. Everything the user
sees (Text, Images, Buttons) goes here
Code Snippets :
07
PART 2 : Text Formatting
Tag HTML Fungsi Utama Hasil Visual
<del> Coret Teks (Hapus) Dicoret
<u> / <ins> Garis Bawah Digarisbawah
<i> / <em> Memiringkan Teks Miring (Italic)
<b> / <strong> Menebalkan Teks Tebal (Bold)
<mark> Highlight Teks Stabilo
<sub> Indeks Bawah
<sup> Pangkat Atas
PART 3 : Computer Output Tags
Used to display code or technical text distinctively.
<code>: Defines a piece of computer code.
<kbd>: Defines keyboard input (e.g., Ctrl + C).
<samp>: Defines sample output from a computer program.
<pre>: Preformatted text (Preserves spaces and line breaks
exactly as written)
08
PART 4 : Lists (Organizing Data)
A. Ordered List (<ol>)
Used when sequence matters (1, 2, 3...).
Type "1": Numbers (Default)
Type "A": Uppercase Letters (A, B, C)
Type "a": Lowercase Letters (a, b, c)
Type "I": Roman Numerals (I, II, III)
B. Unordered List (<ul>)
Used when order doesn't matter (Bullet points).
Styles: Disk ( ⚫), Circle (⚪), Square (▪️).
Code Snippet :
09
PART 5 : Tables (Rows & Columns)
A table is a grid of data.
<table>: The container.
<tr> (Table Row): Defines a horizontal row.
<th> (Table Header): Bold and centered cells for titles.
<td> (Table Data): Standard cells for data.
Code Snippet :
PART 6 : Media Integration (Images, Audio, Video)
A. Images (<img>)
This is a void tag (no closing tag).
src: Source path (URL or file location).
alt: Alternative text (if image fails to load).
Code Snippet :
10
B. Audio (<audio>)
Native support for MP3, WAV, and OGG. No plugins needed!
controls: Adds Play/Pause buttons.
Code Snippet :
C. Video (<video>)
Native support for MP4, WebM, and OGG.
width/height: Sets the player size.
Code Snippet :
PART 7 : Hyperlinks (Anchors)
The magic that connects the web.
Tag: <a> with Attribute href: The destination URL.
Code Snippet :
11
PART 8 : Forms (User Input)
Forms allow you to collect data from users.
1. The Container (<form>) Wraps all input elements.
2. The Input (<input>) The most versatile tag.
type="text": Standard text box.
type="password": Hides characters.
type="file": Uploads a file.
name="...": Identity of the data (for the server).
accept="...": Restricts file types (e.g., image/png only).
Code Snippet :
12
HTML
References
This reference contains links to official documentation (MDN Web Docs) and
trusted guides to help you deepen your understanding of every topic discussed in
the HTML5 Fundamentals Module.
1. Anatomy & Basic Structure
Learn about basic tags, semantics, and proper page structure.
MDN - Getting Started with HTML: Open Link
MDN - Document and Website Structure: Open Link
2. Text Formatting
Dive deeper into tags for bolding, italicizing, and other semantic text formatting.
MDN - HTML Text Formatting: Open Link
W3Schools - HTML Formatting: Open Link
3. Lists
How to create nested lists and customize list types.
MDN - Organizing information with Lists: Open Link
CSS-Tricks - Styling Lists (Advanced): Open Link
4. Tables
Creating complex tables (merging cells with rowspan/colspan).
MDN - HTML Table Basics: Open Link
MDN - Advanced Tables (Merging Cells): Open Link
5. Media (Images, Audio, Video)
Supported file formats, video subtitles, and responsive images.
MDN - Images in HTML: Open Link
MDN - Video and Audio Content: Open Link
6. Hyperlinks
Types of links, relative vs. absolute paths, and anchor links (jumping to sections).
MDN - Creating Hyperlinks: Open Link
7. Forms
Deep dive into input validation, new HTML5 input types (email, date, range), and
form accessibility.
MDN - Your First Form: Open Link
MDN - The Native Form Widgets (Input Types): Open Link
13
CSS
Fundamentals
PART 1 : Selectors (Targeting Elements)
Before you style something, you must select it.
A. Basic Selectors
[Link] Selector: Targets all HTML elements of a specific type.
[Link] Selector (.): Reusable styles. Can be used on multiple
elements.
[Link] Selector (#): Unique style. Strict Rule: One ID per page, one
element per ID.
Code Snippet :
Our Website
14
PART 2 : CSS Units (Measurements)
How big is "big"? CSS uses two types of units.
A. Static Units (Fixed)
px (Pixel): The most common unit. 1 dot on the screen.
pt, cm, in: Mostly used for printing, rarely for screens.
B. Relative Units (Flexible)
%: Relative to the parent element.
em: Relative to the current element's font size.
rem: Relative to the root (html) font size. (Best practice for
responsiveness).
vh / vw: Relative to the viewport (screen) height/width
Code Snippet :
Our Website
15
PART 3 :The Box Model
Every element in HTML is a rectangular box. Understanding this is
key to layout.
[Link]: The actual text or image.
[Link]: Space inside the border (Distance between content and
wall).
[Link]: The wall surrounding the padding.
[Link]: Space outside the border (Distance between this box and
others).
Code Snippet :
Our Website
16
PART 4 : Backgrounds & Colors
Adding visual flair to your elements.
Properties:
color: Changes text color.
background-color: Changes background color.
background-image: Sets an image.
background-size: cover (fills area), contain (shows full image).
Code Snippet :
Our Website
17
PART 5 : The Display Property
Controls how an element behaves in the document flow.
block: Takes full width, starts on a new line (e.g., <div>, <h1>).
inline: Takes only necessary width, stays on same line (e.g.,
<span>, <a>).
inline-block: Inline but respects width/height/margin.
none: Hides the element completely (removes from DOM flow).
flex: Activates Flexbox layout (Modern standard).
Code Snippet :
Our Website
18
PART 6 : Positioning
Controls where an element is placed on the screen.
static: Default behavior.
relative: Positioned relative to its normal position (can be nudged
with top/left).
absolute: Positioned relative to the nearest positioned ancestor.
fixed: Stays in the same place even when scrolling (e.g., Navbar).
sticky: Toggles between relative and fixed based on scroll
position.
Code Snippet :
Our Website
19
PART 7 : Pseudo-classes (Interaction)
Styles that apply only in specific states or conditions.
Interactive States:
:hover: When mouse is over the element.
:active: When the element is being clicked.
:visited: When a link has been visited.
Structural States:
:first-child / :last-child: Targets the first/last item.
:nth-child(n): Targets a specific number (or odd/even).
Code Snippet :
Our Website
20
PART 8 : Transistions & Animations
Making things move smoothly.
A. Transitions (Simple)
Smoothly changes a property from State A to State B.
Code Snippet :
B. Animations (Complex)
Uses @keyframes to define multiple steps of movement.
Code Snippet :
21
PART 9 : Responsiveness
Today, more people browse on phones than computers.
Responsiveness ensures your site looks good on all screen sizes.
The Tool: Media Queries (@media)
This allows you to apply different CSS rules depending on the
viewport width.
Logic : "If the screen is smaller than 600px, change the background
to blue."
Code Snippet :
Our Website
22
CSS References
These are the best references to understand the visual concepts and layouting
techniques discussed in the CSS Fundamentals Module.
1. Selectors
How to target specific elements (child elements, adjacent siblings, etc.).
MDN - CSS Selectors: Open Link
CSS-Tricks - The 30 CSS Selectors You Must Memorize: Open Link
2. CSS Units
Understanding when to use px, rem, em, or %.
MDN - CSS Values and Units: Open Link
Kevin Powell (Video) - CSS Units Explained: Open Link
3. The Box Model
Concepts like margin collapsing, box-sizing, and layout debugging.
MDN - The Box Model: Open Link
[Link] - The Box Model: Open Link
4. Backgrounds & Colors
Gradients, opacity, and background image manipulation.
MDN - Backgrounds and Borders: Open Link
CSS Gradient Generator: Open Link
5. Layout (Display: Flexbox)
The most important modern technique for layout structures.
CSS-Tricks - A Complete Guide to Flexbox: Open Link
Flexbox Froggy (Flexbox Learning Game): Open Link
6. Positioning
Understanding absolute, relative, fixed, and sticky in depth.
MDN - Positioning: Open Link
CSS-Tricks - Absolute, Relative, Fixed Positioning: Open Link
7. Pseudo-classes (:hover, etc.)
Creating interactions without JavaScript.
MDN - Pseudo-classes: Open Link
8. Transitions & Animations
Making your website feel smooth and alive.
MDN - Using CSS Transitions: Open Link
MDN - Using CSS Animations: Open Link
Animista (CSS Animation Generator): Open Link
9. Responsiveness (Media Queries)
Making your website mobile-friendly.
MDN - Beginner's Guide to Media Queries: Open Link
[Link] - Responsive Design: Open Link