Lesson Plan

Now I Have to Teach Coding? Getting started with Tabby Cat (1)

Get your students started with html with the Tabby Cat browser extension
James D.
Educator/Curriculum Developer
IdeaDriven Education
Show More
My Grades 6, 7, 8
My Subjects English Language Arts, Social Studies, English Language Learning

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.

This is the first of five lessons (with 4 and 5 combined in one document).  All are posted on Common Sense and also linked below.

Lesson 2

Lesson 3

Lessons 4 and 5

In this lesson students will be able to:

  1. Begin identifying elements of html;
  2. Begin recognizing ways to change the way webpages look by making changes to html;
  3. Recognize that webpages are composed of different elements; and
  4. Recognize that each element of a webpage is created using html.
English Language Arts
Grades 3 – 7
All Notes
Teacher Notes
Student Notes

1 What is all this stuff (and how does it make a webpage)?

1. Make sure you have installed the Tabby Cats extension in Chrome. In Chrome, open a new tab or window, go to the window pull down, and choose Extensions. Search for Tabby Cat and install.  Takes about a minute total. Alternatively, go to the Tabby Cat website and click on Tabby Cat at the bottom of the page.

2.  With your computer connected to a projector, open a new tab in Chrome to show one of the random cats the extension generates.  (sample image here)

3.  Give students a couple of minutes to discuss the features/characteristics of this very simple page.

4. Ask them to share a few of the things they identified (e.g., colour, background, cat, movement).

5. 'Control + click' (Mac) or right click (PC) anywhere you choose on the page (the cat, the background, etc.).

6. Select 'Inspect' from the menu that pops up.  On the right side of the page the html and css code for the page will appear.

7.  Have a short discussion with students about what they see.  Possible topics/questions:

What do these different things do?

Why is it so complicated and weird looking?

Does it look like something you’ve seen before?

Do you see any patterns?

How is it organized?

8. Explain that what students are seeing is html (HyperText Markup Language).  HTML is the language used to create almost all the parts of all the webpages we use everyday.  

2 Free play/Exploration

Keeping in mind that this is the first in a series of lessons introducing html, today's student activity is primarily about exploration.

1. Have students install the Tabby Cats extension (or ensure that the extension is installed on their devices beforehand if there are permission restrictions enabled at your school). Based on the number of cats we’ve seen, there’s a pretty good chance at least some of your students already have Tabby Cat installed.

2. Remind them how to use the Control + Click/Right Click to bring up the menu with Inspect on it.

3.  Have students open a new tab and then use Inspect to reveal the page's code.

4.  Give students time either individually or in pairs to play with the code, making changes to different elements to alter the page.  If they don't like the changes they made and can't restore the page, it's not a big deal as students can simply open a new tab to get a new cat.

If students delete certain elements of the code, they may 'break' Tabby Cat. This is also not a big deal; just ask students to reinstall the extension.

Remember that this session is just about experimentation.

Student Instructions

1.  Open a new tab in Chrome.

2.  Use Control + Click/right click anywhere on the page (background, cat, etc.) to see the Inspect option.

3.  Choose Inspect and then look at the code that is revealed.

4. Either on your own or with a partner, try making changes to the code to alter different elements of the page. 

5.  If you make changes that you don't like and can't undo them, don't worry.  Just open a new tab (and you'll get a new cat) to start fresh.

3 Wrap up and share

1. Give students a few minutes to share the different changes they made.

2. Before finishing, tell them that tomorrow you'll be continuing to explore html.