Learn JavaScript by Scrimba
Learn the basics of JavaScript by solving 140+ interactive coding challenges. Along the way you will build a game, a browser extension, and even a mobile app!
Course Highlights
- Variables
- Numbers & Strings
- Basic functions
- The Document Object Model
- Conditional statements
- Arrays & objects
- For loops and iterations
- Element.addEventListener()
- Console.log()
- Parameters in functions
- Booleans (true / false)
- Comparison operators
- Logical operators
- getElementById()
- innerText & textContent
- …and much more!
Skills you will learn!
Curriculum
30 Topics
Welcome to the course
Let's build a passenger counter app!
Setting up our JavaScript file
Write your first JavaScript variable
Basic mathematical operations
Reassigning and incrementing
Adding a button
The onclick event listener
Using functions to write less code
Write your first function
Write a function that logs the sum
Write a function that increments
Increment on clicks
Display the count
The Document Object Model
Display the count with innerText
Create the save button
What is a string?
Write your first string variable
Log a greeting to the console
Strings vs. Numbers
Render a welcome message
Improve the message with string concatenation
Use plus equal for count
Create the save feature
Debugging online
Set the count to 0
Personalize and Download Your App
Deploy with Netlify
Congrats & recap
10 Topics
AI challenges - beta launch
Variables practice
Concatenate two strings in a function
Incrementing and decrementing
Strings and numbers
Rendering an error message
Calculator challenge
Why are Solo Projects important?
Solo Project (PRO) - Basketball Scoreboard
Get a code review!
4 Topics
Setting Up a Local Dev Environment
Getting Started with GitHub Desktop
Edit with VS Code and Push to GitHub
Deploy and Share Your Solo Project
55 Topics
Let's build a Blackjack game!
Add the firstCard secondCard and sum
If...else conditionals
Your first if...else statement
if/else...if/else statement
The if...else statement for our game
Aside: Booleans
Add the hasBlackJack variable
Add the isAlive variable
Let's practice boolean conditions
Add the message variable
Link to stylesheet
Add basic styling
Make the start button work
Display the message
Display the sum
Display the cards
New card button
Add to the sum when newCard is clicked
Rename the startGame function
Solving our cards problem with an array
Aside: Intro to arrays
Aside: Array indexes
Arrays with multiple data types
Aside: Array.push() and .pop()
Creating the cards array
Push a new card to the array
Aside: Loops
Write your first loop
Aside: For loops and arrays
Write your first array-based for loop
For loops arrays and DOM
Use a loop to render cards
How can we avoid to hard-code card values?
Aside: Returning values in functions
Use a function to set the card values
Aside: Math.random()
Math.random() * 6
Flooring the number with Math.floor()
Using Math.random() and Math.floor() to create a dice
Completing our dice function
Make getRandomCard() work
Complete getRandomNumber function
Assign values in the startGame function
Our new card feature is broken
Aside: The AND operator (&&)
Write your first logical operator
Aside: The OR operator (||)
Only trigger newCard() if you're allowed to
Object sneak peek
Aside: Intro to objects
Create your first object
Use an object to store player data
Methods on object
Congrats & recap
10 Topics
Objects and functions
if else
Loops and arrays
push pop unshift shift challenge
Logical operators
Rock papers scissors
EmojiFighter
Sorting fruits
Solo Project (PRO) - Password Generator
Build exclusive Solo Projects
54 Topics
Let's build a Chrome Extension!
Add button and input tag
Style the button and input tag
Make the input button work with onclick
Refactor to addEventListener
Write your first addEventListener()
Your turn to refactor
Create the myLeads array and inputEl
When to use let and const
Push to the myLeads array
Push the value from the input field
Use a for loop to log out leads
Create the unordered list
Render the leads in the unordered list
How to render <li> elements with innerHTML
Write your first innerHTML
More innerHTML practice
Render the <li> elements with innerHTML
Use createElement() and append() instead of innerHTML
Improving the performance of our app
Create the render function
Clear the input field
Add the <a> tag
Template strings
Write your first template string
Make the template string even more dynamic
Template strings on multiple lines
Refactor the app to use a template string
Style the list
Preparing the deployment
Deploying the Chrome Extension
What is localStorage?
Your first localStorage
Storing arrays in localStorage
Save the leads to localStorage
Get the leads from localStorage
Truthy and falsy values
Guess the expression - truthy or falsy?
Checking localStorage before rendering
Style the delete button
Make the delete button work
How function parameters can improve our code
Write your first function parameter
Functions with multiple parameters
Numbers as function parameters
Aside: Arguments vs Parameters
Arrays as parameters
Refactor renderLeads() to use a parameter
Create the tabBtn
Save the tab url
How to get the current tab?
Use the Chrome API to get the tab
Deploy the final version
Congrats & recap
9 Topics
let & const
Log out items in an array
save to localStorage
addEventListener and object in array
Generate sentence
Render images
Rounding numbers
Convert string to number challenge
Solo Project (PRO) - Unit converter
23 Topics
Let's Build a Mobile App!
Create new Firebase Project
Create new Firebase Realtime Database
Set up Database Environment Variable
Delete unneeded code
Aside: Push data to Firebase Realtime Database
Push a lead to Firebase Realtime Database
Aside: Get a snapshot of data using onValue
Console log data inside of onValue
Aside: Turn an Object into an Array
Render all items using onValue
Aside: Delete all data using remove
Delete all leads using remove
Add label placeholder and max-width
Aside: Setting the viewport
Adding viewport with meta tag
Aside: Favicon
Adding favicon and phone icons
Aside: Web Application Manifest
Turning the web app into "mobile" app
Deploy to Netlify
Add app to home screen
Recap
1 Topic
Certificate of Completion
Learn JavaScript
Related JavaScript Courses
Thank You!
Your review has been submitted successfully.