Tools needed: a text editor (VS Code — free) and any web browser. Create a file called
index.html, open it in a browser, and refresh after every change to see results instantly.Chapter 1 — What is HTML?
HTML (HyperText Markup Language) is the skeleton of every webpage. It tells the browser what content exists and what type it is — headings, paragraphs, images, links, forms. It is NOT a programming language — it's a markup language.
How the web works: Browser requests a URL → server sends HTML → browser reads it and displays it on screen.
Chapter 2 — HTML Structure
<!-- Every HTML file starts with this exact structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My First Page</title>
<!-- CSS goes here or links to a .css file -->
</head>
<body>
<!-- All visible content goes inside body -->
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
<!-- Tags explanation:
<!DOCTYPE html> → tells browser this is HTML5
<html> → root element (wraps everything)
<head> → metadata (not visible on page)
<body> → visible content (what users see)
-->Chapter 3 — Text Elements
<!-- Headings (h1 = biggest, h6 = smallest) -->
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Sub</h3>
<h4>Even Smaller</h4>
<!-- Paragraphs -->
<p>This is a paragraph of text. It can be as long as you want.</p>
<p>This is a second paragraph. Each <p> starts on a new line.</p>
<!-- Text formatting -->
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined</u>
<mark>Highlighted</mark>
<del>Strikethrough</del>
<code>Inline code</code>
<!-- Line break and horizontal rule -->
<br/> <!-- line break -->
<hr/> <!-- horizontal dividing line -->
<!-- Block quote -->
<blockquote>"The best way to learn is to do."</blockquote>
<!-- Preformatted text (preserves spaces/newlines) -->
<pre>
def hello():
print("Hello!")
</pre>Chapter 4 — Links & Images
<!-- Links: <a href="URL">text</a> -->
<a href="https://google.com">Visit Google</a>
<a href="about.html">About page</a> <!-- link to local file -->
<a href="#section1">Jump to section</a> <!-- link to same page -->
<a href="https://google.com" target="_blank">Open in new tab</a>
<!-- Images: <img src="path" alt="description"/> -->
<img src="photo.jpg" alt="A sunset"/>
<img src="https://example.com/logo.png" alt="Logo" width="200"/>
<!-- alt = text shown if image fails to load (also for screen readers) -->
<!-- Image as a link: -->
<a href="https://kalirange.com">
<img src="logo.png" alt="KaliRange"/>
</a>
<!-- Email link: -->
<a href="mailto:hello@kalirange.com">Email us</a>Chapter 5 — Lists & Tables
<!-- Unordered list (bullet points) -->
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>HTML</li>
</ul>
<!-- Ordered list (numbered) -->
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
<!-- Nested list -->
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
</ul>
<!-- Table -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Paris</td>
</tr>
</tbody>
</table>Chapter 6 — Forms
<!-- Forms collect user input -->
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"/>
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required/>
<!-- Password -->
<input type="password" name="password" placeholder="Password"/>
<!-- Number -->
<input type="number" name="age" min="1" max="120"/>
<!-- Dropdown -->
<select name="country">
<option value="pk">Pakistan</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Radio buttons -->
<input type="radio" name="gender" value="male"/> Male
<input type="radio" name="gender" value="female"/> Female
<!-- Checkbox -->
<input type="checkbox" name="agree" value="yes"/> I agree
<!-- Text area -->
<textarea name="message" rows="4" cols="50"></textarea>
<!-- Submit button -->
<button type="submit">Submit</button>
</form>Chapter 7 — What is CSS?
CSS (Cascading Style Sheets) controls how HTML looks — colours, fonts, sizes, layouts, spacing, animations. Without CSS, HTML is just plain text with basic structure.
/* Three ways to add CSS: */
/* 1. External stylesheet (best — separate file) */
<link rel="stylesheet" href="style.css"/>
/* 2. Internal (inside <style> in <head>) */
<style>
h1 { color: red; }
</style>
/* 3. Inline (directly on element — avoid this) */
<h1 style="color: red;">Hello</h1>
/* CSS syntax: selector { property: value; } */
h1 {
color: red;
font-size: 32px;
font-weight: bold;
}Chapter 8 — CSS Selectors
/* Element selector — targets all <p> tags */
p { color: gray; }
/* Class selector — targets elements with class="card" */
.card { background: white; padding: 20px; }
/* ID selector — targets element with id="header" */
#header { background: black; color: white; }
/* Descendant — p inside .container */
.container p { margin: 10px; }
/* Multiple selectors */
h1, h2, h3 { font-family: Arial; }
/* Pseudo-class — on hover */
a:hover { color: red; text-decoration: underline; }
button:active { background: darkblue; }
input:focus { border-color: blue; }
/* Attribute selector */
input[type="text"] { border: 1px solid gray; }
a[target="_blank"] { color: orange; }
/* Specificity (which rule wins):
Inline style > ID > Class > Element
Most specific selector wins */Chapter 9 — The Box Model
/* Every HTML element is a box:
Content → Padding → Border → Margin */
div {
width: 300px; /* content width */
height: 200px; /* content height */
padding: 20px; /* space INSIDE border */
border: 2px solid black;
margin: 30px; /* space OUTSIDE border */
}
/* Individual sides: */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Shorthand (top right bottom left — clockwise): */
padding: 10px 20px 10px 20px;
padding: 10px 20px; /* top/bottom left/right */
padding: 10px; /* all four sides */
margin: auto; /* centre an element horizontally */
/* box-sizing: border-box — width includes padding+border */
* {
box-sizing: border-box; /* always add this! makes sizing predictable */
}Chapter 10 — Colours & Fonts
/* Colours */
color: red; /* named colour */
color: #dc2626; /* hex code */
color: rgb(220, 38, 38); /* RGB */
color: rgba(220, 38, 38, 0.5); /* RGB with opacity */
background-color: #1a1a1a;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
/* Fonts */
font-family: Arial, sans-serif; /* fallback chain */
font-size: 16px; /* pixel size */
font-size: 1.2rem; /* relative to root (better!) */
font-weight: bold; /* or 400, 700, 900 */
font-style: italic;
line-height: 1.6; /* space between lines */
letter-spacing: 1px;
text-align: center; /* left, right, center, justify */
text-transform: uppercase; /* UPPERCASE */
text-decoration: none; /* remove underline from links */
/* Import Google Fonts in <head>: */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
body {
font-family: 'Inter', sans-serif;
}Chapter 11 — Flexbox Layout
/* Flexbox = the modern way to layout elements */
.container {
display: flex; /* enable flexbox */
flex-direction: row; /* row (default) or column */
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 20px; /* space between items */
flex-wrap: wrap; /* wrap to next line if needed */
}
/* justify-content values:
flex-start → align left (default)
flex-end → align right
center → centre
space-between → items spread with space between
space-around → space around each item */
/* align-items values:
flex-start → top
flex-end → bottom
center → middle
stretch → fill height (default) */
.child {
flex: 1; /* grow to fill space equally */
flex: 0 0 200px; /* fixed 200px wide, don't grow/shrink */
}
/* Centre anything with flexbox: */
.centred {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* full viewport height */
}Chapter 12 — Build a Full Page
<!-- Complete webpage example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Portfolio</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f5f5f5; color: #333; }
nav {
background: #1a1a1a;
padding: 16px 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a { color: white; text-decoration: none; margin-left: 24px; }
nav a:hover { color: #dc2626; }
.hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
color: white;
}
.hero h1 { font-size: 3rem; margin-bottom: 16px; }
.hero p { font-size: 1.2rem; color: #aaa; }
.btn {
display: inline-block;
margin-top: 24px;
padding: 12px 28px;
background: #dc2626;
color: white;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
}
.btn:hover { background: #b91c1c; }
.cards {
display: flex;
gap: 24px;
padding: 40px 32px;
flex-wrap: wrap;
}
.card {
flex: 1;
min-width: 250px;
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card h3 { margin-bottom: 10px; color: #dc2626; }
footer {
text-align: center;
padding: 24px;
background: #1a1a1a;
color: #777;
}
</style>
</head>
<body>
<nav>
<strong style="color:white">MyName</strong>
<div>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</div>
</nav>
<div class="hero">
<h1>Hi, I'm Uzair 👋</h1>
<p>Cybersecurity student & web developer</p>
<a href="#projects" class="btn">See My Work</a>
</div>
<div class="cards" id="projects">
<div class="card">
<h3>Project 1</h3>
<p>A web application I built with HTML, CSS, and JavaScript.</p>
</div>
<div class="card">
<h3>Project 2</h3>
<p>A Python script that automates network scanning.</p>
</div>
<div class="card">
<h3>Project 3</h3>
<p>A SQL database project for tracking learning progress.</p>
</div>
</div>
<footer>© 2025 Uzair Varsaji · All rights reserved</footer>
</body>
</html>Workbook Complete! Save the page above as
index.html and open it in a browser — that's your first webpage! Next step: add JavaScript to make it interactive.