This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn JavaScript step by step
Introduction
About this course (4:10)
Important! - Please read - Slack group & support
Course setup (8:00)
Your first ever JavaScript code (2:39)
Variables and data types
What is a variable? (6:53)
The different data types in JavaScript (8:38)
Basic maths (12:57)
Fun with strings (9:14)
Type coercion (7:05)
== vs === (2:09)
Quiz
Exercise
Exercise solution (3:32)
A quick intro to functions
What is a function? (3:30)
A function definition (5:40)
Function calls (4:44)
Quiz
Exercise test rig (3:55)
Exercise
Exercise Solution (3:40)
Boolean logic
What is a Boolean? (1:40)
Boolean & equality operators (6:47)
Negation (4:33)
If and else statements (8:23)
Truthy and falsy (9:54)
The ternary operator (7:23)
Quiz
Exercise
Exercise solution (4:21)
Arrays
What is an array? (13:17)
Adding and removing items (7:33)
Other ways to manipulate arrays (11:04)
Iterating over arrays with for loops (9:24)
Quiz
Exercise
Exercise solution (6:39)
Debugging
Introduction to debugging (1:31)
Debugging using the console (8:34)
Using the debugger (4:53)
Array functions
Introduction (1:22)
Foreach (4:18)
Map (7:31)
Reduce (7:10)
Filter (2:56)
Quiz
Exercise
Exercise solution (9:32)
Functions in depth
Function declarations vs Function expression (4:02)
Higher order functions (13:29)
Arrow functions (6:42)
Function arguments (8:57)
Quiz
Exercise
Exercise Solution (5:28)
Scope & closures
What is scope (4:27)
How scope works (9:14)
What is a closure? (6:32)
Hoisting - Variables and functions (7:03)
The different ways to declare variables (8:05)
Quiz
Objects
What are objects? (4:27)
Object literals (11:16)
Object constructors (7:01)
References (9:54)
Inheritance (22:51)
Prototypes (12:11)
The prototype chain (7:11)
Quiz
Exercise
Exercise solution (8:11)
Classes
What is a class? (11:04)
Inheritance with classes (6:45)
Exercise
Exercise solution (23:06)
Context
What is context? (6:47)
Ways to change the context (12:57)
Context with arrow functions (11:19)
Quiz
JavaScript in the Browser
Introduction (0:53)
A quick introduction to HTML (13:58)
A quick introduction to CSS (19:57)
What is the DOM? (3:36)
Querying the DOM (22:20)
Exercise (3:59)
Exercise Solution (9:43)
Listening to events
Introduction (1:23)
Your first event listener (6:27)
The event object (5:35)
Event bubbling (4:10)
Cancelling events (7:43)
Event delegation (7:07)
Other types of events (6:17)
Exercise solution (4:11)
Exercise (5:03)
Quiz
Making webpages dynamic by updating the DOM
Introduction (1:00)
Creating DOM elements using JavaScript (9:46)
Removing elements from the DOM (4:32)
Updating elements dynamically (13:56)
Exercise (2:33)
Exercise solution (10:11)
A pounds to kilos converter app
What we will be building (1:10)
Feature decomposition (5:54)
The HTML & CSS (5:03)
Converting the value (4:56)
Handling invalid values (2:58)
Exercise (2:00)
Exercise solution (3:31)
Building modern javascript applications
What are build tools, and why do we need them? (3:55)
Node, Webpack, NPM and Babel (5:30)
Setting up Node (1:14)
Creating a new project with a webpack build (26:33)
Building for deployment (5:08)
Modules
What are modules (1:44)
Creating and using modules (17:11)
Exercise (7:05)
Exercise solution (7:11)
Giphy search introduction
Introducing giphy search (2:01)
Project setup (3:25)
Exercise: Getting the search term (5:02)
Solution: Getting the search term (8:28)
Asynchronous programming
Introduction (9:38)
Getting setup with the Giphy API (5:11)
Promises (22:11)
Async await (9:07)
Completing the giphy search
Introduction (0:49)
Exercise: Making the search request (7:41)
Solution: Making the search request (5:45)
Exercise: Adding the search spinner (4:30)
Solution: Adding the search spinner (5:58)
Exercise: Displaying the search results (1:02)
Solution: Displaying the search results (6:08)
Exercise: Triggering the lightbox (2:46)
Solution: Triggering the lightbox (5:37)
Exercise: The lightbox (5:20)
Solution: The lightbox (6:31)
Other types of events
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock