Web development · Beginner
Make your first corner of the web
Build a small, thoughtful website about something you love. Make it readable, responsive, and usable with a keyboard.
What you will make
A personal web page that works on a phone and can be navigated without a mouse.
Before you start
A computer, a browser, and a text editor. No coding experience needed.
Estimated time: 120 minutes. Free. Publishing to a hosting service is optional and outside this path.
1. Tell a story with HTML
Estimated time: 30 minutes.
HTML gives content meaning: headings describe sections, paragraphs develop ideas, and links connect pages. Start with that structure before choosing colors.
MDN: structuring content — An introduction to semantic HTML from the maintainers of a widely used web reference.
Your challenge
Create an index.html about a hobby. Add one main heading, two sections, a list of three recommendations, and a link to a useful source.
Check your understanding
Does the page still make sense before any styles are applied?
A little hint
Begin with h1, h2, p, ul, li, and a elements. Open the file in your browser after every small change.
2. Give it a visual identity
Estimated time: 45 minutes.
Good visual hierarchy makes a page easier to read. Type size, spacing, and contrast can do more than decoration. A flexible width helps the same content fit different screens.
MDN: CSS styling basics — Learn selectors, spacing, and typography while styling a page you already understand.
Your challenge
Add a stylesheet. Choose one accent color, set a readable line height, and limit the content width. Resize the browser to a narrow phone-sized window and fix any horizontal overflow.
Check your understanding
Can you read the narrow layout without zooming or scrolling sideways?
A little hint
Try max-width with a flexible width, generous padding, and border-box sizing. Avoid fixed widths on paragraphs.
3. Make it work for someone else
Estimated time: 45 minutes.
A page is useful when people can operate it. Meaningful link text, a logical heading order, and visible keyboard focus help visitors understand where they are and what they can do.
MDN: structuring content — Revisit the meaning of your elements while checking the finished page.
Your challenge
Navigate every link with Tab and Enter. Check the page at 200% zoom. Describe or fix three problems you found, then write a short explanation of your design decisions.
Check your understanding
Can another person tell what the page is for and follow its links using only a keyboard?
A little hint
Do not remove the browser focus outline. Replace vague link labels such as 'click here' with a description of the destination.
Enable JavaScript to use the private notebook and track self-reported completion. The lessons and source links above are available without JavaScript.