HTML/CSS with Canada Learning Code

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:

Screen Shot 2019-11-16 at 11.27.16 AM

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.

Screen Shot 2019-11-16 at 11.35.53 AM

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.

My layout estimate from HTML code only

Here’s the actual webpage:

Screen Shot 2019-11-16 at 11.39.40 AM

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.

Screen Shot 2019-11-16 at 1.09.27 PM

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!  Screen Shot 2019-11-16 at 1.10.09 PM

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:

Screen Shot 2019-11-24 at 7.52.51 PM

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:

Screen Shot 2019-11-24 at 8.00.57 PM

In the block code it looks sort of like this:

Screen Shot 2019-11-24 at 7.56.29 PM

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!

3 thoughts on “HTML/CSS with Canada Learning Code

  1. You’re amazing. I love x-ray goggles, by the way, and still remember the amazing day when my kids learned about it (and I met TVO Albert). I am totally envious of your learning – how cool to have a workshop geared just to teachers. You now have me wanting to do some research about what might be offered in my neighbourhood!

    Liked by 1 person

    1. Thé other thing I really enjoyed about it is that I got to have real conversations with non-educators all day and I’ve made some very interesting contacts. I think there are also chapters in Ottawa and Hamilton.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s