twitter facebook linkedin YouTube amazon

Roll Your Own Responsive Design

Roll your own! This workshop is available for presentation at conferences or to public or private groups. It's currently available in a 6-hour full-day format. Contact Jen to schedule this workshop for your group.

About This Workshop

Responsive design is a specific technique, defined with three parts: a grid system, media queries, and responsive images. You can use a framework like Bootstrap or Foundation to build a responsive website, but many object to framework "bloat". How can you build your own grid system and media queries from scratch? How can you manage responsive images? This workshop will walk you through all three areas. By the end of the workshop, you'll have a good start at a grid system of your own, integrating media queries and a responsive image system, and maybe you'll have a bit more appreciation for the responsive design frameworks as well!

Learning Objectives

  • Roll your own grid system!
  • Create your own media queries to work with that grid system
  • Work with Picturefill to create responsive images that resize with the browser


Attendees must have a solid working knowledge of hand-coded HTML and CSS. HTML knowledge should include HTML5. CSS knowledge should include concepts like floats and clears, absolute and relative positioning, and a basic working knowledge of constructing a media query.