JavaScript Curriculum
Your First Webpage
easyYou've just joined Nexus Engineering. Your first task: stand up the company's new internal portal. Before you write a single heading or button, you need to understand the skeleton every webpage is built on.
Your First Webpage
Every webpage you've ever visited — from Google to GitHub — starts with the same skeleton. Before browsers can render colors, layouts, or animations, they need to know the rules of the document they're reading. That's what the HTML boilerplate provides.
The Complete Boilerplate
Step through each part of this structure — every line has a specific job:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> </body></html><!DOCTYPE html>RequiredDocument Type Declaration
Not an HTML tag — it's a browser instruction. It switches the browser into standards mode rather than legacy "quirks mode". Without it, your CSS layout will behave inconsistently across browsers.
💡 Pro tip
Always the very first line. Even a blank line before it can trigger quirks mode in older browsers.
Anatomy of an HTML Tag
HTML is built from elements, and elements are defined by tags. Understanding tag anatomy makes every lesson that follows easier:
Click any tag name, attribute, value, or content to learn what it does
<a href="https://example.com" target="_blank">Visit Site</a>← Click a coloured part of the tag to learn what it does
How the Browser Sees Your File
When you save an HTML file and open it in a browser, it goes through three distinct stages before you see anything on screen:
Raw bytes the server sends — the browser downloads and parses this file
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> </body></html>Why the DOCTYPE Matters
Before HTML5, there were competing browser rendering modes. Without <!DOCTYPE html>, browsers enter quirks mode — a compatibility mode that mimics old, broken browser behaviour. Your carefully written CSS will render differently across browsers. Always start with the DOCTYPE.
The lang Attribute
The lang="en" attribute on the root <html> element tells:
- Screen readers which language to use for pronunciation
- Search engines the primary language of the content
- Translation tools the source language
For a French page, use lang="fr". For a bilingual page, you can override it on specific elements: <p lang="fr">Bonjour</p>.
Challenge
Build a valid HTML5 boilerplate from scratch. Your page must include a DOCTYPE, a root html element with a lang attribute, a head with charset and viewport meta tags plus a meaningful title, and a body with a single h1 greeting.
Your First Webpage
easyYou've just joined Nexus Engineering. Your first task: stand up the company's new internal portal. Before you write a single heading or button, you need to understand the skeleton every webpage is built on.
Your First Webpage
Every webpage you've ever visited — from Google to GitHub — starts with the same skeleton. Before browsers can render colors, layouts, or animations, they need to know the rules of the document they're reading. That's what the HTML boilerplate provides.
The Complete Boilerplate
Step through each part of this structure — every line has a specific job:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> </body></html><!DOCTYPE html>RequiredDocument Type Declaration
Not an HTML tag — it's a browser instruction. It switches the browser into standards mode rather than legacy "quirks mode". Without it, your CSS layout will behave inconsistently across browsers.
💡 Pro tip
Always the very first line. Even a blank line before it can trigger quirks mode in older browsers.
Anatomy of an HTML Tag
HTML is built from elements, and elements are defined by tags. Understanding tag anatomy makes every lesson that follows easier:
Click any tag name, attribute, value, or content to learn what it does
<a href="https://example.com" target="_blank">Visit Site</a>← Click a coloured part of the tag to learn what it does
How the Browser Sees Your File
When you save an HTML file and open it in a browser, it goes through three distinct stages before you see anything on screen:
Raw bytes the server sends — the browser downloads and parses this file
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Webpage</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> </body></html>Why the DOCTYPE Matters
Before HTML5, there were competing browser rendering modes. Without <!DOCTYPE html>, browsers enter quirks mode — a compatibility mode that mimics old, broken browser behaviour. Your carefully written CSS will render differently across browsers. Always start with the DOCTYPE.
The lang Attribute
The lang="en" attribute on the root <html> element tells:
- Screen readers which language to use for pronunciation
- Search engines the primary language of the content
- Translation tools the source language
For a French page, use lang="fr". For a bilingual page, you can override it on specific elements: <p lang="fr">Bonjour</p>.
Challenge
Build a valid HTML5 boilerplate from scratch. Your page must include a DOCTYPE, a root html element with a lang attribute, a head with charset and viewport meta tags plus a meaningful title, and a body with a single h1 greeting.