JavaScript 201

Course Summary

Learn modern syntax and advanced design patterns for building maintainable websites. You'll start leaning heavily into the world of single-page-applications where JavaScript takes over almost everything.

8 Sections · 276 Pages · By Ian Currie

  • Level

    Beginner to Intermediate

  • Duration

    200 Hours. Or, ~3 months of dedicated learning @ 15-20 hours per week

  • What's included

    174 lessons. 78 videos. 16 quizzes. Many code samples. 4 projects. 1 capstone.

  • Certificate

    JavaScript 201 Certificate

Unlock this course

$12/month Core Membership

7-day free trial

Unlock all courses

$29/month Pro Membership

7-day free trial

This course is part of the following career track:

  1. 0) Prerequisites

    1. Gain Access to the Community
      3 min
    2. Your Learning Resources
      8 min
    3. Prerequisite: Complete JavaScript 101
    4. Prerequisite: Git & GitHub Course

  2. 1) Getting Started

    1. Introduction
    2. Welcome!
      3 min
    3. Course Logistics
      3 min
    4. Video: Course Logistics
      2 min
    5. What Are Module Projects?
      4 min
    6. JavaScript 201 Knowledge Check
      3 min
    7. Video: Course Prerequisites
      5 min
    8. Get Set Up for JavaScript 201
    9. Essential Set Up for JavaScript 201
      3 min
    10. Video: How to Set Up Your Machine
      5 min
    11. How to Set Up Your Folders
      5 min
    12. Download JS 201 Lab Exercises
      4 min
    13. How to Interact With Labs and Assignments
      5 min
    14. The Git Flow
    15. Git Workflow for JavaScript 201
      17 min
    16. Video: What Is Git flow
      15 min

  3. 2) Dynamically Generated Site

    1. Module Project Description
      3 min
    2. What Is Wireframing?
      4 min
    3. Boilerplate for Your Module Project
      3 min
    4. Video: How to Write Boilerplate
      4 min
    5. Lab: Build Some Boilerplate
      3 min
    6. Quiz: Introduction
    7. Libraries
    8. What Are Javascript Libraries
      7 min
    9. How to Create a JS Library
      6 min
    10. How to Incorporate External CSS - Simple.css
      3 min
    11. Video: How to Create a JS Library
      4 min
    12. Lab: Create a JS Library
      3 min
    13. Building Variables
    14. Project: Start to Code
      5 min
    15. JavaScript: Prefer Const Over Let
      13 min
    16. Video: JavaScript Const vs Let
      9 min
    17. What Does Hoisting Mean in JavaScript
      8 min
    18. Video: What Does Hoisting Mean in JavaScript
      5 min
    19. Project Video: Start to Code
      2 min
    20. Lab: Building Variables
      3 min
    21. Quiz: Building Variables
    22. Building Sections
    23. Refresher: JavaScript Arrow Functions
      3 min
    24. Refresher: The JavaScript foreach Method
      3 min
    25. Video: Arrow Functions and Array Methods
      7 min
    26. Project: Build Out Sections
      4 min
    27. Project: Write a Function to Create the Header
      3 min
    28. Working With and Iterating Over Objects in JavaScript
      8 min
    29. Video: How to Manipulate Objects - Useful JS Object Methods
      8 min
    30. Project: Create More Sections
      4 min
    31. Video: Project - Build Sections
      2 min
    32. Lab: Building By Iterating
      3 min
    33. Quiz: Building Sections
    34. Contact Section
    35. Project: New File, New Site
      3 min
    36. Project: Set Up Contact Section
      4 min
    37. Video: Integrate Sections in the Site
      3 min
    38. Forms and Events
    39. Introduction to the HTML form for JavaScript Developers
      25 min
    40. Project: Set Up the Form Function
      3 min
    41. The JavaScript .preventDefault() Event Method
      4 min
    42. How to Create and Trigger Input Validation Using JavaScript match
      4 min
    43. Video: How to Handle the Submit Event
      5 min
    44. Video: How to Create and Trigger Input Validation Using JavaScript match
      8 min
    45. How to Access Form Input Values Using JavaScript
      4 min
    46. Video: How to Access Input Values Using JavaScript DOM Methods
      3 min
    47. JavaScript For Loop Variations - for...in and for...of Loop
      3 min
    48. Video: For Loop Variations: for...in and for...of Loop
      6 min
    49. Introduction to JavaScript Iteration Protocols
      14 min
    50. Video: How to Create a JavaScript Generator
      6 min
    51. JavaScript Accessing Form Values from FormData
      10 min
    52. Video: How to Access Form Values With the JavaScript FormData Object
      7 min
    53. Lab: Forms and Events
      3 min
    54. Quiz: Forms and Events
    55. Implementing the Form
    56. Project: The JSON Structure for the Form Section
      3 min
    57. Project: Create a JavaScript Function to Build a Form
      3 min
    58. Project: Create JavaScript Form Elements
      5 min
    59. Project: How to Add Form Validation
      9 min
    60. Project: Submit Your Form Using JavaScript
      5 min
    61. Project Video Demo: Form Building
      3 min
    62. Wrapping Up the Module Project
    63. Recap: Dynamically Created Websites
      3 min
    64. Project: How to Make it a Portfolio Project
      3 min
    65. Assignments
    66. Lab: Dynamically Generated Site
      3 min
    67. Feedback: Dynamically Generated Site

  4. 3) Connect Four

    1. Connect 4 Project Introduction
      3 min
    2. Project: Boilerplate for Connect 4
      3 min
    3. Project Design: Requirements and Architecture
      8 min
    4. Project: Start to Implement the Architectural Layout
      3 min
    5. Video: Boilerplate Connect 4 Game
      1 min
    6. Lab: Architecture Thoughts
      3 min
    7. Basic Application State
    8. Project: How to Create a Board Using a JS 2D Array
      10 min
    9. Video: Array Pass By Reference
      6 min
    10. Understanding Programming Paradigms in JavaScript
      9 min
    11. Functional Programming and Immutability in JavaScript
      8 min
    12. JavaScript Filter Array Method
      8 min
    13. Video: JS Array Method - Filter
      4 min
    14. JavaScript Map Array Method
      8 min
    15. Video: JS Array Method - Map
      4 min
    16. JavaScript Array Searches: Using find, findIndex, includes, and indexOf
      5 min
    17. Video: JS Array Searching Methods
      5 min
    18. Understanding JavaScript .reduce() Method for Array Manipulation
      11 min
    19. Video: JS Array Method - Reduce
      7 min
    20. Video: How to Use JavaScript Method Chaining
      4 min
    21. Project: Start Structuring the Game
      3 min
    22. Project: Start Building the User Interface
      5 min
    23. Video: Create the Board for Your Game
      2 min
    24. Lab: Basic State
      3 min
    25. Quiz: Basic State
    26. Making the Board Come Alive
    27. Video: Reviewing JavaScript Events
      7 min
    28. Project: Register Click Events on the Board
      7 min
    29. Project: Exploring Event Delegation
      4 min
    30. Project: How to Alternate Player Turns
      7 min
    31. Project: How to Update the Game Board
      4 min
    32. Project: How to Update the Board With a JavaScript Click Event
      6 min
    33. Alternatives for Removing DOM Elements : remove() and replaceChildren()
      3 min
    34. Project: Add Images to Your App
      4 min
    35. Video: Add Interactivity to Your Game
      2 min
    36. Lab: Make the Board Come Alive
      3 min
    37. Quiz: Interactivity
    38. Checking Who Won
    39. Project: Check Who Won Challenge
      3 min
    40. Project: Check Who Won With JavaScript Iterations
      4 min
    41. Can you Break Out of .forEach()?
      5 min
    42. Understanding Destructuring Assignment in JavaScript
      5 min
    43. Video: Understanding Destructuring Assignment in JavaScript
      5 min
    44. Understanding JavaScript's Spread and Rest Syntax
      9 min
    45. Video: Understanding JavaScript's Spread and Rest Syntax
      8 min
    46. Project: Implement the Solution - Check Who Won With Iteration
      4 min
    47. Checking Connect 4
      6 min
    48. Project: Iterating Over Transformations
      10 min
    49. Video: Checking the Winner
      3 min
    50. Lab: Checking Who Won
      3 min
    51. Quiz: Loops and Destructuring Assignment
    52. Wrapping Up the Module Project
    53. How to Deep Copy an Array in JavaScript
      9 min
    54. JSDoc for JavaScript Comments
      4 min
    55. Chapter Recap
      3 min
    56. Project: Connect 4, Next Steps
      3 min
    57. Assignments
    58. Lab: Building a Connect 4 Game
      3 min
    59. Feedback for Connect 4 Module

  5. 4) Dashboard

    1. Dashboard Project: Introduction
      4 min
    2. Project: From IP Address to Location Using APIs
      7 min
    3. Project: Set Up Your Boilerplate
      7 min
    4. Lab: Starting Out
      3 min
    5. Video: Boilerplate For Dashboard
      1 min
    6. Requests and Promises
    7. Chapter Introduction - JavaScript Promises
      3 min
    8. Review: Asynchronicity
    9. Review: XMLHttpRequests
    10. Review: Promises
    11. Video: Review JavaScript Promises
      5 min
    12. Video: Reviewing .then() and .catch()
      4 min
    13. Review: The Fetch API
      6 min
    14. Video: Review Fetch API
      9 min
    15. Using the Fetch API's Response Object
      6 min
    16. Video: Exploring fetch() for the Dashboard Project
      2 min
    17. Make a POST Request with JavaScript fetch()
      5 min
    18. Video: How to Make a POST Request
      9 min
    19. How to Handle Multiple Fetch Requests With JavaScript's Promise.all
      5 min
    20. Video: How to Handle Multiple Fetch Requests With JavaScript's Promise.all
      8 min
    21. Lab: Requests and Promises
      3 min
    22. Quiz: Requests and Promises
    23. Intro to Authentication and Security on the Front End
    24. Project: Add Fetch Requests to Your Dashboard
      5 min
    25. Project: Plan the Next Stages
      3 min
    26. Project: Make Sure to Read the API Documentation
      3 min
    27. OpenWeahterMap API Authenticated Queries
      4 min
    28. Video: OpenWeahterMap API Authenticated Queries
      10 min
    29. API Authentication in Client-Side JavaScript: How to Safeguard API Keys
      8 min
    30. Some JavaScript Restrictions in the Browser
      8 min
    31. Video: Some JavaScript Restrictions in the Browser
      6 min
    32. Lab: Authentication and Security
      3 min
    33. Quiz: Authentication and Security
    34. Chaining the Dashboard Together
    35. Chapter Introduction: Chaining the Dashboard Together
      3 min
    36. Project: Make a Request to the REST Countries API
      3 min
    37. Project: How to Connect IP to Country
      4 min
    38. Project: How to Build an API Request to Fetch Weather and ISS Data
      3 min
    39. Project: Filter the Data from the API Responses
      7 min
    40. Project: Chain All Your Promises Together
      3 min
    41. Project: Process Data Using Utility Functions
      6 min
    42. Project: Build the Basic HTML Structure
      3 min
    43. Project: Build the Welcome and Country Sections
      6 min
    44. Project: Build the Weather and ISS Sections
      5 min
    45. Project: Chain the Data and DOM Building Together
      3 min
    46. Project: Add CSS to the Dashboard
      3 min
    47. Video: Project Overview After Chaining
      3 min
    48. Colorizing the Dashboard
    49. Project: Colorizing the Dashboard Introduction
      3 min
    50. Review: The JavaScript Date Object and Epoch Time
      3 min
    51. Video: Reviewing the JavaScript Date Object and Epoch Time
      7 min
    52. Video: Review Set and Get Methods for the JavaScript Date Object
      5 min
    53. Introduction to Time Zones in JavaScript
      7 min
    54. Video: Introduction to Time Zones in JavaScript
      4 min
    55. Formatting Dates and Times in JavaScript Using Intl
      8 min
    56. Video: Formatting Dates and Times in JavaScript Using Intl
      8 min
    57. Project: Design the Time of Day Logic
      3 min
    58. Project: Prepare the Time of Day Logic
      3 min
    59. Project: Start Implementing Time of Day Logic
      5 min
    60. Project: Finish Implementing Time of Day Logic
      6 min
    61. Project: Colorize the Page
      3 min
    62. Video: Colorize the Page
      4 min
    63. Lab: Dashboard Colorized
      3 min
    64. Quiz: Dashboard Colorized
    65. Async Functions and JS Internals
    66. Async Functions and JavaScript Internals Chapter Introduction
      3 min
    67. Review: Async Functions
    68. Video: Review JavaScript Async Functions
      6 min
    69. Video: The JavaScript Async Function Wraps Everything in a Promise
      2 min
    70. How to Create a JavaScript Sleep Function
      10 min
    71. Video: How to Create a JavaScript Sleep Function
      6 min
    72. Basics of the JavaScript Runtime Environment in the Browser
      20 min
    73. Video: JavaScript Runtime Environment in the Browser
      6 min
    74. Review: Examples of Asynchronous Processes
      4 min
    75. When to Use JavaScript Async Await, Callbacks or Promises
      3 min
    76. Project: Reviewing the Project and Refactoring
      5 min
    77. Project: Refactor Promises to Async Functions
      4 min
    78. Lab: Async Functions and JS Internals
      3 min
    79. Quiz: Async Functions and JS Internals
    80. Assignments
    81. Dashboard Module Recap
      3 min
    82. Lab: End of Dashboard Module Labs
      3 min

  6. 5) Canvas

    1. Introduction to the Canvas Module
      7 min
    2. HTML Canvas
    3. What Is the JavaScript Canvas API?
      4 min
    4. Project: Set Up the Canvas
      4 min
    5. Video: Set Up the Canvas
      9 min
    6. Project: The JavaScript Canvas API Coordinate System
      7 min
    7. Project: How to Draw a Rectangle on a JavaScript Canvas
      9 min
    8. Video: How to Draw a Rectangle on a JavaScript Canvas
      10 min
    9. Video: Drawing Rectangles in the Module Project
      2 min
    10. Project: Creative Rectangle Drawings
      4 min
    11. Video: Explore Canvas Drawing (Project)
      3 min
    12. Drawing Lines on a Canvas with JavaScript
      5 min
    13. Video: Drawing Lines on a Canvas with JavaScript
      5 min
    14. Draw a Triangle on a Canvas with JavaScript
      4 min
    15. Video: Draw a Triangle on a Canvas with JavaScript
      5 min
    16. Default Parameters in JavaScript Functions
      15 min
    17. Project: Draw Triangles With Default Parameters
      4 min
    18. Video: JavaScript Default Parameters
      4 min
    19. Video: Creative Drawing With Triangles
      12 min
    20. Video: Overview of the Canvas Project So Far
      3 min
    21. How to Draw an Arc and a Circle on a Canvas with JavaScript
      7 min
    22. Video: How to Draw an Arc and a Circle on a Canvas with JavaScript
      5 min
    23. Video: Incorporating Arcs Into the Canvas Project
      2 min
    24. Quiz: HTML Canvas
    25. Classes
    26. Introduction to JavaScript Classes
      22 min
    27. Video: Basic Class Syntax
      5 min
    28. Video: How to Create a JavaScript Class Method
      3 min
    29. Video: Checking Instances of a Class
      5 min
    30. How to Create a Basic JavaScript Linked List
      6 min
    31. Video: Understanding What Classes Are
      5 min
    32. Video: Understanding JavaScript Class Inheritance and the Super Keyword
      8 min
    33. Understand the Different Behaviors of the JavaScript this Keyword
      3 min
    34. Video: Understand the Different Behaviors of the JavaScript this Keyword
      4 min
    35. Lab: Classes
      3 min
    36. Quiz: Classes
    37. Making a Draw and Point Class
    38. Project: Preparing to Refactor With ES6 Modules and Classes
      3 min
    39. Introduction to JavaScript ES Modules
      25 min
    40. Project: Using ES Modules in the Canvas Project
      8 min
    41. Video: Using ES Modules in the Canvas Project
      9 min
    42. Project: Create a Drawing JavaScript Library With ES Modules
      10 min
    43. Project: Use Your New Drawing Library
      3 min
    44. Project: Include the Point Class
      8 min
    45. Video: Using ES Modules in the Canvas Project
      3 min
    46. Video: Incorporating the Draw Class in the Canvas Project
      3 min
    47. Video: Incorporating the Point Class in the Canvas Project
      2 min
    48. Quiz: Making a Draw and Point Class
    49. Drawing and Animating
    50. Project: Make a Bouncing Ball Animation on Canvas
      7 min
    51. Project: Enhance Your Animation With requestAnimationFrame()
      5 min
    52. Project: Canvas Animation - Implement Collisions
      3 min
    53. Project: Bouncing Ball Animation With Classes
      7 min
    54. Project: Create Loads of Bouncing Balls
      10 min
    55. Labs: Drawing and Animating
      3 min
    56. Video: Coding Collisions in the Canvas Project
      3 min
    57. Video: Many Bouncing Balls in the Canvas Project
      4 min
    58. Quiz: Drawing and Animating
    59. Recursion
    60. Introduction to Recursion with JavaScript
      12 min
    61. Video: Visualizing Recursion
      9 min
    62. Lab: Recursion
      3 min
    63. Quiz: Recursion
    64. Drawing with Recursion
    65. Project: Square Recursive Tunnel
      3 min
    66. Project: Square Fractal
      4 min
    67. Project: Line Method and Trigonometry
      3 min
    68. Project: Recursive Tree
      4 min
    69. Video: Drawing With Recursion
      5 min
    70. Alternative Connect 4 Algorithm
    71. Project: Connecting Four Recursive Check
      5 min
    72. Video: Solving Connect Four With Recursion
      4 min
    73. Wrapping Up
    74. Recap: Canvas Module
      3 min
    75. Lab: Canvas End of Module
      3 min

  7. 6) Capstone Project

    1. The Capstone Project
      9 min

  8. 7) Next Steps & Certificate Request

    1. Farewell
      9 min
    2. Request Completion Certificate