Back to Setup Page

Modifying the Lite-Brite HTML

Tour the Existing Code

  • Elements that live inside of the body tags will be displayed on the page (lines 11-27)
  • Change the NAME on line 11 to your name or content of choice! Re-run the program to see the result.

Explore to Learn:

  • Look at the browser - how many Lite-Brite “dots” are being displayed? Can you identify the code that created those dots?
  • While your cursor is on line 20, use the keyboard shortcut cmd + / (Mac) or ctrl + / (PC) to comment out that line of code. Re-run the project. What changes do you see in the browser? What does that teach you about what line 20 does? (When finished exploring, uncomment line 20 with the same shortcut)

Modify the Existing Code

Now that we're getting to know HTML and this specific project a bit better, let's modify it!

Add 5-10 additional dots to your Lite-Brite board.

HTML Summary

  • Elements that live inside of the body tags will be displayed on the page
  • The number of elements and the content inside of the elements in the HTML file usually have a 1-1 correlation with what we see in the browser
  • Every little character matters - the browser can’t assume anything about what we want it to do

Next Section: CSS