JavaScript stands at the core of interactive and responsive web design, powering the behavior of websites across the globe. This powerful scripting language enables you to create rich user interfaces, handle events, and manipulate web content in real time. As the backbone of modern web frameworks and libraries such as React, Angular, and Vue, understanding JavaScript is essential for any aspiring web developer. In this course, we delve into the latest features introduced in ECMAScript 6 (ES6) and beyond, exploring new syntax, arrow functions, promises, async functions, and more, ensuring that by the end of this course, you’ll be well-equipped to craft sophisticated and modern web applications.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Add JavaScript to a web page
Use the browser console
Work with variables and constants
Understand data types
Manipulate strings
Use string methods
Work with numbers
Create template strings
Manag arrays
Handle null and undefined
Work with booleans and comparisons
Understand control flow (if statements, loops, etc.)
01. Introduction
- Why you should take this course
- Why JavaScript is awesome
- Setting up your environment
- Course files
02. JavaScript Basics
- Adding JavaScript to a web page
- The browser console
- Variables & constants
- Types
- Strings
- String methods
- Numbers
- Template strings
- Arrays
- Null & undefined
- Booleans & comparisons
- Loose vs strict comparison
- Type conversion
03. Control Flow Basics
- What is control flow
- For loops
- While loops
- Do while loops
- If statements
- Else & else if
- Logical operators
- Logical not
- Break & continue
- Switch statement
- Block scope
04. Functions & Methods
- What are functions
- Function declarations & expressions
- Arguments & parameters
- Returning values
- Arrow functions
- Functions vs methods
- Callback functions & foreach
- Callback functions in action
05. Object Literals
- Objects at a glance
- Creating an object
- Adding methods
- This keyword
- Objects in arrays
- Math object
- Primitive vs reference types
06. The Document Object Model
- Interacting with a web page
- The DOM explained
- The query selector
- Other ways to query the DOM
- Adding & changing page content
- Getting & setting attributes
- Adding & removing styles
- Adding & removing classes
- Parents, children & siblings
- Events & event listeners
- Creating & removing elements
- Event bubbling & delegation
- More events
- Making a popup
07. Forms & Form Events
- Events inside forms
- Submit events
- REGEX
- Testing REGEX patterns
- Basic form validation
- Keyboard events
08. Project - Interactive Ninja Quiz
- Project preview & setup
- Bootstrap introduction
- Making the HTML template
- Calculating scores
- Showing the score
- The window object
- Animating the score
09. Array Methods
- Filter method
- Map method
- Reduce method
- Find method
- Sort method
- Chaining array methods
10. Project - Todo List
- Project preview & template
- HTML & CSS template
- Adding todos
- Deleting todos
- Filtering todos
11. Dates & Times
- Times
- Timestamps
- Building a digital clock
- Date-fns
12. Async JavaScript
- What Is Async JavaScript
- Async in Action
- What Are HTTP Requests?
- Making HTTP Requests
- Status Codes
- Async Code & Callbacks
- JSON Data
- Callback Hell
- Promise Basics
- Chaining Promises
- Fetch API
- Async & Await
- Throwing Custom Errors
13. Project - Weather App
- Project Preview & Setup
- HTML & CSS Template
- Accuweather API
- Get City API Call
- Get Weather API Call
- Updating the Location
- Object Shorthand
- Updating the UI
- Destructuring
- Icons & Images
- Ternary Operator
14. Local Storage
- What Is Local Storage
- Storing & Getting Data
- Deleting Storage Data
- Stringifying & Parsing Data
- Updating the Weather App
15. Object Oriented JavaScript
- What Is OOP?
- Object Literal Recap
- Classes
- Constructor Functions
- Class Methods & Method Chaining
- Class Inheritance
- Super( )
- Constructors Under The Hood
- Prototype Model
- Prototypal Inheritance
- Built-In Objects
- Making A Forecast Class (Weather App)
16. Databases (Firestore)
- NoSQLS Databases
- Firebase & Firestore
- Connecting To Firestore
- Getting Documents
- Saving Documents
- Deleting Documents
- Real-Time Listeners
- Unsubscribing From Changes
17. Project - Real-Time Chatroom
- Project Preview & Setup
- HTML Template
- Connecting To Firestore
- Chatroom Classes
- Realtime Listener Setup
- Complex Queries
- Updating The Name & Room
- Chat UI Class
- Formatting The Date & Time
- Sending New Chats
- Changing Usernames
- Updating Rooms
- Testing The App
18. More ES6 Features
- Rest & Spread
- Sets
- Symbols
19. Modern Workflow With Babel & Webpack
- Modern Feature Support
- Babel Basics
- Installing Node & Babel
- Using The Babel CLI
- NPM Scripts & Watching Files
- What Is Webpack
- Creating A Webpack File
- The Webpack CLI
- Intro To Modules
- Default Exports
- Watching For Changes
- Webpack Dev Server
- Production & Development Modes
- Babel & Webpack
- Webpack Boilerplate
20. Project - UI Library
- Project Preview & Setup
- CSS & Style Loaders (Webpack)
- Tooltips
- Dropdowns
- Tabs
- Snackbars
- Extending The Library
21. Using Firebase 9 (Latest Version)
- Introduction & What’s New
- Setting Up Webpack
- Setting Up Firebase
- Firestore Setup & Getting Data
- Adding & Deleting Documents
- Real Time Collection Data
- Firestore Queries
- Ordering Data & Timestamps
- Fetching A Single Document
- Updating Documents
- Setting Up Firebase Auth
- Signing Users Up
- Logging In & Out
- Subscribing To Auth Changes
- Unsubscribing From Changes
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Add JavaScript to a web page
Use the browser console
Work with variables and constants
Understand data types
Manipulate strings
Use string methods
Work with numbers
Create template strings
Manag arrays
Handle null and undefined
Work with booleans and comparisons
Understand control flow (if statements, loops, etc.)
COURSE OUTLINE
01. Introduction
- Why you should take this course
- Why JavaScript is awesome
- Setting up your environment
- Course files
02. JavaScript Basics
- Adding JavaScript to a web page
- The browser console
- Variables & constants
- Types
- Strings
- String methods
- Numbers
- Template strings
- Arrays
- Null & undefined
- Booleans & comparisons
- Loose vs strict comparison
- Type conversion
03. Control Flow Basics
- What is control flow
- For loops
- While loops
- Do while loops
- If statements
- Else & else if
- Logical operators
- Logical not
- Break & continue
- Switch statement
- Block scope
04. Functions & Methods
- What are functions
- Function declarations & expressions
- Arguments & parameters
- Returning values
- Arrow functions
- Functions vs methods
- Callback functions & foreach
- Callback functions in action
05. Object Literals
- Objects at a glance
- Creating an object
- Adding methods
- This keyword
- Objects in arrays
- Math object
- Primitive vs reference types
06. The Document Object Model
- Interacting with a web page
- The DOM explained
- The query selector
- Other ways to query the DOM
- Adding & changing page content
- Getting & setting attributes
- Adding & removing styles
- Adding & removing classes
- Parents, children & siblings
- Events & event listeners
- Creating & removing elements
- Event bubbling & delegation
- More events
- Making a popup
07. Forms & Form Events
- Events inside forms
- Submit events
- REGEX
- Testing REGEX patterns
- Basic form validation
- Keyboard events
08. Project - Interactive Ninja Quiz
- Project preview & setup
- Bootstrap introduction
- Making the HTML template
- Calculating scores
- Showing the score
- The window object
- Animating the score
09. Array Methods
- Filter method
- Map method
- Reduce method
- Find method
- Sort method
- Chaining array methods
10. Project - Todo List
- Project preview & template
- HTML & CSS template
- Adding todos
- Deleting todos
- Filtering todos
11. Dates & Times
- Times
- Timestamps
- Building a digital clock
- Date-fns
12. Async JavaScript
- What Is Async JavaScript
- Async in Action
- What Are HTTP Requests?
- Making HTTP Requests
- Status Codes
- Async Code & Callbacks
- JSON Data
- Callback Hell
- Promise Basics
- Chaining Promises
- Fetch API
- Async & Await
- Throwing Custom Errors
13. Project - Weather App
- Project Preview & Setup
- HTML & CSS Template
- Accuweather API
- Get City API Call
- Get Weather API Call
- Updating the Location
- Object Shorthand
- Updating the UI
- Destructuring
- Icons & Images
- Ternary Operator
14. Local Storage
- What Is Local Storage
- Storing & Getting Data
- Deleting Storage Data
- Stringifying & Parsing Data
- Updating the Weather App
15. Object Oriented JavaScript
- What Is OOP?
- Object Literal Recap
- Classes
- Constructor Functions
- Class Methods & Method Chaining
- Class Inheritance
- Super( )
- Constructors Under The Hood
- Prototype Model
- Prototypal Inheritance
- Built-In Objects
- Making A Forecast Class (Weather App)
16. Databases (Firestore)
- NoSQLS Databases
- Firebase & Firestore
- Connecting To Firestore
- Getting Documents
- Saving Documents
- Deleting Documents
- Real-Time Listeners
- Unsubscribing From Changes
17. Project - Real-Time Chatroom
- Project Preview & Setup
- HTML Template
- Connecting To Firestore
- Chatroom Classes
- Realtime Listener Setup
- Complex Queries
- Updating The Name & Room
- Chat UI Class
- Formatting The Date & Time
- Sending New Chats
- Changing Usernames
- Updating Rooms
- Testing The App
18. More ES6 Features
- Rest & Spread
- Sets
- Symbols
19. Modern Workflow With Babel & Webpack
- Modern Feature Support
- Babel Basics
- Installing Node & Babel
- Using The Babel CLI
- NPM Scripts & Watching Files
- What Is Webpack
- Creating A Webpack File
- The Webpack CLI
- Intro To Modules
- Default Exports
- Watching For Changes
- Webpack Dev Server
- Production & Development Modes
- Babel & Webpack
- Webpack Boilerplate
20. Project - UI Library
- Project Preview & Setup
- CSS & Style Loaders (Webpack)
- Tooltips
- Dropdowns
- Tabs
- Snackbars
- Extending The Library
21. Using Firebase 9 (Latest Version)
- Introduction & What’s New
- Setting Up Webpack
- Setting Up Firebase
- Firestore Setup & Getting Data
- Adding & Deleting Documents
- Real Time Collection Data
- Firestore Queries
- Ordering Data & Timestamps
- Fetching A Single Document
- Updating Documents
- Setting Up Firebase Auth
- Signing Users Up
- Logging In & Out
- Subscribing To Auth Changes
- Unsubscribing From Changes
