Web development foundations
The first typed-code course. Students hand-write HTML and CSS and finish with a personal site at a real public address.
- Grades
- 6–8
- Ages
- 11–14
- Length
- 10weeks
- Sessions a week
- 2
- Each session
- 75min
- Class size
- 12max
What this course is
This is where a Junior Tech Cadet stops dragging blocks and starts typing. We choose HTML and CSS for that transition on purpose: a mistake is immediately visible, nothing crashes, and the feedback loop is a single refresh. It is a much gentler place to learn to type code carefully than a language that stops dead at a missing colon.
Students write everything by hand. No page builders, no templates, and no generated markup — partly because the point is to understand the structure, and partly because a student who can only edit generated code cannot fix it when it breaks.
The course finishes with each student publishing a personal site to a public URL. It is the first time most of them have made something that anybody in the world can open, and it is the moment the course tends to land.
Week by week
Every week ends with something that did not exist at the start of it. That is what is listed under “ends with”.
- Week 01
What a web page actually is
Files, folders, and the fact that a web page is a text file. Setting up an editor and opening a page in the browser.
Ends with: A page with a heading, three paragraphs and an image, written from an empty file.
- Week 02
Structure and links
Headings, lists, links and the idea of nesting. Why the order and the level of a heading is meaningful.
Ends with: A three-page site with working navigation between the pages.
- Week 03
First CSS
Selectors, colour, and typography. Where a stylesheet lives and how it finds the page.
Ends with: The site restyled with a chosen colour and type scheme.
- Week 04
The box model
Margin, border, padding and content. Using DevTools to see why a thing is not where the student expected.
Ends with: A card layout built to a supplied sketch, matched within a few pixels.
- Week 05
Layout with flexbox
Rows, columns, alignment and spacing. Building a header and a footer that behave.
Ends with: A page with a real header, content area and footer.
- Week 06
Making it work on a phone
Why a page designed on a laptop breaks on a phone, media queries, and relative units.
Ends with: The site checked and fixed at phone, tablet and laptop widths.
- Week 07
Images, files and organisation
Image formats and sizes, alt text and who it is for, and keeping a project folder tidy.
Ends with: An image gallery page with correctly sized images and written alt text.
- Week 08
A little JavaScript
Reacting to a click and changing the page. Enough to see the difference between structure, style and behaviour.
Ends with: A working navigation menu that opens and closes on a phone.
- Week 09
Building the personal site
Students plan and build their own site: about me, things I have made, and a way to get in touch.
Ends with: A complete personal site running on the student's machine.
- Week 10
Publishing it
Putting the site on GitHub Pages, checking it on a phone, and fixing what the move broke.
Ends with: A live public URL the student can share.
What they will be able to do
- Write HTML and CSS by hand without a template
- Use browser developer tools to diagnose a layout problem
- Build a page that works on a phone as well as a laptop
- Publish a site to a public address and explain how it got there
What they build
- A three-page site with working navigation
- A card layout built to match a supplied design
- An image gallery with proper alt text
- A published personal site at a public URL