What it shows
HTML gives the structure of a resume with sections, and CSS styles fonts, colours and spacing in a separate file. It shows how content and design are kept apart.
The science
HTML tags such as header, section and h2 describe the meaning of each part, and CSS rules decide how it looks. A CSS rule has a selector, such as h2, and declarations such as color: navy. Putting the rules in style.css and linking it with a link tag lets several pages share one look. The max-width and margin auto pair centres a column of readable width.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor such as Notepad or VS Code (free)
- A web browser
- Made-up or sample details: name, skills, education and two projects
Safety
For this project: Do not put real phone numbers or home addresses in anything you publish online.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create resume.html with the usual structure and in the head add <link rel="stylesheet" href="style.css">.
In body add <header><h1>Asha Patel</h1><p>Class 10 student | Learner of Python</p></header> using a made-up name.
Add <section><h2>Education</h2><p>Class 10, Sample School, 2025 to 2026</p></section> then similar sections for Skills (a ul list) and Projects.
Create style.css and write body { font-family: Arial, sans-serif; max-width: 700px; margin: 20px auto; color: #222; }.
Style the header with header { background: #1f3a5f; color: white; padding: 20px; text-align: center; }.
Style headings with h2 { border-bottom: 2px solid #1f3a5f; padding-bottom: 4px; } and spacing with section { margin-bottom: 18px; }.
Style the skills with li { margin: 4px 0; } and add a:hover { color: #c0392b; } for links.
Open the page, resize the browser window to check it stays readable on a narrow screen and print it to PDF from the browser’s Print menu.
What you should see
The resume appears as a clean centred page with a coloured header, underlined section headings and tidy lists, and it prints on one A4 page.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What is the use of CSS?
It controls colours, fonts and layout, separate from the content.
2What is a selector?
The part of a rule that says which tags it applies to.
3What does margin auto do?
With a width set, it centres the block horizontally.
4Why link one style.css from many pages?
So every page shares the same look and one change updates all.
Take it further
Add a media query that reduces the font size and padding on screens narrower than 500 pixels.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn