Now I Have to Teach Coding? Getting started with Tabby Cat (1)
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.
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.