JavaScript 201 by CodingNomads
Course Highlights
- 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.
Skills you will learn!
Curriculum
4 Topics
Gain Access to the Community
Your Learning Resources
Prerequisite: Complete JavaScript 101
Prerequisite: Git & GitHub Course
13 Topics
Welcome!
Course Logistics
Video: Course Logistics
What Are Module Projects?
JavaScript 201 Knowledge Check
Video: Course Prerequisites
Essential Set Up for JavaScript 201
Video: How to Set Up Your Machine
How to Set Up Your Folders
Download JS 201 Lab Exercises
How to Interact With Labs and Assignments
Git Workflow for JavaScript 201
Video: What Is Git flow
59 Topics
Module Project Description
What Is Wireframing?
Boilerplate for Your Module Project
Video: How to Write Boilerplate
Lab: Build Some Boilerplate
Quiz: Introduction
What Are Javascript Libraries
How to Create a JS Library
How to Incorporate External CSS - Simple.css
Video: How to Create a JS Library
Lab: Create a JS Library
Project: Start to Code
JavaScript: Prefer Const Over Let
Video: JavaScript Const vs Let
What Does Hoisting Mean in JavaScript
Video: What Does Hoisting Mean in JavaScript
Project Video: Start to Code
Lab: Building Variables
Quiz: Building Variables
Refresher: JavaScript Arrow Functions
Refresher: The JavaScript foreach Method
Video: Arrow Functions and Array Methods
Project: Build Out Sections
Project: Write a Function to Create the Header
Working With and Iterating Over Objects in JavaScript
Video: How to Manipulate Objects - Useful JS Object Methods
Project: Create More Sections
Video: Project - Build Sections
Lab: Building By Iterating
Quiz: Building Sections
Project: New File New Site
Project: Set Up Contact Section
Video: Integrate Sections in the Site
Introduction to the HTML form for JavaScript Developers
Project: Set Up the Form Function
The JavaScript .preventDefault() Event Method
How to Create and Trigger Input Validation Using JavaScript match
Video: How to Handle the Submit Event
Video: How to Create and Trigger Input Validation Using JavaScript match
How to Access Form Input Values Using JavaScript
Video: How to Access Input Values Using JavaScript DOM Methods
JavaScript For Loop Variations - for...in and for...of Loop
Video: For Loop Variations: for...in and for...of Loop
Introduction to JavaScript Iteration Protocols
Video: How to Create a JavaScript Generator
JavaScript Accessing Form Values from FormData
Video: How to Access Form Values With the JavaScript FormData Object
Lab: Forms and Events
Quiz: Forms and Events
Project: The JSON Structure for the Form Section
Project: Create a JavaScript Function to Build a Form
Project: Create JavaScript Form Elements
Project: How to Add Form Validation
Project: Submit Your Form Using JavaScript
Project Video Demo: Form Building
Recap: Dynamically Created Websites
Project: How to Make it a Portfolio Project
Lab: Dynamically Generated Site
Feedback: Dynamically Generated Site
54 Topics
Connect 4 Project Introduction
Project: Boilerplate for Connect 4
Project Design: Requirements and Architecture
Project: Start to Implement the Architectural Layout
Video: Boilerplate Connect 4 Game
Lab: Architecture Thoughts
Project: How to Create a Board Using a JS 2D Array
Video: Array Pass By Reference
Understanding Programming Paradigms in JavaScript
Functional Programming and Immutability in JavaScript
JavaScript Filter Array Method
Video: JS Array Method - Filter
JavaScript Map Array Method
Video: JS Array Method - Map
JavaScript Array Searches: Using find findIndex includes and indexOf
Video: JS Array Searching Methods
Understanding JavaScript .reduce() Method for Array Manipulation
Video: JS Array Method - Reduce
Video: How to Use JavaScript Method Chaining
Project: Start Structuring the Game
Project: Start Building the User Interface
Video: Create the Board for Your Game
Lab: Basic State
Quiz: Basic State
Video: Reviewing JavaScript Events
Project: Register Click Events on the Board
Project: Exploring Event Delegation
Project: How to Alternate Player Turns
Project: How to Update the Game Board
Project: How to Update the Board With a JavaScript Click Event
Alternatives for Removing DOM Elements : remove() and replaceChildren()
Project: Add Images to Your App
Video: Add Interactivity to Your Game
Lab: Make the Board Come Alive
Quiz: Interactivity
Project: Check Who Won Challenge
Project: Check Who Won With JavaScript Iterations
Can you Break Out of .forEach()?
Understanding Destructuring Assignment in JavaScript
Video: Understanding Destructuring Assignment in JavaScript
Understanding JavaScript's Spread and Rest Syntax
Video: Understanding JavaScript's Spread and Rest Syntax
Project: Implement the Solution - Check Who Won With Iteration
Checking Connect 4
Project: Iterating Over Transformations
Video: Checking the Winner
Lab: Checking Who Won
Quiz: Loops and Destructuring Assignment
How to Deep Copy an Array in JavaScript
JSDoc for JavaScript Comments
Chapter Recap
Project: Connect 4 Next Steps
Lab: Building a Connect 4 Game
Feedback for Connect 4 Module
76 Topics
Dashboard Project: Introduction
Project: From IP Address to Location Using APIs
Project: Set Up Your Boilerplate
Lab: Starting Out
Video: Boilerplate For Dashboard
Chapter Introduction - JavaScript Promises
Review: Asynchronicity
Review: XMLHttpRequests
Review: Promises
Video: Review JavaScript Promises
Video: Reviewing .then() and .catch()
Review: The Fetch API
Video: Review Fetch API
Using the Fetch API's Response Object
Video: Exploring fetch() for the Dashboard Project
Make a POST Request with JavaScript fetch()
Video: How to Make a POST Request
How to Handle Multiple Fetch Requests With JavaScript's Promise.all
Video: How to Handle Multiple Fetch Requests With JavaScript's Promise.all
Lab: Requests and Promises
Quiz: Requests and Promises
Project: Add Fetch Requests to Your Dashboard
Project: Plan the Next Stages
Project: Make Sure to Read the API Documentation
OpenWeahterMap API Authenticated Queries
Video: OpenWeahterMap API Authenticated Queries
API Authentication in Client-Side JavaScript: How to Safeguard API Keys
Some JavaScript Restrictions in the Browser
Video: Some JavaScript Restrictions in the Browser
Lab: Authentication and Security
Quiz: Authentication and Security
Chapter Introduction: Chaining the Dashboard Together
Project: Make a Request to the REST Countries API
Project: How to Connect IP to Country
Project: How to Build an API Request to Fetch Weather and ISS Data
Project: Filter the Data from the API Responses
Project: Chain All Your Promises Together
Project: Process Data Using Utility Functions
Project: Build the Basic HTML Structure
Project: Build the Welcome and Country Sections
Project: Build the Weather and ISS Sections
Project: Chain the Data and DOM Building Together
Project: Add CSS to the Dashboard
Video: Project Overview After Chaining
Project: Colorizing the Dashboard Introduction
Review: The JavaScript Date Object and Epoch Time
Video: Reviewing the JavaScript Date Object and Epoch Time
Video: Review Set and Get Methods for the JavaScript Date Object
Introduction to Time Zones in JavaScript
Video: Introduction to Time Zones in JavaScript
Formatting Dates and Times in JavaScript Using Intl
Video: Formatting Dates and Times in JavaScript Using Intl
Project: Design the Time of Day Logic
Project: Prepare the Time of Day Logic
Project: Start Implementing Time of Day Logic
Project: Finish Implementing Time of Day Logic
Project: Colorize the Page
Video: Colorize the Page
Lab: Dashboard Colorized
Quiz: Dashboard Colorized
Async Functions and JavaScript Internals Chapter Introduction
Review: Async Functions
Video: Review JavaScript Async Functions
Video: The JavaScript Async Function Wraps Everything in a Promise
How to Create a JavaScript Sleep Function
Video: How to Create a JavaScript Sleep Function
Basics of the JavaScript Runtime Environment in the Browser
Video: JavaScript Runtime Environment in the Browser
Review: Examples of Asynchronous Processes
When to Use JavaScript Async Await Callbacks or Promises
Project: Reviewing the Project and Refactoring
Project: Refactor Promises to Async Functions
Lab: Async Functions and JS Internals
Quiz: Async Functions and JS Internals
Dashboard Module Recap
Lab: End of Dashboard Module Labs
67 Topics
Introduction to the Canvas Module
What Is the JavaScript Canvas API?
Project: Set Up the Canvas
Video: Set Up the Canvas
Project: The JavaScript Canvas API Coordinate System
Project: How to Draw a Rectangle on a JavaScript Canvas
Video: How to Draw a Rectangle on a JavaScript Canvas
Video: Drawing Rectangles in the Module Project
Project: Creative Rectangle Drawings
Video: Explore Canvas Drawing (Project)
Drawing Lines on a Canvas with JavaScript
Video: Drawing Lines on a Canvas with JavaScript
Draw a Triangle on a Canvas with JavaScript
Video: Draw a Triangle on a Canvas with JavaScript
Default Parameters in JavaScript Functions
Project: Draw Triangles With Default Parameters
Video: JavaScript Default Parameters
Video: Creative Drawing With Triangles
Video: Overview of the Canvas Project So Far
How to Draw an Arc and a Circle on a Canvas with JavaScript
Video: How to Draw an Arc and a Circle on a Canvas with JavaScript
Video: Incorporating Arcs Into the Canvas Project
Quiz: HTML Canvas
Introduction to JavaScript Classes
Video: Basic Class Syntax
Video: How to Create a JavaScript Class Method
Video: Checking Instances of a Class
How to Create a Basic JavaScript Linked List
Video: Understanding What Classes Are
Video: Understanding JavaScript Class Inheritance and the Super Keyword
Understand the Different Behaviors of the JavaScript this Keyword
Video: Understand the Different Behaviors of the JavaScript this Keyword
Lab: Classes
Quiz: Classes
Project: Preparing to Refactor With ES6 Modules and Classes
Introduction to JavaScript ES Modules
Project: Using ES Modules in the Canvas Project
Video: Using ES Modules in the Canvas Project
Project: Create a Drawing JavaScript Library With ES Modules
Project: Use Your New Drawing Library
Project: Include the Point Class
Video: Using ES Modules in the Canvas Project
Video: Incorporating the Draw Class in the Canvas Project
Video: Incorporating the Point Class in the Canvas Project
Quiz: Making a Draw and Point Class
Project: Make a Bouncing Ball Animation on Canvas
Project: Enhance Your Animation With requestAnimationFrame()
Project: Canvas Animation - Implement Collisions
Project: Bouncing Ball Animation With Classes
Project: Create Loads of Bouncing Balls
Labs: Drawing and Animating
Video: Coding Collisions in the Canvas Project
Video: Many Bouncing Balls in the Canvas Project
Quiz: Drawing and Animating
Introduction to Recursion with JavaScript
Video: Visualizing Recursion
Lab: Recursion
Quiz: Recursion
Project: Square Recursive Tunnel
Project: Square Fractal
Project: Line Method and Trigonometry
Project: Recursive Tree
Video: Drawing With Recursion
Project: Connecting Four Recursive Check
Video: Solving Connect Four With Recursion
Recap: Canvas Module
Lab: Canvas End of Module
1 Topic
The Capstone Project
2 Topics
Farewell
Request Completion Certificate
JavaScript 201
Related JavaScript Courses
Thank You!
Your review has been submitted successfully.