HTML and CSS: beginner to senior

A self-study course with 64 detailed lessons, working examples, guided challenges, and eight milestone projects. Work through the lessons in order and build each project before moving to the next phase.

Each lesson folder includes a runnable example.html and editable style.css. Open the example directly in a browser. Lesson 13 includes local audio; its video sample needs an internet connection. Lesson 37 uses an optional online font and has a local fallback.

How to study

1. Read the lesson, including How it works and Common mistake. Use the field reference or linked standards when you need more detail.
2. Run the example, predict what a change will do, edit the code, and check the result.
3. Build the guided challenge yourself in a practice/ folder inside that lesson.
4. Complete the lesson checklist and record what you learned or fixed.
5. After each phase, complete its milestone project.

Aim to build the phase projects rather than only reading. HTML and CSS skill comes from repeatedly making, inspecting, and improving pages.

Learning path

Phase 1: HTML foundations

1. How the web works — Understand what the browser requests and renders before writing markup.
2. Project setup and editor — Create a small, predictable workspace for static web pages.
3. HTML document anatomy — Write a complete valid HTML document.
4. Text and headings — Mark up written content with a meaningful outline.
5. Links and navigation — Connect pages and sections accessibly.
6. Images and figures — Choose and describe images appropriately.
7. Lists and content grouping — Represent ordered, unordered, and term-based information.
8. Semantic page regions — Give a document meaningful structure.

Phase 2: HTML content and interaction

9. Tables and data — Use tables for data with understandable relationships.
10. Forms fundamentals — Collect data with correctly associated controls.
11. Form controls and types — Choose the right control for each answer.
12. Validation and form UX — Use built-in constraints and clear instructions.
13. Media and embedded content — Add audio, video, and external content responsibly.
14. Interactive HTML — Use native disclosure and dialog patterns where suitable.
15. Metadata and sharing — Describe pages to browsers and sharing services.
16. HTML quality and maintainability — Review markup as a teammate would.

Phase 3: CSS foundations

17. CSS syntax and connection — Apply styles with readable rules.
18. Selectors — Target elements accurately without brittle markup.
19. Cascade and specificity — Predict which declaration wins.
20. Values and units — Pick units that fit the property and design.
21. Color and backgrounds — Create consistent surfaces with readable contrast.
22. Typography basics — Make text legible and easy to scan.
23. Box model and sizing — Reason about rendered dimensions.
24. Display and normal flow — Understand how elements occupy space.

Phase 4: Layout and responsive design

25. Positioning and stacking — Place elements without breaking document flow.
26. Flexbox — Lay out one-dimensional groups.
27. CSS Grid — Lay out two-dimensional page areas.
28. Responsive fundamentals — Adapt layouts to available space.
29. Container queries — Adapt a component to its container.
30. Modern sizing and flow — Create resilient layouts for variable content.
31. Responsive images and media — Avoid oversized or distorted media.
32. Layout project — Combine layout methods into a complete page.

Phase 5: Accessible and polished interfaces

33. Accessibility foundations — Build pages usable through different input and output methods.
34. Focus and interaction states — Make interactive elements understandable.
35. Accessible forms — Make form errors and groups understandable.
36. CSS for forms — Style native controls without hiding their behavior.
37. Web fonts and advanced typography — Load fonts carefully and control long-form text.
38. Borders shadows and effects — Use surface effects with restraint.
39. Transforms transitions animations — Add motion that supports comprehension.
40. Print and alternate media — Support layouts beyond screens.

Phase 6: Advanced CSS mechanics

41. Custom properties and themes — Centralize reusable values and theme components.
42. Cascade layers and scope — Control style priority in larger codebases.
43. Advanced selectors — Use powerful selectors with clear intent.
44. Subgrid and complex grid — Align nested content across repeated cards.
45. Logical properties and writing modes — Support different text directions and layouts.
46. CSS architecture — Keep styles understandable as a project grows.
47. Modern CSS functions and rules — Use built-in CSS tools before adding complexity.
48. Progressive enhancement — Make core content work when advanced styles are unavailable.

Phase 7: Professional workflow

49. Browser developer tools — Diagnose layout and cascade problems systematically.
50. Cross-browser and device testing — Check real behavior across environments.
51. Performance and Core Web Vitals — Reduce the cost of rendering a page.
52. SEO and document quality — Help search and sharing tools understand content.
53. Security and safe HTML — Avoid common mistakes when handling links and embeds.
54. Design systems and tokens — Build consistent reusable visual rules.
55. Code review and documentation — Make decisions legible to other developers.
56. Git and deployment basics — Track and publish static web work.

Phase 8: Senior practice and capstones

57. Building from a design — Translate a visual design into robust HTML and CSS.
58. Content-first responsive strategy — Handle unpredictable real-world content.
59. Component API thinking — Design components with clear states and variations.
60. Accessibility audit and remediation — Turn findings into concrete fixes.
61. Performance audit and optimization — Prioritize improvements using measurements.
62. Maintainability refactor — Improve a growing stylesheet without changing behavior.
63. Capstone multi-page site — Deliver a complete accessible responsive site.
64. Portfolio and senior review — Explain and defend implementation choices.

Graduation checklist

• Build semantic pages with sensible headings, links, media, tables, and forms.
• Create responsive layouts with normal flow, Flexbox, Grid, and container queries.
• Explain the cascade, specificity, inheritance, and how to debug them.
• Support keyboard use, focus visibility, zoom, contrast, and reduced motion.
• Test across browsers and screen sizes, then fix measured accessibility and performance issues.
• Document reusable components and explain layout, accessibility, and performance choices.

Projects and assessment

Complete the eight milestone project briefs, one after each phase. The final project is a multi-page website with an accessibility audit, performance measurements, and a case study.

Use the field reference while practicing, the phase review questions to check understanding, and the assessment rubric to judge your progress. Finishing the reading alone is not evidence of senior-level skill; the capstone and review work provide that evidence.