General Assembly

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.

FEWD Overhaul

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.

The box model exercise introduces basic properties like padding, border, and margin.

Classes and IDs are useful for differentiating content beyond what is possible with built-in HTML elements.

Page Layout introduces the basics of composing pages using float.

As pages become more intricate, we may need nested selectors to style elements under specific circumstances.

Rock, Paper, Scissors turned out to be more challenging for students than I initially imagined. I did enjoy putting together this weird retro style for the game though.

Cash Register is a great challenge project for students who are ready to stretch their JS skills a bit.

FEWD Projects

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.

About Page Screenshot

The About Me project gives students the opportunity to build a 2-page website using only basic HTML elements and a minimal set of CSS.

Introduces

  • Basic HTML tags
  • HTML page “skeleton”
  • Semantic HTML sections
  • Starter CSS properties
  • CSS Element selectors
  • CSS Descendant selectors
  • CSS :hover pseudo-class
Single-column Fashion Blog Screenshot

Sartre’s List pushes students further with more nested HTML and more sophisticated CSS.

Introduces

  • Nav layout using float
  • More practice with the basics
Two-column Fashion Blog Screenshot

The Redesign of Sartre’s List requires students to produce a 2-column layout, and also offers subtle nudges to begin exploring CSS transitions.

Introduces

  • Page layout using float
  • Nested CSS selectors
Startup Matchmaker Screenshot

Startup Matchmaker gives students room to explore more sophisticated layouts, as well as opportunities to think about design systems.

Introduces

  • Background images
  • CSS class selectors