IIRF Online > Development > Web Development > JavaScript > The Complete JavaScript Course 2024: From Zero to Expert!
The Complete JavaScript Course 2024: From Zero to Expert! by Udemy
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one!
Course Highlights
- Become an advanced, confident, and modern JavaScript developer from scratch
- Build 6 beautiful real-world projects for your portfolio (not boring toy apps)
- Become job-ready by understanding how JavaScript really works behind the scenes
- How to think and work like a developer: problem-solving, researching, workflows
- JavaScript fundamentals: variables, if/else, operators, boolean logic, functions, arrays, objects, loops, strings, etc.
- Modern ES6+ from the beginning: arrow functions, destructuring, spread operator, optional chaining (ES2020), etc.
- Modern OOP: Classes, constructors, prototypal inheritance, encapsulation, etc.
- Complex concepts like the 'this' keyword, higher-order functions, closures, etc.
- Asynchronous JavaScript: Event loop, promises, async/await, AJAX calls and APIs
- How to architect your code using flowcharts and common patterns
- Modern tools for 2022 and beyond: NPM, Parcel, Babel and ES6 modules
- Practice your skills with 50+ challenges and assignments (solutions included)
- Get fast and friendly support in the Q&A area
- Course pathways: design your unique learning path according to your goals!
Skills you will learn!
Overview
Who would benefit from this javascript course?
- This course is beneficial in many ways to people with various backgrounds:
- It can benefit students or beginners who are looking for a career in programming.
- It is also helpful for businessmen and entrepreneurs to have clear communication with developers and understand the technical terms.
- It is beneficial to have a diverse knowledge of full-stack development to handle front-end and back-end coding.
What are our course highlights?
- Current OOP features include encapsulation, prototype inheritance, classes, and constructors.
- Learn to write modern and sophisticated JavaScript code from the ground up.
- The basics of JavaScript are variables, operators, if/else statements, boolean logic, functions, arrays, objects, loops, strings, and more.
- Learn about event loops, promises, async/await, APIs, and AJAX calls and modules for ES6, Babel, Parcel, and NPM.
- Efficient in studying, workflows, and problem-solving.
- Learn modern ES6+ from scratch and features like spread operators, arrow functions, destructuring, optional chaining (ES), and more.
- Get an idea about common javascript patterns and flowcharts to optimise the code.
Additional Course Insights:
- Discover the key points of JavaScript, focusing on hands-on projects for your portfolio.
- Achieve a deep understanding of JavaScript fundamentals, such as variables, loops, and other functions.
- Know how JavaScript operates behind the scenes, with engines, the call stack, and scoping.
Curriculum
4 Topics
Course Structure and Projects
Read Before You Start!
Watch Before You Start!
Setting Up Our Code Editor
30 Topics
Section Intro
Hello World!
A Brief Introduction to JavaScript
Linking a JavaScript File
Values and Variables
Practice Assignments
Data Types
let const and var
Basic Operators
Operator Precedence
A Note About Challenges
CHALLENGE #1
CHALLENGE #1: Video Solution
Strings and Template Literals
Taking Decisions: if / else Statements
CHALLENGE #2
CHALLENGE #2: Video Solution
Type Conversion and Coercion
Truthy and Falsy Values
Equality Operators: == vs. ===
Boolean Logic
Logical Operators
CHALLENGE #3
CHALLENGE #3: Video Solution
The switch Statement
Statements and Expressions
The Conditional (Ternary) Operator
CHALLENGE #4
CHALLENGE #4: Video Solution
JavaScript Releases: ES5 ES6+ and ESNext
24 Topics
Section Intro
Activating Strict Mode
Functions
Function Declarations vs. Expressions
Arrow Functions
Functions Calling Other Functions
Reviewing Functions
CHALLENGE #1
CHALLENGE #1: Video Solution
Introduction to Arrays
Basic Array Operations (Methods)
CHALLENGE #2
CHALLENGE #2: Video Solution
Introduction to Objects
Dot vs. Bracket Notation
Object Methods
CHALLENGE #3
CHALLENGE #3: Video Solution
Iteration: The for Loop
Looping Arrays Breaking and Continuing
Looping Backwards and Loops in Loops
The while Loop
CHALLENGE #4
CHALLENGE #4: Video Solution
2 Topics
Pathways and Section Roadmaps
Course Pathways
10 Topics
Section Intro
Section Roadmap
Setting up Prettier and VS Code
Installing Node.js and Setting Up a Dev Environment
Learning How to Code
How to Think Like a Developer: Become a Problem Solver!
Using Google StackOverflow and MDN
Debugging (Fixing Errors)
Debugging with the Console and Breakpoints
Coding Challenge #1
5 Topics
Section Intro
Basic HTML Structure and Elements
Attributes Classes and IDs
Basic Styling with CSS
Introduction to the CSS Box Model
19 Topics
Section Intro
Section Roadmap
PROJECT #1: Guess My Number!
What's the DOM and DOM Manipulation
Selecting and Manipulating Elements
Handling Click Events
Implementing the Game Logic
Manipulating CSS Styles
Coding Challenge #1
Implementing Highscores
Refactoring Our Code: The DRY Principle
PROJECT #2: Modal Window
Working With Classes
Handling an "Esc" Keypress Event
PROJECT #3: Pig Game
Rolling the Dice
Switching the Active Player
Holding Current Score
Resetting the Game
14 Topics
Section Intro
Section Roadmap
An High-Level Overview of JavaScript
The JavaScript Engine and Runtime
Execution Contexts and The Call Stack
Scope and The Scope Chain
Scoping in Practice
Variable Environment: Hoisting and The TDZ
Hoisting and TDZ in Practice
The this Keyword
The this Keyword in Practice
Regular Functions vs. Arrow Functions
Primitives vs. Objects (Primitive vs. Reference Types)
Primitives vs. Objects in Practice
25 Topics
Section Intro
Section Roadmap
Destructuring Arrays
Destructuring Objects
The Spread Operator (...)
Rest Pattern and Parameters
Short Circuiting (&& and ||)
The Nullish Coalescing Operator (??)
Logical Assignment Operators
Coding Challenge #1
Looping Arrays: The for-of Loop
Enhanced Object Literals
Optional Chaining (?.)
Looping Objects: Object Keys Values and Entries
Coding Challenge #2
Sets
Maps: Fundamentals
Maps: Iteration
Summary: Which Data Structure to Use?
Coding Challenge #3
Working With Strings - Part 1
Working With Strings - Part 2
Working With Strings - Part 3
Coding Challenge #4
String Methods Practice
14 Topics
Section Intro
Section Roadmap
Default Parameters
How Passing Arguments Works: Value vs. Reference
First-Class and Higher-Order Functions
Functions Accepting Callback Functions
Functions Returning Functions
The call and apply Methods
The bind Method
Coding Challenge #1
Immediately Invoked Function Expressions (IIFE)
Closures
More Closure Examples
Coding Challenge #2
28 Topics
Section Intro
Section Roadmap
Simple Array Methods
The new at Method
Looping Arrays: forEach
forEach With Maps and Sets
PROJECT: "Bankist" App
Creating DOM Elements
Coding Challenge #1
Data Transformations: map filter reduce
The map Method
Computing Usernames
The filter Method
The reduce Method
Coding Challenge #2
The Magic of Chaining Methods
Coding Challenge #3
The find Method
Implementing Login
Implementing Transfers
The findIndex Method
some and every
flat and flatMap
Sorting Arrays
More Ways of Creating and Filling Arrays
Summary: Which Array Method to Use?
Array Methods Practice
Coding Challenge #4
14 Topics
Section Intro
Section Roadmap
Converting and Checking Numbers
Math and Rounding
The Remainder Operator
Numeric Separators
Working with BigInt
Creating Dates
Adding Dates to "Bankist" App
Operations With Dates
Internationalizing Dates (Intl)
Internationalizing Numbers (Intl)
Timers: setTimeout and setInterval
Implementing a Countdown Timer
22 Topics
Section Intro
Section Roadmap
PROJECT: "Bankist" Website
How the DOM Really Works
Selecting Creating and Deleting Elements
Styles Attributes and Classes
Implementing Smooth Scrolling
Types of Events and Event Handlers
Event Propagation: Bubbling and Capturing
Event Propagation in Practice
Event Delegation: Implementing Page Navigation
DOM Traversing
Building a Tabbed Component
Passing Arguments to Event Handlers
Implementing a Sticky Navigation: The Scroll Event
A Better Way: The Intersection Observer API
Revealing Elements on Scroll
Lazy Loading Images
Building a Slider Component: Part 1
Building a Slider Component: Part 2
Lifecycle DOM Events
Efficient Script Loading: defer and async
24 Topics
Section Intro
Section Roadmap
What is Object-Oriented Programming?
OOP in JavaScript
Constructor Functions and the new Operator
Prototypes
Prototypal Inheritance and The Prototype Chain
Prototypal Inheritance on Built-In Objects
Coding Challenge #1
ES6 Classes
Setters and Getters
Static Methods
Object.create
Coding Challenge #2
Inheritance Between "Classes": Constructor Functions
Coding Challenge #3
Inheritance Between "Classes": ES6 Classes
Inheritance Between "Classes": Object.create
Another Class Example
Encapsulation: Protected Properties and Methods
Encapsulation: Private Class Fields and Methods
Chaining Methods
ES6 Classes Summary
Coding Challenge #4
16 Topics
Section Intro
Section Roadmap
Project Overview
How to Plan a Web Project
Using the Geolocation API
Displaying a Map Using Leaflet Library
Displaying a Map Marker
Rendering Workout Input Form
Project Architecture
Refactoring for Project Architecture
Managing Workout Data: Creating Classes
Creating a New Workout
Rendering Workouts
Move to Marker On Click
Working with localStorage
Final Considerations
24 Topics
Section Intro
Section Roadmap
Asynchronous JavaScript AJAX and APIs
IMPORTANT: API URL Change
Our First AJAX Call: XMLHttpRequest
[OPTIONAL] How the Web Works: Requests and Responses
Welcome to Callback Hell
Promises and the Fetch API
Consuming Promises
Chaining Promises
Handling Rejected Promises
Throwing Errors Manually
Coding Challenge #1
Asynchronous Behind the Scenes: The Event Loop
The Event Loop in Practice
Building a Simple Promise
Promisifying the Geolocation API
Coding Challenge #2
Consuming Promises with Async/Await
Error Handling With try...catch
Returning Values from Async Functions
Running Promises in Parallel
Other Promise Combinators: race allSettled and any
Coding Challenge #3
16 Topics
Section Intro
Section Roadmap
An Overview of Modern JavaScript Development
An Overview of Modules in JavaScript
Exporting and Importing in ES6 Modules
Top-Level await (ES2022)
The Module Pattern
CommonJS Modules
A Brief Introduction to the Command Line
Introduction to NPM
Bundling With Parcel and NPM Scripts
Configuring Babel and Polyfilling
Review: Writing Clean and Modern JavaScript
Let's Fix Some Bad Code: Part 1
Declarative and Functional JavaScript Principles
Let's Fix Some Bad Code: Part 2
27 Topics
Section Intro
Section Roadmap
Project Overview and Planning (I)
Latest Code Updates (Parcel v2 and more)
Loading a Recipe from API
Rendering the Recipe
Listening For load and hashchange Events
The MVC Architecture
Refactoring for MVC
Helpers and Configuration Files
Event Handlers in MVC: Publisher-Subscriber Pattern
Implementing Error and Success Messages
Implementing Search Results - Part 1
Implementing Search Results - Part 2
Implementing Pagination - Part 1
Implementing Pagination - Part 2
Project Planning II
Updating Recipe Servings
Developing a DOM Updating Algorithm
Implementing Bookmarks - Part 1
Implementing Bookmarks - Part 2
Storing Bookmarks With localStorage
Project Planning III
Uploading a New Recipe - Part 1
Uploading a New Recipe - Part 2
Uploading a New Recipe - Part 3
Wrapping Up: Final Considerations
7 Topics
Section Intro
Section Roadmap
Simple Deployment With Netlify
Setting Up Git and GitHub
Git Fundamentals
Pushing to GitHub
Setting Up Continuous Integration With Netlify
2 Topics
Where to Go from Here
My Other Courses + Updates
1 Topic
Access the Old Course
The Complete JavaScript Course 2024: From Zero to Expert!
Related JavaScript Courses
Frequently Asked Questions
Buying a javascript course is useful because it can help you build dynamic websites and land high-paying jobs due to its demand in today's industry.
Yes, you can learn JavaScript from scratch, as there are many beginner courses that are designed to introduce programming concepts gradually. They start with the basics and practice through hands-on exercises.
It's important to learn HTML and CSS to understand JavaScript because a website's structure comes from HTML, its look from CSS, and its interaction from JavaScript.
You can get a job as a front-end and back-end developer, which is basically full-stack development. If you specialise in JavaScript, then you can also become a Game Developer or Mobile Developer.
It is a basic language for front-end and back-end web development, and it is easily compatible with modern frameworks.
Thank You!
Your review has been submitted successfully.