Build the bedrock of every website. Learn to structure content with HTML and bring it to life with CSS — from first tag to full responsive page.
A comprehensive, hands-on course designed for undergraduate students. Master semantic HTML structure, the CSS box model, modern layouts with Flexbox and Grid, responsive design, animations, and accessibility best practices. Every module includes interactive examples you can edit live in the browser. Course materials available in English, French, and Spanish.
From your first HTML tag to building complete, responsive, accessible websites
Everything you need to get started — which is almost nothing!
Want to practice right away? Our free Web Playground lets you write HTML, CSS & JavaScript with live preview — no installation needed!
12 progressive modules taking you from zero to building complete responsive websites
What happens when you type a URL? Understand browsers, servers, HTTP, and how HTML arrives on your screen. The big picture before diving into code.
Your first HTML page. Tags, elements, attributes, headings, paragraphs, links, images, and lists — the building blocks of every website.
Beyond div soup: header, nav, main, article, section, aside, footer. Why semantics matter for accessibility, SEO, and maintainability.
Build forms that work: input types, labels, validation, fieldsets. Collect data the right way with accessible, user-friendly forms.
Data tables, audio, video, responsive images with srcset, iframes, and embedding maps and videos. Rich content for rich pages.
How CSS works: selectors, specificity, the cascade, the box model, units, and colors. The foundation for everything visual on the web.
Web fonts, sizing, spacing, backgrounds, gradients, borders, shadows, and CSS custom properties. Make your pages beautiful.
Master one-dimensional layouts. Flex containers, items, alignment, wrapping, and real-world patterns: navbars, card rows, centering.
Two-dimensional layouts made easy. Grid templates, areas, auto-fill, minmax, and building dashboards, galleries, and magazine layouts.
Mobile-first philosophy, media queries, breakpoint strategy, responsive images, container queries, and testing across devices.
Bring your pages to life. CSS transitions, keyframe animations, transforms, and performance-aware motion with prefers-reduced-motion.
Build for everyone. ARIA roles, keyboard navigation, color contrast, screen readers, meta tags, Open Graph, and structured data.
Put it all together! Build a complete multi-page responsive portfolio from scratch, apply every skill you've learned, and deploy it live on GitHub Pages.
Interactive tools built into this website to help you practice as you learn
After mastering HTML & CSS, you're ready for the next level