Milestone map
Milestone map
3 milestones
Learn the basics: write an HTML file that shows text, an image, and a link
2–5 days
Write a real HTML file in a text editor and open it in a browser to see it render. Do not use a website builder or drag-and-drop tool — the point of this milestone is understanding that a browser renders text files with angle-bracket tags. Your HTML file must include: at least one paragraph of text, one image (from a local file or a URL), and one working hyperlink that goes somewhere. Save the file, open it in a browser, and take a screenshot showing all three elements working. This is the foundation on which everything else in the outcome is built.
Proof required
Submit: a screenshot of your HTML file open in a browser, showing visible text, a displayed image, and a clickable link. Include the URL of where the link goes in your submission note.
What gets checked
- Screenshot shows a browser rendering an HTML file — the html, head, and body structure should be in the source, even if the screenshot shows only the rendered output
- All three elements are present and working: text is displayed (not just the tag source), image is visible (not a broken image icon), link is a real href attribute pointing to a real URL
- File was written in a text editor, not generated by a WYSIWYG builder — the verifier may ask to see the HTML source; auto-generated class names and inline style soup indicate a builder was used
Common mistakes
- Using a website builder (Wix, Squarespace, Weebly) instead of writing HTML — builders generate code the student cannot read or understand; the milestone requires hand-written code in a text editor
- Writing the HTML but not opening it in a browser — saving a `.txt` file does not count; the screenshot must show a browser window with the rendered page
- Confusing the code editor view with the rendered output — the screenshot must show a browser window, not a code editor with highlighted syntax
Resources
Foundationstart here
Depthgo deeper
Masteryfor the dedicated
What a verifier looks for
- Ask to see the raw HTML source — right-click → View Page Source in the browser, or ask for the .html file — confirm it contains hand-written tags (html, head, body, p, img, a) and not auto-generated builder code
- Check all three elements in the screenshot: text is rendered as visible text (not the tag itself), image loads without a broken icon, link has an href pointing to a real URL
- If the source shows auto-generated class names and inline style soup, the student used a builder — fail the milestone and redirect them to freeCodeCamp or Khan Academy to write HTML by hand
You'll sign in first, then come straight back here.
Style the page with CSS — colours, fonts, and a layout you designed
3–7 days
Add a stylesheet to your HTML file and use CSS to control how the page looks. At minimum: change the background or text colour to something you chose, change the font (not the browser default), and arrange the page content using at least one CSS layout technique — this can be as simple as centring a block of text, adding padding, or using flexbox to put two things side by side. The goal is to produce a page that looks deliberate: someone looking at it should be able to tell that you made styling decisions, not that it rendered unstyled.
Proof required
Submit: a screenshot of your styled page in the browser. In two to three sentences, describe the CSS choices you made: what colours did you choose and why, what font did you use, and what layout technique did you apply.
What gets checked
- Page is visibly styled — it should look different from a browser-default unstyled HTML page; if the screenshot looks like plain black text on a white background with no visible layout choices, CSS was not applied
- CSS is in a separate `.css` file linked via a `<link>` tag, or in a `<style>` block in the `<head>` — the description should mention where the CSS lives
- Student can describe their choices — the two-to-three sentence description should name specific properties (colour, font-family, padding, flexbox) not just 'I made it look nice'
Common mistakes
- Copy-pasting a full CSS stylesheet from a template without understanding it — the two-to-three sentence description test catches this: if the student cannot name a single CSS property they used, they copied without understanding
- Only changing colours and nothing else — a styled page needs at minimum a font choice and one layout decision alongside colour; colours alone are not sufficient styling
- Not linking the CSS file correctly so styles do not apply — a common beginner error where the stylesheet exists but the `<link>` tag's `href` points to the wrong path; if the screenshot shows an unstyled page, check the link tag first
Resources
Foundationstart here
Depthgo deeper
Masteryfor the dedicated
What a verifier looks for
- Check the screenshot for visible styling: background or text colour changed, font is not the browser default (Times New Roman or Arial), and some layout technique is applied (even basic padding or text alignment counts)
- Ask the student to name one CSS property they used and where it is in their stylesheet — if they cannot name any property, they likely copied a template without understanding it
- If the page looks entirely unstyled, ask whether the `<link>` tag's `href` path is correct — this is the most common cause of CSS not applying
You'll sign in first, then come straight back here.
Publish to a live URL and submit the link as proof
1–2 days
Deploy your HTML + CSS page to a free hosting service so anyone in the world can load it in a browser by visiting a URL. GitHub Pages and Netlify both offer free hosting for static HTML sites. The URL must load your page with its styles applied — not show a generic hosting placeholder or a 404. Submit the live URL and confirm the page loads correctly in an incognito window (which rules out cached or locally-only accessible content).
Proof required
Submit: (1) the live URL of your published website, and (2) a screenshot taken in an incognito/private browser window showing the styled page loading correctly at that URL.
What gets checked
- URL is publicly accessible — opening it in an incognito window on any device loads the page with styles applied; a URL that only works on the submitter's own machine or requires login does not pass
- Page is the student's own HTML and CSS — not a template deployed unchanged; the page should match or extend what was built in milestones 1 and 2
- Screenshot was taken in an incognito/private window — this is the standard test for confirming public accessibility; a screenshot of a local file:// URL does not pass this milestone
Common mistakes
- Deploying to a local server (localhost) and submitting that URL — localhost is not accessible to anyone but the submitter; the deployment must go to a platform that serves files over the public internet
- Forgetting to push the CSS file alongside the HTML — a common mistake where the HTML deploys but the linked CSS file does not, resulting in no styles at the live URL even though it looked styled locally
- Submitting the GitHub repository URL instead of the GitHub Pages deployment URL — the repo URL shows the code, not the rendered page; the milestone requires the GitHub Pages URL (https://<username>.github.io/<repo>)
Resources
Foundationstart here
Depthgo deeper
Masteryfor the dedicated
What a verifier looks for
- Open the submitted URL in your own incognito/private browser window and confirm: (1) it loads without error, (2) styles are applied, (3) it matches what was described in milestones 1 and 2
- If the page loads but shows no styles, the CSS file was probably not deployed alongside the HTML — ask the student to re-check that all files were included in the deployment
- GitHub repository URLs start with https://github.com/ — GitHub Pages deployment URLs start with https://<username>.github.io/ — if the submitted URL is a repository URL, ask the student to find and submit the correct Pages URL
You'll sign in first, then come straight back here.