Lesson Plan

Lesson Plan Title: Now I Have to Teach Coding - Tabby Cat 2

Get your students started with html with the Tabby Cat browser extension
James D.
Other
IdeaDriven Education
Show More
My Grades 6, 7, 8
My Subjects English Language Arts, Social Studies, English Language Learning
EdTech Mentor
Objectives

Introduction

You may have seen a lot of cats popping up on your students’ computer screens lately. Tabby Cats, the innocuous Chrome browser extension has been capturing the attention of kids everywhere. Before you start talking to your school’s tech coach about ways to lock down the computers to prevent the potential distraction of cats in sunglasses on student devices, we encourage you to see this as an opportunity to introduce some important elements of coding with html to your students.

As we’ve been saying here at Common Sense, ‘Don’t Make a Ban, Make a Plan’.

We’ve put together a series of five lessons that you can use with those adorable little cats. Do as many of the lessons as you like or have time for (you can even do them for the upcoming Hour of Code) and get your students started creating with code. By exploring the inner workings of Tabby Cats, you’ll give students an easy intro to some challenging new tech skills.

If you’re looking for more ways to make a plan to turn tech from distraction to opportunity, check out Common Sense Education’s Dealing with Digital Distraction Teaching Strategies. If you’re looking for more ways to bring coding into your classroom check out Common Sense Education’s Get Started with Coding in your Classroom Teaching Strategies.

------------------------

In this (2nd) lesson, you will be helping students recognize different elements of html code. For example, you might change background colours or fonts (when students can’t see the code), and students will have to try and figure out how you changed by ‘reading’ the code itself. It is important to learn to make these changes yourself in order to teach your students how to do it. See the Before Class section for details. You can make this lesson a quick one by just doing one or two challenges. Make sure you start with the first challenge. After that, you can do any or all of the challenges in any order that you like.

Objectives

Students will be able to…

  • Identify key HTML elements and tags;

  • Begin to recognize patterns in the ways that web pages are organized and coded;

  • Think critically about how to read and search HTML; and

  • Select and change HTML elements to personalize webpages and programs.
Subjects
English Language Arts
Math
Science
Social Studies
Arts
Grades 3 - 7
All Notes
Teacher Notes
Student Notes

1 Part 1 (hook) WHAT IS ALL THIS STUFF (AND HOW DOES IT MAKE A WEBPAGE)?

1. Make sure you have installed the Tabby Cats extension in Chrome. See Lesson 1 if you need a review on how to do this. 

2. Yesterday students primarily ‘played’ with the code in Tabby Cat using the Inspector tool in Chrome. Today, students will try and figure out the connection between changes you make to the appearance of a Tabby Cat page (by altering simple bits of code off screen) with the code itself.

3.  With your computer connected to a projector, open a new tab in Chrome to show one of the random cats the extension generates.

4. Tell students that you are going to make some changes to the Tabby Cats and they are going to have to solve two challenges for each picture. First, they will have to identify what element was changed and, second, where to find the element in the Developer Tools. 

Before Class Teacher Instructions (for you to practice)

Note that there are images that illustrate the code described here in the following steps for the lesson. 

 

To change the Background Colour:

  1. Open a tab in Tabby Cat, right click on the background and select Inspect.

  2. You should see a window that looks like Slide #1.

  3. You will see a tag that looks like this:    

<body class= “bg-green”>_</body>   

  1. To change the colour, double click or highlight the colour, in this case green, and type in another colour.

 

To change the New Goodies Text:

  1. Open a tab in Tabby Cat, right click on the New Goodies Text and select Inspect.

  2. You should see a window where the <body class> tag has been expanded.

  3. Nested in the body class tag is a <div class = “collection new”> tag.

  4. Nested under that, is a tag that looks like this:   

<div class = “message abs”>New Goodies!</div>

  1. To change the text, double click or highlight the words ‘New Goodies!’ and write anything you like.

 

To change the Cat’s Name:

  1. Open a tab in Tabby Cat, right click on the cat’s name and select Inspect.

  2. You should see a window where the <body class> tag has been expanded.

  3. Nested in the body class tag is a <div class = “center wrapper”> tag, which has also been expanded.

  4. Nested under that is a tag that looks like this:

<div class="abs name">Regal Purr</div>

  1. To change the cat’s name, double click or highlight the name, in this example, Regal Purr, and write any name you like.

 

To change the colour of the cat’s body:

  1. Open a tab in Tabby Cat, right click on the cat’s body and select Inspect.

  2. You should see a window where the <body class> tag has been expanded.

  3. It’s a little harder to find this code. You are looking for a tag that says: <div class = “abs fill body purrs cat-black>_</div>

  4. If you can’t see this tag, you need to open the <div class= “abs cat”> tag first.

  5. To change the color of the cat’s body, double click or highlight the color, in this case black, and type in another colour.

Note that all code can be expanded by clicking as below.

This is the same code (below), but after clicking the arrow, the code was expanded, revealing the code for the body of the page. For the different challenges, you/students will have to click to expand different elements of the code. 

2 Part 2: CHALLENGE 1 - Spot the difference! (background colour)

Part 2:  

CHALLENGE 1 - Spot the difference!

  1. Show students the new Tabby Cat and see if they can identify what changed. If necessary, you can go back and forth between the two cats to help them.

  2. Show students Slide 1 (below). This is the code that shows the ‘head’ of the page and the ‘body’.

3. Ask students to look at the code carefully. Explain that the triangles or arrows to the left of the <head> and <body class> tabs are clickable. When you click on one, it expands to show more code. Challenge students to identify where the tag might be for changing the background colour and ask them to explain their thinking.

 

4. Now ask students to predict how to change the colour and explain why.

5. If you have time, you can ask a student to come up to your computer and change the colour to see if it works. (There may be a difference between the colour they chose and the one that appears on the screen. This is something you can teach later - just let them know that’s why web developers test their designs on different computers, browsers and mobile devices).  Note: If you do this step, you might want to have a tab and Inspect Element window ready for students, like the one you used to change the colour. 

(Note: Draw out that bg stands for background, if it hasn’t come out already. You can also talk about head and body. In HTML, the <head> tags refer to the title of the document but they don’t affect what you can see in the document. All code relating to how the webpage looks is under the <body> tag).

 

3 CHALLENGE 2 - Spot the difference! (new goodies text)

  1. Show students a new Tabby Cat (where you have changed the text of “New Goodies” and see if they can identify the change. [New goodies is found as the paper bag in the lower left corner of the browser window. It lets you customize your Tabby Cat.]

  2. Now for the second part of the challenge. Ask students where to look in the code for the change. You can show them Slide 1 again so that they tell you which tag to open. Make sure that students have time to talk in partners or table groups before raising their hands so that students get the chance to figure things out for themselves.  Hopefully they tell you to open the body tag.

  3. When the body is open, show them Slide 2 (or have an Inspect window open) and ask them what keywords might tell them where to change to “new goodies” text? They might be tempted to look in “all goodies”. NOTE: If you have an Inspect window open, you can go ahead and open up “all goodies” even though it’s not where you can change the code. If you are just using the slides, you can tell them to keep thinking. 

4. Ask what triangle or arrow you should click on/expand to find the code and keep bringing students back to thinking about keywords that might lead them to “New Goodies”. You can talk about the word ‘new’ and you can talk about what the paper bag is/does and how it functions as a collection of toys/props, etc.

 

5. After students tell you to open <div class =“collection new”>, show them Slide #3 and ask them where they would go to change the message. Ask them what they notice about where the actual writing is  ie. ‘message” also between tags.

6. If you have time ask a student to come up to your computer and change the message to see if it works.  (Note: If you do this step, you might want to have a tab and Inspect Element window ready for students, like the one you used to change the message). 

4 CHALLENGE THREE - Spot the difference! (Changing the Cat’s Name)

  1. Show students a new Tabby Cat (where you have changed the cat’s name and see if they can identify the change.

  2. Now for the second part of the challenge, ask students where to look for the change. You can show them Slide 1 again so that they tell you which tag to open. Hopefully they tell you to open the body class tag.

  3. Now show them slide #4 and ask them what tag to open/expand to find the cat’s name. You can remind them that they have already opened up “collection new”, which they used for the goodies. The code for the cat’s name is stored somewhere else.

  4. You want to try to guide them towards the tag <div class = “outer wrapper”>. You can explain that the screen is like a present that you ‘unwrap’. Usually many of the elements in the body area of a website are nested under wrapper or two. 
  5. The cat is in the middle of the screen or page, so it is nested under an outer-wrapper and a center-wrapper. When you click on, expand or open the outer-wrapper, you can see the center-wrapper. Show students Slide #5 and ask what to expand or open to find the code for the cat’s name.

  6. Once the center wrapper tag has been expanded, students should be able to see the code for the cat’s name (Slide #6). Students should look for keywords to point them to where the name might be.

  7. If you have time ask a student to come up to your computer and change the cat’s name to see if it works.  (Note: If you do this step, you might want to have a tab and Inspect Element window ready for students, like the one you used to change the New Goodies text). 

Slide #5 - If you don’t see it, can you ‘unwrap’ another layer?

Slide #6 - Looking for keywords for where the name might be. Students should be able to connect the text here with where they found the text in the new goodies name as well, between tags.

If you have time ask a student to come up to your computer and change the name of the cat to see if their theory works.

5 CHALLENGE FOUR - Spot the difference! (Changing the Colour of the Cat’s Body)

  1. Show students a new Tabby Cat (where you have changed the colour of the cat’s body and see if they can identify the change.

  2. Ask students where to look for the code to change the colour of the cat’s body. You can show them Slide 1 again so that they tell you which tag to open. Hopefully they tell you to open the body class tag.

  3. Use the same steps to have students identify the change and then figure out what to open. To find the cat’s body colour, students will have to open the Outer Wrapper and Center Wrapper tags, just like they did to change the cat’s name. If you want to, you can show them those slides again up to the point of opening the Center Wrapper.

  4. Show Slide #6 or #7 - both slides show where the colour is - nested under the “abs cat” tag.

  5. Students should look for keywords to point them to where the colour might be. Some students may know the word ‘fill’ from other web and drawing apps.

  6. Instead of showing screenshots for this challenge, you can take volunteers up at the front to click on the different tag arrows. If students make mistakes, this is a great opportunity to talk about making mistakes in coding and how it is a regular part of coding and web design. Also, reassure them that they can always open a new tab and try again.