For teachers and parents
Hour of Code: a ready 60-minute HTML lesson
Run the Hour of Code without long preparation. Students go through real lessons from the CodeWorlds HTML and CSS course, change the code in the editor on the page and check themselves with questions right away. There is nothing to install and no accounts to create.
What is the Hour of Code?
The Hour of Code is a worldwide event in which students learn the basics of programming in one-hour activities. It is organised by Code.org. The first edition took place in 2013 as part of Computer Science Education Week, which its organisers hold every year in the week of Grace Hopper's birthday (9 December).
The organiser has changed the format. According to Code.org, the Hour of Code is now the Hour of AI, one-hour activities about artificial intelligence, and on 2 June 2026 Code.org renamed itself CodeAI. The hourofcode.com address now redirects to the Hour of AI page.
The official activities are listed in a catalogue on the organiser's site. You can browse them by grade and topic, and the earlier Hour of Code activities are kept on a separate list. Anyone who runs an activity can also register their event on the event site.
Check the official site for this year's dates. You can run our plan on any day.
Sources
A 60-minute lesson plan
The plan uses the first lessons of the HTML and CSS course. Below each of them there is a "Check yourself" block with questions: students pick an answer and see right away whether it is correct. In modules 1 and 2 of the course all questions are open without an account.
0-5 min
Start
Tell the students that HTML describes what is on a web page: headings, paragraphs, images and links. Show the first lesson on a projector or an interactive whiteboard and point out the code editor and the "Check yourself" block.
5-20 min
Lesson 1: Introduction to HTML
Students read the lesson, change the example code in the editor and watch what changes in the preview. At the end they answer the questions in the "Check yourself" block.
20-35 min
Lesson 2: HTML Elements
Students read the lesson, change the example code in the editor and watch what changes in the preview. At the end they answer the questions in the "Check yourself" block.
35-50 min
Lesson 3: HTML Document Structure
Students read the lesson, change the example code in the editor and watch what changes in the preview. At the end they answer the questions in the "Check yourself" block.
50-60 min
Wrap-up
Ask a few students to show what they changed in the code and what happened. Sum up the new terms together, such as tag, element, heading, paragraph, head and body, and show how to keep learning in the game.
For faster students
Anyone who finishes early can move on to the next lesson and keep experimenting with the code: HTML Elements - Extended
What you need
- A computer or laptop with a web browser and internet access, ideally one per student or per pair.
- Nothing else: the lessons, the code editor and the questions all run on the page, so there is nothing to install.
- Students do not need accounts or email addresses.
- A projector or an interactive whiteboard helps with the joint start, but it is not required.
What comes after the Hour of Code?
Anyone who wants to keep playing can create a free CodeWorlds account. With a free account you can complete the HTML and CSS course in the game with 10 fuel units a day. Every lesson there comes with code editor tasks, questions and puzzles, and progress earns XP and unlocks new locations. Every task costs fuel and progress is saved to the account. The premium plan removes the fuel limit and unlocks the other courses.
Start for free →Tips for running the hour
- Go through the lessons yourself before class so you know where students may get stuck.
- Work in pairs: one student types the code, the other reads the instructions, and they swap roles after each lesson.
- Encourage students to change the examples. A mistake in the editor breaks nothing, and finding it teaches the most.
- The "Check yourself" questions show the correct answer right away, so discuss the ones that caused the most trouble with the class.
- If the group needs more time, stop after two lessons and keep the third one for the next class.
- Parents can run this hour at home: just sit next to your child and go through the lessons together.
Questions about the Hour of Code
Do students need to create accounts?
No. The lessons, the code editor and the "Check yourself" questions work without signing in. An account is only useful for those who want to keep playing and save their progress.
How much does it cost?
Nothing. The lessons on the site are free, and with a free account students can complete the HTML and CSS course in the game with 10 fuel units a day.
Do I need to install anything?
No. A web browser and internet access are enough. The code editor with a page preview runs right on the lesson page.
When is this year's Hour of Code?
The event is tied to Computer Science Education Week, which its organisers hold every year in the week of Grace Hopper's birthday (9 December). The organiser has turned it into the Hour of AI, so check the official site for this year's dates. You can run our plan on any day.
Does this plan come from the Hour of Code organisers?
No. The CodeWorlds team prepared it from its own HTML lessons. You will find the official activities in the catalogue on the organiser's site.
Ready for the first lesson?
Open the first lesson on the projector and start right away. After class, the whole HTML and CSS course is waiting in CodeWorlds.