Build Your First Website

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

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.

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

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.

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

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.