It’s been a couple short months since my last post about my new adventures in coding with Canada Learning Code.  This time I joined a class specifically aimed at teachers to learn HTML and CSS.  Whenever I tell friends about my new learning pursuits, I often get the question: Why? How would you ever use this information?  When I think about my teaching life, I spend a lot of time online in the D2L Brightspace environment as an online teacher.  I also spend a lot of time with the Google Apps for Education suite.  Finally, I really want to understand more about the coding in this WordPress blog.  But most of all, I fundamentally believe that coding is a language that is a growing part of literacy expectations.  I can hear my family talking more and more about code, how it works and how it is exciting to see something you make work in digital environments.  I want to be a part of these conversations in a meaningful way.

Michelle Mabuyo, one of the organizers from the Waterloo chapter, organized the whole day and our instructor was Basil Khan.  Diving in, the first thing we learned was the importance of tags in HTML.  We were presented with this example:

So once it became obvious that tags open and close an HTML instruction, we were quickly ready for more.  I really liked how the following activity allowed the instructors to access our prior knowledge.

I sat with my mentor Roma, and my elbow partner Sharon and I came up with this drawing of what I thought the webpage would look like. Just like in the UX/UI design workshop, I was amazed how figuring out things on paper in a low tech way was comforting and made me feel more confident before continuing.

Here’s the actual webpage:

So working it out on my own, and then seeing the real webpage allowed me to see the difference between: <h1>, <ul> and <li>.  The part I didn’t identify in my drawing were the bulleted points, otherwise known as <ul> unordered list.

Next we used Mozilla X-Ray Goggles to look at webpage code.  I had some idea of how complex this looks, but after learning about the tags, I could skim and scan to understand the finer points with more confidence.  Next we worked through changing the header and images on a sample webpage to one of our own heroes. This is the example webpage on the Black Panther.  I chose my hero as Nina Simon, who is doing really groundbreaking community exhibits in libraries, based on her book The Participatory Museum.  At first, it seemed pretty straight forward but I needed to learn from my mentor how to choose or adapt an image to suit the space you want to put it in by setting the parameters for the size of the image.

After our glorious lunch, we started to tackle CSS.  This slide helped me to understand the purpose of CSS almost immediately.  I remember those first really ugly websites, like the one on the left!  

We got to play immediately once we were given this resource for CSS code: http://css.cool/#/ and also made an account with Glitch.  The sample website we were given here was: innovation-website-starter.glitch.me and we each were asked to choose an innovator from the Governor General’s Innovation Awards.  I chose innovative artist Christi Belcourt and soon had the website together: https://glitch.com/~tortoiseshell-manuscript.   I can see tackling some HTML problems on my own in the future and the organizers closed this section of our learning with this resource of HTML reference.

We were also given a checklist, that I can see using in my own teaching:

Canada Learning Code has lessons on each of the concepts that they teach, and the organizers tell me that there are about 16 lessons in all.  Here are the lesson plans on algorithms to go with the work we did in HTML and CSS today.

Warning: This next part is highly addictive.  So it was no surprise to me this week, that I got lost for a couple of hours in the Hour of Code project involving block coding and music this week: https://code.org/dance

I’m pretty impressed with my final project.  The Javascript looks like this:

In the block code it looks sort of like this:

I got really lost in making the measures line up and making an even balance between repetition, symmetry and random settings. Here is the final result:

I’m hoping that Canada Learning Code is going to be running a Javascript workshop in my area really soon!