HTML and CSS lesson 20: Project: your own website + course check

UK version. UK school years and UK spelling. · US version of this lesson

Final project: a club home page using everything – semantic layout, a flexbox menu, the box model, a labelled form and accessible design – then a course check. A complete 50-minute HTML and CSS lesson for beginners (Year 7, KS3), from Unit 6: Good pages for everyone. You build real web pages right here in your browser – nothing to install.

Time: 50 minutes + 20 min homework
Year: Year 7, KS3 (ages 11–12)
You need: A computer or tablet, paper and a pencil
Marked: Checklist instantly; design with our rubric

For parents: how to use this lesson

You don't need to know HTML yourself. The lesson explains each step on screen, the way Mr Babbage, our Head of Computing, likes it: a worked example first, then a go for your child. When your child builds a page, the browser draws it straight away and Classfern marks it with a checklist – and the design is judged by you, with our rubric below.

Read what your child will learn together.
Press Start the lesson below. Sit with your child for the teaching and the worked example (about 15 minutes): ask them to point at each tag and say what it does.
Let them do the practice on their own. If a page doesn't look right, the checklist says what is missing – let them find the mistake before you help.
Finish with the exit questions and the talk question: “What is the most useful thing you learnt in this course, and why?”
Later that day or the next day: the homework (20 minutes), then a practice test.

Watch out for

Accessibility can be added at the end. Build it in from the start – it is much easier.
More colours means a better design. A few well-chosen colours with good contrast look best.

Miss Lovelace's tip for home: ask your child to change one thing on their page – a word, a colour, a size – and predict what will happen before they look. Predicting first is how programmers learn fastest.

What your child will learn

We are learning to build a complete multi-part page.

Success looks like

I can build a complete multi-part page.
I can make it accessible and well designed.
I can review the whole course.

Key words

semantic layout · flexbox · box model · form · accessibility · review

What to have ready

A device with a web browser (pages are built and checked right in the browser – nothing to install)
Paper for planning and sketching
A keyboard helps for typing code (a tablet works too)

The big ideas (for the adult)

This is your chance to show everything you have learnt. Your page needs a <header> with a heading and a flexbox <nav> menu, a <main> with sections and a picture, a "join us" form with labels, and a <footer>.

Style it with care: a readable font and size, colours with good contrast, a card with padding and a border (try box-sizing: border-box), spacing that lines things up. The checklist makes sure it is accessible; the rubric is for the design.

Finish with the course check – questions from every lesson. If one goes wrong, go back to that lesson: every error is a clue, not a failure.

Worked example: a card

CSS:

.card { box-sizing: border-box; width: 300px; padding: 16px; border: 2px solid teal; }

HTML:

<div class="card">
<h2>Join us</h2>
<p>Fridays after school.</p>
</div>

The lesson, step by step

50 minutes in 5 parts
Part	Time	How it is checked
Starter	5 min	Marked by Classfern
Learn	8 min	Read, watch and talk
See it	7 min	Read, watch and talk
Project	25 min	Checklist marked by Classfern; design judged with our rubric
Check and reflect	5 min	Marked by Classfern + self-check

Design rubric for the project (teacher or parent)

The checklist (headings, alt text, labels, contrast and so on) is marked by Classfern. How the page LOOKS is judged by you, with this rubric – it is not marked by computer. For each line, choose the description that fits best.

The page is easy to read: text size, spacing and colour contrast
Hard to read → Mostly clear → Clear throughout
The design suits the page's purpose and the people it is for
Not yet → Partly → Yes
The layout is tidy: things line up, with sensible space between them
Not yet → Partly → Yes
The words and pictures are the pupil's own (or credited), accurate and kind
Not yet → Partly → Yes

The lesson

It runs here on the page. No sign-up and no names – nothing you type is sent anywhere. Each visit picks a new mix of questions.

Homework

20 minutes: predict what the browser will do, build or fix a short page, and check the key ideas – then a short reflection. New questions every time, all marked instantly.

Practice tests

Mixed HTML and CSS test20 questions · marked instantly

All KS3 computing practice tests · All 20 HTML and CSS lessons

Curriculum

National curriculum in England, computing, key stage 3: pupils should be taught to create, reuse, revise and repurpose digital artefacts for a given audience, with attention to trustworthiness, design and usability; and to undertake creative projects that involve selecting, using, and combining multiple applications, preferably across a range of devices, to achieve challenging goals, including collecting and analysing data and meeting the needs of known users; and to use 2 or more programming languages, at least one of which is textual, to solve a variety of computational problems; make appropriate use of data structures [for example, lists, tables or arrays]; design and develop modular programs that use procedures or functions.

Contains public sector information licensed under the Open Government Licence v3.0.

Our lessons and questions are our own. They are not written or endorsed by any government department, testing agency or exam board. HTML and CSS are open web standards; Classfern is not affiliated with the organisations that publish them.