HTML and CSS lesson 19: Project: a page about your hobby

US version. US grades and US spelling. · UK version of this lesson

Project: plan and build a page about a hobby, using headings, paragraphs, a picture, a list, a link and CSS – checked by the computer for structure and access, and by a person for design. A complete 50-minute HTML and CSS lesson for beginners (Grades 6–7), 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
Grade: Grades 6–7 (ages 11–12)
You need: A computer or tablet, paper and a pencil
Graded: 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 grades 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 one thing you would improve on your page if you had another hour?”
Later that day or the next day: the homework (20 minutes), then a practice test.

Watch out for

Start with the colors. Structure first, then style.
The computer can judge if it looks good. A person judges design; the computer checks the rules.

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

What your child will learn

Learning goal: plan a page before building it.

Success looks like

I can plan a page before building it.
I can build a complete page with HTML and CSS.
I can improve it using the checklist and feedback.

Key words

plan · design · structure · feedback · rubric · credit

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)

Real web designers plan first. Sketch your page on paper: the main heading, two or three sections, where the picture goes, a list (steps to get started?) and a link to find out more.

Build the HTML structure first, then add CSS for colors, fonts and spacing. Keep checking it in the browser. Use the checklist: the computer checks headings, alt text, the list, the link and that your text is easy to read.

The design – does it look good, suit its readers, line up neatly? – is judged by a person with our rubric. Ask someone to try your page and tell you one thing they like and one thing to improve. Use your own words and pictures (or credit them).

Worked example: the start of a hobby page

CSS:

body { font-family: Georgia, serif; color: #222222; }
h1 { color: navy; }

HTML:

<h1>My hobby: chess</h1>
<p>Chess is a game for two players.</p>
<h2>How to start</h2>
<ol>
<li>Learn how each piece moves</li>
<li>Play a friend</li>
</ol>

The lesson, step by step

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

Design rubric for the project (teacher or parent)

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

The page is easy to read: text size, spacing and color 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 student'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 graded instantly.

Practice tests

Mixed HTML and CSS test20 questions · graded instantly

All computer science practice tests · All 20 HTML and CSS lessons

Curriculum

CSTA K–12 Computer Science Standards (2017), grades 6–8: 2-AP-15 – Get feedback from teammates and users to refine a solution; 2-AP-16 – Use existing code, media and libraries in original programs, with attribution.

The standard codes are CSTA's; the descriptions are our own words.

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.