Build Your Own Website!
Write code on the left, see your website on the right.
Your mission
Time to become a real web developer! This playground is a live HTML and CSS editor: everything you type appears on the page straight away. Start by exploring, level up step by step until you've built a page about yourself, then build a complete homepage for Coding Club from a client's brief.
Explore
Make five discoveries: change the heading, change the tab title, change the CSS, use a button to add code, and get at least three elements on the page.
Images you can use: robot.jpg campus.jpg pizza.jpg logo.png. Pages you can link to: about.html contact.html join.html notes.html
This is a real HTML and CSS editor. Type on the left and the page on the right updates as you go. Try changing the heading, the title, the colour in the CSS, and use the buttons above the editor to add new elements.
0 of 5 discoveries made
Experiment
Complete all eight levels to build a page about you.
Images you can use: robot.jpg campus.jpg pizza.jpg logo.png. Pages you can link to: about.html contact.html join.html notes.html
Level up
Turn this page into a page about you, one level at a time. Each level ticks itself off when your code does the job.
0 of 8 levels complete
Challenge
Build the Coding Club homepage. Every item in the brief must pass.
Images you can use: robot.jpg campus.jpg pizza.jpg logo.png. Pages you can link to: about.html contact.html join.html notes.html
Coding Club needs a homepage, and you're the web developer! Build a page that does everything on this list, then press Check my website.
Pass every item in the brief to continue.
Understand
Here is everything you used, in the words you need for the exam.
How a webpage comes together
Every page you built followed the same plan. HTML gives the page its content and structure, CSS decides how it looks, and the browser reads both and draws the page. When something looks wrong, check the HTML structure first, then the CSS.
Attributes you used
- href on a: where a link goes (a page, or mailto: for email).
- src and alt on img: the image file, and a description of it.
- class: puts elements into a group for CSS (.name).
- id: names one unique element (#name).
- for on label: links the label to the input with the same id.
Forms
A form collects input. Its action says where to send the data and its method (get or post) says how. A label describes each field; its for value matches the field's id. Use input for short answers (type="text", type="email"), textarea for longer messages, and a button to submit.
HTML only builds the form. Saving or checking the answers needs a program on a web server.
Words to know
- Markup
- Tags that describe what each part of the content is.
- Internal CSS
- CSS rules in a <style> element in the head.
- Relative link
- A link to a file in the same website, like href="about.html".
- label / input
- A form field and the text that describes it, joined by for and id.
Exam tip
When you write HTML in an exam, start with the skeleton: <!DOCTYPE html>, html, head (with the title), then body. Indent elements that sit inside others, close every tag, and put CSS in the head. Clear, neat code is easier to mark and easier for you to check.