Dive into JavaScript with Our Free 7-Hour Course for Beginners

If you’ve been waiting for the perfect opportunity to start learning JavaScript, now is your chance! We’re thrilled to announce the release of a comprehensive 7-hour JavaScript course for beginners on the freeCodeCamp.org YouTube channel, expertly crafted by none other than Per Borgen, the founder of Scrimba.com and an acclaimed coding instructor.

Why Learn JavaScript?

JavaScript is the backbone of the web, powering websites across the internet. From interactive web pages to complex web applications, JavaScript is everywhere. Learning JavaScript opens the door to numerous opportunities in web development, mobile app development, and even server-side programming.

Course Overview

Per Borgen has designed this course around 143 interactive challenges to help you build your JavaScript skills effectively. Each challenge is concise, ensuring you feel a sense of progress as you quickly tackle them. The course encourages hands-on learning, urging you to code along and solve problems to enhance your understanding and muscle memory.

What Will You Learn?

The course is divided into several sections, each aimed at tackling different aspects of JavaScript through engaging, practical challenges:

The Basics

• Learn fundamental concepts while building a passenger counter app.
• Master the basics of variables, functions, and mathematical operations.
• Understand event listeners, the Document Object Model (DOM), and more.

Practice Time: Part 1

• Solidify your understanding of variables, strings, and numbers.
• Take on the calculator challenge to apply what you’ve learned.

Build A Blackjack Game

• Step-by-step guidance on creating your first interactive game using JavaScript.
• Learn conditionals, loops, arrays, and the use of the Math object.

Build A Chrome Extension

• Dive into a real-world project by developing a Chrome Extension.
• Explore advanced topics such as local storage, event listeners, and the Chrome API.

Interactive Learning

Unlike traditional video tutorials, this course integrates Scrimba’s unique interactive learning platform, allowing you to edit code directly in the browser as you learn. This interactive aspect ensures that you can immediately apply what you’re learning in real-time.

Getting Started

Ready to begin your coding journey?

Remember, this course is completely free and available on the freeCodeCamp.org YouTube channel. Whether you’re a complete novice or looking to refresh your basics, this course has everything you need to start coding in JavaScript.

We encourage you to code along, solve the challenges, and perhaps even share your progress with the community. Happy coding!

Here are all the sections in this comprehensive JavaScript course:

The Basics

• Building 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
• Congrats & recap

Practice Time: Part 1

• Variables practice
• Contatenate two strings in a function
• Incrementing and decrementing
• Strings and numbers
• Rendering an error message
• Calculator challenge

Build A Blackjack Game

• 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
• 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
• Intro to arrays
• Array indexes
• Arrays with multiple data types
• Adding and removing items from arrays
• Creating the cards array
• Push a new card to the array
• Counting in JavaScript
• Write your first loop
• For loops and arrays
• Write you 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?
• Returning values in functions
• Use a function to set the card values
• Generating random numbers with 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
• The logical AND operator
• Write your first logical operator
• The logical OR operator
• Only trigger newCard() if you’re allowed to
• Object sneak peek
• Intro to objects
• Create your first object
• Use an object to store player data
• Methods on object
• Congrats & recap

​Practice Time: Part 2

• Objects and functions
• if else
• Loops and arrays
• push, pop, unshift, shift challenge
• Logical operators
• Rock papers scissors
• Sorting fruits

​Build A Chrome Extension

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

​Practice Time: Part 3

• let & const
• Log out items in an array
• save to localStorage
• addEventListener and object in array
• Generate sentence
• Render images
• Outro