Switch codepen to replit

fe-weekend/event-listeners/index.md

@@ -20,19 +20,16 @@ In JavaScript, an **event listener** is a way to set up code to run only when a
 
 ## Syntax
 
-Let's look at this example of an event listener and talk through the pieces:
+Let's look at <a href="https://replit.com/@turingschool/js-event-listeners#index.html" target="blank">this example of an event listener</a> and talk through the pieces.
 
-<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="turing-trycoding" data-slug-hash="oNxaYbb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event Listeners Example"><span>See the Pen <a href="https://codepen.io/turing-trycoding/pen/oNxaYbb">Event Listeners Example</a> by Try Coding (<a href="https://codepen.io/turing-trycoding">@turing-trycoding</a>)on <a href="https://codepen.io">CodePen</a>.</span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ## Applying What We've Learned
 
 <div class="try-it-new">
   <h3>Try It: Changing HTML with JavaScript</h3>
-  <p>Back in your own Puppy Facts CodePen, add a button in the HTML.</p>
+  <p>Back in your own Puppy Facts replit, add a button in the HTML.</p>
   <p>Write code in the JavaScript pane so that when the button is clicked, the title of the webpage changes to a different topic!</p>
   <p>If you complete that with extra time, change the text in the <code>p</code> tags so that when the button is clicked, the facts match your new topic!</p>
-  <a target="blank" href="https://codepen.io/turing-trycoding/pen/WNwaorJ"><em>Here's a CodePen you can start with!</em></a>
-  <br>
   <br>
 
   <div class="spicy-container">

fe-weekend/html-review/index.md

@@ -2,26 +2,52 @@
 layout: lesson
 ---
 
-# HTML Review
+# HTML Fundamentals
 
 <a href="../">Back to Curriculum Index</a>
 
 ## Goals
 
 - Explain the purpose of HTML
-- Be able to read through an HTML file and anticipate what the browser will render
+- Read through an HTML file and anticipate what the browser will render
 
-## Pre-work Review
+## So what is HTML?
 
-Look at the HTML in the CodePen below. Using what you learned from the pre-work:
-- Make one observation about the code
-- Ask one question about the code
+HTML (HyperText Markup Language) is the code that gives a web page both its structure and content. Any images, text, or buttons that appear on the page can also be found in the HTML.
 
-**Example:**
-- Observation: _The `h1` element has the content of "Kittens"_
-- Question: _What is happening on line X?_
+## HTML Elements
+
+HTML consists of a series of elements, which wrap the content in both an opening and closing tag. There are four main parts to any element.
+1. **The opening tag**, which consists of the name of the element wrapped in angle brackets.
+2. **The closing tag**, which also has the name of the element, but also includes a _forward_ slash before the element name.
+3. **The content**, which in the example below, this is the text.
+4. **The element**, which is the opening tag, the content, and the closing tag altogether.
+
+```html
+<h3>New Vocabulary Words</h3>
+
+<ul>
+  <li>Element</li>
+  <li>Tag</li>
+  <li>Angle bracket</li>
+</ul>
+```
+
+
+
+<div class="try-it-new">
+  <h3>Try It: Exploring to Learn</h3>
+  <p>Fork <a href="https://replit.com/@turingschool/html-fundamentals#index.html" target="blank">this replit</a> to begin.</p>
+  <ol>
+    <li>Make one observation about the code.  (The `h1` element has the content of "Kittens")</li>
+    <li>Ask one question about the code. (What is happening on line X?)</li>
+  </ol>
+</div>
+
+## Modify the Content
+
+At this point, your web page is still about baby kittens. Modify the content of your HTML elements, so that your web page is about a topic of your choice!
 
-<p class="codepen" data-height="317" data-theme-id="light" data-default-tab="html,result" data-user="turing-trycoding" data-slug-hash="zYBLeLL" style="height: 317px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="HTML Review"><span>See the Pen <a href="https://codepen.io/turing-trycoding/pen/zYBLeLL">HTML Review</a> by Try Coding (<a href="https://codepen.io/turing-trycoding">@turing-trycoding</a>) on <a href="https://codepen.io">CodePen</a>.</span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 <br>
 <a href="../intro-to-css">Next: Intro to CSS</a>

fe-weekend/index.md

@@ -4,29 +4,28 @@ layout: lesson
 
 # Front End Online Curriculum
 
-Please complete the [pre-work that is outlined here](./pre-work) before attending the workshop
+Please sign up for a free <a target="blank" href="https://replit.com/~">replit.com</a> account before beginning this workshop.
 
 ## Welcome Back!
 
-- Open up <a target="blank" href="http://codepen.io/">codepen.io</a> in a browser (preferably Chrome) and login to your account
-- In CodePen, open the HTML page that you created as part of the prework. Don't have that? Start with <a href="https://codepen.io/turing-trycoding/pen/PozeOPQ?editors=1010" target="blank">this example from the prework</a>. 
-- Change Zoom display name to first name, last initial, pronouns; _ie - Amy H. (she/her)_
+- Open up <a target="blank" href="https://repl.it/~">repl.it</a> in a browser (preferably Chrome) and login to your account
+- Change Zoom display name to first name, last initial, pronouns; ie - _Kaitlyn V. (she/her)_
 
 ### Today's Agenda
 
 Over the course of the day, we will write (more) code, continue to embrace productive struggle, and learn more about Turing.  We will ask you to share your code and be proactive about asking questions! Below is our agenda for the day:
 
 - Welcome & Setup (30 mins)
 - Instruction (1.5 hours)
-- Alumni Panel (1 hour) 
+- Alumni Panel (1 hour)
 - Instruction, Wrap Up (2 hours)
 
 ## Instructor-Led Content
 
 - [What is Front End Engineering?](./what-is-fee)
-- [HTML Review](./html-review)
+- [HTML Fundamentals](./html-review)
 - [Intro to CSS](./intro-to-css)
 - [Intro to JavaScript](./intro-to-js)
 - [Interacting with HTML](./interacting-with-html)
 - [Extension: Event Listeners](./event-listeners)
-- [Wrap Up](./wrap-up)
+- [Wrap Up](./wrap-up)

fe-weekend/interacting-with-html/index.md

@@ -35,22 +35,14 @@ console.log(greetingMessage);
 
 <div class="try-it-new">
   <h3>Try It: Accessing HTML Elements</h3>
-  <p>Fork <a href="https://codepen.io/turing-trycoding/pen/dyMgOoM?editors=1010" target="blank">this Puppy Facts CodePen starter</a>. Declare three variables, each storing one of the three <code>paragraph</code> elements already written in HTML. You can decide the variable names to use! In order to access each element, you'll need a <em>unique</em> way to identify each one. <em>This has already been done with the <code>h1</code> element; you can use that as an example.</em></p> 
+  <p>Fork <a href="https://replit.com/@turingschool/interacting-with-html#script.js" target="blank">this starter replit</a>. Declare three variables, each storing one of the three <code>paragraph</code> elements already written in HTML. You can decide the variable names to use! In order to access each element, you'll need a <em>unique</em> way to identify each one. <em>This has already been done with the <code>h1</code> element; you can use that as an example.</em></p>
   <p>Print each variable out to the console to verify your syntax is correct.</p>
-  <p><span role="img" aria-label="open folder">📂</span> Keep this pen open in a tab; we'll come back to it in the next section!</p>
-  <div class="help-container">
-    <button class="help-click"><span role="img" aria-label="raised hand">🤚</span>Help Me!</button>
-    <div class="help-toggle">
-      <p>Need to see an example of this completed? <a target="blank" href="https://codepen.io/turing-trycoding/pen/NWNObqY">Here you go!</a></p>
-    </div>
-  </div>
+  <p><span role="img" aria-label="open folder">📂</span> Keep this replit open in a tab; we'll come back to it in the next section!</p>
 </div>
 
 ## Changing Text of an Element
 
-Accessing elements alone isn't _that_ cool, but it gets more exciting when we use JavaScript to interact with those HTML elements that we've saved to variables. Let's look at this example:
-
-<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="turing-trycoding" data-slug-hash="MWyPbwZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Changing Text of an Element Example"><span>See the Pen <a href="https://codepen.io/turing-trycoding/pen/MWyPbwZ">Changing Text of an Element Example</a> by Try Coding (<a href="https://codepen.io/turing-trycoding">@turing-trycoding</a>)on <a href="https://codepen.io">CodePen</a>.</span></p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+Accessing elements alone isn't _that_ cool, but it gets more exciting when we use JavaScript to interact with those HTML elements that we've saved to variables. Let's look at <a href="https://replit.com/@turingschool/change-html-with-js#index.html" target="blank">this example</a>.
 
 Before we talk through it, take a minute to sit in that productive struggle and **try to sort through what this code is doing, and how**. The guiding questions below will help you, if you need them!
 
@@ -63,11 +55,8 @@ Before we talk through it, take a minute to sit in that productive struggle and
 
 <div class="try-it-new">
   <h3>Try It: Changing Text of an Element</h3>
-  <p>Back in your Puppy Facts CodePen, write JavaScript that will change the content of the <code>h1</code> and three <code>paragraph</code> elements you have variables for.</p>
+  <p>Back in your Puppy Facts replit, write JavaScript that will change the content of the <code>h1</code> and three <code>paragraph</code> elements you have variables for, so that your page is about a completely different animal!</p>
   <p>When you've completed this, you should see a different title and set of facts in your browser!</p>
-  <a target="blank" href="https://codepen.io/turing-trycoding/pen/LYNgbpp"><em>Here's a CodePen you can start with if you closed yours or didn't get it done.</em></a>
-  <br>
-  <br>
 
   <div class="spicy-container">
     <p class="spicy-click">

fe-weekend/intro-to-css/index.md

@@ -11,7 +11,6 @@ layout: lesson
 - Style HTML element using CSS rules
 - Use class and ID attributes on HTML elements to more specifically target them in CSS
 
->For this section, you'll build on the HTML you wrote as part of the pre-work for today! Don't have that? Start with <a href="https://codepen.io/turing-trycoding/pen/PozeOPQ?editors=1010" target="blank">this example from the prework</a>. 
 
 ## What is CSS?
 
@@ -52,7 +51,7 @@ There are many ways that we can express the value of a color to the browser. Tod
 <div class="try-it-new">
   <h3>Try It: Writing your First CSS Rule</h3>
   <p>Add two button elements to your HTML. They can be anywhere!</p>
-  <p>In the CSS tab of your CodePen, write a rule that targets all of your <code class="try-it-code">button</code> elements.</p>
+  <p>In the CSS file, write a rule that targets all of your <code class="try-it-code">button</code> elements.</p>
   <p>Change both the <code class="try-it-code">color</code> and <code class="try-it-code">background-color</code> using CSS. Observe the output in the browser. What is the difference between these two properties?</p>
   <p>Explore: Remove the <code class="try-it-code">-color</code> from <code class="try-it-code">background-color</code>. What happens? What can you infer from this?</p>
 </div>
@@ -88,7 +87,7 @@ Here are a few great places to start:
 
   This is a great question with no one answer. According to a <a href="https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/" target="blank">poll from CSS Tricks</a>, the most popular way to organize your properties for any specific element is to group by function (for example, positioning properties, color properties, text properties, etc.)
 
-  MDN also has some <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing" target="blank">great tips</a> for organizing your CSS which become especially helpful as your CSS files become bigger and bigger. 
+  MDN also has some <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing" target="blank">great tips</a> for organizing your CSS which become especially helpful as your CSS files become bigger and bigger.
 
 ## Classes and IDs
 

fe-weekend/intro-to-js/index.md

@@ -42,22 +42,19 @@ Another data type in JavaScript is a Number. Just like we interact with numbers
 
 ## console.log()
 
-As we learn about JavaScript today, we will use the `console.log()` method to print the data we are working with out to the console in CodePen.
+As we learn about JavaScript today, we will use the `console.log()` method to print the data we are working with out to the console. The console is a tool for developers that allows us to log information as part of our development process.
 
-Here's the syntax:
+Here's the syntax in the JavaScript file:
 
 ```js
 console.log('I am a string!');
 console.log(4 + 5);
 ```
 
 When we run the code above, we will see the associated values print out in the console.
-![screen shot of CodePen and arrow pointing to 'open console' button](../assets/console-log.png)
 
 ## Variables
 
-A variable is like a box with a label on it. You can put something in the box, label it, and be able to reference that thing later by its label.
-
 In JavaScript, we declare variables using the `var` keyword. This tells JavaScript that we're about to make a new variable, or _declare a variable_.
 
 Variables can store strings (text in between quotation marks), numbers, HTML elements, among many other things! Here are a few examples of JavaScript variables:
@@ -73,12 +70,13 @@ var firstName = 'Amy';
 
 Since JavaScript is in charge of user interactions, we may want to hold onto a piece of information for later use.
 - On social media sites, there is usually a `username` or `handle` variable. If you are logged in, the variable will be set to your information. If another user was logged in, for the instance of that session, the variable would be set to that other users information.
+- Similarly, if you decide to change the value stored in your `username` variable, that gets updated throughout the entire application!
 
 Variables are at the core of everything we do in programming and this isn't unique to JavaScript.
 
 <div class="try-it-new">
   <h3>Try It: Variables</h3>
-  <p>Create a new pen in CodePen. For this exercise, you will be working in the JavaScript (JS) pane.</p>
+  <p>Navigate to your JavaScript file.</p>
   <p>Declare 3 variables, using the names <code>name</code>, <code>email</code>, and <code>numberOfPets</code>. Assign each to an appropriate value.</p>
   <p>Make sure to <code>console.log</code> each variable to verify you've stored it correctly!</p>
   <p>Finished? Declare at least 2 more variables - you choose the name and values!</p>

fe-weekend/what-is-fee/index.md

@@ -8,7 +8,7 @@ layout: lesson
 
 ## Goals
 
-- Identify the key differences between Front End and  End engineering
+- Identify the key differences between Front End and Back End engineering
 - Categorize various technologies used in Front End engineering
 
 ## What is Front End?
@@ -86,7 +86,7 @@ Many libraries and frameworks have been built _on top_ of JavaScript that make F
 
 We're going to dive into the three technologies used on the frontend:
 
-1. Review the structure of web pages that we can build with HTML
+1. Discover the underlying structure of web pages with HTML
 1. Learn about some of the possibilities with CSS
 1. Use JavaScript to access HTML elements that appear in the browser
 1. Listen and respond to user interactions such as _clicks_ and _mouseovers_

fe-weekend/wrap-up/index.md

@@ -19,7 +19,7 @@ Don't forget to share your project with friends and family using the share link
 ## Contact
 
 - For technical questions regarding the content we learned today, you can email Kaitlyn at **[email protected]**
-- For questions regarding the application process and life at Turing, please email Chelsea at **chelsea@turing.edu** or <a target="blank" href="https://go.oncehub.com/ChelseaTuring">set up a time to meet with her here</a>.
+- For questions regarding the application process and life at Turing, please email Launa at **launa@turing.edu** or <a target="blank" href="https://go.oncehub.com/LaunaGardner1">set up a time to meet with her here</a>.
 
 ## Additional Resources