HTML – Mentorteach

Day 1 — HTML basics & document structure
Basic file setup, saving .html files. Exercise: Create index.html with title and a single paragraph.

Day 2 — Text content & semantics
headings (<h1>–<h6>), paragraphs <p>, semantic tags (<main>, <section>, <article>, <aside>, <header>, <footer>). Exercise: Build a one-page article using semantic sections.

Day 3 — Links & navigation
anchor tags <a>, absolute vs relative URLs, target, rel, internal page anchors. Exercise: Create a nav bar linking to sections on the same page.

Day 4 — Images & media basics
<img> attributes (src, alt, width, height), accessible images, image formats, basic audio/video tags (<audio>, <video>). Exercise: Build a gallery of 3 images with captions.

Day 5 — Lists & tables
ordered <ol> and unordered <ul> lists, definition lists <dl>, table tags <table>, <thead>, <tbody>, <tr>, <th>, <td> and basic accessibility concerns. Exercise: Create a price table or schedule table.

Day 6 — Forms basics
, types (text, password, email, number), <label>, <textarea>, <button>, name attributes, placeholder. Exercise: Build a contact form (no backend needed).

Day 7 — Accessibility & best practices
semantic HTML for accessibility, alt text, form labels, keyboard navigation, landmark roles. Exercise: Audit one earlier page and improve accessibility.

Day 8 — More on forms & validation
, checkboxes, radio buttons, form validation attributes (required, pattern, min, max), fieldset and legend. Exercise: Expand contact form with selections and validation.

Day 9 — HTML APIs overview (Intro)
canvas (basic idea), data-* attributes, details/summary, meter/progress, microdata basics. Exercise: Add a progress meter to an imaginary quiz page.

Day 10 — Media embedding & iframes
, embedding YouTube, loading attribute (lazy), picture element and srcset basics for responsive images. Exercise: Create a media section with an embedded video and responsive image.

Day 11 — Semantic patterns for common UI
cards, hero sections, footers, CTAs using semantic markup; content grouping and ARIA basics. Exercise: Mark up a simple landing page structure (no CSS necessary).

Day 12 — Responsive HTML patterns
mobile-first markup, meta viewport tag, fluid images, semantic order for responsive layout. Exercise: Create a two-column layout HTML that stacks on small screens (CSS later).

Day 13 — Progressive enhancement & graceful degradation
building HTML that works without CSS/JS; using HTML features that remain useful when scripts fail. Exercise: Ensure your contact form works and degrades gracefully.

Day 14 — Mini project: Multi‑section landing page
Build a small landing page (hero, features, testimonials, contact form, footer) focusing only on clean semantic HTML and accessibility.

Day 15 — Metadata & SEO basics
tags (charset, viewport, description), SEO-friendly content structure, canonical tags, social preview basics (og: tags idea). Exercise: Add meta tags to your landing page and write a good meta description.

Day 16 — Performance-conscious HTML
defer/async for scripts (note: HTML role), preloading critical assets, image size considerations, loading="lazy". Exercise: Audit images and add lazy loading where useful.

Day 17 — Patterns: navigation, cards, forms (HTML only)
accessible navigation patterns, skip links, search form markup, reusable card markup. Exercise: Convert a feature list into reusable card markup.

Day 18 — HTML for components & design systems
consistent class naming (BEM idea), component-friendly structure, using data- attributes for JS hooks, semantic component containers. Exercise: Create 3 HTML component templates: card, modal skeleton, and form row.

Day 19 — Microcopy, content strategy, and localization basics
clear labels and placeholders, lang attribute, directionality (dir), simple internationalization best practices. Exercise: Add lang and dir where appropriate and craft microcopy for your form inputs.

Day 20 — Final project: Build a small multi-page site
Create a 3-page site (Home, About, Contact) using everything learned: semantic HTML, accessible forms, responsive-friendly markup, meta tags. Checklist: accessible images, labeled forms, meta tags, internal nav, relative links.

Day 21 — Review, polish & deploy (static)
final accessibility checklist, validate with an HTML validator, optional: deploy to GitHub Pages or any static host. Exercise: Validate HTML, fix errors, push to GitHub and enable Pages (or export ZIP).

Course Content

Day 1 — HTML basics & document structure Basic file setup, saving .html files. Exercise: Create index.html with title and a single paragraph.

Day 2 — Text content & semantics headings (<h1>–<h6>), paragraphs <p>, semantic tags (<main>, <section>, <article>, <aside>, <header>, <footer>). Exercise: Build a one-page article using semantic sections.

Day 3 — Links & navigation anchor tags <a>, absolute vs relative URLs, target, rel, internal page anchors. Exercise: Create a nav bar linking to sections on the same page.

Day 4 — Images & media basics <img> attributes (src, alt, width, height), accessible images, image formats, basic audio/video tags (<audio>, <video>). Exercise: Build a gallery of 3 images with captions.

Day 5 — Lists & tables ordered <ol> and unordered <ul> lists, definition lists <dl>, table tags <table>, <thead>, <tbody>, <tr>, <th>, <td> and basic accessibility concerns. Exercise: Create a price table or schedule table.

Day 6 — Forms basics , types (text, password, email, number), <label>, <textarea>, <button>, name attributes, placeholder. Exercise: Build a contact form (no backend needed).

Day 7 — Accessibility & best practices semantic HTML for accessibility, alt text, form labels, keyboard navigation, landmark roles. Exercise: Audit one earlier page and improve accessibility.

Day 8 — More on forms & validation , checkboxes, radio buttons, form validation attributes (required, pattern, min, max), fieldset and legend. Exercise: Expand contact form with selections and validation.

Day 9 — HTML APIs overview (Intro) canvas (basic idea), data-* attributes, details/summary, meter/progress, microdata basics. Exercise: Add a progress meter to an imaginary quiz page.

Day 10 — Media embedding & iframes , embedding YouTube, loading attribute (lazy), picture element and srcset basics for responsive images. Exercise: Create a media section with an embedded video and responsive image.

Day 11 — Semantic patterns for common UI cards, hero sections, footers, CTAs using semantic markup; content grouping and ARIA basics. Exercise: Mark up a simple landing page structure (no CSS necessary).

Day 12 — Responsive HTML patterns mobile-first markup, meta viewport tag, fluid images, semantic order for responsive layout. Exercise: Create a two-column layout HTML that stacks on small screens (CSS later).

Day 13 — Progressive enhancement & graceful degradation building HTML that works without CSS/JS; using HTML features that remain useful when scripts fail. Exercise: Ensure your contact form works and degrades gracefully.

Day 14 — Mini project: Multi‑section landing page Build a small landing page (hero, features, testimonials, contact form, footer) focusing only on clean semantic HTML and accessibility.

Day 15 — Metadata & SEO basics tags (charset, viewport, description), SEO-friendly content structure, canonical tags, social preview basics (og: tags idea). Exercise: Add meta tags to your landing page and write a good meta description.

Day 16 — Performance-conscious HTML defer/async for scripts (note: HTML role), preloading critical assets, image size considerations, loading="lazy". Exercise: Audit images and add lazy loading where useful.

Day 17 — Patterns: navigation, cards, forms (HTML only) accessible navigation patterns, skip links, search form markup, reusable card markup. Exercise: Convert a feature list into reusable card markup.

Day 18 — HTML for components & design systems consistent class naming (BEM idea), component-friendly structure, using data- attributes for JS hooks, semantic component containers. Exercise: Create 3 HTML component templates: card, modal skeleton, and form row.

Day 19 — Microcopy, content strategy, and localization basics clear labels and placeholders, lang attribute, directionality (dir), simple internationalization best practices. Exercise: Add lang and dir where appropriate and craft microcopy for your form inputs.

Day 20 — Final project: Build a small multi-page site Create a 3-page site (Home, About, Contact) using everything learned: semantic HTML, accessible forms, responsive-friendly markup, meta tags. Checklist: accessible images, labeled forms, meta tags, internal nav, relative links.

Day 21 — Review, polish & deploy (static) final accessibility checklist, validate with an HTML validator, optional: deploy to GitHub Pages or any static host. Exercise: Validate HTML, fix errors, push to GitHub and enable Pages (or export ZIP).

Student Ratings & Reviews

Day 1 — HTML basics & document structure
Basic file setup, saving .html files. Exercise: Create index.html with title and a single paragraph.

Day 2 — Text content & semantics
headings (<h1>–<h6>), paragraphs <p>, semantic tags (<main>, <section>, <article>, <aside>, <header>, <footer>). Exercise: Build a one-page article using semantic sections.

Day 3 — Links & navigation
anchor tags <a>, absolute vs relative URLs, target, rel, internal page anchors. Exercise: Create a nav bar linking to sections on the same page.

Day 4 — Images & media basics
<img> attributes (src, alt, width, height), accessible images, image formats, basic audio/video tags (<audio>, <video>). Exercise: Build a gallery of 3 images with captions.

Day 5 — Lists & tables
ordered <ol> and unordered <ul> lists, definition lists <dl>, table tags <table>, <thead>, <tbody>, <tr>, <th>, <td> and basic accessibility concerns. Exercise: Create a price table or schedule table.

Day 6 — Forms basics
, types (text, password, email, number), <label>, <textarea>, <button>, name attributes, placeholder. Exercise: Build a contact form (no backend needed).

Day 7 — Accessibility & best practices
semantic HTML for accessibility, alt text, form labels, keyboard navigation, landmark roles. Exercise: Audit one earlier page and improve accessibility.

Day 8 — More on forms & validation
, checkboxes, radio buttons, form validation attributes (required, pattern, min, max), fieldset and legend. Exercise: Expand contact form with selections and validation.

Day 9 — HTML APIs overview (Intro)
canvas (basic idea), data-* attributes, details/summary, meter/progress, microdata basics. Exercise: Add a progress meter to an imaginary quiz page.

Day 10 — Media embedding & iframes
, embedding YouTube, loading attribute (lazy), picture element and srcset basics for responsive images. Exercise: Create a media section with an embedded video and responsive image.

Day 11 — Semantic patterns for common UI
cards, hero sections, footers, CTAs using semantic markup; content grouping and ARIA basics. Exercise: Mark up a simple landing page structure (no CSS necessary).

Day 12 — Responsive HTML patterns
mobile-first markup, meta viewport tag, fluid images, semantic order for responsive layout. Exercise: Create a two-column layout HTML that stacks on small screens (CSS later).

Day 13 — Progressive enhancement & graceful degradation
building HTML that works without CSS/JS; using HTML features that remain useful when scripts fail. Exercise: Ensure your contact form works and degrades gracefully.

Day 14 — Mini project: Multi‑section landing page
Build a small landing page (hero, features, testimonials, contact form, footer) focusing only on clean semantic HTML and accessibility.

Day 15 — Metadata & SEO basics
tags (charset, viewport, description), SEO-friendly content structure, canonical tags, social preview basics (og: tags idea). Exercise: Add meta tags to your landing page and write a good meta description.

Day 16 — Performance-conscious HTML
defer/async for scripts (note: HTML role), preloading critical assets, image size considerations, loading="lazy". Exercise: Audit images and add lazy loading where useful.

Day 17 — Patterns: navigation, cards, forms (HTML only)
accessible navigation patterns, skip links, search form markup, reusable card markup. Exercise: Convert a feature list into reusable card markup.

Day 18 — HTML for components & design systems
consistent class naming (BEM idea), component-friendly structure, using data- attributes for JS hooks, semantic component containers. Exercise: Create 3 HTML component templates: card, modal skeleton, and form row.

Day 19 — Microcopy, content strategy, and localization basics
clear labels and placeholders, lang attribute, directionality (dir), simple internationalization best practices. Exercise: Add lang and dir where appropriate and craft microcopy for your form inputs.

Day 20 — Final project: Build a small multi-page site
Create a 3-page site (Home, About, Contact) using everything learned: semantic HTML, accessible forms, responsive-friendly markup, meta tags. Checklist: accessible images, labeled forms, meta tags, internal nav, relative links.

Day 21 — Review, polish & deploy (static)
final accessibility checklist, validate with an HTML validator, optional: deploy to GitHub Pages or any static host. Exercise: Validate HTML, fix errors, push to GitHub and enable Pages (or export ZIP).