🌐 WEB FUNDAMENTALS · FREE COURSE

HTML & CSS
Mastery

Build real websites from scratch. Learn the language of the web — structure with HTML, beauty with CSS, and bring them together into responsive, animated, professional pages.

View Curriculum
12
LESSONS
3
PHASES
8+
PROJECTS
FREE
FOREVER
HTML5
CSS3
Flexbox
CSS Grid
Animations
Responsive Design
CSS Variables
Modern HTML5
🧱
PHASE 1
HTML Foundations
The skeleton of every webpage — elements, attributes, semantic markup, links, images, forms, and tables.
LESSON 01
Introduction to HTML
What HTML is, how browsers render it, your first webpage, the DOCTYPE, and basic document structure.
⏱️ 30 min 🟢 Beginner▶ Start
LESSON 02
HTML Elements & Text
Headings, paragraphs, bold, italic, semantic elements (article, section, nav, header, footer, main).
⏱️ 35 min 🟢 Beginner▶ Start
LESSON 03
Links, Images & Media
Anchor tags, relative vs absolute paths, img with alt, figure, video, audio, iframe embeds.
⏱️ 35 min 🟢 Beginner▶ Start
LESSON 04
Forms, Tables & Lists
All input types, labels, fieldsets, form validation attributes, ordered/unordered lists, and HTML tables.
⏱️ 40 min 🟢 Beginner▶ Start
🏗️
Phase 1 Projects
Personal Portfolio Page · Restaurant Menu · Contact Form · Wikipedia-Style Article
→
🎨
PHASE 2
CSS Fundamentals
Style everything — selectors, cascade, box model, Flexbox, Grid, and responsive design with media queries.
LESSON 05
Introduction to CSS
Selectors, properties, values, specificity, the cascade, inheritance, and linking CSS to HTML.
⏱️ 40 min 🟡 Beginner+▶ Start
LESSON 06
The Box Model & Layout
margin, padding, border, box-sizing, display (block/inline/inline-block), position, overflow.
⏱️ 40 min 🟡 Beginner+▶ Start
LESSON 07
Flexbox
flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow/shrink/basis. Center anything.
⏱️ 45 min 🟡 Beginner+▶ Start
LESSON 08
CSS Grid
grid-template-columns/rows, fr units, grid-area, named areas, auto-fit/auto-fill, complex layouts.
⏱️ 45 min 🟡 Intermediate▶ Start
LESSON 09
Responsive Design
Mobile-first approach, media queries, fluid typography with clamp(), responsive images, viewport units.
⏱️ 45 min 🟡 Intermediate▶ Start
🏗️
Phase 2 Projects
Pricing Cards · Navigation Bar · Photo Gallery · Dashboard Layout
→
⚡
PHASE 3
Advanced CSS & Polish
CSS custom properties, transitions, keyframe animations, pseudo-classes, modern selectors, and performance.
LESSON 10
Transitions & Animations
transition shorthand, timing functions, @keyframes, animation properties, transform (translate/scale/rotate).
⏱️ 45 min 🔴 Intermediate▶ Start
LESSON 11
CSS Variables & Theming
--custom-properties, :root scope, fallback values, dynamic theming, dark/light mode toggle.
⏱️ 35 min 🔴 Intermediate▶ Start
LESSON 12
Modern CSS & Best Practices
:is(), :where(), :has(), container queries, CSS nesting, performance tips, accessibility, and what's next.
⏱️ 40 min 🔴 Advanced▶ Start
🏆
Phase 3 Capstone Projects
Animated Landing Page · Dark/Light Theme Toggle · CSS-only Accordion · Full Portfolio Website
→

What you'll build 🏗️

Real projects that go in your portfolio — not toy examples.

💼
Personal Portfolio
A full homepage showcasing your work, skills, and contact info. Pure HTML & CSS, deployable immediately.
📊
Dashboard Layout
A data dashboard with CSS Grid, stat cards, sidebar navigation, and responsive breakpoints.
🎞️
Photo Gallery
A masonry-style image grid with hover overlays, CSS filters, and smooth transitions.
🌙
Dark Mode Toggle
A full site theme switcher using CSS variables and a JavaScript one-liner. Zero frameworks.
🍕
Restaurant Menu
A beautiful menu page with categories, pricing cards, images, and a mobile-friendly layout.
✨
Animated Landing Page
CSS keyframe animations, scroll reveals, gradient text, and a hero section that turns heads.