Lesson Plan

Now I Have to Teach Coding? Getting Started with Tabby Cat (4 and 5)

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

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 lesson is intended as two parts, but you can do it in one long session if you prefer.

Students will be able to:

  • Read and interpret HTML code

  • Understand the importance of coding and design in creating web pages

  • Understand the relationship between design and the message you are trying to send

Subjects
English Language Arts
Math
Science
Social Studies
Grades 3 - 7
All Notes
Teacher Notes
Student Notes

1 Brainstorming

Have students brainstorm the ways in which webpages are like stories. For example, you could show the school website - and ask what story it is trying to tell, a commercial website like Apple, or Animal Fact guide http://www.animalfactguide.com/. Show the websites to students and ask them to comment on things like what the site is for, who the audience is and what the site wants the audience to do.

You can assign different site screenshots to different table groups if you want to do this part of the activity ‘unplugged’ (without devices).  You can also have students explore the sites for a bit in table groups to answer questions like: Purpose of the site? Intended audience for the site? What the site wants the audience to do (shop, read, play, etc.)?

Websites to use

  1. school website  

  2. Apple

  3. Animal Fact Guide

2 Direct Instruction - HTML and 'storytelling'

Explain that HTML is a coding language used to style the pages. To tell the story, you have to choose elements that help you communicate what you are trying to say ie. colours, text, images, borders, links, fonts, etc. They work behind the scenes to help tell the story. If the font is too small, or the colours are too crazy or the links don’t work, it’s hard to understand your story and it’s hard to get the audience to do what you want.

 

If you can learn how to code web pages and sites, you have more control over your story.

3 'Reading' html

Step 3: Hand out the Reading HTML page. We suggest copying the code included here, pasting it into Word, and saving it as a pdf. Provide students with the printed pdf of the code.  NOTE:  This is the link to the pdf for the handout, but you can use any html code for any webpage.

 

This is the developer code that they should be somewhat familiar with (from previous lessons). Tell students that they are going to learn to read the code. You can print out different web codes or just stick with this one.

 
  1. Have students skim through the text, looking for keywords that might help them understand what the page looks like and what kind of page it is.

  2. Based on the code that they see, students will now try to visualize what the page looks like both in terms of text and design. Give students about 5  - 10  minutes to read and draw/sketch what they think the page might look like and have them be prepared to explain their thinking.

  3. Ask what they think the story of the page is. Who is the audience? What do they want them to do? Explain their thinking in note form on the page where they did their drawings.

  4. Now have students get in larger groups or switch groups and explain their drawings and their reasoning (writing questions/answers on the paper).

  5. Discuss as whole class and see if there are commonalities. 

  6. Show the following link and ask students what they think about the webpage. The code on the Reading HTML handout is for this website. Again, consider who it is trying to reach, what is it trying to accomplish, etc.  Have students compare their ideas. You can do this with any site - the simpler the better.  Have them compare clues from the code on the handout for this website. Things to look at for clues include:  

     

    <h2>

    img

    <p>

    <http>

    Title

    Thumbnail

    Head

    Body

    Table

    Social sharing

4 Play with Mozilla Thimble

Introduce Thimble by Mozilla to show HTML. In this lesson or another one - students can do the tutorial or just remix a project.  Instructions are on the site to guide students through a remix of an existing website.

A further extension could be to design something from scratch or remix but have kids tell the story of their page and explain why they chose the elements they did.