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!
javascript
Learn Javascript
Duration
0m
Students
0
Level
Beginner
Last Updated
November 10, 2024
COURSE OUTLINE
01. Build a Passenger Counter App
- 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
02. Practice Time - Part 1
- 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!
03. Setting Up a Local Dev Environment
- 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
04. 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
- 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
05. Practice Time - Part 2
- 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
06. 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
- 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
07. Practice Time - Part 3
- 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
08. Build a Mobile App
- 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 <Li> 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!
Skills Learned
After completing this online training course, students will be able to:
-
const & let
-
strings
-
numbers
-
booleans
-
objects
-
arrays
-
functions
-
methods
-
for loops
-
logical operators
-
mathematical operators
-
JSON
-
Math object
-
DOM manipulation
-
getElementById()
-
querySelector()
-
addEventListener()
-
innerText
-
textContent
-
innerHTML
-
conditional statements
-
truthy vs falsy values
-
template strings
-
localStorage
-
debugging with Google
- 0 Sections
- 0 Lessons
- 0 Quizzes
- 0m Duration
Free
Course Includes
Overview
