</>
Code Your First Website
A Beginner's Guide to HTML, CSS & JavaScript
Wenner Tech Hub — Learn. Build. Connect.
Connect. Innovate. Empower.
CONTENTS
Welcome, Coder!
This short book will take you from zero to building your very first web page. No experience needed — just
curiosity and a willingness to try things out. By the end, you'll understand the three languages that power
every website you've ever visited.
1 What Is a Website Made Of? 3
2 HTML — The Structure 4
3 CSS — The Style 5
4 JavaScript — The Behavior 6
5 Build a Mini Project 7
6 Practice & Next Steps 8
How to use this book
• Read each chapter, then type the code examples yourself — don't just copy-paste.
• Save files with the correct extension: .html, .css, or .js.
• Open your .html file in any web browser to see your work.
• Mistakes are normal! Errors are how you learn to debug.
2
CHAPTER 1
What Is a Website Made Of?
Every website you visit is built from three core technologies working together. Think of building a website
like building a house:
HTML The skeleton Walls, rooms, doors — the structure and content
CSS The paint & decor Colors, fonts, layout — how it looks
JavaScript The electricity Lights, switches, doorbells — how it behaves
What you need to get started
• A text editor — VS Code is free and beginner-friendly.
• A web browser — Chrome, Firefox, or Edge all work fine.
• That's it! No installation of special software is required to start.
A quick analogy
If you're writing a letter: HTML is the paper and where the words sit, CSS is the handwriting style and ink
color, and JavaScript is what makes the letter fold itself or react when someone touches it. In the next
three chapters, we'll look at each one closely, with real code you can try.
3
CHAPTER 2
HTML — The Structure
HTML (HyperText Markup Language) uses tags to organize content. Most tags come in pairs: an opening
tag and a closing tag, wrapping the content between them.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first web page.</p>
</body>
</html>
Common tags to know
<h1> – <h6> Headings, biggest to smallest
<p> A paragraph of text
<a href="..."> A clickable link
<img src="..."> An image
<div> A generic container/box
<ul> / <li> A bullet list and its items
Save this code as [Link] and open it in your browser — you'll see your heading and paragraph appear
instantly.
4
CHAPTER 3
CSS — The Style
CSS (Cascading Style Sheets) controls how your HTML looks. A CSS rule targets an element (a selector)
and lists the styles to apply inside curly braces.
h1 {
color: #0f9d8c;
font-family: Arial, sans-serif;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
color: #333333;
}
Linking CSS to HTML
Save the styles above as [Link], then add this line inside your HTML <head> tag:
<link rel="stylesheet" href="[Link]">
Selectors you'll use often
• Element selector — p { } styles every paragraph
• Class selector — .card { } styles anything with class="card"
• ID selector — #header { } styles the one element with id="header"
Tip: Classes can be reused on many elements. IDs should only be used once per page.
5
CHAPTER 4
JavaScript — The Behavior
JavaScript makes your page interactive — responding to clicks, updating text, and much more. Let's make
a button that changes a message when clicked.
<button id="myBtn">Click Me</button>
<p id="message">Waiting for a click...</p>
<script>
const button = [Link]("myBtn");
const message = [Link]("message");
[Link]("click", function() {
[Link] = "You clicked the button!";
});
</script>
Core building blocks
• Variables — store data, e.g. let score = 0;
• Functions — reusable blocks of code that run when called
• Events — actions like clicks, typing, or page loads that trigger code
• DOM — the live structure of your page that JavaScript can read and change
The DOM (Document Object Model) is how JavaScript "sees" your HTML — it can find elements, change
their text, add new ones, or remove them entirely.
6
CHAPTER 5
Build a Mini Project
Let's combine everything into one small page: a greeting card that changes its message when you click a
button. Create three files in the same folder.
[Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="card">
<h1 id="greeting">Hello!</h1>
<button id="changeBtn">Surprise Me</button>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
.card {
text-align: center;
padding: 40px;
background: #f4f6fa;
border-radius: 12px;
}
[Link]
const greetings = ["Hello!", "Welcome!", "You did it!"];
const btn = [Link]("changeBtn");
const title = [Link]("greeting");
[Link]("click", function() {
const random = [Link]([Link]() * [Link]);
[Link] = greetings[random];
});
7
CHAPTER 6
Practice & Next Steps
Learning to code is like learning an instrument — small daily practice beats one long session. Here are
challenges to try on your own, using only what you learned in this book.
Try these on your own
• Build a simple profile page with your name, photo, and a short bio.
• Style it with a color theme of your choice and a centered layout.
• Add a button that shows/hides an extra paragraph when clicked.
• Create a list of your favorite things using <ul> and style each item.
Good habits going forward
• Use your browser's "Inspect" tool to see how real websites are built.
• When you get an error, read it slowly — it usually tells you the exact line.
• Keep every project in its own folder with [Link], [Link], and [Link].
• Build small, finish it, then build the next thing slightly bigger.
You now know the three languages behind every website on the internet. Keep building — that's the only
way this sticks.
Wenner Tech Hub — Connect. Innovate. Empower.