HTML & CSS Course
Master web development with HTML & CSS — 50 lessons from your first webpage to professional-grade layouts.
Master HTML and CSS for modern web design — semantic tags, Flexbox, CSS Grid, responsive layouts, animations and accessible forms — taught hands-on.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
🛠 What you'll build in this course
Real, finishable projects — not toy exercises. By the end of the course you'll have built every one of these and can put them in a portfolio.
🗺 Your noob-to-pro path
50 lessons in a deliberate order. If you do them top to bottom, you go from "what is HTML?" to writing professional, accessible CSS.
💡 Already know some HTML? Skim Foundations, then dig into Layout (23–34). Most self-taught learners struggle here — it's where the course earns its keep.
📋 Companion cheat sheets
Free, searchable references you can keep open in a second tab while you work.
👋 New to web development? Perfect place to start.
HTML & CSS is the foundation of everything on the web. Start with Lesson 1 — no experience needed.
Lessons in this course
- Introduction to Web Development — What HTML and CSS are, how the web works, and what you'll build
- HTML Basics & Structure — Write your first HTML page — headings, paragraphs, and page structure
- HTML Elements & Attributes — Links, images, lists, buttons — the building blocks of every webpage
- CSS Basics & Selectors — Apply styles to HTML elements using selectors, classes, and IDs
- CSS Styling & Colors — Control fonts, colours, backgrounds, and borders to make pages look great
- CSS Box Model & Display — Understand margin, padding, border, and how elements take up space
- CSS Layouts & Box Model — Combine display, position, and the box model to build real layouts
- Flexbox Mastery — Align and distribute elements with CSS Flexbox — the modern layout tool
- CSS Grid System — Create complex two-dimensional layouts with CSS Grid
- Responsive Design — Make your sites look perfect on phones, tablets, and desktops with media queries
- CSS Animations & Transitions — Add smooth motion and interactivity to your pages with CSS
- Advanced CSS Selectors — Target elements precisely with pseudo-classes, combinators, and attribute selectors
- CSS Transforms & 3D — Rotate, scale, skew, and create 3D effects with CSS transforms
- CSS Custom Properties — Build reusable design systems with CSS variables and dynamic theming
- Web Accessibility (A11y) — Make your websites usable by everyone, including screen reader users
- Advanced HTML5 Semantic Architecture — Use header, main, article, section, aside correctly for SEO and a11y
- Accessibility (A11y) Deep Dive & ARIA Roles — ARIA labels, roles, live regions, and keyboard navigation patterns
- Mastering Complex Forms & Validation Patterns — Build multi-step forms, custom validation, and error states
- Advanced Input Types, Sliders, Color Pickers, & Custom Controls — HTML5 input types and styling custom form controls from scratch
- Responsive Typography with clamp(), fluid units, & viewport math — Scale type fluidly across viewports with clamp(), vw, and container units
- CSS Flexbox: Advanced Patterns & Real Layouts — Sticky footers, holy grail, card grids — real-world flex patterns
- CSS Grid Level 2: Subgrid, Masonry & Complex Layouts — Subgrid, masonry layout, and named template areas in depth
- Container Queries & Modern Responsive Techniques — Style components based on their container size, not the viewport
- CSS Cascade, Layers, Specificity & Inheritance (Deep Dive) — Understand exactly how the browser resolves conflicting styles
- Advanced Selectors: :has(), :is(), :where(), nth-child mastery — Use modern selectors to write less CSS and target elements precisely
- Building Scalable Design Systems with CSS Variables — Create token-based design systems with custom properties and themes
- Responsive Images: srcset, sizes, picture, art direction — Serve the right image at the right size for every device
- CSS Transitions & State Animations — Animate hover, focus, and state changes smoothly with CSS transitions
- CSS Keyframe Animations & Motion Design — Build complex, looping animations with @keyframes and timing functions
- Scroll-based Animations (scroll-behavior, scroll-timeline) — Animate elements as the user scrolls using CSS scroll-timeline
- Custom Properties (CSS Variables) for Themes & Dynamic UI — Build dark mode, themes, and dynamic UI changes with CSS variables
- Dark Mode Design with prefers-color-scheme — Implement dark mode that respects system preferences automatically
- Advanced Positioning: sticky, fixed, absolute, smart layouts — Master all position values and build sticky headers, sidebars, and overlays
- CSS Shapes & Clip-Path for Creative Layouts — Create circles, polygons, and text wrapping around custom shapes
- Filters, Blend Modes & Modern Visual Effects — Apply blur, grayscale, drop shadows, and mix-blend-mode effects
- CSS Architecture: BEM, OOCSS, SMACSS Patterns — Organise large CSS codebases with proven naming and structuring patterns
- Building Reusable UI Components in Pure CSS — Cards, modals, navbars, accordions — built and documented for reuse
- HTML Canvas Essentials (Drawing, Animation, Images) — Draw shapes, text, and images with the HTML5 Canvas API
- SVG Mastery: Paths, Gradients, Filters, Animation — Write and animate SVG inline for scalable, interactive graphics
- Responsive Navigation Patterns (Mobile/Tablet/Desktop) — Hamburger menus, mega navs, and responsive nav patterns
- Modern Layout Techniques (Split screens, grids, hero headers) — Recreate real-world page layouts with modern CSS techniques
- Complex Tables: Styling, Responsiveness & Accessibility — Make data tables beautiful, responsive, and screen-reader friendly
- Print Stylesheets & Export-Friendly Layouts — Create clean print layouts and PDF-export-friendly pages
- CSS Performance Optimization & Rendering Pipelines — Reduce layout thrashing, use will-change, and keep CSS fast
- Progressive Enhancement & Graceful Degradation — Build features that work for everyone, enhanced for modern browsers
- Custom Scrollbars & UI Chrome Styling — Style scrollbars, selection highlights, and browser UI chrome with CSS
- Building Accessible Modals, Dialogs & Overlays — Create modals that trap focus, handle Escape, and work with screen readers
- CSS Logical Properties for International Layouts — Use logical properties for RTL-compatible, internationalisation-ready layouts
- Building Full Responsive Pages Without Frameworks — Build a complete, polished responsive page using only vanilla HTML and CSS
- Final Project: Portfolio Website — Build and deploy your own personal portfolio website from scratch