Let’s begin with Lecture 2 of the HTML5 & CSS3 series. (Setting Up Your Coding Environment) This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
Know how to set up your computer for writing HTML and CSS.
Be able to install a code editor (VS Code).
Discover how to utilize Live Server to view your web pages instantly.
Run your first HTML file like a real developer!
🧒 What is a Coding Environment?
A coding environment is like your digital desk where you write and test your code.
Think of it like this:
Just like you need paper, pencils, and a good light to draw, you need a code editor, a browser, and some tools to build websites
🛠 Tools You’ll Need
- Code Editor – To write your HTML & CSS
- Web Browser – To see your website
- Live Server Extension – To preview your site instantly as you code
We’ll now install and set them up step by step.
💻 Step-by-Step Setup Guide
✅ Step 1: Install Visual Studio Code (VS Code)
Why VS Code?
- Free and easy to use
- Loved by beginners and pros
- Works on Windows, Mac, and Linux
How to Install:
- Go to https://code.visualstudio.com/
- Click Download for your operating system
- Open the downloaded file and follow the instructions to install
🎯 Done! Now you have a powerful code editor.
✅ Step 2: Create a Project Folder
Let’s make a special folder to keep all your web projects organized.
Steps:
- Open File Explorer (Windows) or Finder (Mac)
- Go to your Desktop
- Create a new folder named:
MyFirstWebsite
💡 This is where we’ll store all our HTML files.
✅ Step 3: Open the Folder in VS Code
- Open Visual Studio Code
- Click File > Open Folder
- Select the
MyFirstWebsiteThe folder you just created - Click Select Folder
🎉 Now you’re inside your project workspace!
✅ Step 4: Install the Live Server Extension
Live Server helps you view your webpage in real-time — every time you save your code, it updates automatically in the browser.
Steps:
- In VS Code, click the Extensions icon on the left sidebar
(It looks like a puzzle piece.) - Type
Live ServerIn the search bar - Find the one by Ritwick Dey
- Click Install
⏳ Wait for it to install…
✅ Done! Now you can run your HTML files with a single click.
💡 Let’s Test It Out!
Step 1: Create an HTML File
- In VS Code, right-click inside the Explorer panel
- Click New File
- Name it:
index.html - Press Enter
Step 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>I'm building my first website using HTML.</p>
</body>
</html>Step 3: Launch Live Server
- Right-click anywhere inside the code window
- Click Show All Commands
- Type
Live Server - Choose Launch Live Server
👉 A browser tab should open automatically, showing your page!
Or look at the bottom-right corner of VS Code — you’ll see a local server address like http://127.0.0.1:5500/. Click it.
🔍 Explanation
| Tool | Purpose |
|---|---|
| VS Code | Where we write our HTML and CSS |
| index.html | The main file of our website |
| Live Server | Shows our webpage instantly without refreshing manually |
🧪 Try It Yourself!
- Change the heading text from
"Welcome to My Website!"to"Hello, I'm a Web Developer!" - Save the file (
Ctrl + SorCmd + S) - Watch the browser update automatically!
🚀 Next Lecture Preview:
In Lecture 3, we’ll learn about the basic structure of an HTML document and explore what each tag means in simple terms.
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.
