AH Dev 101 — Your First Web Page with HTML and CSS | ahdev101.site
An ordered procedure from an empty folder to a styled page in the browser, with minutes per stage and the failure most often reported at each stage.
Stage 1 — create a folder. One folder on the desktop or in the documents directory, named for the page. This is where index.html and style.css will live, side by side. Budget: 1 minute.
Stage 2 — write index.html with the doctype and skeleton. Open the folder in a text editor, create index.html, and type the <!DOCTYPE html> declaration followed by the html element containing head and body. Budget: 5 minutes. Typical failure: the file is saved as index.html.txt and the browser shows source instead of a page.
Stage 3 — add a heading and a paragraph. Put a title element in the head, an h1 and at least one p in the body. Save. Budget: 3 minutes. Typical failure: a missing closing </p> tag makes following elements nest inside the paragraph.
On narrow screens, swipe or scroll the plate sideways.
Stage 4 — open the page in the browser. Double-click index.html or drag it into a browser window. Budget: under 1 minute. Typical failure: the tab shows plain text with angle brackets, which means the extension is wrong.
Stage 5 — create style.css and write the first rule. The file sits in the same folder as index.html. Write one rule, for example body { color: navy; background-color: #f5f5f5; }. Budget: 5 minutes. Typical failure: a property value without a unit, such as font-size: 18, is ignored by the browser.
Stage 6 — link the stylesheet and reload. Add one link element with rel=stylesheet in the head element, pointing at style.css, then reload the browser. Budget: 2 minutes. Typical failure: an href path that does not match the folder layout leaves the page unstyled.
Total for the six stages: about 17 minutes of typing and clicking, plus 10-15 minutes if one stage needs debugging. The full failure map is on the main page under the section on where first pages go wrong.
Further reading