Lesson Plan

Now I Have to Teach Coding? Getting Started with Tabby Cat (3)

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
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 3rd lesson, students will be begin to plan and make deliberate changes to the look of the Tabby Cat pages by manipulating the html. After the previous lessons in which they figured out how you made changes, they will begin making their own and having peers figure out how they made them.

Students will be able to:

  • Begin recognizing specific elements of html;
  • Begin seeing the connection between specific elements of html and their function; and
  • Begin making planned, specific changes to a webpage’s appearance by altering elements of html.
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)?

Part 1 Instruction and Review (of what happened in Lesson 2)

  1. In the previous lesson students linked changes you (the teacher) made to the look of the Tabby Cat pages to sections of code on the page. Start a short discussion of what some of those changes were.
  2. Note the changes students mention on the board or chart paper.

  3. Now ask them to try and remember what parts of the html code those changes were connected to. As they mention them, note these on the board or chart paper as well. Draw arrows to connect them.

  4. Now, post a list of challenges on the board, asking students to make specific changes to the look of the page or the behaviour of the Tabby Cat.  Suggestions include:

    1. Change the background colour;

    2. Change the Tabby Cat colour;

    3. Change the text message;

    4. Change the size or look of the text;

    5. Change the movement of the Tabby Cat (e.g., make its head move more/less); or

    6. Change the size of some non-text element on the page.

2 Part 2 Independent Practice

  1. Either in pairs or individually, students should work to solve the challenges you put on the board. Ideally partners would work on ONE computer rather than working with two screens to encourage more collaboration and discussion. (20 minutes)

  2. Ask them to make notes about where they made changes, writing out the code from the screen to become more familiar with the actual syntax of the html code. 

3 Part 3 Extension or Further Challenge

If there is time OR you have students who are particularly adept with the html, this is a good next step.

 
  1. Have all students work with a partner.

  2. Ask students in each pair to take turns coming up with a new challenge for their partner to solve. The idea should be similar - to make a specific type of change to the page (not just ‘change the words to…’).

  3. For each challenge, allow just a couple of minutes. If the student trying to complete the challenge is unsuccessful, the challenger should demonstrate how to accomplish it.

4 Part 4 Wrap up

 

  1. Ask students to share how they completed the challenges you set on the board.

  2. When they respond and share their answers, have them refer to their notes so that they make specific reference to elements of the code.

  3. As they answer, write the different code sections on the board so that all students can see them.

  4. Keep these as a record so that in future steps, students can look for them as they work with html.

 

Tell students that in the next lesson, they will begin to practice learning to read code like a story or article.