Art Blog

Girls Learning Code – HTML & CSS

It’s 10 AM on a Saturday morning and I am sitting in a room at Shopify in Ottawa with a bunch of parents and their daughters ready to learn HTML and CSS. I am a web developer and taught HTML more than 20 years ago. So, why am I here? My daughter wants to learn to code and I thought this was an exciting alternative to being “dad-taught”.

My daughter is 13 and she has done some Hopscotch and has recently been doing quite a bit of Scratch. In fact, this past week, her school was teaching how to write code by using Google CS First to advance their understanding of Scratch. At the end of the week, she was asked by her teacher to write a paragraph about her experience which was published on the school blog. This is what she wrote.

Learning computer science was a wonderful and useful experience for all students. I have had some experience using Scratch, but thanks to Google CS First, I now feel that I understand the language of code. This week of coding was very fun, and a great way of getting deeper into computer science. Learning code is like learning to read a different language. I think that everyone should learn to code. I’d really like to create an app for the app store and I feel I have the some of the knowledge to do it. As Steve Jobs said, “Everyone should know how to program a computer, because it teaches you how to think.”

Sign us up

We attended an event for girls a few weeks ago called Go ENG Girl at the University of Ottawa where we heard about an HTML & CSS course for girls from one of the Ottawa Chapter leads for Ladies Learning Code. This same course was part of a nationwide initiative by the Ladies Learning Code organization involving more than 1000 girls in Canada on November 7th. LLC is run by volunteers that depend on a pay what you can model for one day courses.

ladies learning code

The Ottawa course was organized by Ladies Learning Code Ottawa Chapter Leads, Tiffany Tse (@tiffany_tse) and Jane Maguire (@jane_maguire). The lead instructor was Cassie Slack (@CSlackDesign), a talented designer from Shopify. There were a number of fantastic mentors also in attendance. The event was hosted in downtown Ottawa by Shopify in their beautiful Cody’s Cafe and sponsored by Google.

Class View

Ideas become wireframes

The event started with introductions and interviews of kids and parents alike. We then jumped into learning about how and why web sites exist. Each girl was then asked to think of a web site idea. It wasn’t too long before we were building wireframes on paper. I appreciate our instructor’s focus on the importance of drawing/sketching when creating web sites. I am also a strong believer in putting pen to paper to work out details/content of a web site.


Coding begins

Now it was time for HTML. We used an online tool called Thimble which is a Mozilla product providing new developers a smart and well contained online development environment in which to learn and try their skills at web design and development. Thimble provides the ability to edit your code and see the changes in real time. In advance of this course, I had never heard of Thimble. I am used to either simple command line editors or Sublime Text and Visual Studio. Everyone should check out Thimble, even if you are seasoned developer. You may know someone who would find it useful.

Playing with CSS

By lunch we had some basic HTML structure. After lunch, it was time for CSS. We then spent the rest of the afternoon (until 3:30) bringing CSS into the mix to style the site with a focus on colour, fonts and more complex menu elements. The mentors were very knowledgable and friendly. They allowed everyone to move at their own pace. They were vital to the success of the event.



At the end of the day, we were all asked to publish our sites which happens within Thimble and provides a static URL for viewing and sharing. The instructor pulled up all the sites that were created, and shared them with the class. It was fantastic to see what these girls could create in just a few hours. Everyone received very positive feedback and a round of applause. We did backup the files we created so my daughter could continue working on her site after the course.

final project

Final course notes

A special thanks to everyone involved. I highly recommend this event to anyone with a daughter even mildly interested in computers/mobile devices or code. What did my daughter think of it? 10 out of 10!

If you are interested in supporting this initiative, check out Ladies Learning Code. They also have a crowd-funding campaign supporting a coding on the go bus that will travel across Canada called code:mobile that will be exposing kids to code, if they get funded.

Next steps

We plan on attending a future Ladies Learning Code event so my daughter and expand her coding experience and knowledge. She really enjoys coding and continues to do it in her spare time. Scratch has a lot of potential and of course HTML & CSS will continue to be a focus. Next will be Python maybe later in 2016 so she can see begin to understand the use of code in solving more complex problems. Python also has a syntax that is easy to read. Swift is the ultimate goal for her so she can develop her first app. Keep an eye on this space 😉