Topics
- How the web works (DNS, Server, Client)
- HTML5 Document Structure
- Doctype, meta tags, viewport
- NEW Understanding DOM Tree basics
- Comments, nesting, and indentation
Practice Tasks
- Create a "Hello World" page
- Set up VS Code with Prettier extension
Outcome: Create a valid, standard HTML document.
Topics
- Headings (h1-h6) hierarchy
- Paragraphs and formatting (bold, italic, mark)
- Lists (Ordered, Unordered, Definition)
- NEW Entity Codes (
©, )
- Inline vs Block level elements
Practice Tasks
- Create a Biography page
- Use entity codes for symbols
Outcome: Structure content for readability.
Topics
- Anchor tags (internal, external, mailto)
- Images (alt text importance)
- NEW
<picture> and srcset (Responsive Images)
- NEW
loading="lazy" for performance
- Audio, Video, and Iframes
Practice Tasks
- Create a photo gallery with lazy loading
- Embed a YouTube video
Outcome: Manage media efficiently.
Topics
- Div vs Span
- Semantic Tags: header, nav, main, footer
- Article vs Section vs Aside
- NEW
<dialog> (Native Modals)
- Planning layout structure
Practice Tasks
- Build a blog post layout
- Create a native popup using dialog tag
Outcome: Write meaningful, SEO-friendly markup.
Topics
- Table structure (tr, th, td)
- Thead, Tbody, Tfoot
- Colspan and Rowspan
- Captions and Accessibility
Practice Tasks
- Create a Pricing Table
- Build a Schedule/Time-table
Outcome: Display data in structured grids.
Topics
- Form inputs (text, email, password, date)
- NEW
inputmode (Optimize mobile keyboard)
- NEW
enterkeyhint (Go, Search, Done)
- Validation (required, pattern, min/max)
- Select, Textarea, Fieldset
Practice Tasks
- Create a Registration form
- Optimize form for mobile users
Outcome: Build user-friendly data collection forms.
Topics
<details> and <summary> (Accordion)- Data attributes (
data-*)
- Drag and Drop API basics
- NEW Web Components Intro (
<template>, <slot>)
Practice Tasks
- Build an FAQ section without JS
- Store extra data using data-attributes
Outcome: Use interactive HTML features.
Topics
- Meta descriptions & Keywords
- NEW Open Graph (OG) Tags (Facebook/LinkedIn previews)
- NEW Twitter Card Tags
- NEW JSON-LD (Structured Data for Google)
- Accessibility (ARIA roles, tab-index)
Practice Tasks
- Make a page share-ready for Facebook
- Validate accessibility Score
Outcome: Optimize for Search Engines and Social Media.
Topics
- Build a Multi-page Website
- Home, About, Contact, Blog
Checklist
- Valid Semantic HTML5
- SEO Meta Tags included
- Optimized Images (WebP / Lazy load)
- Accessible Forms
Outcome: Deployment-ready static website.
New Topics Added
- NEW Modern Favicon (SVG, Apple Touch Icon)
- NEW
manifest.json (PWA Basics)
- NEW Preload & Prefetch (Performance)
- NEW
<base> tag usage
Practice Tasks
- Generate and link a full favicon set
- Create a manifest.json file
Outcome: Professional touches for production.