Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Learn JavaScript

Enroll for freeGet started!

Join 205287 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
Subscribe now!
The course creator Per Harald Borgen

with Per Harald Borgen

Course level: Beginner

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!

What's inside

This course contains 209 interactive scrims spread across 8 modules.

two girls
Build a passenger counter app

31 lessons1 hour 23 min

1. Welcome to the course!
2:11
2. Let's build a passenger counter app!
0:59
3. Setting up our JavaScript file
2:59
4. Write your first JavaScript variable
4:52
5. Basic mathematical operations
3:35
6. Frontend Career Path
1:56
7. Reassigning and incrementing
3:46
8. Adding a button
1:31
9. The onclick event listener
3:23
10. Using functions to write less code
3:33
11. Write your first function
0:43
12. Write a function that logs the sum
2:46
13. Write a function that increments
1:54
14. Increment on clicks
2:08
15. Display the count
5:13
16. The Document Object Model
1:51
17. Display the count with innerText
0:39
18. Create the save button
2:05
19. What is a string?
1:33
20. Write your first string variable
3:39
21. Log a greeting to the console
1:16
22. Strings vs. Numbers
2:43
23. Render a welcome message
2:00
24. Improve the message with string concatenation
2:15
25. Use plus equal for count
0:25
26. Create the save feature
4:36
27. Debugging online
3:49
28. Set the count to 0
2:52
29. Personalize and Download Your App
4:37
30. Deploy with Netlify
4:02
31. Congrats & recap
3:14
Practice time - part 1

9 lessons 25 min

1. Variables practice
1:52
2. Concatenate two strings in a function
0:58
3. Incrementing and decrementing
2:11
4. Strings and numbers
1:34
5. Rendering an error message
3:15
6. Calculator challenge
5:30
7. It's time for you to build a Solo Project
3:12
8. Solo Project (PRO) - Basketball Scoreboard
4:21
9. Get a code review!
2:39
Setting up a local dev environment

4 lessons 12 min

1. Setting Up a Local Dev Environment
2:47
2. Getting Started with GitHub Desktop
4:18
3. Edit with VS Code and Push to GitHub
3:35
4. Deploy and Share Your Solo Project
1:34
Build a Blackjack game

54 lessons2 hours 40 min

1. Let's build a Blackjack game!
0:57
2. Add the firstCard, secondCard, and sum
0:52
3. If...else conditionals
5:39
4. Your first if...else statement
2:53
5. if/else...if/else statement
3:21
6. The if...else statement for our game
1:59
7. Add the hasBlackJack variable
2:03
8. Add the isAlive variable
1:44
9. Let's practice boolean conditions
3:25
10. Add the message variable
3:21
11. Link to stylesheet
2:32
12. Add basic styling
4:18
13. Make the start button work
5:49
14. Display the message
2:32
15. Display the sum
5:43
16. Display the cards
1:53
17. New card button
3:39
18. Add to the sum when newCard is clicked
3:16
19. Rename the startGame function
2:11
20. Solving our cards problem with an array
3:16
21. Aside: Intro to arrays
5:24
22. Aside: Array indexes
4:03
23. Arrays with multiple data types
2:18
24. Aside: Array.push() and .pop()
4:20
25. Creating the cards array
1:04
26. Push a new card to the array
1:18
27. Aside: Loops
4:01
28. Write your first loop
3:22
29. Aside: For loops and arrays
3:43
30. Write your first array-based for loop
1:29
31. For loops, arrays, and DOM
2:55
32. Use a loop to render cards
2:16
33. How can we avoid to hard-code card values?
1:31
34. Aside: Returning values in functions
4:59
35. Use a function to set the card values
3:06
36. Aside: Math.random()
4:15
37. Math.random() * 6
1:43
38. Flooring the number with Math.floor()
1:24
39. Using Math.random() and Math.floor() to create a dice
1:40
40. Completing our dice function
2:37
41. Make getRandomCard() work
2:54
42. Complete getRandomNumber function
3:02
43. Assign values in the startGame function
2:42
44. Our new card feature is broken
0:59
45. Aside: The AND operator (&&)
3:41
46. Write your first logical operator
2:04
47. Aside: The OR operator (||)
3:02
48. Only trigger newCard() if you're allowed to
1:27
49. Object sneak peek
4:32
50. Aside: Intro to objects
4:43
51. Create your first object
3:15
52. Use an object to store player data
2:37
53. Methods on object
1:58
54. Congrats & recap
4:24
Practice time - part 2

10 lessons 27 min

1. Objects and functions
2:00
2. if else
2:48
3. Loops and arrays
2:04
4. push, pop, unshift, shift challenge
3:25
5. Logical operators
1:56
6. Rock papers scissors
2:59
7. EmojiFighter
4:32
8. Sorting fruits
2:57
9. Solo Project (PRO) - Password Generator
2:43
10. Build exclusive Solo Projects
1:32
Build a Chrome Extension

54 lessons2 hours 44 min

1. Let's build a Chrome Extension!
4:33
2. Add button and input tag
1:33
3. Style the button and input tag
7:16
4. Make the input button work with onclick
1:17
5. Refactor to addEventListener
2:18
6. Write your first addEventListener()
1:44
7. Your turn to refactor
1:22
8. Create the myLeads array and inputEl
2:21
9. When to use let and const
3:17
10. Push to the myLeads array
1:10
11. Push the value from the input field
2:27
12. Use a for loop to log out leads
1:39
13. Create the unordered list
1:55
14. Render the leads in the unordered list
3:41
15. How to render <li> elements with innerHTML
1:33
16. Write your first innerHTML
1:31
17. More innerHTML practice
1:48
18. Render the <li> elements with innerHTML
1:07
19. Use createElement() and append() instead of innerHTML
3:35
20. Improving the performance of our app
3:17
21. Create the render function
2:00
22. Clear the input field
2:03
23. Add the <a> tag
4:28
24. Template strings
2:30
25. Write your first template string
1:15
26. Make the template string even more dynamic
0:51
27. Template strings on multiple lines
2:53
28. Refactor the app to use a template string
1:12
29. Style the list
3:50
30. Preparing the deployment
4:52
31. Deploying the Chrome Extension
2:28
32. Aside: What is localStorage?
3:02
33. Your first localStorage
3:48
34. Storing arrays in localStorage
6:23
35. Save the leads to localStorage
2:28
36. Get the leads from localStorage
3:50
37. Aside: Truthy and falsy values
7:54
38. Guess the expression - truthy or falsy?
2:22
39. Checking localStorage before rendering
3:37
40. Style the delete button
3:17
41. Make the delete button work
4:16
42. How function parameters can improve our code
5:54
43. Write your first function parameter
3:27
44. Functions with multiple parameters
3:11
45. Numbers as function parameters
1:41
46. Aside: Arguments vs Parameters
3:22
47. Arrays as parameters
1:54
48. Refactor renderLeads() to use a parameter
1:39
49. Create the tabBtn
3:19
50. Save the tab url
2:35
51. How to get the current tab?
4:19
52. Use the Chrome API to get the tab
6:18
53. Deploy the final version
2:14
54. Congrats & recap
5:43
Practice time - part 3

9 lessons 26 min

1. let & const
3:12
2. Log out items in an array
1:17
3. save to localStorage
1:53
4. addEventListener and object in array
2:39
5. Generate sentence
4:53
6. Render images
6:05
7. Rounding numbers
1:45
8. Convert string to number challenge
2:24
9. Solo Project (PRO) - Unit converter
1:54
Build a Mobile App

38 lessons2 hours 6 min

1. Let's Build a Mobile App with Firebase
3:33
2. Setting up app skeleton
3:47
3. Adding CSS
4:21
4. Aside: Firebase Realtime Database
10:01
5. Adding Firebase to project
4:49
6. Security Rules
2:30
7. innerHTML to append li to ul
3:33
8. Refactoring
4:48
9. Aside: Turning an Object into an Array
4:11
10. Aside: Fetching database items in realtime using onValue
10:22
11. Updating items in realtime
2:43
12. For loop to render database items
2:57
13. Let's smash the bug
2:47
14. Aside: Flexbox flex-wrap
1:18
15. Aside: Flexbox gap
1:18
16. Adding CSS for <li> to wrap items
4:04
17. Getting ID of item in database
4:10
18. Replacing innerHTML with createElement
5:11
19. Aside: Removing items from Firebase
5:17
20. Removing an item when clicked
4:10
21. Only fetching items from database if snapshot exists
4:02
22. Adding hover styles to buttons
1:49
23. Accessibility fix
2:26
24. Aside: user-select
1:41
25. Don't over-use user-select!
0:56
26. Aside: Setting the viewport
1:50
27. Making the app more mobile-friendly
1:34
28. Aside: Favicon
2:04
29. Adding favicon and phone icons
1:13
30. Aside: Web Application Manifest
2:37
31. Turning web app into "mobile" app
0:58
32. Personalise your app
1:27
33. Deploy to Netlify
2:35
34. Add app to home screen
1:52
35. Share your creation
1:45
36. Recap
3:41
37. Solo Project (PRO) - We are the Champions
3:50
38. Congrats on completing the Learn JavaScript course!
4:20

You'll learn

const & let

strings

numbers

booleans

objects

arrays

functions

methods

for loops

logical operators

mathematical operators

JSON

Math object

DOM manpulation

getElementById()

querySelector()

addEventListener()

innerText

textContent

innerHTML

conditional statements

truthy vs falsy values

template strings

localStorage

debugging with Google

You'll build

screenshot
Subway Passenger Counter

Your very first JavaScript app will be a passenger counter. This gives you an intro to the basic principles of web development.

screenshot
Blackjack Casino Game

Your first JavaScript game will be Blackjack, the iconic Casino game that's loved by millions.

screenshot
Chrome Extension

The capstone project is a neat Chrome Extension for tracking sales leads. You will both build and deploy it.

screenshot
Mobile App

Build a mobile app that integrates with a Firebase database so that data is persisted across sessions.

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. Here’s our suggested resource to get you up to speed.

Learn HTML and CSS
106 lessons | 5 hours 40 min
with Per Harald Borgen
Per Harald BorgenBeginner

Meet your teacher

The course creator

Per Harald Borgen

Front-end developer and co-founder of Scrimba. Per loves helping other people learn new skills so that they can improve their lives. He makes his tutorials as simple as humanly possible, and focus on getting the students to the point where they can start building projects on their own.

Follow me on twitter

Why this course rocks

Let me ask you a few questions:

  • Do you think JavaScript is difficult to learn?

  • Do you struggle to transition from watching JS tutorials to building JS projects?

  • Does regular coding courses sometimes bore you to death?

If you answer YES to any of the above questions, then this is the course for you.

Why is this course special?

This is perhaps the most interactive JavaScript course ever recorded. It contains 140+ coding challenges, meaning that you will finally build that ever-so-important JavaScript muscle memory.

So say goodbye to "tutorial hell" and get ready to start feeling your JavaScript superpowers grow exponentially.

Another unique thing with this course is that you will build projects from the very start. Instead of long and boring theoretical lessons, you will dive head-first into building products and solving challenges.

This is learning by doing on steroids.

What will I build?

You will start out simple with a Passenger Counter app. This will teach you the very basics of JavaScript and the DOM.

Moving on, you will build your very first game, namely Blackjack, the iconic Casino game. Who knows, perhaps this little app marks the start of your career as a game developer?

Finally, you will build your very own Chrome Extension. This is exciting, as you will deploy this extension to your Chrome browser, so that you get to experience it out in the wild.

Between each of the project sections, I will stress-test your skills with practice sections. This way, you can be sure that the concepts really stick with you.

Once you are done, you will feel confident in your JavaScript skills and be ready to move into libraries like React or Vue, or continue down your JavaScript journey.

F to the A oracle to the Q
What are Solo Projects?

Solo Projects are real-world projects that are tailored to your skill level as you progress through the course. Use them to stress-test your skills and get projects for your portfolio. Most of the Solo Projects on Scrimba are only accessible for Pro Members.

Why should I learn JavaScript

JavaScript is probably the most versatile programming language in the world, as it can be used both in the browser and on the server. All web developers need to know JavaScript, and it's an in-demand skill amongst employers.

HomePlans & PricingTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba