Apply Today to our Front End or Back End Programs & check out our scholarships!

Pop Up: Build a Virtual Lite-Brite

Thinking of a Lite-Brite may make you nostalgic. But these days, they are covered in germs. In this live, instructor-led workshop, you will build and customize your very own virtual Lite Brite that you can share with anyone around the world!

This will be best experienced on a desktop or laptop computer.


We are so glad you are here! To get set up…

  1. Open up in a browser (preferably Chrome) and log in to your account.
  2. Please change your zoom name to first name, last initial, pronouns like this: Kaitlyn V. (she/her). To do this, hover over your image on zoom, click the three dots and select Rename from the menu.
  3. Heads up! We will ask you to briefly introduce yourself in a few minutes.


  • Build and customize a virtual Lite-Brite
  • Gain exposure and familiarity with some HTML, CSS, and JavaScript
  • Determine if coding is something you enjoy doing and want to pursue further

Disclaimer: We won’t become experts in these languages today. And you may leave with more questions than answers!

Zoom Tools and Introductions

  • Reactions - Have you ever written JavaScript code before?
  • Chat - Would you rather have a professional chef or housekeeper?
  • Unmute - Introduce yourself! Please share your name, pronouns, location, and why you are here!

Programming Languages We Will Use

Building the user-facing part of a website or app is referred to as Front End Engineering. Building a Front End requires the writing code in three programming languages, and making the code in each language “talk to” the code in the others.

It can feel like a lot, but let’s start by building an understanding of what each language is responsible for. We will make some comparisons to the human body to create context.


HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.

We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:

Drawing of human skeleton


CSS defines the look and feel of a webpage - it can change the size or layout of items on a page, change colors, fonts, and more!

We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.

Drawing of human skeleton


JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.

We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:

Drawing of human skeleton

Project Setup

We will work off of a starter kit that has already been created. Click this link to access the starter kit in Here’s how to get set up:

  1. Fork the project - this makes a copy on your account.
  2. Once you are on the site, substitute your name in for the NAME placeholder on line 11 of the HTML file.
  3. Click the green “Run” button at the top of the page, and you should see a mini Lite-Brite project on the right side of the page.

Now, it gets even more fun: