Modifying the Lite-Brite HTML
Tour the Existing Code
- Elements that live inside of the
bodytags will be displayed on the page (lines 11-27)
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) orctrl + /(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.
Your dots are giant, probably bigger than desired. We will learn how to change their size in the next section!
HTML Summary
- Elements that live inside of the
bodytags will be displayed on the page. - The number of elements and the content inside of the elements in the HTML file usually have a one-to-one 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.