Learn the fundamentals of HTML - the building block of the web
Hyper Text Markup Language - It's a markup language, not a programming language!
It is the foundation of every website on the internet - like the skeleton of a human body.
Used to define the structure and layout of web pages using elements and tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
<!DOCTYPE html> declaration. It tells the browser this is an HTML5 document.
| Layer | Purpose | Example |
|---|---|---|
| HTML | Defines the structure of a webpage (skeleton) | <h1>Title</h1> |
| CSS | Adds style and presentation (color, layout, design) | h1 { color: blue; } |
| JavaScript | Adds logic and interactivity (buttons, sliders, etc.) | button.onclick = showMessage; |
This paragraph is styled with CSS (blue color, bold)
⬆️ This button uses JavaScript to show an alert
Car body (metal frame)
The basic structure that holds everything togetherPaint, seat covers, lights (design)
Makes it look beautiful and appealingEngine, gear system, sensors (functionality)
Makes it move and respond to user actionsClick buttons to see how HTML, CSS, and JavaScript work together
HTML can be written in Notepad too, but VS Code provides a richer experience with features like auto-completion and debugging.
! + Tab → HTML templateCtrl + / → Comment lineAlt + Shift + ↓ → Copy line downCtrl + Shift + P → Command paletteThis demonstrates how JavaScript adds interactivity to web pages - exactly like the car's engine makes it move!