IIRF Online > Development > Web Development > JavaScript > Modern JavaScript From The Beginning 2.0 (2024)
Modern JavaScript From The Beginning 2.0 (2024) by Udemy
A 36-hour master course to take you from beginner to advanced JavaScript
Course Highlights
- Learn the Fundamentals (Variables, Loops, Functions, etc)
- Learn How JavaScript Works (Execution Context, Call Stack, Async JS)
- Master the Document Object Model & Events (Interactivity)
- Asynchronous JavaScript (Callbacks, Promises, Fetch, Ajax)
- OOP (Constructors, Prototypes, Classes)
- Modern Tooling & Workflow (Webpack, Babel, File Structure, NPM, Plugins & Loaders)
- Full Stack Project With Webpack, Node, Express & MongoDB
- 5 Real World Projects & 10+ Mini-Projects
Skills you will learn!
Overview
What You Gain from Our JavaScript Course?
- JavaScript functionalities
- JavaScript Document Object Model and OOP Advanced JavaScript
- JavaScript ES6 (ECMAScript 6)
- Explore about modern Tooling and workflow that is Webpack, File Structure, NPM, Plugins, Loaders and soon)
- Get opportunities to work with real-life industry projects.
- Get hands-on expertise in asynchronous javascript, including callbacks, fetch and Ajax.
- Knowledge about constructors, prototypes and use of classes in javascript.
Essential Prerequisites for Online javascript Course:
- HTML and CSS to manipulate the document object model of the webpage.
- You must be familiar with programming concepts like conditions, loops, variables, objects and functional uses.
- You must have Logical problem-solving mindset to dive properly into the javascript.
- Javascript requires various mathematical operations, so having an understanding of algebra, geometry, and trigonometry will be a plus.
- Javascript learning requires good knowledge of text editors and other software or tools knowledge to code smoothly.
Curriculum
6 Topics
Welcome To The Course
Course Outline
What Is JavaScript?
Tools & Setup
Running JavaScript In The Browser
Course Links
18 Topics
Data Types & More
Section Intro
The Sandbox Files
Using The Console
Comments & Shortcuts
Variables & Constants
Data Types
Primitive vs Reference Types
Type Conversion
Operators
Type Coercion
Working With Strings
Capitalize Challenge
Working With Numbers
The Math Object
Number Challenge
Dates & Times
Date Methods & DateTimeFormat API
10 Topics
Section Intro
Creating Arrays
Basic Array Methods
Nesting Concat & Spread Operator
Array Challenge
Object Literals
Object Spread Operator & Methods
Destructuring & Naming
JSON Intro
Object Challenge
14 Topics
Scope & Execution Context
Section Intro
Function Basics
More on Params & Arguments
Global & Function Scope
Block Scope
Nested Scope
Declaration vs Expression
Arrow Functions
Immediately Invoked Function Expressions
Function Challenges
Execution Context
Execution Context In Action
The Call Stack
9 Topics
Section Intro
If Statements
If Else & Nesting
Switches
Calculator Challenge
Truthy & Falsy
Logical Operators
Logical Assignment
Ternary Operator
13 Topics
Iteration & Array Methods
Section Intro
For Loop
Break & Continue
While & Do While Loops
FizzBuzz Challenge
For Of Loop
For In Loop
Array.forEach
Array.filter
Array.map
Array.reduce
Array Method Challenges
16 Topics
Section Intro
Intro To The DOM
Document Element Properties
DOM Selectors - Single Elements
DOM Selectors - Multiple Elements
Traversing The DOM - Elements
Traversing The DOM - Nodes
Create & Append Elements
InnerHTML vs createElement()
Refactor To Multiple Functions
Insert Elements
Text & HTML
Custom insertAfter Challenge
Replace Elements
Remove Elements
Working With Styles & Classes
11 Topics
Section Intro
Event Listeners
Mouse Events
The Event Object
Keyboard Events & Key Properties
KeyCode Mini-Project
Input Events
Form Submission & FormData Object
Event Bubbling
Event Delegation & Multiple Elements
Page Loading & Window Events
14 Topics
Shopping List-Project Intro
Add Items To List
Setting Up Git & GitHub (Optional)
Remove & Clear Items
Clear UI State
Filter Items
Local Storage Crash Course
Add Item To Local Storage
Display Items From Local Storage
Remove Items From Local Storage
Set Item To Edit
Update & Reset State
Prevent Duplicate Items
Deploy To Netlify
16 Topics
Section Intro
Thread Of Execution
How Async JavaScript Works
setTimeout & clearTimeout
setInterval & clearInterval
Callbacks
HTTP Request Crash Course
DevTools Network Tab
AJAX & XHR Object
Joke Generator Project Challenge
Callback Hell
Promises
Callback To Promise Refactor
Promise Chaining
Promises vs Callback Hell
promise.all()
11 Topics
Section Intro
Fetch Basics
Random User Mini-Project
Fetch Options-Method Body Headers
Typicode Todos Mini-Project [1]
Typicode Todos Mini-Project [2]
Fetch API Error Handling
Async & Await
Try...Catch Statements
Async & Await Error Handling
Multiple Promises With Async & Await
13 Topics
Flixx Movie App-Project Intro
Theme Overview & Prep
API Overview & API Key
Page Router & Active Link
Display Popular Movies
Spinner & Popular TV Shows
Movie Details Page
Details Page Backdrop
TV Show Details Page
Swiper Slider
Search Function & Custom Alert
Display Search Results
Add Pagination For Search
14 Topics
Section Intro
GeoLocation API
Show Location On Map
Canvas API
requestAnimationFrame
Animated Clock Mini-Project [1]
Animated Clock Mini-Project [2]
Web Audio API
Music Player Project
Drum Machine Project
Video API
Video Player Project
Web Animations API - Ball Project
Speech Recognition API
12 Topics
Section Intro
What Is OOP?
4 Basic Principles Of OOP
More On Object Literals & The "this" Keyword
Constructor Functions
Literals vs Built-In Contructors
Working With Object Properties
Prototypes & The Prototype Chain
Adding Methods To The Prototype
Object.create
Prototypical Inheritance & call()
OOP Game Challenge
10 Topics
Classes
Class Inheritance
Static Methods
bind() & Defining "this"
Getters & Setters With Classes
Getters & Setters With defineProperty()
Private Property Convention
ES2022 Private Class Fields
Property Flags & Descriptors
Sealing & Freezing Objects
18 Topics
Tracalorie App-Project Intro
UI Theme Setup
Project Planning & Overview
Base Tracker Meal & Workout Classes
Display Tracker Stats
Progress Bar & Calorie Alert
App Class New Meal & Workout
Refactor To Single _newItem() Method
Display New Meal & Workout
Remove Meal & Workout
Filter & Reset
Set Calorie Limit
Storage Class & Calorie Limit Persist
Persist Total Calories To Local Storage
Save Meals To Local Storage
Save Workouts To Local Storage
Remove Meals & Workouts From Local Storage
Clear Storage Items
15 Topics
Section Intro
What are Modules?
Installing & Using Node.js
CommonJS Modules
NPM Packages
ES Modules
Module Bundlers
Webpack Basic Setup
CSS & Style Loaders
HTML Webpack Plugin
Webpack Dev Server Setup
Babel Setup
CSS Minify Extract Plugin
Tracalorie Refactor For Webpack
Deploy Tracalorie To Netlify
11 Topics
Section Intro
Symbols
Iterators
Generators
Profile Scroller Mini-Project
Sets
Maps
Poll Mini-Project
Stacks
Queues
Linked Lists
10 Topics
Intro & What Are Algorithms?
What Is Unit Testing?
Getting Started With Jest
Grouping Tests With describe()
Reverse String Algorithm
Palindrome Algorithm
Array Chunking
Anagram Algorithm
Get Elements By Tag - jsdom
Has Duplicate IDs - jsdom
6 Topics
Section Intro
FS (FileSystem) Module
Path Module
OS Module
URL & QueryString Module
HTTP Module
10 Topics
RandomIdeas Full Stack App-Project Intro
Express Setup & Basic API
Nodemon & Route Clean Up
Handle POST Requests - Add Idea
PUT & DELETE Requests - Update & Delete Ideas
What Is MongoDB?
MongoDB Atlas Setup
Mongoose Connect & Dotenv
Mongoose Schema & Model
Database Queries
11 Topics
Fullstack Workflow
Client Folder Setup
Modal Component
Ideaform Component
IdeaList Component
API Service - Get Ideas
Create Idea via Form
Save Username to Local Storage
Add Username Validation to Server
Add Delete Functionality
Deploying A Fullstack App
Modern JavaScript From The Beginning 2.0 (2024)
Related JavaScript Courses
.webp)
Frequently Asked Questions
Anyone who wants to make a bright career in web development and programming can join a javascript course. It is also suitable for freshers or experienced developers who want to upskill the JavaScript concept.
There are plenty of javascript learning websites; below are some of the good ones:
Udemy, Edx, Freecode camp, Coursera
Yes, when you successfully complete all the tutorials and coding exercises till the end, you get a completion certificate from Udemy, which can help you to land your dream job in top industries.
Functions, structure, controller and variables are some of the basics of the javascript language that are a must before learning. If you are clear with this, you can easily move to advanced OOP, APIs and other concepts.
Yes, there are many resources and free courses available online that offer tutorials, documentation and quizzes to learn javascript effectively. Some of the free platforms are simplilearn, w3schools.com and much more.
Thank You!
Your review has been submitted successfully.