Amba's Tools
Home › Learn › HTML and CSS

HTML and CSS

20 lessons, 4 modules, HTML and CSS running in your browser.

Start the course

Web pages are HTML for structure and CSS for appearance, and both are best learned by typing them and watching the page change. Each lesson here has an editor with a live preview beside it: what you write is the page. Press Run and the checks inspect the page itself, elements, attributes, and computed styles, and tell you what is missing.

The first module is HTML: headings, lists, links, images, semantic sections, tables. Then CSS: selectors, colors, classes, the box model, text. Then layout, which is where most of the difficulty lives: display, flexbox, grid, centering. The last module covers backgrounds, units, forms, and responsive rules, and ends in a project, a one-page site, that is not started from nothing: nine of the lessons produce a piece of it, saved in this browser as you go, and the project opens with all of them placed into one page for you to finish. Twenty lessons of about ten minutes.

What you will learn

The final project

The course ends with Project: a one-page site: a one-page site assembled from the pieces you built. 9 of the lessons build a part of it, saved in this browser as you go, so the project is assembled from your own work rather than started from nothing.

  1. header (Semantic structure) is the page header, with the site title and the navigation.
  2. table (Tables) is the price list.
  3. type (Text styling) sets the page's type: the font, the centered heading, the lead paragraph, the uppercase subheadings.
  4. .btn (Styling links and buttons) is the button-styled link, with the link colors and the hover rule.
  5. .bar (Flexbox: alignment) is the toolbar under the header: logo, search, menu.
  6. .gallery (Grid) is the three-column gallery.
  7. .card (Backgrounds, borders, and shadows) is the about card with the round avatar.
  8. form (Forms) is the newsletter sign-up.
  9. .cols (Responsive: media queries) is the two-column section that stacks on narrow screens.

Lessons

HTML basics

  1. Headings and paragraphsThe building blocks of every page, and how tags work.
  2. ListsUnordered and ordered lists.
  3. Links and imagesAttributes: href, src, and alt.
  4. Semantic structureheader, nav, main, article, footer.part: header
  5. TablesRows, cells, and header cells.part: table

CSS basics

  1. Selectors and colorsYour first CSS rules.
  2. Classes and idsStyle some elements, not all of them.
  3. The box modelPadding, border, and margin.
  4. Text stylingFonts, sizes, alignment, and transforms.part: type
  5. Styling links and buttonsPseudo-classes, and a link that looks like a button.part: .btn

Layout

  1. display, width, and heightBlock, inline, inline-block, and sizing boxes.
  2. Flexbox: a row of itemsdisplay: flex, gap, and flex-wrap.
  3. Flexbox: alignmentjustify-content, align-items, and flex: 1.part: .bar
  4. GridTwo-dimensional layout with rows and columns.part: .gallery
  5. Centering thingsThe one everybody searches for.

Finishing a page

  1. Backgrounds, borders, and shadowsMake boxes look like cards.part: .card
  2. Units: px, rem, em, and percentSizes that scale.
  3. FormsLabels, inputs, and buttons that work for everyone.part: form
  4. Responsive: media queriesChange the layout for narrow screens.part: .cols
  5. Project: a one-page siteAssemble the pieces you built along the way into one page, then finish it.final project