🕵️ Warm-up: Be a website hacker!

Every website is made of code. Your browser has a secret tool to see it. It is called Inspect. Let's use it to change the news below!

BREAKING: Dogs are learning to drive buses 🐶🚌

Experts say the dogs are very good at the steering. They are not good at the tickets.

Do this:

Right-click on the headline. (On a Chromebook, tap with two fingers.)
Click Inspect. A box full of code pops up!
Find the words of the headline in the code. Double-click them.
Type your own silly headline. Press Enter.
Look! The web page changed! 🤯

🧪 Try this! Change the headline to something about YOU. Maybe “Local kid becomes pizza champion”!

🤫 Is it real? No! The change is only on your screen. Press refresh (F5) and it goes back. You did not break the real website. Phew!

Inspect not working? Ask your Code Club leader, or press this magic button:

🥪 What is a website?

A web page is a file with words in it. It also has tags. Tags tell the browser what each part is.

Web pages use a language called HTML. Browsers can read it. And today, so can you!

A tag is like a sandwich 🥪

You need a slice of bread at the top and a slice at the bottom. Your words are the filling!

HTML

<h1>Hello!</h1>

👀 Spot it! The closing tag has a slash / in it. The slash means “stop here”.

Tags we will use today

Tag	What it means
`<h1>`	A big heading. Like a title.
`<h2>`	A smaller heading.
`<p>`	A paragraph. Some sentences.
`<ul>`	A list with bullet points •
`<li>`	One list item. It goes inside the list.
`<img>`	An image. A picture!

🛠️ Let's build!

Get ready

Make your web page file

A web page is just a text file. Its name ends in .html. You will make one now!

Pick your computer:

🪟 Windows laptop (Notepad)

Click Start. Type Notepad. Open it.
Click 📋 Copy on the starter code below. Paste it into Notepad. (Ctrl + V)
Click File, then Save as.
Pick the Desktop. Make a new folder. Call it my-website. Open it.
Find Save as type. Change it to All files.
For the file name, type index.html. Click Save.
Open your my-website folder. Double-click index.html. It opens in the web browser. That's your page! 🎉

💻 Chromebook (Text app)

Click the Launcher (the circle in the corner). Type Text. Open the Text app.
Click 📋 Copy on the starter code below. Paste it in. (Ctrl + V)
Press Ctrl + S to save.
Pick My files. Make a new folder called my-website.
Call the file index.html. Click Save.
Open the Files app. Find index.html. Right-click it. Pick Open with, then Chrome. 🎉

🍎 Mac (TextEdit)

Open TextEdit. Click New Document.
Click Format, then Make Plain Text. (This is important!)
Click 📋 Copy on the starter code below. Paste it in. (⌘ Cmd + V)
Press ⌘ Cmd + S. Make a folder on the Desktop called my-website.
Call the file index.html. Click Save. If it asks, click Use .html.
In Finder, right-click index.html. Pick Open With, then Safari or Chrome. 🎉

Your starter code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>All About Me</title>
  </head>
  <body>

    <!-- Hi! I am a COMMENT. The computer ignores me. -->
    <!-- Comments are notes for humans. Follow the steps! -->

    <!-- STEP 1: Change "Your Name" to your FIRST name -->
    <!-- STEP 2: Put your favourite emoji after your name -->
    <h1>All About Your Name</h1>

    <!-- STEP 3: Write one sentence to say hello -->
    <p>Hello! Welcome to my page.</p>

    <!-- STEP 4: Write 3 facts about you. One fact in each li -->
    <h2>Three facts about me</h2>
    <ul>
      <li>Fact number 1</li>
      <li>Fact number 2</li>
      <li>Fact number 3</li>
    </ul>

    <!-- STEP 5 (if you want): Add a picture on the line below -->


  </body>
</html>

🤔 What are the lines that start with <!--? Those are comments. They start with <!--. The computer skips them. They are notes for you!

🙈 What is the stuff at the top? That is the page's secret settings. Don't worry about it today. You will write your things between <body> and </body>.

🛡️ Stay safe online! Only use your first name. Don't write where you live or the name of your school. Don't use a photo of yourself.

🔁 The magic loop

Keep two windows open: your text file and your web browser. Every time you change something, do this:

✏️1. TypeChange your code

💾2. SaveCtrl + S

🔄3. RefreshClick the browser, press F5

On a Mac, use ⌘ Cmd + S to save and ⌘ Cmd + R to refresh. On a Chromebook, refresh with Ctrl + R.

Step 1

Put your name in a heading

Find the <h1> line. Change Your Name to your first name. Keep the tags! Only change the words in the middle.

HTML

<h1>All About Sam</h1>

Save 💾 then refresh 🔄 your browser. Your name is big and bold!

🧪 Try this! Change h1 to h2 in both tags. What happens? Now try h6! Change it back to h1 when you are done.

HTML

<h2>All About Sam</h2>

Step 2

Add your favourite emoji

Put an emoji after your name. It goes inside the heading, before </h1>.

HTML

<h1>All About Sam 🦊</h1>

Click an emoji to copy it. Then paste it in your code.

Want a different one? On Windows press ⊞ Win + . · On a Chromebook press Search + Shift + Space · On a Mac press Ctrl + ⌘ + Space

🧪 Try this! Can you put three emojis in a row? 🦊🍕⚽

Step 3

Say hello

A <p> tag holds a paragraph. Change the words to your own hello.

HTML

<p>Hello! This is my very first web page.</p>

🧪 Try this! Copy your <p> line. Paste it again underneath. Now you have two paragraphs! Write something new in the second one.

Step 4

Three facts about you

This is a list. The <ul> tag is the box. Each <li> is one thing in the box.

Write one fact inside each <li>. What makes you YOU?

HTML

<h2>Three facts about me</h2>
<ul>
  <li>I have a dog called Biscuit.</li>
  <li>My favourite food is pizza.</li>
  <li>I can do a cartwheel.</li>
</ul>

💡 Ideas: a pet, a food you love, a sport, a game, something you can do, a place you want to visit.

🧪 Try this! Change ul to ol (at the top and the bottom of the list). The dots turn into numbers! 1, 2, 3!

HTML

<ol>
  <li>I have a dog called Biscuit.</li>
  <li>My favourite food is pizza.</li>
  <li>I can do a cartwheel.</li>
</ol>

Can you add a fourth fact? Copy an <li> line and paste it.

Step 5 · if you want

Add a picture

The <img> tag shows a picture. It is a lonely tag. It has no closing tag!

Click a picture to copy its code. Paste it where it says STEP 5.

HTML

<img src="https://YOUR-SITE.vercel.app/session-1/images/rocket.svg" alt="A pink rocket" width="200">

`src`	Where the picture lives on the internet.
`alt`	Words that describe the picture. This helps people who can't see it.
`width`	How wide the picture is.

🧪 Try this! Change width="200" to width="50". Tiny! Now try width="400". Huge!

Finished!

Your code might look like this

Here is Sam's page. Yours will have your name and facts. See Sam's page live 👀

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>All About Sam</title>
  </head>
  <body>

    <!-- My name and my favourite emoji -->
    <h1>All About Sam 🦊</h1>

    <!-- A sentence to say hello -->
    <p>Hello! This is my very first web page.</p>

    <!-- Three facts about me -->
    <h2>Three facts about me</h2>
    <ul>
      <li>I have a dog called Biscuit.</li>
      <li>My favourite food is pizza.</li>
      <li>I can do a cartwheel.</li>
    </ul>

    <!-- A picture I like -->
    <img src="https://YOUR-SITE.vercel.app/session-1/images/rocket.svg" alt="A pink rocket" width="200">

    <p>Thanks for visiting my page! 👋</p>

  </body>
</html>

😐 Does it look a bit plain? Good! That is what HTML looks like on its own. It is the skeleton of a web page. Next time we will add the fun colours! Scroll to the bottom for a sneak peek. 👇

🐛 Stuck? Go bug hunting!

Did you forget the slash in a closing tag? </h1>
Does every < have a >?
Is every word spelled right? <li> not <il>
Did you save 💾 and then refresh 🔄?
Does the browser show your code as plain text? Your file might be called index.html.txt. Ask a grown-up to help you rename it.
Still stuck? Put your hand up. Bugs happen to every coder! 🙋

🎉 Show a friend!

Tick off each thing. When they are all done, show your page to a friend!

My name is in a big heading I added my favourite emoji I wrote a hello sentence I wrote three facts in a list I added a picture (if I wanted) I showed a friend! 🥳

🗣️ When you show a friend: Point to one tag and tell them what it does. You are teaching! Then ask them to show you their page.

⭐ Bonus challenges

Finished early? Amazing! Pick any challenge. Add it to your page.

⭐ Warm-up challenges

Bold and slanty

<strong> makes words bold. <em> makes them slanty.

HTML

<p>I <strong>love</strong> pizza. It is <em>so</em> tasty!</p>

Highlighter pen

<mark> makes words look highlighted.

HTML

<p>My best subject is <mark>art</mark>.</p>

My top 3

Make a numbered list of your top 3 things. Animals? Games? Snacks?

HTML

<h2>My top 3 animals</h2>
<ol>
  <li>Fox 🦊</li>
  <li>Owl 🦉</li>
  <li>Shark 🦈</li>
</ol>

⭐⭐ Tricky challenges

Secret message 🤫

Hide a secret! It only shows when someone clicks. Try it on a friend!

HTML

<details>
  <summary>Click for a secret! 🤫</summary>
  <p>I once ate 7 pancakes in one go.</p>
</details>

Hover mystery

Point your mouse at the words. A hidden message pops up!

HTML

<p>My pet is a <abbr title="He is a golden retriever!">good boy</abbr>.</p>

A poem with new lines

<hr> draws a line. <br> starts a new line. Both are lonely tags!

HTML

<hr>
<p>Roses are red,<br>
violets are blue,<br>
I made a web page,<br>
and you can too!</p>

Make a link

<a> makes a link you can click. href is where it goes.

HTML

<a href="https://codeclub.org">Visit Code Club</a>

Only link to websites a grown-up says are OK.

⭐⭐⭐ Boss level

Quiz about me

Use lots of secret messages to make a quiz! Can your friend guess the answers?

HTML

<h2>Quiz: guess about me!</h2>
<details>
  <summary>What is my favourite colour?</summary>
  <p>Green! 💚</p>
</details>
<details>
  <summary>What animal scares me?</summary>
  <p>Geese! 🪿</p>
</details>

Table of favourites

A table has rows <tr> and boxes <td>. <th> is a heading box.

HTML

<h2>My favourite things</h2>
<table border="1">
  <tr>
    <th>Thing</th>
    <th>My favourite</th>
  </tr>
  <tr>
    <td>Food</td>
    <td>Pizza 🍕</td>
  </tr>
  <tr>
    <td>Game</td>
    <td>Tag 🏃</td>
  </tr>
</table>

Can you add another row?

Emoji art

<pre> keeps all your spaces. Draw a picture with emojis!

HTML

<pre>
    ⭐
   🟩🟩
  🟩🟩🟩
 🟩🟩🟩🟩
    🟫
</pre>

A whole new part

Add a new section to your page. Use a heading, a paragraph and a picture. All by yourself!

HTML

<h2>When I grow up</h2>
<p>I want to be an astronaut!</p>
<img src="https://YOUR-SITE.vercel.app/session-1/images/planet.svg" alt="A purple planet with a ring" width="150">

🔮 Sneak peek: next time!

Today you built the skeleton of your page with HTML. 💀

Next time you will learn CSS. CSS is like clothes and paint for your page. Look what it can do!

All About Sam 🦊

Hello! This is my very first web page.

Three facts about me

I have a dog called Biscuit.
My favourite food is pizza.
I can do a cartwheel.

Today: just HTML 😐

All About Sam

🐶 I have a dog called Biscuit.
🍕 My favourite food is pizza.
🤸 I can do a cartwheel.

Next time: HTML + CSS 🤩

Same words. Brand new look. See you next time! 👋