← All lessons

Introduction to HTML and CSS

How this course works, what the workbench can do, and the chapter list.

This is an HTML and CSS course for the Swiftener HTML / CSS Playground. Three panes: HTML, CSS, and JS. The preview updates live — no Ctrl+Enter. JavaScript-only work belongs in Introduction to JavaScript. Maps belong in Learn Leaflet.

Goal

Finish every chapter by pasting into the matching pane. The last chapter is a kiosk poster you can reuse.

How to take the course

  1. Keep this tutorial tab and the HTML / CSS Playground side by side.
  2. Each exercise says which pane to paste into (HTML, CSS, or JS).
  3. The preview on the right updates as you type.

What this playground can and cannot do

  • Can: HTML, CSS, a little JavaScript, live preview, optional libraries, local drafts.
  • Cannot: a public URL for your page, or fetching remote images in these lessons. Use CSS color blocks instead of http images.

Chapter list