HTML & CSS Fundamentals

Structure a page with semantic HTML, style it with CSS, and make it look good on phones with the box model, Flexbox, Grid, and responsive design — then publish it.

Every website you have ever seen — a news site, an online shop, a web app with a hundred buttons — arrives in your browser as the same three languages: HTML for structure, CSS for appearance, and JavaScript for behavior. Even a React or Next.js app ends up as HTML and CSS in the browser. If you skip these two, everything built on top of them becomes guesswork: you copy styles that you can't debug, and layouts that "just break" on a phone.

This series teaches the two languages properly, from the first tag to a finished, responsive page. It starts with what HTML and CSS each do and how to write a valid document, then covers text, links, images, semantic structure, accessibility, forms, and tables. Then it moves to CSS: selectors, the cascade, the box model, typography, color, and custom properties. The last three chapters are layout — Flexbox, Grid, and responsive design — and the final one publishes your page to the web.

You won't just read about it. Across the whole series you build one page: a personal profile page for a developer called Dara Sok. Each chapter adds to it, so by the end you have a real, accessible, mobile-friendly site that you made yourself, with nothing but a text editor and a browser.

The series continues straight from How the Web Works: you already know that a browser downloads HTML and turns it into pixels. Now you'll write the HTML. You'll also use DevTools constantly — it's the best teacher for both languages.

You need a computer running Windows, macOS, or Linux, a modern browser (Chrome, Edge, or Firefox), a code editor (Visual Studio Code is free and used throughout), and the Git and GitHub setup from Git & GitHub for Beginners for the final chapter. Nothing costs money.

  1. 01What HTML and CSS AreStructure vs. presentation, your first index.html, opening it in a browser, and using DevTools to see what the browser made of it.
  2. 02HTML Document StructureThe doctype, html, head, and body; elements, attributes, nesting, void elements, comments, and the meta tags every page needs.
  3. 03Text, Links, and ImagesHeadings, paragraphs, lists, emphasis, links with relative and absolute paths, images with alt text, and Khmer text on the page.
  4. 04Semantic HTML and Accessibilityheader, nav, main, section, article, and footer; div and span; landmarks, headings, keyboard navigation, alt text, and testing with a screen reader.
  5. 05Forms and TablesForms with labels, input types, buttons, and built-in validation; where form data goes; and tables for real tabular data.
  6. 06CSS BasicsThree ways to add CSS, rule anatomy, selectors, combinators, pseudo-classes, the cascade, specificity, and inheritance.
  7. 07The Box ModelContent, padding, border, and margin; box-sizing; width and height; the display property; margin collapse; overflow; and CSS units.
  8. 08Typography, Color, and BackgroundsFont stacks and web fonts (including Khmer), type scale and line-height, color formats, contrast, backgrounds and shadows, custom properties, and dark mode.
  9. 09FlexboxOne-dimensional layout: flex containers and items, the main and cross axes, justify-content, align-items, gap, wrapping, and flex-grow — building a navbar and a row of cards.
  10. 10CSS GridTwo-dimensional layout: grid tracks, the fr unit, repeat and minmax, auto-fit galleries, named areas, and when to choose Grid over Flexbox.
  11. 11Responsive Design and PublishingThe viewport meta tag, mobile-first CSS, media queries, fluid images and type, testing with DevTools device mode, then publishing the finished page on GitHub Pages and auditing it with Lighthouse.