Kids' Coding Club: HTML and CSS

-

On Thursday, March 15, kids came to the Studio on 4th at Pasadena Central Library to learn about HTML and CSS, and build a website that would be an interactive birthday card or greeting for a friend. Most kids did birthday cards but a few had other great ideas, such as a get well card for a sick friend.

I've always wanted to do a web design class like this, but eight years ago when I first learned HTML and CSS, there weren't the great teaching tools that we have out there now. I found a lot of great stuff on KhanAcademy but the thing I liked most was the WebLab at Code.org which allows you to see your webpage appear simultaneously in a side viewer. It's a great tool for teaching kids how to code!

One drawback I experienced was a lack of time. I had a lot of content prepared and could easily have filled a two-hour class with it. We didn't get through much of the CSS in the hour time we had allotted. So we had a file loaded onto our library laptops to give the kids a basic CSS stylesheet to plug into their webpage and invited them to change it. That's all right too, because changing an existing code to make it your own is one of the basic steps all programmers take in learning to code.

Here is what a few of the kids came up with! Click the images to see the webpages they created. (They are best viewed in Internet Explorer, because other browsers change the font.)

Here are my slides:

And here is my handout:

If you're a teacher or librarian interested in starting your own coding club, check out this archived webinar from Infopeople! Sylvia Aguiñaga taught it last year, giving participants some basic fundamentals for starting a coding club or workshop.

Comments

Post a Comment

Popular posts from this blog

Bat Signals

-
Image
I'm doing a craft project for Batman's 75th Anniversary where the kids are going to make Bat Signals out of Pringles cans. I had two different kinds of Pringles cans: a short one and a long one. I wanted to see, which can produced a clearer bat signal when an LED keychain flashlight was placed inside? Well, the first thing I had to do was construct a "stand" for the flashlight so that it would shine directly upwards. It kept falling down, ruining the effect! I cut out two circles (using the Pringles lid as a guide) of cardstock, glued them together so that they would be sturdy, and folded them into a semicircle shape. With the fold I cut some slits going outward in a kind of star formation so that the flashlight could poke through. Then I taped all around and underneath. Finally, I cut a few more slits around the outer circumference of my circle and bent the sides down like a hexagon to make it into a "stand." Worked quite well and I don't fors...
Read more

Scratch for Experienced Users: Flappy Bat

-
Image
Today we made videogames using Scratch, based on the infamous "Flappy Bird" videogame that brought its creators notoriety and established them in the halls of memorable bad game design forever :) We followed a tutorial I created and chose new sprites for our flappy character--many kids chose airplanes, fish, or other animals, and a few chose bats. The end code looks something like this (this is just the code for the bat that flies through the pipes): The final product is supposed to work like this (click on the picture and you'll be taken to the game which you can play): If you'd like to see the kids' projects they are posted here: Pasadena Library Kids' Blog The kids did a great job. Even one child who was not really very experienced with Scratch turned out to be quite sharp and able to follow all the difficult instructions. Despite having a lot of technical difficulties, almost everyone was able to go home with a finished game emailed to the...
Read more

Octopus Chromatophores

-
Image
Today we learned about color changing animals and how they're able to expand or contract special pigment sacs called chromatophores in their skin, in order to give the overall visual effect of having changed color. In reality, they have just chosen which pigments to expand and which ones to shrink, but all the pigments are there! We talked about how octopuses do this and how they also have papillae in their skin that can change the texture of their skin from smooth to rough or bumpy, which gives them an added camouflage benefit. To demonstrate how this works, I programmed a simulation of chromatophores expanding and contracting to match their environment using Scratch. You just click on the words Brown, Red, or Yellow to make the background change, and watch as the chromatophores change by expanding or contracting to emphasize that color! Click on the picture to go to the Scratch website and play with this simulation. Our hands on project today was pretty easy--to build a ...
Read more