screen-shot-2016-11-13-at-7-45-43-pm
Sublime Text editor

How would you teach html/css/js to students from grades 7 to 12 so they can create websites? Asking for a friend. Oh, and this friend tells me they meet for about two hours a week.

I was a webmaster before becoming a teacher. I ran a corporate website, organized early electronic marketing, and even set up webinars for my employer — from 1996 to 2004. Does that qualify me to teach a club of girls how to code for the web? Only a little, I’m learning. I don’t have to tell most of you that the web was a vastly different place 15 years ago than it is now. I’m working with a club leader, another teacher with similarly rusty html and strong google skills. Our base knowledge is so ancient, we’ve lost count of the depreciated tags we’ve run into.

Introduction: A First Web Page

I love to let kids dive in on new technology, so here’s how I structured a one-hour lesson on writing web pages:

  • grab a good text editor: I’ve been using Sublime Text for Mac
  • start with these four tags: paragraphs, links, headings, images
  • learn a tiny bit of style notation: colors and fonts
  • be ready to show whatever your club asks to learn — W3Schools has had an open browser tab on my computer all semester
  • practice! make the world’s tackiest web page — sure it’ll look like MySpace or Livejournal but don’t worry, these kids don’t remember those days

Kids were super-excited about what they’ve learned. The younger ones are mostly interested in background colors, text colors, and fonts. We’ve played with these ideas for a few weeks and I think they’re almost ready to understand the value of separating content from presentation with css.

Next Level: Bootstrap, Templates, and Editors?

So this brings me to the weekend. We’re ready to take the girls to the next level. We figure that means finding some web space, teaching them about ftp and designing off of a web template.

Apparently Bootstrap is the “most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” Sold. Well, it’s free, so does it even make sense to say “sold”? Anyhow, there are even free templates that use Bootstrap over at Start Bootstrap. I downloaded the Business Casual theme and started making a personal project website to practice.

Are there other frameworks I should look at before showing Bootstrap to the girls?

Questions

  1. Where do you go for basic web hosting? I’m looking for ftp access and NOT a wysiwyg-only interface.
  2. Who online is doing the best job teaching html & css? Looking for inspiration. We’ve used codecademy’s lessons but want to stay away from “welcome to club, now go follow a tutorial on your own” for now.
  3. Got any industry-standard tools I need to be showing the girls?
  4. Are you a woman who codes, especially for the web? Want to be a guest at a meeting?