Your Whole Website
Put every piece together into one site that is truly yours.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>My Website</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <h1>Welcome to my website</h1>
9 <p class="card">Built with HTML, CSS and JavaScript.</p>
10 <button id="night">Night mode</button>
11 <script src="script.js"></script>
12 </body>
13</html>
style.css
1body {
2 font-family: Arial, sans-serif;
3 background-color: lightblue;
4}
5.card {
6 background-color: white;
7 color: black;
8 padding: 10px;
9 border-radius: 8px;
10}
11.night {
12 background-color: black;
13 color: white;
14}
script.js
1const nightBtn = document.getElementById('night');
2nightBtn.addEventListener('click', () => {
3 document.body.classList.toggle('night');
4});
Every line, explained
<!doctype html>- <!doctype html> is the very first line of every real web page. It simply tells the browser "this is a modern HTML page"; it is a declaration, not a tag, so it never gets closed.
<html>- <html> is the root: every other tag on the page lives inside it. Intro to HTML skipped this wrapper; now you are writing pages the way the pros do.
<head>- <head> holds information ABOUT the page: its title, and links to other files. Nothing inside <head> is drawn on the page itself.
<title>My Website</title>- <title> names the browser tab. Look at the tab bar of a real browser: every name you see there is one of these.
<link rel="stylesheet" href="style.css">- This line connects the stylesheet: rel="stylesheet" says what the file IS, href="style.css" says where it lives. From now on, everything in style.css shapes how this page looks. One page, two files, working together.
</head>- </head> closes the head. The visible part of the page comes next.
<body>- <body> holds everything you can actually see: all the tags you learned in Intro to HTML go in here.
<h1>Welcome to my website</h1>- The main heading, welcoming the world to your site.
<p class="card">Built with HTML, CSS and JavaScript.</p>- A labelled paragraph (class, lesson 5).
<button id="night">Night mode</button>- The night mode switch (lesson 9).
<script src="script.js"></script>- <script src="script.js"></script> loads the JavaScript file. It sits at the END of the body so the page above it exists before the script runs; a script that looks for a tag that hasn't been built yet finds nothing.
</body>- </body> closes the body.
</html>- </html> closes the root tag. Nothing comes after it.
font-family: Arial, sans-serif;- Fonts (lesson 4).
.card {- Your class (lesson 5).
color: black;- The card sets its OWN text colour, so it stays readable when night mode flips the rest of the page to white-on-black. Rules you write directly always beat colours that merely trickle down from the body.
.night {- The waiting night-mode rule (lesson 9).
const nightBtn = document.getElementById('night');- Fetch the button (lesson 7).
nightBtn.addEventListener('click', () => {- Listen for clicks (lesson 8).
document.body.classList.toggle('night');- Flip the class (lesson 9).
});- And close. Three files, one website, all yours: structure from HTML, style from CSS, behaviour from JavaScript. That trio is what every web developer on Earth works with every day, and you have just built a site with all three. Where next? The React course shows how the pros build big apps out of exactly these pieces.