Context
Graphic design and illustration students need to understand how the web works and how to design for it. However, most arrive with no development experience and mixed interest in ever writing code. The challenge wasn't just teaching web design and development concepts; it was teaching them in a way that respected both the students who would go deep and the ones who just needed a basic understanding of development.
Role
Process
- 01
Isolated exercises over a single running project
Coding concepts were introduced through small, self-contained CodePen exercises and pre-built boilerplates rather than one accumulating project. This lowered the stakes for students who struggled and kept the focus on the concept at hand rather than debugging something they built three weeks ago.
- 02
Live demonstration as preview, not instruction
Coding lectures were designed to show how things work in context, not to be followed along in real time. Students watched, asked questions, then applied concepts in the exercises. This reduced the chaos of live coding sessions where half the class falls behind on a semicolon.
- 03
The course site as a resource
Built with VuePress, the site housed all course materials and was developed live during in-class demos, giving students a real example to reference throughout the semester.
Outcome
All students came away with a working understanding of designing for the web. The coding component was more variable — predictably so, as it tracked closely with individual student interest. That's an honest outcome for a design-first audience where web development is a supporting skill, not the primary focus.
Reflections
The mixed coding results point to an inherent tension in the course: it serves students who want to build things and students who just need to understand the medium, and those are genuinely different courses. A future version might split the track earlier or lean harder into the design-for-web angle and treat coding as optional depth rather than a shared requirement.