Merge pull request #111 from turingschool/update-litebrite

updates and activates litebrite

popup-lite-brite/index.md

@@ -2,77 +2,53 @@
 layout: lesson
 ---
 
-# Pop Up: Build a Virtual Lite-Brite
+# Try Coding - Basics of Web Development (HTML, CSS + JavaScript)
 
-[Thinking of a Lite-Brite](https://en.wikipedia.org/wiki/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!
+Please sign up for a free <a target="blank" href="https://codepen.io">codepen.io</a> account before beginning this workshop.
 
-_This will be best experienced on a desktop or laptop computer._
+## Welcome
 
-## Welcome!
+- Open up <a target="blank" href="https://codepen.io">codepen.io</a> in a browser (preferably Chrome) and log into your account.
+- Change your Zoom display name to your first name, last initial, and pronouns – Kaitlyn V. (she/her). To do that, hover over your image in the gallery view, click the three dots, and select Rename.
+- Heads up! We will ask you to introduce yourself in a moment.
 
-We are so glad you are here! To get set up...
-1. Open up <a target="blank" href="http://repl.it/">repl.it</a> in a browser (preferably Chrome) and log in to your account.
-1. 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.
-1. Heads up! We will ask you to briefly introduce yourself in a few minutes.
-<br><br>
+## What to Expect
 
-## Goals
+Over the course of the workshop, we will write code, practice the habits of successful developers, and learn a little more about Turing. We will ask you to introduce yourself, ask questions, and occasionally share answers to the technical work we do! By the end of today, you will build your very own “LiteBrite”. Below is our agenda for the day:
 
-- 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
+- Welcome & Introductions (30 minutes)
+- Instruction (90 minutes)
+- Wrap-Up (15 minutes)
 
-Disclaimer: We won't become experts in these languages today. And you may leave with more questions than answers!
-<br><br>
+## Learning Norms
 
-## 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!
+- No question is too small and no question is a bad question. Ask them!
+- We all benefit from each other's ideas! Push yourself to share at least one time today.
+- Keep your camera on during the session (if you can).
+- **Questions?** Type into the zoom chat, raise your hand, or come off of mute! Please avoid direct messages unless it is a specific issue only to yourself.
+- **Disconnected?** Jump back on!
+  <br>
 
-## Programming Languages We Will Use
+## Zoom Practice
 
-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.
+There are several ways to get my attention throughout the workshop today. Let’s practice using some of these tools now.
 
-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.
+- **Type in the chat to everyone.** What is your favorite genre of music?
+- **Send the instructor a direct message.** What word describes how you are feeling today?
+- **Raise your hand.** Find your zoom toolbar, click Reactions, then Raise Hand.
+- **Introduce yourself!** Share your name, pronouns, and your location. Then, share why you’re here.
 
-<section class="data-type-cards language-cards">
-  <div>
-    <h3>HTML</h3>
-    <p>HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.</p>
-    <p>We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:</p>
-    <img src="./assets/html.png" alt="Drawing of human skeleton" />
-  </div>
+1. I’m looking for a career change and I’m trying coding for the first time.
+2. I already know I want to attend Turing, but I want to learn more!
+3. My friend or family member won’t stop bugging me about checking this out, so here I am!
 
-  <div>
-    <h3>CSS</h3>
-    <p>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!</p>
-    <p>We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.</p>
-    <img src="./assets/css.png" alt="Drawing of human skeleton" />
-  </div>
+### Up Next
 
-  <div>
-    <h3>JavaScript</h3>
-    <p>JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.</p>
-    <p>We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:</p>
-    <img src="./assets/js.png" alt="Drawing of human skeleton" />
-  </div>
-</section>
-<br><br>
-
-## Project Setup
-
-We will work off of a starter kit that has already been created. Click [this link to access the starter kit](https://replit.com/@turingschool/lite-brite-starter#index.html) in repl.it. Here's how to get set up:
-1. Fork the project - this makes a copy on your account.
-1. Once you are on the site, substitute your name in for the `NAME` placeholder on line 11 of the HTML file.
-1. 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.
-
-<br><br>
-
-## Now, it gets even more fun:
+- [What is Front End and Back End Engineering?](./what-is-fe-be)
+- [Project Setup](./litebrite)
 - [HTML - Content](./html)
 - [CSS - Styles](./css)
 - [JavaScript- Explore](./js-1)
 - [JavaScript - Create](./js-2)
 - [Extensions](./extensions)
-- [Wrap Up](./wrap-up)
+- [Wrap-Up](./wrap-up)

popup-lite-brite/css/index.md → popup-lite-brite/litebrite/css/index.md

@@ -2,20 +2,18 @@
 layout: lesson
 ---
 
-<a href="../">Back to Setup Page</a>
-
 # Modifying the Lite-Brite CSS
 
 CSS allows us to "dress up" the content on our page.
 
 ## Tour the Existing Code
 
-- CSS allows us to target types of elements (ex: `body`, `div`) and specific elements based on class name (ex: `dot-container`).
+- CSS allows us to target types of elements (ex: `section`, `div`) and specific elements based on class name (ex: `dot-container`).
 - Once we've targeted an element, we can write rules for that element to follow. Rules can be things like _"the text of this element should be red"_ or, _"the background color should be grey"_.
 
 ### Explore to Learn:
 
-After you complete each task that follows, re-run the program and observe the changes in the browser!
+After you complete each task that follows, observe the changes in the browser!
 - On line 9 of the CSS file, change `black` to `magenta`
 - On line 10, change `lightgrey` to `orange`
 - On line 11, change `10px` to `50px`
@@ -35,7 +33,7 @@ You may be wondering, "how does one know all these special keywords and commands
   <li>Optional: Tinker with the colors used throughout your app!</li>
   </ul>
   <p>Play around with these sizes until you are satisfied with your board. <em>This may be the time where you also decide to go back to the HTML file and add more dots!</em></p>
-  <p>You may notice that the layout of the dots in your dot container is responsive to the size of the window. This is because the dot container takes up as much space as it can horizontally, unless we tell it to do something different. If you want your dots to be in a fixed location, without considering the size of the window, set the width property on your dot container to be a fixed pixel value, like 500px. <strong>You may have to play around with the right number of dots, size of the dots, space around the dots, and width until you get it lined up perfectly.</strong></p>
+  <p>You may notice that the layout of the dots in your dot container is responsive to the size of the window. This is because the dot container takes up as much space as it can horizontally, unless we tell it to do something different. If you want your dots to be in a fixed location, without considering the size of the window, set the width property on your `dot-container` to be a fixed pixel value, like 500px. <strong>You may have to play around with the right number of dots, size of the dots, space around the dots, and width until you get it lined up perfectly.</strong></p>
 </div>
 
 ## CSS Summary
@@ -44,4 +42,13 @@ You may be wondering, "how does one know all these special keywords and commands
 - Based on the type of rule, CSS will expect different values (ex: `magenta` for a color and `10px` for a measurement).
 - There are many types of rules we can write; with practice, we become familiar with more but don't need to memorize them all.
 
-<a href="../js-1">Next Section: Exploring JavaScript</a>
+### Up Next
+
+- [What is Front End and Back End Engineering?](../../what-is-fe-be)
+- [Project Setup](../)
+- [HTML - Content](../html)
+- <strong>[CSS - Styles](../css)</strong>
+- [JavaScript- Explore](../js-1)
+- [JavaScript - Create](../js-2)
+- [Extensions](../extensions)
+- [Wrap-Up](../../wrap-up)

popup-lite-brite/extensions/index.md → popup-lite-brite/litebrite/extensions/index.md

@@ -2,8 +2,6 @@
 layout: lesson
 ---
 
-<a href="../">Back to Setup Page</a>
-
 # Lite-Brite Extensions
 
 If the class has extra time, or individuals want to continue building on their Lite-Brite after the workshop, here are some areas to explore!
@@ -16,7 +14,7 @@ We can provide a "color picker" input to the user so that they can choose from,
 
 ### Step 1
 
-In your Lite-Brite replit, add this code to the HTML file, inside of the `controls` section:
+In your Lite-Brite codepen, add this code to the HTML file, inside of the `controls` section:
 
 ```html
 <input type="color" class="color-option color-picker"/>
@@ -66,4 +64,13 @@ The `.val()` method used in the previous snippet takes the value from an input.
 
 Run the program, and try this functionality out!
 
-<a href="../wrap-up">Wrap Up</a>
+### Up Next
+
+- [What is Front End and Back End Engineering?](../../what-is-fe-be)
+- [Project Setup](../)
+- [HTML - Content](../html)
+- [CSS - Styles](../css)
+- [JavaScript- Explore](../js-1)
+- [JavaScript - Create](../js-2)
+- <strong>[Extensions](../extensions)</strong>
+- [Wrap-Up](../../wrap-up)

popup-lite-brite/litebrite/html/index.md

@@ -0,0 +1,39 @@
+---
+layout: lesson
+---
+
+# Modifying the Lite-Brite HTML
+
+## Tour the Existing Code
+
+- Elements that live inside of the `HTML` file will be displayed on the page.
+
+### Explore to Learn:
+
+- Look at the browser section (the lower portion of the page) - how many Lite-Brite "dots" are being displayed? Can you identify the code that created those dots?
+- While your cursor is on line 13, use the keyboard shortcut `cmd + /` (Mac) or `ctrl + /` (PC) to _comment out_ that line of code. What changes do you see in the browser? What does that teach you about what line 13 does? (When finished exploring, _uncomment_ line 13 with the same shortcut.)
+<br>
+<br>
+
+<div class="try-it-new">
+  <h2>Modify the Existing Code</h2>
+  <p>Now that we're getting to know HTML and this specific project a bit better, let's modify it!</p>
+  <p><strong>Add 5-10 additional dots to your Lite-Brite board.</strong></p>
+</div>
+
+## HTML Summary
+
+- Elements that live inside of the `html` body will be displayed on the page.
+- The number of elements and the content inside of the elements in the HTML body 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.
+
+### Up Next
+
+- [What is Front End and Back End Engineering?](../../what-is-fe-be)
+- [Project Setup](../)
+- <strong>[HTML - Content](../html)</strong>
+- [CSS - Styles](../css)
+- [JavaScript- Explore](../js-1)
+- [JavaScript - Create](../js-2)
+- [Extensions](../extensions)
+- [Wrap-Up](../../wrap-up)

popup-lite-brite/litebrite/index.md

@@ -0,0 +1,66 @@
+---
+layout: lesson
+---
+
+# Build a Virtual Lite-Brite
+
+[Thinking of a Lite-Brite](https://en.wikipedia.org/wiki/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._
+
+## Goals
+
+- 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!
+<br><br>
+
+## 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.
+
+<section class="data-type-cards language-cards">
+  <div>
+    <h3>HTML</h3>
+    <p>HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.</p>
+    <p>We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:</p>
+    <img src="./assets/html.png" alt="Drawing of human skeleton" />
+  </div>
+
+  <div>
+    <h3>CSS</h3>
+    <p>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!</p>
+    <p>We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.</p>
+    <img src="./assets/css.png" alt="Drawing of human skeleton" />
+  </div>
+
+  <div>
+    <h3>JavaScript</h3>
+    <p>JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.</p>
+    <p>We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:</p>
+    <img src="./assets/js.png" alt="Drawing of human skeleton" />
+  </div>
+</section>
+<br><br>
+
+## Project Setup
+
+We will work off of a starter kit that has already been created. Click [this link to access the starter kit](https://codepen.io/turing-trycoding/pen/RwXPeNr) in codepen.io. Here's how we will use this code:
+1. Fork the pen using the `Fork` button along the bottom of the page.  This creates your own copy of the starter code so that you can make and keep changes to the code!
+1. After forking, substitute your name for `NAME` on line 1 of the html file
+1. Click `Save` or wait just a moment for codepen to autosave and update the result (the bottom portion of the page).
+
+<br><br>
+### Up Next
+- [What is Front End and Back End Engineering?](./what-is-fe-be)
+- <strong>[Project Setup](./litebrite)</strong>
+- [HTML - Content](./html)
+- [CSS - Styles](./css)
+- [JavaScript- Explore](./js-1)
+- [JavaScript - Create](./js-2)
+- [Extensions](./extensions)
+- [Wrap-Up](./wrap-up)

popup-lite-brite/js-1/index.md → popup-lite-brite/litebrite/js-1/index.md

@@ -2,8 +2,6 @@
 layout: lesson
 ---
 
-<a href="../">Back to Setup Page</a>
-
 # Exploring Lite-Brite Functionality
 
 Back to our human metaphor: the JavaScript code is the brain and muscle of our webpage! Similar to how the neural and muscular systems are much more complex than the skeleton, the JavaScript work we do will be more complex that our work with HTML and CSS. Please remember: the goal is not for you to be a pro at the end of this, but to get a little bit of exposure!
@@ -14,7 +12,7 @@ Click around your Lite-Brite; see if you can "color in" any of the dots. What ha
 
 ### Explore to Learn:
 
-On line 2, change `black` to `red`. Re-run the program and click a dot.
+On line 1 of the JS file, change `black` to `red`. Save the program and click a dot.
 
 ### Breakdown:
 
@@ -31,7 +29,8 @@ Now, let's walk through each line of the existing JavaScript to understand what'
   <p>That was a LOT of info! Sometimes it soaks in better when we have a chance to poke at the code.</p>
   <ul>
     <li>On <strong>line 1</strong>, change <code class="try-it-code">activeColor</code> to <code class="try-it-code">active</code>. Run the program and click on a dot (it should no longer work). Now, on <strong>line 7</strong>, change <code class="try-it-code">activeColor</code> to <code class="try-it-code">active</code> and then run the program. It should be back to working!</li>
-    <li>Finally, on <strong>line 2</strong>, change <code class="try-it-code">dotContainer</code> to <code class="try-it-code">dots</code>. Run the program (you guessed it, it should no longer work). Why did things break? What else could you modify at this point to get the functionality back? Try reading the error message in the console to help you out!</li>
+    <li>Finally, on <strong>line 2</strong>, change <code class="try-it-code">dotContainer</code> to <code class="try-it-code">dots</code>. Run the program (you guessed it, it should no longer work). Why did things break? What else could you modify at this point to get the functionality back?</li>
+    <li>Sometimes, looking at the errors generated by an action can help.  Click on the `Console` button along the bottom to see some of these errors (you may need to resize your window). </li>
   </ul>
 </div>
 
@@ -40,4 +39,13 @@ Now, let's walk through each line of the existing JavaScript to understand what'
 - Like HTML and CSS, JavaScript needs very specific directions.
 - Each piece of the puzzle has to be connected to the other. This is why spelling and capitalization can be really important!
 
-<a href="../js-2">Next Section: Planning & Implementing JavaScript</a>
+### Up Next
+
+- [What is Front End and Back End Engineering?](../../what-is-fe-be)
+- [Project Setup](../)
+- [HTML - Content](../html)
+- [CSS - Styles](../css)
+- <strong>[JavaScript- Explore](../js-1)</strong>
+- [JavaScript - Create](../js-2)
+- [Extensions](../extensions)
+- [Wrap-Up](../../wrap-up)