At GA, I started out teaching a 10-week part-time course on front-end web development whose curriculum I subsequently helped overhaul. As I continued to run the class, I built up an accompanying course website over time, starting out with something very rudimentary, then rolling, rolling, rolling. Now I teach an immersive course in user experience design, which has been as demanding as it has been rewarding.
I developed several exercises and projects that I’m particularly proud of during this process, including a box model exercise, a way to explore the basics of classes and ids, a simple and visual way to approach page layouts, an introduction to nested selectors, an old-school game of rock, paper, scissors, and a basic cash register. I also developed a series of refactored color scheme switchers which I’ve found are very effective for progressively introducing more sophisticated approaches to refactoring JS–first in pure JS, then using a body class to remove CSS from the JS, next doing the same thing with jQuery, and finally making the code more flexible by using the “this” keyword.
I made a simple About Me website, which utilizes only a very basic set of HTML elements (no ids or classes), and very lightly introduces the concept of floats. This is followed by a single-column blog, which I use to introduce a greater range of HTML elements, along with nested CSS. That has a 2-column redesign which students transition to, using floats for page layout and for the navigation. It’s fascinating to me that it is doable now, but students who take the class actually learn to code layouts to be fluid right out of the gate. From here, they are ready to tackle the more complex layouts in Startup Matchmaker, which I give them with extra pages which have not been “designed”, as an exercise for them to imagine and create those pages based on the style established on the given pages.