HTML, CSS, Oh My!

Posted by Dennis Newberry on 1/29/2016

It's been a few weeks since I updated you on what your students are working on. I also wanted to outline some logistics and where we are heading for the rest of the year. 
 
Progress:
As I outlined in my last update, we started out by working in Tynker (Scratch-like visual programming) and making a "Flappy Bird" clone. We spent the first month working on this project as well as some solo project work where the kids built their own games. The Flappy Bird project had the students working to understand the following concepts:
  • Object spatial awareness 
  • Creation of events when objects occupy the same space on the screen
  • Using events to trigger other object behavior (example: when the bird hits the ground, "THE END" gets presented
  • Using keyboard and mouse controls to move objects
  • Create simulated movement through cartoon-style animation by using control statements on objects
I have been trying to keep the kids interest so rather than driving the Flappy Bird game to extreme accuracy, we switched gears and went into HTML and CSS coding. Our first project here was to create a comic strip that would be presented in a browser. They should have these saved on their flash drives if you would like them to demonstrate their progress. This project left the simplicity of the Tyker/Scratch interface and visual programming and had them writing actual code. 
 
As you might imagine, the success and interest in this activity became very interesting. Some of the kids immediately liked this more detailed work and others found it more frustrating. We spent about 3 weeks navigating through this project with the last two weeks geared more towards learning how to troubleshoot code and the importance of syntax. There were more than a couple of high fives executed when they found a missing semicolon and saw their project work like intended. 
 
Today we kicked off another project where we made a wanted poster in HTML and CSS. With this one I made it a bit easier by providing all the code via a Trinket project (https://trinket.io/html/58318bee1f) and they just made changes to the parameters that were provided to see how the changes effected the website. Now, this was basically a review of what they had already done in the comic strip project but by using Trinket I think it turned on some light bulbs that got lost in the battle with syntax from the previous weeks. At the end of the session, I had them migrate the code from Trinket into their own file structure that they could take home and expand on. 
 
Upcoming:
Next Friday is the last week of the first session of Technology Club. We will continue with another HTML and CSS project that will be contained to a single week. If your kids want to continue on to the second session of Tech Club, I would love to have them continue. We only have two other kids coming to the second session and the number of kids is very manageable. 
 
NOTE: I will be out of town on Friday, Feb 12th, which would have been the start of the 2nd session. Therefore, the 2nd session will start the following Friday 2/19. 
 
In the 2nd session, I want to move on to introducing some Python development and the use of Turtle graphics. We will use control statements as we did in the Tynker project, but this time in actual code that will control our drawings using turtle. This will be very fun!
 
Other topics I'm considering in the 2nd session also involve using Python to create music using SonicPi. 
 
If you have any questions, please let me know!
 
Thanks for letting me share technology with your kids!

Recent

By Month