HTML & CSS

How to use this topic

The first eight pages are about HTML: what HTML and CSS are, the structure of a document, text and semantic elements, links and images, tables, forms, accessibility and metadata. The next ten are about CSS: selectors and the cascade, colors and typography, the box model, flexbox, grid, positioning, responsive design, modern CSS, animation and dark mode. The last two pages put it into practice: debugging with the browser's developer tools and publishing a page.

Most examples show their result live below the code, rendered by your own browser in a sealed-off frame: change the window size and responsive examples respond. JavaScript is in its own topic, JavaScript, and what happens between browser and server in Web & APIs; these pages link there.

Pages are tagged with the web development exams of the JavaScript Institute: WDE (Certified Entry-Level Web Developer, mostly HTML) and WDA (Certified Associate Web Developer, HTML and CSS).

Learning path

1. 01What Are HTML and CSS?What HTML and CSS do and how they work together: structure versus presentation, a short history, the living standards that define them today, and how a browser turns them into a page.BeginnerWDEWDA
2. 02HTML Document StructureThe parts of every HTML page: the doctype, html, head and body, elements, tags and attributes, nesting rules, void elements, character encoding and the viewport meta tag.BeginnerWDEWDA
3. 03Text and Semantic ElementsMarking up content by meaning: headings, paragraphs and lists, emphasis, quotes and code, and the semantic elements header, nav, main, article, section, aside and footer.BeginnerWDEWDA
4. 04Links, Images and MediaConnecting and illustrating pages: links with relative and absolute URLs, images with good alt text and responsive sizes, figures, video and audio, and lazy loading.BeginnerWDEWDA
5. 05TablesTables for tabular data: rows and cells, header cells with scope, captions, grouping with thead, tbody and tfoot, merged cells, and why tables are not for layout.BeginnerWDEWDA
6. 06Forms and InputCollecting input from users: the form element, input types, labels, buttons, select and textarea, built-in validation, autocomplete, and what happens when a form is submitted.BeginnerWDEWDA
7. 07Accessibility BasicsBuilding pages everyone can use: WCAG and accessibility law, semantic HTML first, text alternatives, keyboard access and focus, color contrast, and when to use ARIA.BeginnerWDEWDA
8. 08Metadata, Sharing and Search BasicsWhat goes in the head besides styles: the title and description, the lang attribute, favicons, Open Graph tags for link previews, canonical URLs, robots rules and what search engines really use.BeginnerWDEWDA
9. 09CSS Basics: Selectors, the Cascade and SpecificityHow CSS rules work: adding styles to a page, selectors, properties and values, how the cascade decides which rule wins, specificity, inheritance, and cascade layers.BeginnerWDA
10. 10Colors, Units and TypographyChoosing colors, sizes and fonts: color formats from hex to oklch, absolute and relative units, rem versus em, web fonts and font loading, and readable text.BeginnerWDA
11. 11The Box ModelEvery element is a box: content, padding, border and margin, box-sizing, block and inline display, margin collapsing, and overflow.BeginnerWDEWDA
12. 12FlexboxLaying out items in a row or column with flexbox: the flex container and items, the main and cross axis, justify-content and align-items, gap, wrapping, and flex-grow, flex-shrink and flex-basis.BeginnerWDA
13. 13CSS GridTwo-dimensional layout with CSS Grid: defining rows and columns, the fr unit, placing items by line and by area name, repeat and minmax, auto-fit, and subgrid.IntermediateWDA
14. 14Positioning and StackingTaking elements out of the normal flow: static, relative, absolute, fixed and sticky positioning, offsets, z-index, and stacking contexts.IntermediateWDA
15. 15Responsive DesignPages that work on every screen: the viewport, fluid layouts, mobile-first media queries, breakpoints, container queries, fluid type with clamp(), and responsive images.IntermediateWDA
16. 16Custom Properties and Modern CSSNewer CSS that makes stylesheets easier to maintain: custom properties and design tokens, calc(), nesting, the :has() and :is() selectors, and how to check browser support with Baseline.IntermediateWDA
17. 17Transitions and AnimationsMovement in CSS: transitions between states, keyframe animations, transforms, timing functions, what to animate for smooth performance, and respecting users who prefer reduced motion.IntermediateWDA
18. 18Dark Mode and ThemingSupporting light and dark themes: the prefers-color-scheme media query, the color-scheme property and light-dark(), theme tokens with custom properties, a theme switch, and contrast in both modes.Intermediate
19. 19Debugging HTML and CSS with Developer ToolsFinding out why a page looks wrong: inspecting elements, reading computed styles and the cascade, the box model and layout overlays, device emulation, and validating HTML and CSS.BeginnerWDA
20. 20Building and Publishing a PageFrom an empty folder to a page on the web: file and folder structure, relative paths, checking and validating, performance basics, and publishing on static hosting.BeginnerWDA

HTML & CSS glossary

Short definitions of the terms used in this topic. The full glossary covers every topic.