Learn Javascript

ToIT

0 (0)

Duration

0m

Students

0

Level

Beginner

Last Updated

October 28, 2024

Learn Javascript

Overview
Curriculum
Reviews

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!

8 Sections
207 Lessons
0 Quizzes
0m Duration

Expand All

Build a Passenger Counter App

31 Lessons 0 Quizzes

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 0 Quizzes

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!

Setting Up a Local Dev Environment

4 Lessons 0 Quizzes

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

Build a Blackjack Game

54 Lessons 0 Quizzes

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 0 Quizzes

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

Build a Chrome Extension

54 Lessons 0 Quizzes

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 0 Quizzes

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

Build a Mobile App

36 Lessons 0 Quizzes

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!

0

0 Ratings

5 Star 0%

4 Star 0%

3 Star 0%

2 Star 0%

1 Star 0%

Reviews

Free

Course Includes

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