Building This Website Made Me Love The Web

February 2026

photograph of an old poster with the word Internet in big letters, and children surfing on keyboards

"INTERNET" by Keenan Pepper is licensed under CC BY-SA 2.0 creative commons logo creative commons by logo creative commons share alike logo .

Background - What is Computer Science?

I started my teaching career as a computer science teacher. I taught classes in Python, AP Computer Science A in Java, and really enjoyed teaching intro students about variables and control structures, and advanced students about data structures and algorithms. I loved making my projects visible whenever possible, so I had built up a nice repetoir of graphics-based projects:

CMU CS Academy in my intro classes
Pygame in my advanced Python classes
For my AP CS A students, I loved the image/steganography lab

But for all these projects, the emphasis was on the programming. Graphics were just a tool that we used to motivate our study.

When I transferred to my new school, I learned that my biggest class would be web design. I was disappointed - in my mind, web design meant picking colors and centering divs, which did not align with my definition of computer science. This school actually asks all students interested in computer science to take web design in their freshman year, even if they have previous programming experience - and I could not see the logic in that. I decided to go with the flow for the first year, and then to advocate for a change.

Spoiler: Two years later, I'm totally sold. I love teaching web design, I'm passionate about the idea that individuals should express themselves on their own website, and I have put a ton of effort into building myself a website I'm proud of.

Learning Web Design

Ok, I'll admit it - I didn't know enough about web design. I had a personal website that I built a few years ago to support a job search, but it was minimal and Wordpress. I had some decade-old PHP experience, and did a unit on Flask in my Python class, but I intentionally avoided going much more than surface level.

To prepare for the class, I worked through OpenEDG's courses on HTML and CSS. These are both fantastic resources. I now use them as my course textbook, and have developed a great relationship with the team that writes them.

As I worked, I wrote a first version of this website. My goal was to practice with HTML and CSS, so I wrote it all by hand. The result looked okay (at least, as long as you weren't on a mobile device) and the code was simple enough that I could 'view page source' in class and show students how I built it.

Integrated Curriculum

As the year marched on, I gained appreciation for the reason this school wanted to start students with web design. My colleague, Jeff Elkner had been intentionally designing this curriculum for decades and had come up with something fantastic. Here are just a few reasons this works so well:

Students love it. Just a few days into the school year, my high school freshman have their own website that they can share with friends and family. They get a kick out of choosing their favorite colors and writing silly text.
Our students finish freshman year with an online portfolio that they are proud of, and then we encourage them to continue updating their portfolio as their high school career goes on. By senior year, they have a very impressive and professional-looking portfolio that they can take with them. When I assigned a fun project to the seniors in my database class, they independently added it to their portfolios, and one came back the following year to let me know that they had gotten a cool internship because of the writeup of that project on their website.
We can sneak in tons of important content that fall by the wayside in a traditional CS program (a lot of these topics are included in the famous "Missing Semester" course at MIT):
- We deploy via Github / Codeberg pages, so students get very good at using git for version control.
- To use git efficiently, we spend a lot of time learning about the unix command line. Students love learning via MIT's Terminus Game
- We encourage students to do their development in Vim. This sets them up well for future work on remote servers over SSH.
- We spend a lot of time covering fundamentals about the internet that are important for everyone in our modern digital society. We spend time studying how the internet works (my variation of the classic CS Unplugged Network Simulation is a favorite - I've invited administrators to sit in on this lesson and they always have a great time). We also spend time talking about cryptography, privacy, and tons of other important topics.
In our second-year class, students learn Python motivated by Django. When they combine Django with the front-end skills from my class, they can produce some truly impressive projects!

I also spent a lot of time thinking about why the internet is important. I found tons of inspirational stuff here, and I compiled some of it on my blogroll and links page.

Moving beyond raw HTML

As this website got bigger, it got unruly. I wanted to change some text in the footer and had to manually make the same update on every single page. I went searching for a static-site generator and found tons of recommendations on My Mastodon Instance of Choice for Eleventy (11ty). I played around with it one weekend and was instantly hooked. Here are a few things I like about it:

The built-in Nunjucks templating language is very similar to Jinja, which I use for pretty much everything. This made it easy for me to define my website footer once, and then add a {% include "footer.njk" %} in any template I want. (That line was hard to write - Eleventy kept wanting to render that line as my footer. Turns out that Nunjucks includes a {% raw %} tag for exactly that purpose.)

I could do lots of fun stuff with Collections. One place I use this is in my reviews. Every review I write on this page is its own short Markdown file, then I can easily link it to the appropriate months in my monthly now posts. For example, I wrote about my wife's recent single, "Little Bit of Luck". This single, short Markdown file appears as its own page here, in my June 2025 update here, and on my list of all reviews here. I do something similar with blog posts (this post automatically appears a few different places on the website)

I was also able to eliminate all* client-side Javascript! A lot of my previous website was rendered client-side via Showdown JS, which I know is not great for SEO, can slow down client-side rendering, and can cause caching issues. Eleventy's build process means all that rendering happens just once on my computer before it's published.

Deployment is easy. I'm taking this opportunity to migrate my personal website from Github Pages to Codeberg Pages, but both have super easy CI processes. To setup Codeberg Pages git-pages deployment system, I just made a single yaml file that automatically builds and deploys with every commit

Lessons Learned

I can now confidently say that I believe web design is the perfect course to lay the foundation for a four-year integrated CS curriculum. I'm invigorated about the promise of the internet and excited to cultivate my corner of the #smolweb. And after hand-coding my personal HTML website, I have a new appreciation for how useful static site generators are. I re-organized my class this year to emphasize JavaScript more, and hope to do an end-of-year project where my students will use Eleventy for their own websites. As always, if you have suggestions for things I should add or improve on my website, please do contact me.

Finally, there are a few things I'm still hoping to incorporate into my web design class. If you have any resources for any of these, I'd love to hear about them!

Something that introduces grid layouts from the perspective of print media
Anything about fonts- history of notable fonts, rules for selecting appropriate fonts for different designs
A resource for teaching about UI design elements - what they are, why they matter for human-centered design, and how to create them with simple CSS

Footnotes

I kept https://github.com/gracehoppercenter/validate, which runs client-side and makes an API call to https://validator.w3.org/ to validate that all the HTML/CSS on the page is valid. I co-developed this with a student and use this a lot in class. I wanted to keep it so that my students could see it there.