Getting Started with HTML 🎒
Mentor's Note: Learning HTML is like learning to build with LEGO blocks. Anyone can do it — you just need the right blocks and a place to build! 🧱
🌟 Welcome to HTML!
HTML is the language of the web. Every website you visit — games, videos, school portals, online shopping — all of them use HTML. By learning HTML, you gain the power to create your own corner of the internet!
Who Is This For?
All tracks cover the same HTML fundamentals — just with different examples and pacing. Pick the one that feels right for you!
🛠️ What You Need (3 Things)
You only need 3 free tools to start building websites:
1. Code Editor (Your Writing Tool)
- Recommended: VS Code — Free, powerful, beginner-friendly
- For kids: Notepad++ or even regular Notepad works!
- Online option: CodePen or JSFiddle — no install needed
2. Web Browser (Your Viewing Tool)
- Chrome, Firefox, Edge, or Safari — any modern browser works
- You already have one! Use it to open your HTML files
3. A Computer
- Windows, Mac, or Linux — HTML works on all of them
- Even a Chromebook or tablet with a code editor works
🌐 How the Web Works
Before writing code, let's understand what happens when you visit a website:
The Three Languages of the Web
| Language | Role | Analogy | When You'll Learn It |
|---|---|---|---|
| HTML | 🦴 Structure & Content | The skeleton and body | Right now! |
| CSS | 🎨 Style & Layout | The clothes and makeup | After HTML |
| JavaScript | ⚡ Interactivity & Behavior | The muscles and brain | After CSS |
🎯 Choose Your Learning Track
💻 Your First HTML in 30 Seconds
Open Notepad (or any text editor) and type this:
Hello! This is my first web page. 🎉
Save it as my-page.html, then double-click it. It opens in your browser!
That's HTML working already! Browsers can display plain text. Now we'll learn to add structure, style, and magic. ✨
✅ Setup Checklist
- Choose your editor: VS Code installed? Open it!
- Open browser: Chrome or Firefox ready to go
- Create a folder: Make a folder called
my-websiteon your desktop - Save your first file: Create
my-website/index.html - View in browser: Double-click and see it appear
- Open Learning Path: Next up — see the full roadmap
📚 What's Next?
Ready to see the full journey? The Learning Path page has a complete roadmap with milestones, projects, and what you'll achieve at each level.