Course Progress

Getting Started 19 minutes

    1. Start here

    Make sure you're in the Slack channel!

    2. Oh, The Projects You'll Make!

    Over the next 4 weeks, you'll build 4 projects

    3. What is JavaScript?

    Let's make sure we're both on the same page! JavaScript is a front-end programming language (along with HTML & CSS)...

    4. The goal of this course

    I'm going to teach you how to be a JS developer in four weeks

    5. Installing JavaScript

    Download Sublime Text Editor, and Google Chrome Browser

Week 1 about 1 hour

    1. The 10 Concepts That are The Same In Every Programming Language

    2. Events


    4. Print

    5. Variables

    6. Concatenation

    7. Datatypes

    8. Functions

    9. Conditionals

    10. Arrays

    11. Debugging

    12. Steal this code: Happy Hour App

    13. Homework!

Week 2 about 2 hours

    1. Goals for Week 2

    2. What is the DOM? Just watch along!

    DOM stands for Document Object Model. The DOM is (more or less) what we call the HTML once it all loads in your web page. Watch this video to see it in action.

    3. querySelector()

    querySelector lets us to grab HTML elements from the DOM.

    4. addEventListener()

    addEventListener listens for when a user "clicks" on a button. It can also be used to listen for when the user is typing, when the page fully loads, and much, much, more.

    5. querySelector() can grab classes too!

    6. getElementById() and getElementsByClassName()

    getElementById() and getElementsByClassName() are similar to our friend querySelector(). Watch this video to learn how they can come in handy.

    7. Collect Underpants

    Collect underpants, ?, Profit

    8. GIF Search Engine!

    Step 1: Make a Search Bar work

    9. Understanding Scope

    Variables declared inside of our functions, are not accessible outside of our function. Not without some fancy moves. Watch this video to learn more.

    10. Which keys is the user pressing? Let's listen in.

    Using the which event property we can tell if the user pressed the keys down. Actually, we can even "listen" to see what keys specifically they are typing. Let's make the NSA proud! This is 'merica goddammit and I'll listen in if I want to!

    11. Giphy API & AJAX

    What you've all been waiting for!

    12. JSON.parse()

    JSON.parse() turns our JSON data into something JavaScript can read. Which allows us to access the data!

    13. forEach() loops through our GIFs

    Let's take all the "images" and assign pull out each "image" with the function forEach()

    14. Homework for Week 2!

    Finish the GIF Search engine!

    15. Create a Function called Sum that Adds 2 Numbers

    The fundamentals of creating a good function. Let's start by adding two numbers together

    16. Create a Function called howManyLetters

    How many letters? Create a function that answers this question.

    17. For Loops

    Nobody likes the way for loops look. They're like the Elephant Man of coding. But do yourself a favor, and just learn to look past their appearance. They're a tool that will serve you well on your journey.

    18. Using setTimeout() to Animate

Week 3 about 2 hours

    1. The SoundCloud API project!

    This week we'll build a SoundCloud music app, using the SoundCloud API. Along the way we'll learn about objects, anonymous functions, Promises, classList, localStorage, and more.

    2. Wireframe the Soundcloud Player

    In this video we talk plan of attack. How do we get started?

    3. Connecting to the SoundCloud API

    Read through the API documentation, and refactor the SoundCloud code into our project.

    4. Anonymous Functions with Nyan Cat

    What's the difference between a basic "function" and an "anonymous function?" Find out in this lesson!

    5. Let's create an Object

    Functions vs. Objects? What's the difference? Come and see!

    6. Why are we using objects?

    Why use objects, when we could just as easily keep using functions?

    7. Wrap our SoundCloud code in an Object

    Of course we could wrap all our code in multiple functions, but after writing 10,000 lines of code you might be able to imagine how this could get sloppy. So instead, we'll use an object. In this video I'll show you how!

    8. Tea Break

    Grab some tea, and join me! In this video I'll introduce you to: classList, appendChild() and createElement()

    9. Dynamically generate our HTML Cards with JavaScript

    I'm calling the little boxes that display our SoundCloud tracks "cards". Let's rebuild our HTML card, using only JavaScript so that we can loop through them in a later video.

    10. Loop through our tracks with forEach

    forEach() let's us loop through each object in the API

    11. Finish the Card and Play Music!

    Let's go back to the SoundCloud API so we can get some music playing with embed

    12. Add a Click Event to our Button

    Let's add an eventListener to our "Add to Playlist" button

    13. localStorage

    localStorage allows us to save data in the user's browser

    14. Homework for Week 3

    Homework is due next Sunday @ 11:59pm EST

Week 4 40 minutes

    1. Week 4: Information Visualization with JavaScript

    In week 4 we'll be using JavaScript as a tool for information visualization

    2. Your Homework This Week: Where do our U.S. tax dollars go? [SUBMIT HW HERE]

    Your homework is to apply your chart making skills to something useful in your life, or in someone else's life.

    3. Google Charts

    4. Installing Tabletop.js

    5. Tabletop.js Final Steps

    6. Get Your Certificate

Bonus about 1 hour

    1. Happy Hour Explained

    2. Push, Pop, Shift and Reverse Arrays

    In this lesson we'll look at more Array methods that we can use to search and play with our data

    3. The Map Method

    Let's review forEach and compare it to Map. These are both great tools for looping through data

    4. Hooking up Tabletop to Google Charts

    Let's hook up with Tabletop and Google Charts

    5. Sublime

    6. Party Tip: HTML

    7. Party Tip: CSS

    8. Party Tip: JavaScript

    9. Party Tip: Images