Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn JavaScript

via Scrimba

Overview

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!
  • 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

Syllabus

  • Build a passenger counter app
    • 1. Welcome to the course!
    • 2. Let's build a passenger counter app!
    • 3. Setting up our JavaScript file
    • 4. Write your first JavaScript variable
    • 5. Basic mathematical operations
    • 6. Frontend Career Path
    • 7. Reassigning and incrementing
    • 8. Adding a button
    • 9. The onclick event listener
    • 10. Using functions to write less code
    • 11. Write your first function
    • 12. Write a function that logs the sum
    • 13. Write a function that increments
    • 14. Increment on clicks
    • 15. Display the count
    • 16. The Document Object Model
    • 17. Display the count with innerText
    • 18. Create the save button
    • 19. What is a string?
    • 20. Write your first string variable
    • 21. Log a greeting to the console
    • 22. Strings vs. Numbers
    • 23. Render a welcome message
    • 24. Improve the message with string concatenation
    • 25. Use plus equal for count
    • 26. Create the save feature
    • 27. Debugging online
    • 28. Set the count to 0
    • 29. Personalize and Download Your App
    • 30. Deploy with Netlify
    • 31. Congrats & recap
  • Practice time - part 1
    • 1. Variables practice
    • 2. Concatenate two strings in a function
    • 3. Incrementing and decrementing
    • 4. Strings and numbers
    • 5. Rendering an error message
    • 6. Calculator challenge
    • 7. It's time for you to build a Solo Project
    • 8. Solo Project (PRO) - Basketball Scoreboard
    • 9. Get a code review!
  • Setting up a local dev environment
    • 1. Setting Up a Local Dev Environment
    • 2. Getting Started with GitHub Desktop
    • 3. Edit with VS Code and Push to GitHub
    • 4. Deploy and Share Your Solo Project
  • Build a Blackjack game
    • 1. Let's build a Blackjack game!
    • 2. Add the firstCard, secondCard, and sum
    • 3. If...else conditionals
    • 4. Your first if...else statement
    • 5. if/else...if/else statement
    • 6. The if...else statement for our game
    • 7. Add the hasBlackJack variable
    • 8. Add the isAlive variable
    • 9. Let's practice boolean conditions
    • 10. Add the message variable
    • 11. Link to stylesheet
    • 12. Add basic styling
    • 13. Make the start button work
    • 14. Display the message
    • 15. Display the sum
    • 16. Display the cards
    • 17. New card button
    • 18. Add to the sum when newCard is clicked
    • 19. Rename the startGame function
    • 20. Solving our cards problem with an array
    • 21. Aside: Intro to arrays
    • 22. Aside: Array indexes
    • 23. Arrays with multiple data types
    • 24. Aside: Array.push() and .pop()
    • 25. Creating the cards array
    • 26. Push a new card to the array
    • 27. Aside: Loops
    • 28. Write your first loop
    • 29. Aside: For loops and arrays
    • 30. Write your first array-based for loop
    • 31. For loops, arrays, and DOM
    • 32. Use a loop to render cards
    • 33. How can we avoid to hard-code card values?
    • 34. Aside: Returning values in functions
    • 35. Use a function to set the card values
    • 36. Aside: Math.random()
    • 37. Math.random() * 6
    • 38. Flooring the number with Math.floor()
    • 39. Using Math.random() and Math.floor() to create a dice
    • 40. Completing our dice function
    • 41. Make getRandomCard() work
    • 42. Complete getRandomNumber function
    • 43. Assign values in the startGame function
    • 44. Our new card feature is broken
    • 45. Aside: The AND operator (&&)
    • 46. Write your first logical operator
    • 47. Aside: The OR operator (||)
    • 48. Only trigger newCard() if you're allowed to
    • 49. Object sneak peek
    • 50. Aside: Intro to objects
    • 51. Create your first object
    • 52. Use an object to store player data
    • 53. Methods on object
    • 54. Congrats & recap
  • Practice time - part 2
    • 1. Objects and functions
    • 2. if else
    • 3. Loops and arrays
    • 4. push, pop, unshift, shift challenge
    • 5. Logical operators
    • 6. Rock papers scissors
    • 7. EmojiFighter
    • 8. Sorting fruits
    • 9. Solo Project (PRO) - Password Generator
    • 10. Build exclusive Solo Projects
  • Build a Chrome Extension
    • 1. Let's build a Chrome Extension!
    • 2. Add button and input tag
    • 3. Style the button and input tag
    • 4. Make the input button work with onclick
    • 5. Refactor to addEventListener
    • 6. Write your first addEventListener()
    • 7. Your turn to refactor
    • 8. Create the myLeads array and inputEl
    • 9. When to use let and const
    • 10. Push to the myLeads array
    • 11. Push the value from the input field
    • 12. Use a for loop to log out leads
    • 13. Create the unordered list
    • 14. Render the leads in the unordered list
    • 15. How to render
    • elements with innerHTML
    • 16. Write your first innerHTML
    • 17. More innerHTML practice
    • 18. Render the
    • elements with innerHTML
    • 19. Use createElement() and append() instead of innerHTML
    • 20. Improving the performance of our app
    • 21. Create the render function
    • 22. Clear the input field
    • 23. Add the tag
    • 24. Template strings
    • 25. Write your first template string
    • 26. Make the template string even more dynamic
    • 27. Template strings on multiple lines
    • 28. Refactor the app to use a template string
    • 29. Style the list
    • 30. Preparing the deployment
    • 31. Deploying the Chrome Extension
    • 32. Aside: What is localStorage?
    • 33. Your first localStorage
    • 34. Storing arrays in localStorage
    • 35. Save the leads to localStorage
    • 36. Get the leads from localStorage
    • 37. Aside: Truthy and falsy values
    • 38. Guess the expression - truthy or falsy?
    • 39. Checking localStorage before rendering
    • 40. Style the delete button
    • 41. Make the delete button work
    • 42. How function parameters can improve our code
    • 43. Write your first function parameter
    • 44. Functions with multiple parameters
    • 45. Numbers as function parameters
    • 46. Aside: Arguments vs Parameters
    • 47. Arrays as parameters
    • 48. Refactor renderLeads() to use a parameter
    • 49. Create the tabBtn
    • 50. Save the tab url
    • 51. How to get the current tab?
    • 52. Use the Chrome API to get the tab
    • 53. Deploy the final version
    • 54. Congrats & recap
  • Practice time - part 3
    • 1. let & const
    • 2. Log out items in an array
    • 3. save to localStorage
    • 4. addEventListener and object in array
    • 5. Generate sentence
    • 6. Render images
    • 7. Rounding numbers
    • 8. Convert string to number challenge
    • 9. Solo Project (PRO) - Unit converter
  • Build a Mobile App
    • 1. Let's Build a Mobile App with Firebase
    • 2. Setting up app skeleton
    • 3. Adding CSS
    • 4. Aside: Firebase Realtime Database
    • 5. Adding Firebase to project
    • 6. Security Rules
    • 7. innerHTML to append li to ul
    • 8. Refactoring
    • 9. Aside: Turning an Object into an Array
    • 10. Aside: Fetching database items in realtime using onValue
    • 11. Updating items in realtime
    • 12. For loop to render database items
    • 13. Let's smash the bug
    • 14. Aside: Flexbox flex-wrap
    • 15. Aside: Flexbox gap
    • 16. Adding CSS for
    • to wrap items
    • 17. Getting ID of item in database
    • 18. Replacing innerHTML with createElement
    • 19. Aside: Removing items from Firebase
    • 20. Removing an item when clicked
    • 21. Only fetching items from database if snapshot exists
    • 22. Adding hover styles to buttons
    • 23. Accessibility fix
    • 24. Aside: user-select
    • 25. Don't over-use user-select!
    • 26. Aside: Setting the viewport
    • 27. Making the app more mobile-friendly
    • 28. Aside: Favicon
    • 29. Adding favicon and phone icons
    • 30. Aside: Web Application Manifest
    • 31. Turning web app into "mobile" app
    • 32. Personalise your app
    • 33. Deploy to Netlify
    • 34. Add app to home screen
    • 35. Share your creation
    • 36. Recap
    • 37. Solo Project (PRO) - We are the Champions
    • 38. Congrats on completing the Learn JavaScript course!

Reviews

5.0 rating, based on 5 Class Central reviews

Start your review of Learn JavaScript

  • Anonymous
    I am currently learning this course and it's amazing. I went from zero to knowing how to write javascript and create apps. The best thing about Scrimba is that you can practice writing code on the page like you are writing on your own device. More importantly, I usually forget little thing from time to time and in each scrim you can save notes and review them whenever you want. I highly recommend you to try out this course and if you like it and, trust me you will, you will improve really fast in no time.
  • Anonymous
    Following this course provided me a foundational understanding of javascript from literally nothing. Being able to follow the instructor and write the code alongside theirs in the browser is so convenient and makes getting started much easier. The way the challenges are arranged so that you use what you are learning immediately is amazing for learning. I can’t recommend Scrimba enough as a learning platform and this course especially.
  • Anonymous
    This course was my first writing any JS, and it was an absolute blast. Per, the instructor, uses humor in a very efficient way, but most importantly teaches the basic concepts extremely well. The in-browser built-in code editor is really what made Scrimba for me. Being able to follow along the interactive cast makes for a great learner experience.
  • Profile image for John W
    John W
    I have taken a lot of courses on Javascript on other platforms, but it has never been so clearly and logicaly explained to me as this course is on Scrimba. The way the course is put together is exeptional.
  • Anonymous
    This course is pure gold, beautifully structured and allowing gradual but constant growth throughout the course. I love Scrimba and this course is one of the reasons for it!

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.