TOIT Training

Modern JavaScript – From Novice to Ninja

Modern JavaScript – From Novice to Ninja
  • Overview
  • Curriculum
  • Reviews

 

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.

  • 21 Sections
  • 187 Lessons
  • 0 Quizzes
  • 0m Duration
Expand All

Introduction

4 Lessons 0 Quizzes
  • Why you should take this course
  • Why JavaScript is awesome
  • Setting up your environment
  • Course files

 JavaScript Basics

13 Lessons 0 Quizzes
  • 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

Control Flow Basics

11 Lessons 0 Quizzes
  • 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

Functions & Methods

8 Lessons 0 Quizzes
  • What are functions
  • Function declarations & expressions
  • Arguments & parameters
  • Returning values
  • Arrow functions
  • Functions vs methods
  • Callback functions & foreach
  • Callback functions in action

Object Literals

7 Lessons 0 Quizzes
  • Objects at a glance
  • Creating an object
  • Adding methods
  • This keyword
  • Objects in arrays
  • Math object
  • Primitive vs reference types

The Document Object Model

14 Lessons 0 Quizzes
  • 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

Forms & Form Events

6 Lessons 0 Quizzes
  • Events inside forms
  • Submit events
  • REGEX
  • Testing REGEX patterns
  • Basic form validation
  • Keyboard events

Project - Interactive Ninja Quiz

7 Lessons 0 Quizzes
  • Project preview & setup
  • Bootstrap introduction
  • Making the HTML template
  • Calculating scores
  • Showing the score
  • The window object
  • Animating the score

Array Methods

6 Lessons 0 Quizzes
  • Filter method
  • Map method
  • Reduce method
  • Find method
  • Sort method
  • Chaining array methods

 Project - Todo List

5 Lessons 0 Quizzes
  • Project preview & template
  • HTML & CSS template
  • Adding todos
  • Deleting todos
  • Filtering todos

Dates & Times

4 Lessons 0 Quizzes
  • Times
  • Timestamps
  • Building a digital clock
  • Date-fns

Async JavaScript

13 Lessons 0 Quizzes
  • 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

Project - Weather App

11 Lessons 0 Quizzes
  • 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

Local Storage

5 Lessons 0 Quizzes
  • What Is Local Storage
  • Storing & Getting Data
  • Deleting Storage Data
  • Stringifying & Parsing Data
  • Updating the Weather App

Object Oriented JavaScript

12 Lessons 0 Quizzes
  • 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)

 Databases (Firestore)

8 Lessons 0 Quizzes
  • NoSQLS Databases
  • Firebase & Firestore
  • Connecting To Firestore
  • Getting Documents
  • Saving Documents
  • Deleting Documents
  • Real-Time Listeners
  • Unsubscribing From Changes

Project - Real-Time Chatroom

13 Lessons 0 Quizzes
  • Project Preview & Setup
  • HTML Template
  • Connecting To Firestore
  • Chatroom Classes
  • Realtime Listener Setup
  • Complex
  • Updating The Name & Room
  • Chat UI Class
  • Formatting The Date & Time
  • Sending New Chats
  • Changing Usernames
  • Updating Rooms
  • Testing The App

More ES6 Features

3 Lessons 0 Quizzes
  • Rest & Spread
  • Sets
  • Symbols

 Modern Workflow With Babel & Webpack

15 Lessons 0 Quizzes
  • 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

Project - UI Library

7 Lessons 0 Quizzes
  • Project Preview & Setup
  • CSS & Style Loaders (Webpack)
  • Tooltips
  • Dropdowns
  • Tabs
  • Snackbars
  • Extending The Library

Using Firebase 9 (Latest Version)

15 Lessons 0 Quizzes
  • 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

0

0 Ratings
5 Star 0%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

Free

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

Course Includes

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

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Modern JavaScript – From Novice to Ninja
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)