Let’s begin with Lecture 1 of the HTML5 & CSS3 series. This lecture is for absolute beginners; even kids can follow along and understand.
🧩 Lecture 1: What is a Website? (And How It Works)
🎯 Objective:
By the end of this lecture, you will:
- Understand what a website is.
- Know how websites work in simple terms.
- Be excited to start building your own!
🧒 What is a Website?
A website is like a digital book or poster that lives on the internet. Anyone in the world can open it using a computer or phone.
Think of it like this:
A website is like a house. HTML is the bricks and cement used to build it. CSS is the paint and decoration that makes it look beautiful.
🖥️ How Does a Website Work?
Here’s what happens when you open a website:
- You type a web address (like
www.google.com) into a browser (like Chrome or Firefox). - The browser asks a server (a powerful computer on the internet) for the website files.
- The server sends back HTML, CSS, and maybe JavaScript files.
- Your browser reads those files and shows them as a nice-looking webpage.
🧠 Fun Fact:
You are already looking at a website right now! Yes! This entire page you’re reading is built using the same tools we’ll learn together.
🛠 Tools We’ll Use
1. Text Editor
We write code in a text editor, just like you write stories in a notebook.
Recommended Free Editors:
- Visual Studio Code – Best for beginners
- Notepad++ (for Windows)
- Sublime Text
2. Web Browser
To see our website, we use a browser like:
💻 Try This: Meet Your First Web Page
Let’s create a simple webpage that displays the message “Hello, World!”
Step 1: Open Your Text Editor
Open VS Code or any text editor you installed.
Step 2: Create a New File
Go to File > New File
Step 3: Type This Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>Step 4: Save the File
Go to File > Save As and save it as:
index.html
Make sure the file ends with .html!
Step 5: Open in Browser
Right-click the file → Open With → Choose your browser.
🎉 Tada! You just made a real webpage!
🔍 Explanation (For Curious Minds)
| Tag | What It Does |
|---|---|
<!DOCTYPE html> | Tells the browser this is an HTML5 document |
<html> | The root tag that wraps everything |
<head> | Contains info about the page (not shown on screen) |
<title> | The title shown in the browser tab |
<body> | Everything inside here appears on the screen |
<h1> | Big heading |
<p> | Paragraph of text |
🧪 Try It Yourself!
👉 Change the heading <h1> to <h2> And see what happens.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h2>Hello, World!</h2>
<p>This is my very first webpage.</p>
</body>
</html>👉 Add another paragraph below:
<p>I am learning HTML and I love it!</p>🚀 Next Lecture Preview:
In Lecture 2, we’ll learn how to set up our coding environment properly and run our HTML files more easily using something called a Live Server.
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
