html 1/2

Lecture 1: HTML Fundamentals & Document Structure

Every website ever built started with exactly what you're about to learn. This is where it all begins.

What You'll Learn

The absolute foundation of the web — no shortcuts, no frameworks, just pure HTML:

📄 HTML Document Skeleton — the boilerplate structure every webpage starts with, and what each line actually does
🏷️ Common Elements — headings, paragraphs, links, images, lists, and text emphasis tags you'll use in every project
🔗 Anatomy of a Link — how <a href=""> works, what target="_blank" does, and why https:// is never optional
🖼️ Anatomy of an Image — src, alt, and why the alt attribute is non-negotiable
📐 Nesting Rules — how to properly nest elements inside each other without breaking your structure
📊 Heading Hierarchy — why there's only one <h1> per page and why you never skip heading levels

Why This Matters

HTML is the skeleton of every single thing on the web. Before CSS makes it beautiful, before JavaScript makes it interactive — there is HTML. Getting this right from day one means you'll never have broken structures, accessibility issues, or mysterious layout bugs that trace back to invalid markup. The habits you build in this lecture will follow you through your entire development career.

Before You Watch

This is the very first lecture — no prerequisites needed! Just make sure you have:

✅ VS Code installed on your computer
✅ Google Chrome installed for DevTools
✅ A folder ready to save your first HTML file

📎 The cheatsheet for this lecture is attached below the video. The Quick Reference Table and the Common Mistakes section are perfect to keep open while you code along for the first time!

HTML Fundamentals Cheatsheet

Quick reference for all HTML concepts covered in Lecture 1.

HTML Document Skeleton

Every HTML page starts with this structure:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Page Title</title>
7</head>
8<body>
9    <!-- Your visible content goes here -->
10</body>
11</html>

Part	Purpose
`<!DOCTYPE html>`	Tells the browser to use HTML5 standards mode
`<html lang="en">`	Root element; `lang` helps screen readers and search engines
`<head>`	Metadata — invisible to the user (title, character set, viewport)
`<meta charset="UTF-8">`	Supports all characters (accents, symbols, other languages)
`<meta name="viewport" ...>`	Makes the page responsive on mobile devices
`<title>`	Text shown in the browser tab
`<body>`	All visible content goes here

Common HTML Elements

Element	Purpose	Example
`<h1>` to `<h6>`	Headings (h1 = most important)	`<h1>Main Title</h1>`
`<p>`	Paragraph of text	`<p>Some text here.</p>`
`<a>`	Hyperlink	`<a href="https://example.com">Link</a>`
`<img>`	Image (self-closing)	`<img src="photo.jpg" alt="Description">`
`<ul>`	Unordered list (bullets)	`<ul><li>Item</li></ul>`
`<ol>`	Ordered list (numbers)	`<ol><li>First</li></ol>`
`<li>`	List item (inside `<ul>` or `<ol>`)	`<li>Item text</li>`
`<strong>`	Important text (bold + meaning)	`<strong>Warning!</strong>`
`<em>`	Emphasized text (italic + meaning)	`<em>Note:</em>`

Anatomy of a Link

1<a href="https://nexusberry.com" target="_blank">Visit NexusBerry</a>
2 │   │                              │                │
3 │   │                              │                └── Link text (visible)
4 │   │                              └── Opens in new tab
5 │   └── URL destination
6 └── Anchor element

Remember: Always include https:// for external links.

Anatomy of an Image

1<img src="https://picsum.photos/600/400" alt="A scenic mountain view">
2 │    │                                    │
3 │    │                                    └── Description (for accessibility)
4 │    └── Image source URL
5 └── Self-closing tag (no </img> needed)

Remember: alt is required for accessibility. Describe what the image shows.

Nesting Rules

HTML elements can contain other elements — this is called nesting.

1<!-- CORRECT nesting -->
2<ul>
3    <li>First item</li>
4    <li>Second item</li>
5</ul>
6
7<!-- WRONG nesting — tags overlap -->
8<p>This is <strong>bold text</p></strong>
9
10<!-- CORRECT nesting — tags close in order -->
11<p>This is <strong>bold text</strong></p>

Rule: Tags must close in the reverse order they were opened (like stacking boxes).

Heading Hierarchy

Use headings in order — never skip levels:

1<!-- CORRECT -->
2<h1>Page Title</h1>
3  <h2>Section</h2>
4    <h3>Subsection</h3>
5  <h2>Another Section</h2>
6
7<!-- WRONG — skips h2 -->
8<h1>Page Title</h1>
9  <h3>Subsection</h3>

Guidelines:

One <h1> per page
Don't skip levels (h1 → h3)
Don't choose heading levels for font size — use CSS for that

Common Mistakes to Avoid

1. Missing Closing Tags

1<!-- WRONG -->
2<p>First paragraph
3<p>Second paragraph
4
5<!-- CORRECT -->
6<p>First paragraph</p>
7<p>Second paragraph</p>

2. Forgetting `alt` on Images

1<!-- WRONG -->
2<img src="photo.jpg">
3
4<!-- CORRECT -->
5<img src="photo.jpg" alt="Team photo at the NexusBerry office">

3. Missing Protocol in Links

1<!-- WRONG — treated as relative path -->
2<a href="nexusberry.com">Visit</a>
3
4<!-- CORRECT -->
5<a href="https://nexusberry.com">Visit</a>

4. Putting Content in `<head>`

1<!-- WRONG -->
2<head>
3    <p>Welcome to my site</p>
4</head>
5
6<!-- CORRECT -->
7<body>
8    <p>Welcome to my site</p>
9</body>

VS Code Shortcuts

Shortcut	Action
`!` + Tab	Generate HTML boilerplate (Emmet)
`Ctrl + S`	Save file
`Ctrl + /`	Toggle comment
`Alt + Shift + F`	Format/indent code
`Ctrl + D`	Select next occurrence of word
`Alt + ↑/↓`	Move line up/down
`Ctrl + Shift + P`	Open Command Palette

Chrome DevTools Basics

Action	How
Open DevTools	`F12` or `Ctrl + Shift + I`
Inspect an element	Right-click → Inspect
View page source	`Ctrl + U`
Toggle device toolbar	`Ctrl + Shift + M` (in DevTools)

Tip: Changes in DevTools are temporary — refresh the page to reset.

Quick Reference Table

What you want	How to do it
Create a new HTML file	New file → name it `index.html`
Add a heading	`<h1>Your Text</h1>`
Add a paragraph	`<p>Your Text</p>`
Add a link	`<a href="https://url.com">Text</a>`
Add an image	`<img src="url" alt="description">`
Add a bullet list	`<ul><li>Item</li></ul>`
Add a numbered list	`<ol><li>Item</li></ol>`
Make text bold	`<strong>Text</strong>`
Make text italic	`<em>Text</em>`
Open in new tab	Add `target="_blank"` to `<a>`
Add a comment	`<!-- Your comment -->`

HTML Entities (Special Characters)

Character	Entity Code
`&`	`&`
`<`	`<`
`>`	`>`
`"`	`"`
Non-breaking space	` `
©	`©`

What's Next?

In Lecture 2: Semantic HTML & Accessibility, you'll learn:

Semantic elements (<header>, <nav>, <main>, <footer>, <article>, <section>)
Why semantic HTML matters for SEO and accessibility
ARIA basics and screen reader testing
Building a Professional Portfolio Resume

Keep this cheatsheet handy while working on your assignment!

html 1/2

Lecture 1: HTML Fundamentals & Document Structure

Every website ever built started with exactly what you're about to learn. This is where it all begins.

What You'll Learn

The absolute foundation of the web — no shortcuts, no frameworks, just pure HTML:

📄 HTML Document Skeleton — the boilerplate structure every webpage starts with, and what each line actually does
🏷️ Common Elements — headings, paragraphs, links, images, lists, and text emphasis tags you'll use in every project
🔗 Anatomy of a Link — how <a href=""> works, what target="_blank" does, and why https:// is never optional
🖼️ Anatomy of an Image — src, alt, and why the alt attribute is non-negotiable
📐 Nesting Rules — how to properly nest elements inside each other without breaking your structure
📊 Heading Hierarchy — why there's only one <h1> per page and why you never skip heading levels

Why This Matters

Before You Watch

This is the very first lecture — no prerequisites needed! Just make sure you have:

✅ VS Code installed on your computer
✅ Google Chrome installed for DevTools
✅ A folder ready to save your first HTML file

📎 The cheatsheet for this lecture is attached below the video. The Quick Reference Table and the Common Mistakes section are perfect to keep open while you code along for the first time!

HTML Fundamentals Cheatsheet

Quick reference for all HTML concepts covered in Lecture 1.

HTML Document Skeleton

Every HTML page starts with this structure:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Page Title</title>
7</head>
8<body>
9    <!-- Your visible content goes here -->
10</body>
11</html>

Part	Purpose
`<!DOCTYPE html>`	Tells the browser to use HTML5 standards mode
`<html lang="en">`	Root element; `lang` helps screen readers and search engines
`<head>`	Metadata — invisible to the user (title, character set, viewport)
`<meta charset="UTF-8">`	Supports all characters (accents, symbols, other languages)
`<meta name="viewport" ...>`	Makes the page responsive on mobile devices
`<title>`	Text shown in the browser tab
`<body>`	All visible content goes here

Common HTML Elements

Element	Purpose	Example
`<h1>` to `<h6>`	Headings (h1 = most important)	`<h1>Main Title</h1>`
`<p>`	Paragraph of text	`<p>Some text here.</p>`
`<a>`	Hyperlink	`<a href="https://example.com">Link</a>`
`<img>`	Image (self-closing)	`<img src="photo.jpg" alt="Description">`
`<ul>`	Unordered list (bullets)	`<ul><li>Item</li></ul>`
`<ol>`	Ordered list (numbers)	`<ol><li>First</li></ol>`
`<li>`	List item (inside `<ul>` or `<ol>`)	`<li>Item text</li>`
`<strong>`	Important text (bold + meaning)	`<strong>Warning!</strong>`
`<em>`	Emphasized text (italic + meaning)	`<em>Note:</em>`

Anatomy of a Link

1<a href="https://nexusberry.com" target="_blank">Visit NexusBerry</a>
2 │   │                              │                │
3 │   │                              │                └── Link text (visible)
4 │   │                              └── Opens in new tab
5 │   └── URL destination
6 └── Anchor element

Remember: Always include https:// for external links.

Anatomy of an Image

1<img src="https://picsum.photos/600/400" alt="A scenic mountain view">
2 │    │                                    │
3 │    │                                    └── Description (for accessibility)
4 │    └── Image source URL
5 └── Self-closing tag (no </img> needed)

Remember: alt is required for accessibility. Describe what the image shows.

Nesting Rules

HTML elements can contain other elements — this is called nesting.

1<!-- CORRECT nesting -->
2<ul>
3    <li>First item</li>
4    <li>Second item</li>
5</ul>
6
7<!-- WRONG nesting — tags overlap -->
8<p>This is <strong>bold text</p></strong>
9
10<!-- CORRECT nesting — tags close in order -->
11<p>This is <strong>bold text</strong></p>

Rule: Tags must close in the reverse order they were opened (like stacking boxes).

Heading Hierarchy

Use headings in order — never skip levels:

1<!-- CORRECT -->
2<h1>Page Title</h1>
3  <h2>Section</h2>
4    <h3>Subsection</h3>
5  <h2>Another Section</h2>
6
7<!-- WRONG — skips h2 -->
8<h1>Page Title</h1>
9  <h3>Subsection</h3>

Guidelines:

One <h1> per page
Don't skip levels (h1 → h3)
Don't choose heading levels for font size — use CSS for that

Common Mistakes to Avoid

1. Missing Closing Tags

1<!-- WRONG -->
2<p>First paragraph
3<p>Second paragraph
4
5<!-- CORRECT -->
6<p>First paragraph</p>
7<p>Second paragraph</p>

2. Forgetting `alt` on Images

1<!-- WRONG -->
2<img src="photo.jpg">
3
4<!-- CORRECT -->
5<img src="photo.jpg" alt="Team photo at the NexusBerry office">

3. Missing Protocol in Links

1<!-- WRONG — treated as relative path -->
2<a href="nexusberry.com">Visit</a>
3
4<!-- CORRECT -->
5<a href="https://nexusberry.com">Visit</a>

4. Putting Content in `<head>`

1<!-- WRONG -->
2<head>
3    <p>Welcome to my site</p>
4</head>
5
6<!-- CORRECT -->
7<body>
8    <p>Welcome to my site</p>
9</body>

VS Code Shortcuts

Shortcut	Action
`!` + Tab	Generate HTML boilerplate (Emmet)
`Ctrl + S`	Save file
`Ctrl + /`	Toggle comment
`Alt + Shift + F`	Format/indent code
`Ctrl + D`	Select next occurrence of word
`Alt + ↑/↓`	Move line up/down
`Ctrl + Shift + P`	Open Command Palette

Chrome DevTools Basics

Action	How
Open DevTools	`F12` or `Ctrl + Shift + I`
Inspect an element	Right-click → Inspect
View page source	`Ctrl + U`
Toggle device toolbar	`Ctrl + Shift + M` (in DevTools)

Tip: Changes in DevTools are temporary — refresh the page to reset.

Quick Reference Table

What you want	How to do it
Create a new HTML file	New file → name it `index.html`
Add a heading	`<h1>Your Text</h1>`
Add a paragraph	`<p>Your Text</p>`
Add a link	`<a href="https://url.com">Text</a>`
Add an image	`<img src="url" alt="description">`
Add a bullet list	`<ul><li>Item</li></ul>`
Add a numbered list	`<ol><li>Item</li></ol>`
Make text bold	`<strong>Text</strong>`
Make text italic	`<em>Text</em>`
Open in new tab	Add `target="_blank"` to `<a>`
Add a comment	`<!-- Your comment -->`

HTML Entities (Special Characters)

Character	Entity Code
`&`	`&`
`<`	`<`
`>`	`>`
`"`	`"`
Non-breaking space	` `
©	`©`

What's Next?

In Lecture 2: Semantic HTML & Accessibility, you'll learn:

Semantic elements (<header>, <nav>, <main>, <footer>, <article>, <section>)
Why semantic HTML matters for SEO and accessibility
ARIA basics and screen reader testing
Building a Professional Portfolio Resume

Keep this cheatsheet handy while working on your assignment!

Lecture 1: HTML Fundamentals & Document Structure

What You'll Learn

Why This Matters

Before You Watch

HTML Fundamentals Cheatsheet

HTML Document Skeleton

Common HTML Elements

Anatomy of a Link

Anatomy of an Image

Nesting Rules

Heading Hierarchy

Common Mistakes to Avoid

1. Missing Closing Tags

2. Forgetting alt on Images

3. Missing Protocol in Links

4. Putting Content in <head>

VS Code Shortcuts

Chrome DevTools Basics

Quick Reference Table

HTML Entities (Special Characters)

What's Next?

Lecture 1: HTML Fundamentals & Document Structure

What You'll Learn

Why This Matters

Before You Watch

HTML Fundamentals Cheatsheet

HTML Document Skeleton

Common HTML Elements

Anatomy of a Link

Anatomy of an Image

Nesting Rules

Heading Hierarchy

Common Mistakes to Avoid

1. Missing Closing Tags

2. Forgetting alt on Images

3. Missing Protocol in Links

4. Putting Content in <head>

VS Code Shortcuts

Chrome DevTools Basics

Quick Reference Table

HTML Entities (Special Characters)

What's Next?

2. Forgetting `alt` on Images

4. Putting Content in `<head>`

2. Forgetting `alt` on Images

4. Putting Content in `<head>`