Modern JavaScript (Complete guide, from Novice to Ninja)

BY
Udemy

Mode

Online

Fees

₹ 4099

Quick Facts

particular details
Medium of instructions English
Mode of learning Self study
Mode of Delivery Video and Text Based

Course and certificate fees

Fees information
₹ 4,099
certificate availability

Yes

certificate providing authority

Udemy

The syllabus

Introduction

  • Why You Should Take This Course
  • Why JavaScript is Amazing
  • Setting up Your Environment
  • Course Files

JavaScript Basics

  • Adding JavaScript to a Web Page
  • The Browser Console
  • Variables, Constants & Comments
  • Data Types at a Glance
  • Strings
  • Common String Methods
  • Numbers
  • Template Strings
  • Arrays
  • Null & Undefined
  • Booleans & Comparisons
  • Loose vs Strict Comparison
  • Type Conversion

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 Statements
  • Variables & Block Scope

Functions & Methods

  • What are Functions?
  • Function Declarations & Expressions
  • Arguments & Parameters
  • Returning Values
  • Arrow Functions
  • Functions vs Methods
  • Foreach Method & Callbacks
  • Callback Functions in Action

Object Literals

  • Objects at a Glance
  • Creating an Object Literal
  • Adding Methods
  • 'this' Keyword
  • Objects in Arrays
  • Math Object
  • Primitive vs Reference Types

The Document Object Model

  • Interacting with the Browser
  • The DOM Explained
  • The Query Selector
  • Other Ways to Query the DOM
  • Adding & Changing Page Content
  • Getting & Setting Attributes
  • Changing CSS Styles
  • Adding & Removing Classes
  • Parents, Children & Siblings
  • Event Basics (click events)
  • Creating & Removing Elements
  • Event Bubbling (and delegation)
  • More DOM Events
  • Building a Popup

Forms and Form Event

  • Events Inside Forms
  • Submit Events
  • Regular Expressions
  • Testing RegEx Patterns
  • Basic Form Validation
  • Keyboard Events

Project- Interactive Ninja Quiz

  • Project Preview and Setup
  • Bootstrap Basics
  • HTML Template
  • Checking Answers
  • Showing the Score
  • The Window Object
  • Intervals & Animating the Score

Array Methods

  • Filter Method
  • Map Method
  • Reduce Method
  • Find Method
  • Sort Method
  • Chaining Array Methods

Project- To Do List

  • Project Preview and Setup
  • HTML & CSS Template
  • Adding Todos
  • Deleting Todos
  • Searching & Filtering Todos

Dates & Times

  • Dates & Times in JavaScript
  • Timestamps & Comparisons
  • Building a Digital Clock
  • Date-fns Library

Async JavaScript

  • What is Asynchronous JavaScript?
  • Async Code in Action
  • What are HTTP Requests?
  • Making HTTP Requests (XHR)
  • Response Status
  • Callback Functions
  • JSON Data
  • Callback Hell
  • Promise Basics
  • Chaining Promises
  • The Fetch API
  • Async & Await
  • Throwing & Catching Errors

Project - Weather App

  • Project Preview and Setup
  • HTML & CSS Template
  • AccuWeather API
  • Get City API Call
  • Get Weather API Call
  • Updating the Location
  • Object Shorthand Notation
  • Updating the UI
  • Destructuring
  • Weather Icons & images
  • Ternary Operator

Local Storage

  • What is Local Storage?
  • Storing & Getting Data
  • Deleting Storage Data
  • Stringifying & Parsing Data
  • Updating the Weather App

Object Oriented JavaScript

  • What is OOP?
  • Object Literal Recap
  • Classes
  • Class Constructors
  • Class Methods & Method Chaining
  • Class Inheritance (subclasses)
  • Super( )
  • Constructors (under the hood)
  • Prototype Model
  • Prototypal Inheritance
  • Built-in Objects
  • Making a Forecast Class (weather app)

Databases (Firebase)

  • NoSQL Databases
  • Firebase & Firestore
  • Connecting to Firestore
  • Getting Collections
  • Saving Documents
  • Deleting Documents
  • Real-time Listeners
  • Unsubscribing

Project - Real Time Chatroom

  • Project Preview and Setup
  • HTML Template
  • Connecting to Firebase
  • Chatroom Class & Adding Chats
  • Setting up a Real-time Listener
  • Complex Queries
  • Updating the Room & Username
  • Creating a ChatUI Class
  • Formatting the Dates
  • Sending New Chats
  • Changing Username & Local Storage
  • Updating the Room
  • Testing the App

More Es6 Features

  • Spread & Rest
  • Sets
  • Symbols

Modern Workflow with Babel & Webpack

  • An Introduction to Babel
  • Installing Node.js & Babel
  • Using the Babel CLI
  • NPM Scripts & Watching Files
  • What is Webpack?
  • Setting up a Webpack File
  • Webpack CLI
  • Introduction to Modules
  • Default Exports
  • Watching for Changes
  • The Webpack Dev Server
  • Production & Development Modes
  • Babel & Webpack Together
  • Webpack Boilerplate

Project - UI Library

  • Project Preview & Setup
  • CSS & Style Loaders (webpack)
  • Tooltips
  • Dropdowns
  • Tabbed Content
  • Snackbars
  • Extending the Library

Using Firebase Database (& Auth) Version 9

  • What's New in Firebase 9?
  • Webpack Setup
  • Creating a Firebase Project
  • Firestore Setup & Fetching Data
  • Adding & Deleting Documents
  • Real Time Collection Data
  • Firestore Queries
  • Timestamps & Ordering Data
  • Fetching Single Documents
  • Updating Documents
  • Firebase Auth Setup
  • Signing Users Up
  • Logging In & Logging Out
  • Listening to Auth Changes
  • Unsubscribing from Changes

Next Steps

  • Bonus Lecture: Next Steps

Instructors

Mr Shaun Pelling

Mr Shaun Pelling
Instructor
Freelancer

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Download the Careers360 App on your Android phone

Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

Careers360 App
150M+ Students
30,000+ Colleges
500+ Exams
1500+ E-books