HTML and CSS Basic Structure Mnemonic
About 26 years ago, I studied Web Development at BCIT for two full years. Believe it or not, it took me two whole years to properly understand the structure of front-end development. During that time, I found it especially difficult to remember the structure of HTML and CSS—the tags, the nesting, and how everything fit together.To help myself remember, I came up with a little phrase: "Hold Tight, My Love". It was my personal mnemonic for HTML, and it worked for me. To this day, I still use the phrase when I teach students at college.
Here is the interesting part: the course I now teach runs only seven weeks, meeting once a week. That means my students have to master an entire HTML and CSS course in just seven classes. Take a moment to think—I spent two years learning what they now have seven sessions to absorb.
Naturally, my first reaction was: it's impossible. There's no way anyone can truly understand HTML and CSS, the way I once struggled to, in just seven classes. But something has changed since my time as a student—we now have AI to help us.
In my classroom, students use Microsoft Visual Studio Code, with Microsoft Copilot built right in. But here's the key: I don't let them jump straight to AI. Instead, I teach them the fundamentals first. They start by learning the basic structure of HTML and CSS the traditional way, writing code manually, line by line, tag by tag. This is essential. Without understanding the backbone of the language, AI holds you back instead of helping you move forward.
I introduce Copilot only after they've built that foundation. At that point, something wonderful happens. They already know what HTML and CSS elements are supposed to do, and they can build on and expand the components they've already learned. They start to see how the pieces they built by hand can be assembled faster and more efficiently with a little AI assistance.
This is when the "aha moment" happens. Students start smiling and finally love coding, because they understand the basic structure underneath it all. It's not magic to them anymore—it's another language they can read, write, and now accelerate with the help of AI.
Throughout the course, I keep repeating my old phrase, "Hold tight, my love!" I tell them that HTML and CSS will get easier, and that soon they'll be writing code manually and confidently. They feel that same "aha moment" I felt decades ago—except it takes them seven weeks instead of two years. At the end of the course, I finally explain to them why I kept repeating that strange little phrase all along, and it always gets a laugh.

This is one of the photos that I took with my students this year, and you can see how happy they are after finishing the seven-week HTML and CSS course.
This is how I teach students, and I believe it's how we can survive in this AI era without becoming passive bystanders: study the basic structure, get help from AI second, and merge the two to truly succeed. AI isn't here to replace the fundamentals—it's here to build on top of them. And when students understand that, they don't just learn to code. They learn to think like programmers, with AI as their partner rather than their crutch.

Comments
Post a Comment