1. Goal:

  1. To create an immersive experience, and highly interact-able course in virtual reality for learning twitter bootstrap, a front-end technology used to develop mobile/tablet/pc responsive webpages.
  2. More specifically to make the learner understand how items are placed horizontally and vertically on the grid system in bootstrap

2. Why?

According to my experience, when students are learning TWB they often have a conceptual disconnect as code is written line by line, like in a ruled notebook 🗒️ on the computer.

<aside> 💡 For example if you look at a standard webpage, elements such as images, text often appear side by side rather than one after the other.


A typical web page may look like this on a laptop and mobile:

  1. Code is typed out horizontally. Line by line in a code editor

2. Learners expect horizontal alignment of web page elements. Elements appear, one of the other.

3. Learner are expected to place items on a grid. Vertical and horizontal assignment with rows and columns.


  1. HTML (specifically knowing what a div is)
  2. Attributes (specifically knowing what classes are)

3. Checklist

Design assets