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.
🛠 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.
- 📄A personal landing page — your name, photo, links, fully responsive.
- 🍽️A restaurant menu page — practice semantic HTML, tables and styling.
- 🃏A responsive card grid — using CSS Grid and Flexbox properly.
- 📝A working contact form with HTML5 validation and clean styling.
- 🌗A light/dark mode toggle using CSS variables.
- 🎬An animated landing hero — keyframes, transitions, transforms.
🗺 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.
- 1 Foundations (1–10). What HTML is, document structure, tags, attributes, the box model. You'll write your first page on day one.
- 2 Styling (11–22). CSS selectors, colours, typography, spacing — making things look the way you want.
- 3 Layout (23–34). Flexbox and Grid in depth — finally understand why CSS layout is hard for everyone, then stop finding it hard.
- 4 Responsive & accessible (35–43). Media queries, mobile-first design, ARIA, semantic HTML — building for everyone.
- 5 Pro techniques (44–49). Animations, custom properties, design systems, container queries — the modern CSS you'll see in real codebases.
- 6 Final project (50). Put it all together into a real, portfolio-worthy website.
💡 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.
Continue where you left off
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
Frequently asked questions
Should I learn HTML and CSS before JavaScript?
Yes. HTML structures a web page and CSS styles it — together they are the foundation of every website. Learning them first gives you something visual to build on before adding interactivity with JavaScript.
Is HTML and CSS hard to learn?
HTML and CSS are among the easiest skills to start with — you see results instantly in the browser. HTML is straightforward; CSS layout (Flexbox and Grid) takes a bit more practice, which this course walks through with visual examples.
How long does it take to learn HTML and CSS?
You can build a simple styled page in your first week. Becoming confident with responsive design, Flexbox and Grid typically takes 3–6 weeks of practice.
What can I build with just HTML and CSS?
Plenty: a personal portfolio, a landing page, a blog layout, a restaurant menu, a CV, a product page, an email template, even a static photo gallery.
Should I learn Flexbox or Grid first?
Flexbox first. It handles one-dimensional layouts and you'll use it constantly. Learn Grid right after for two-dimensional page layouts.
More for this course
- HTML & CSS cheat sheet — Quick syntax reference you can scan while you code
- CSS Grid Layout Tutorial — A complete beginner-to-advanced guide to mastering modern layout design with CSS Grid. Learn rows, columns, responsive layouts, and real-world examples.
- CSS Flexbox: A Visual Guide — Master the flex container, axes, alignment properties, and common layout patterns with visual examples.
- Building Forms with HTML5 and Validation — Create accessible, user-friendly forms with modern HTML5 validation techniques.
- Responsive Web Design Fundamentals — Master CSS techniques to create websites that look great on any device.