Build Your First Website
Learn HTML, CSS, and JavaScript step by step — then combine them into a real, working web page you can open in your browser.
HTML Basics
HTML (HyperText Markup Language) is the skeleton of every website. It tells the browser what content to show and how to structure it.
HTML uses tags — special words wrapped in angle brackets like <h1> or <p>. Most tags come in pairs: an opening tag and a closing tag. Everything between them is the content.
Every HTML page has the same basic structure: an <html> wrapper, a <head> for metadata (like the page title), and a <body> for everything the user sees.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>My First Page</title>
5 </head>
6 <body>
7 <h1>Hello, World!</h1>
8 <p>This is my very first web page.</p>
9
10 <h2>About Me</h2>
11 <p>I am learning to code at Fanoos Academy.</p>
12
13 <ul>
14 <li>I love building things</li>
15 <li>I am curious about technology</li>
16 <li>I want to create my own website</li>
17 </ul>
18 </body>
19</html>- HTML uses tags to structure content on a page
- <h1> to <h6> are headings, <p> is a paragraph, <ul>/<li> make lists
- Every page needs <html>, <head>, and <body>
Adding Style with CSS
CSS (Cascading Style Sheets) is what makes a website look good. If HTML is the skeleton, CSS is the skin, clothes, and style.
With CSS, you pick an element (like h1 or p) and tell the browser how it should look — its color, size, spacing, font, background, and more.
You can write CSS inside a <style> tag in your HTML file, or in a separate .css file. Real projects almost always use separate files to keep things organized.
1/* Style your page — make it yours */
2
3body {
4 font-family: "Segoe UI", sans-serif;
5 background-color: #0f172a;
6 color: #e2e8f0;
7 padding: 2rem;
8}
9
10h1 {
11 color: #f5b83a;
12 font-size: 2.5rem;
13 margin-bottom: 0.5rem;
14}
15
16p {
17 font-size: 1.1rem;
18 line-height: 1.7;
19 max-width: 600px;
20}
21
22ul {
23 list-style: none;
24 padding: 0;
25}
26
27ul li {
28 padding: 0.5rem 0;
29 border-bottom: 1px solid #334155;
30}- CSS controls colors, fonts, sizes, spacing, and layout
- You select elements by tag name, class, or ID
- Properties like color, font-size, and padding change how things look
Making It Interactive
JavaScript is what brings a website to life. HTML shows content, CSS makes it pretty, and JavaScript makes it do things — respond to clicks, update text, show and hide elements, and much more.
You use JavaScript to listen for events (like a button click) and then run code in response. This is how every interactive website works — from a simple like button to a full app.
JavaScript runs right in the browser. You add it with a <script> tag at the bottom of your HTML, or in a separate .js file.
1// Make your page respond to the user!
2
3// 1. Find the button on the page
4const button = document.querySelector("button");
5
6// 2. Listen for a click
7button.addEventListener("click", function () {
8 // 3. Do something when clicked!
9 alert("You clicked the button!");
10});
11
12// You can also change what's on the page:
13const heading = document.querySelector("h1");
14heading.textContent = "Welcome to my site!";
15
16// Or change styles with JavaScript:
17heading.style.color = "#f5b83a";
18
19// Or toggle visibility:
20const secret = document.querySelector("#secret");
21button.addEventListener("click", function () {
22 secret.style.display = "block";
23});- JavaScript makes your page interactive and dynamic
- addEventListener listens for user actions like clicks
- You can change text, styles, and visibility with JavaScript
Build Your Page
Time to combine everything. A real web page uses HTML for structure, CSS for style, and JavaScript for interactivity — all working together.
The page below is a complete, working mini-site. It has a heading, a paragraph, a styled button, and JavaScript that makes the button do something when you click it.
Copy this code into a file called index.html on your computer, open it in a browser, and you will see your very own website. Change the text, colors, or behavior — experimenting is the best way to learn.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>My Website</title>
5 <style>
6 body {
7 font-family: "Segoe UI", sans-serif;
8 background: #0f172a;
9 color: #e2e8f0;
10 display: flex;
11 flex-direction: column;
12 align-items: center;
13 justify-content: center;
14 min-height: 100vh;
15 margin: 0;
16 }
17 h1 {
18 color: #f5b83a;
19 font-size: 2.5rem;
20 }
21 p {
22 font-size: 1.2rem;
23 max-width: 500px;
24 text-align: center;
25 line-height: 1.6;
26 }
27 button {
28 margin-top: 1.5rem;
29 padding: 0.75rem 2rem;
30 font-size: 1rem;
31 border: none;
32 border-radius: 0.75rem;
33 background: linear-gradient(to right, #eab308, #ca8a04);
34 color: #0f172a;
35 font-weight: 700;
36 cursor: pointer;
37 }
38 button:hover {
39 opacity: 0.9;
40 }
41 #message {
42 margin-top: 1rem;
43 font-size: 1.1rem;
44 color: #86efac;
45 display: none;
46 }
47 </style>
48 </head>
49 <body>
50 <h1>Hello, World!</h1>
51 <p>
52 I built this page with HTML, CSS, and JavaScript.
53 Click the button to see it come alive.
54 </p>
55 <button id="myButton">Click Me</button>
56 <p id="message">You did it! You just built a website.</p>
57
58 <script>
59 document.getElementById("myButton")
60 .addEventListener("click", function () {
61 document.getElementById("message")
62 .style.display = "block";
63 });
64 </script>
65 </body>
66</html>- HTML provides the structure (headings, paragraphs, buttons)
- CSS makes it look great (colors, fonts, layout, spacing)
- JavaScript adds behavior (click handlers, showing/hiding elements)
- All three work together in every real website you use