Starting the Web Programming Class

Published: 2024-09-02 9:05 AM

Category: Teaching | Tags: web programming, class, technology, planning

This year, I started a new web programming course for high school students. We're focusing on the web because it's where my experience is and because we can do most of it on Chromebooks, which is what students are already eqipped with.

I had high hopes of spending two weeks (ha!) on the basics of the technology of the Internet. We started with vocab like "protocol," "client," and "server" before have some brief discussions about headers in requests and responses. I'm not doing any server-side work in this course, so we're not diving too deep into that protocol other than that there is a protocol dictating these interactions.

We moved into HTML pretty quickly and I'm starting to develop some protocols for distributing and collecting source code. I haven't introduced any version control, so I needed a way to have students download all source files effeciently. I ended up creating a repo with the following structure:

.
└── web-programming/
    ├── html/
    │   ├── exam/
    │   │   ├── requirements.md
    │   │   └── index.html
    │   ├── ex01/
    │   │   ├── introduction.md
    │   │   └── template.html
    │   ├── ex02
    │   └── ...
    └── css/
        ├── exam
        ├── ex01
        └── ...

Each exercise is built to focus on a core concept. I have a markdown document with some reading and then the scope and instructions for the assignment. Sometimes, the assignment template has some of the HTML (or whatever) already written and students are editing. Other times, it is just blank boilerplate for an html document that they begin on their own.

I end up creating a .zip archive of each exercise that the students download through Google Classroom. Students complete the exercise and then submit their finished HTML to the Google Classroom assignment.

I looked into using Github Classroom to assign templates for students, but the template repos have to be standalone. In other words, I can't assign a single directory out of the web-programming root directory - I can only assign html/ex01 if it is its own repo. That means students would have dozens of template repos to manage by the end of the year and I'm not sure I want to do that. I'm also not sure I want to continue uploading and downloading template zips.

We've also downloaded the VS Code PWA to use as a text editor. I'm teaching some productivity tips along the way and I want them in the habit of working with the tools. I'll keep introducing helpful tools alongside the exercises so they've got context for why you'd want to use an editor in the first place. There was a lot of frustration in one of the first assignments (manually typing HTML tags around content) when I showed them the wrap with abbreviation shortcut. We'll continue identifying tasks we do frequently and looking up faster way to accomplish those tasks.

In the long run, I'm hitting a groove. This is a new class for me and for the school, so there is no expectation for what a "successful" sequence looks like. I think I'm going to continue refining the code distribution workflow to make life easier on myself while I prep activities and templates. I think as we build technical skill, we'll move to something a little more automated.