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!
Beginner
Learn Javascript
- 8 Sections
- 207 Lessons
- 10h Duration
Build a Passenger Counter App
31 Lessons
- Welcome to the Course!
- Let’s Build a Passenger Counter App!
- Setting Up Our JavaScript File
- Write Your First JavaScript Variable
- Basic Mathematical Operations
- Frontend Career Path
- 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
Practice Time - Part 1
9 Lessons
Setting Up a Local Dev Environment
4 Lessons
Build a Blackjack Game
54 Lessons
- 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
- 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
Practice Time - Part 2
10 Lessons
Build a Chrome Extension
54 Lessons
- 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 Elements with InnerHTML
- Write Your First InnerHTML
- More InnerHTML Practice
- Render the 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 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
- Aside: What Is LocalStorage?
- Your First LocalStorage
- Storing Arrays in LocalStorage
- Save the Leads to LocalStorage
- Get the Leads from LocalStorage
- Aside: 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
Practice Time - Part 3
9 Lessons
Build a Mobile App
36 Lessons
- Let’s Build a Mobile App with Firebase
- Setting Up App Skeleton
- Adding CSS
- Aside: Firebase Realtime Database
- Adding Firebase to Project
- Security Rules
- InnerHTML to Append Li to Ul
- Refactoring
- Aside: Turning an Object into an Array
- Aside: Fetching Database Items in Realtime Using onValue
- Updating Items in Realtime
- For Loop to Render Database Items
- Let’s Smash the Bug
- Aside: Flexbox Flex-Wrap
- Aside: Flexbox Gap
- Adding CSS for to Wrap Items
- Getting ID of Item in Database
- Replacing InnerHTML with CreateElement
- Aside: Removing Items from Firebase
- Removing an Item When Clicked
- Only Fetching Items from Database If Snapshot Exists
- Adding Hover Styles to Buttons
- Aside: User-Select
- Aside: Setting the Viewport
- Making the App More Mobile-Friendly
- Aside: Favicon
- Adding Favicon and Phone Icons
- Aside: Web Application Manifest
- Turning Web App into “Mobile” App
- Personalise Your App
- Deploy to Netlify
- Add App to Home Screen
- Share Your Creation
- Recap
- Solo Project (PRO) – We Are the Champions
- Congrats on Completing the Learn JavaScript Course!