Codemoji Coding Hour · Lesson plan
🚦 Make your first web page
Grades 2-8 · 60 minutes · Some typing · Start at codemoji.com/lessons/html/beginner/1
Students will
build a real web page with HTML tags and explain that every page on the internet is made of tags like these.
The big idea
Web pages are built from tags that come in pairs, an opening and a closing tag, with content in between.
Before the hour
- Do lessons 1 and 2 yourself (about 10 minutes) so you know the emoji for each tag.
- Decide on accounts: students can play as guests, or join your class with its code so their progress (and certificate) is saved.
- Put a favourite kid-friendly website on the board to "look under the hood" at the start.
Warm-up (away from screens)
Sandwich tags: hold up two pieces of paper as the bread and a "filling" card between them. The bread is the opening and closing tag; the filling is what shows on the page. Ask what happens if you forget the top slice.
The hour
- 0-5 minWarm-up. The sandwich tags game. On the board, show a website and say: "Every page is made of tags. Today you write your own."
- 5-10 minGet started. Everyone opens lesson 1. Show dragging an emoji into the code, then Run Code.
- 10-45 minBuild. Lessons 1-6: html, head, body, headings, paragraphs and a div box. Each ends with a 3-question check. Aim for lesson 4 by minute 25.
- 45-55 minShow and share. Students press View Code and show a partner the real HTML their emoji made.
- 55-60 minWrap-up. Certificates. Ask: which tag would you use for the biggest title on your page?
The lessons
- 1. HTML Tags
- 2. Head Tags
- 3. Body Tags
- 4. Heading Tags
- 5. Paragraph Tags
- 6. Div Tags
Where students get stuck
Run Code shows nothing
Check the tags come in pairs: every opening emoji needs its closing one, in the right order.
An emoji has a padlock
It unlocks in a later lesson. Use only the open ones for now.
Text ends up in the wrong place
Drag it so it sits between the opening and closing tag.
Talk about it
- What does the 🚦 tag do? Why does it come first and last?
- What is the difference between a heading and a paragraph?
- Where have you seen pages like the one you made?
Fast finishers
- Keep going: lessons 7-15 add bold, italic, pictures, links and lists.
- Try "About Me" on /learn to build a whole page with blocks.
Words to know
- HTML:
- The language every web page is written in.
- Tag:
- A label that tells the browser what something is, like a heading or a paragraph.
- Browser:
- The app that turns HTML into the page you see.
After the hour
Hand out Codemoji Coding Hour certificates: students who finished signed in to your class have theirs ready in your class's Certificates tab, and you can print any class by name. Standards: CSTA 1B-AP-15 / 2-AP-13: test and refine programs; decompose a page into parts.