https://bootstarryvr.netlify.app/

https://imgur.com/gallery/Eu30dQj

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?

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/37ce8159-85eb-4102-8dfe-5490db6a91b7/twb_vr__explanation.png

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.

</aside>

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/304c30ac-2708-4b73-be15-8bb980fbe2c8/vr_twb.jpg

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a0085a1-902f-4ebf-8930-24e17889ddff/code.png

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/74e1257b-ffae-47aa-9da1-83b2dcd5358b/2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bd156ac7-184b-44eb-843a-a5223bf5ab1e/3.png

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aad1d4dc-d025-4957-8d1d-0e22db61eda9/myeshoppe.png

Pre-requisites

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

3. Checklist

Design assets