Do I need to install anything before stage one?

No. A plain text editor and a browser are enough for the first page. A dedicated code editor helps later but is not required to reach a styled page in the browser.

Why does my page show the HTML source instead of rendering?

The file was saved with the wrong extension, usually .html.txt. Rename it to index.html in the file manager and reopen it.

I linked style.css but nothing changed — what failed?

The href path does not match the folder layout. Keep index.html and style.css in the same folder and use href="style.css" in the link element.

How much text should a first page have?

One heading and one paragraph are enough to prove the pipeline works. Add a list, a link and a small table to exercise the rest of the ten starter elements.

18 elementselements in the first HTML description

6 propertiesstarter CSS properties on this page

~45 mintypical total time to the first styled page

18elements in the late-1991 HTML description

Your first web page

AH Dev 101 — Your First Web Page with HTML and CSS | ahdev101.site

You open a plain text editor, type a doctype and three elements, save the file with an .html extension, and double-click it. A browser renders a heading and a paragraph. Adding one linked stylesheet changes the colours and spacing. That whole path is what this page walks through, in order, with the starter tags and the first CSS properties you will actually use.

ahdev101.site
AH Dev 101 — a procedure for the very first HTML and CSS page
From an empty text file to a styled page in the browser, in one sitting.

Stage by stage

Ordered procedure: empty file to styled page

18elements in the late-1991 HTML descriptionTim Berners-Lee described HTML in late 1991 in a document that listed 18 elements.

28 Oct 2014HTML5 became a W3C RecommendationHTML5 was published as a W3C Recommendation on 28 October 2014; HTML 5.1 followed on 1 November 2016.

17 Dec 1996first W3C CSS RecommendationThe first W3C CSS Recommendation, CSS1, was released on 17 December 1996, with Bert Bos as co-author.

First CSS properties

Starter CSS properties with example values and what each changes
Property	Example value	What it changes
color	navy	Text colour of the selected element
font-size	18px	Size of the text, in pixels
background-color	#f5f5f5	Background behind the element
margin	16px	Space outside the element's border
padding	12px	Space inside the element's border
max-width	720px	Maximum line length before wrapping

Starter CSS properties with example values and what each changes

How do I make my first web page with HTML and CSS?

Write one HTML file with a doctype and three elements, open it in a browser, then add one linked stylesheet.

An HTML document starts with a <!DOCTYPE html> declaration followed by the html, head and body elements. Everything else on the page lives inside those three. The head carries the title and the link to the stylesheet; the body carries what a visitor sees.

HTML elements are marked with tags in angle brackets, and most elements have an opening and a closing tag. The opening tag for a paragraph is <p> and the closing tag is </p>. Text goes between them.

A stylesheet is linked to a page with one link element with rel=stylesheet in the head element. That single line is what connects style.css to index.html; without it the page renders in the browser's default style.

One text editor, one folder, one browser tab.
File named index.html, saved with the extension the editor actually offers.
One link element in the head pointing at style.css in the same folder.

Terms used on this page

Element: A component of an HTML document marked with tags in angle brackets; most elements have an opening and a closing tag.
Tag: The text in angle brackets that opens or closes an element, such as <p> or </p>.
Doctype: The <!DOCTYPE html> declaration at the very top of a document that tells the browser to parse it as HTML.
Stylesheet: A separate file of CSS rules, linked to a page with one link element with rel=stylesheet in the head element.
Selector: The first part of a CSS rule that names what the rule applies to, such as a tag name or a class.
Declaration block: The braces in a CSS rule that hold property-value pairs such as color: navy.

Questions people actually ask at stage one

Do I need to install anything before stage one?: No. A plain text editor and a browser are enough for the first page. A dedicated code editor helps later but is not required to reach a styled page in the browser.
Why does my page show the HTML source instead of rendering?: The file was saved with the wrong extension, usually .html.txt. Rename it to index.html in the file manager and reopen it.
I linked style.css but nothing changed — what failed?: The href path does not match the folder layout. Keep index.html and style.css in the same folder and use href="style.css" in the link element.
How much text should a first page have?: One heading and one paragraph are enough to prove the pipeline works. Add a list, a link and a small table to exercise the rest of the ten starter elements.

How this record was assembled

The procedure, the element list and the property list were built from the published HTML and CSS specifications and from the common failures reported at each stage. Stage times are typical budgets for a first attempt and vary with the editor in use.

Reference points

Reference points: the late-1991 HTML description, the 1994 CSS proposal, the 1996 CSS1 Recommendation and the 2014 HTML5 Recommendation.