/The-Complete-JavaScript-course-Course-2024

Here you can find the table of content of JavaScript Course which will help you to navigate through the course.

Image

JavaScript YouTube MDN Web Docs

Find me:

LinkedIn GitHub X

Welcome to the JavaScript Programming Course! This course is designed to provide you with a comprehensive understanding of JavaScript, one of the most widely-used programming languages in web development today.

Course Overview

JavaScript is a versatile language that powers the interactive elements of websites, making it an essential skill for front-end developers. In this course, you will learn the fundamentals of JavaScript programming, including:

  • Basic Syntax: Understand the syntax and structure of JavaScript code.
  • Data Types and Variables: Explore different data types such as strings, numbers, arrays, and objects, and learn how to declare and manipulate variables.
  • Control Flow: Master control flow structures including if statements, loops, and switch statements to control the execution of your code.
  • Functions: Learn how to define and invoke functions, pass parameters, and return values.
  • DOM Manipulation: Discover how to manipulate the Document Object Model (DOM) to create dynamic and interactive web pages.
  • Events: Handle user interactions and respond to events such as clicks, mouse movements, and keyboard inputs.
  • Asynchronous JavaScript: Understand asynchronous programming concepts using callbacks, promises, and async/await to work with asynchronous tasks effectively.

Prerequisites

This course is designed for beginners with no prior programming experience. However, a basic understanding of HTML and CSS will be beneficial.

Course Structure

The course is divided into several modules, each covering specific topics with hands-on exercises and coding challenges to reinforce your learning. Whether you're a beginner looking to start your journey into web development or an experienced programmer aiming to enhance your JavaScript skills, this course offers something for everyone.

Getting Started

To get started with the course, simply clone or download the repository and follow the instructions provided in each module's README file. You can also join our community forums to connect with fellow learners, ask questions, and share your experiences.

Feel free to customize the introduction to suit your course's specific goals and target audience. Good luck with your JavaScript course!

Course Content

Section 1: Welcome
  1. Course Structure and Projects
  2. Watch Before You Start!
  3. Setting Up Code Editor
Section 2: JavaScript Fundamental - Part 1
  1. Section Intro
  2. Hello World!
  3. A Brief Introduction to JavaScript
  4. Linking a JavaScript File
  5. Value and Variables
  6. Data Types
  7. let, const and var
  8. Basic Operators
  9. Operator Precedence
  10. String and Template Literals
  11. Taking Decision: if and else Statements
  12. Truthy and Falsy Values
  13. Equality Operators: == & ===
  14. Boolean Logic
  15. Logical Operators
  16. The Switch Statement
  17. Statements And Expressions
  18. The Conditional (Ternary) Operator
  19. JavaScript Releases: ES6, ES6+ and ESNext
Section 3: JavaScript Fundamental - Part 2
  1. Section Intro
  2. Activate Stric Mode ('use strict')
  3. Functions
  4. Function Declaration vs. Expressions
  5. Arrow Functions
  6. Functions Calling other Functions
  7. Reviewing Functions
  8. Introduction to Arrays
  9. Basic Operations (Methods)
  10. Introduction to Objects
  11. Dot . vs. Bracket {} Notation
  12. Object Methods
  13. Iteration: for loop
  14. Looping Arrays, Bracking and Continuing
  15. Looping Backword and Loops in Loops
  16. The while loop
Section 4: Developer Skills & Editor Setup
  1. Section Intro
  2. Setting up Prettier and VS Code
  3. Installing Node.js and Setting Up Dev Environment
  4. Learning How to Code?
  5. How to Think Like a Developer: Become a Problem Solver!
  6. Using Google, StackOverflow and MDN
  7. Dubbing (Fixing Errors)
  8. Debugging with the Console and Breakpoints
Section 5: JavaScript in the Browser: DOM and Events Fundamentals
  1. Section Intro and Roadmap
  2. PROJECT #1
  3. What's the DOM and DOM Manipulation
  4. Selecting and Manipulating Elements
  5. Handling Click Events
  6. PROJECT #2
  7. Manipulating CSS Style
  8. PROJECT #3
  9. Working with Classes
  10. Handling and Esc Keypress Even
  11. PROJECT #4
Section 6: How JavaScript Works Behind the Scenes
  1. Section Intro
  2. An High-Level Overview of JavaScript
  3. The JavaScript Engine and Runtime
  4. The JavaScript Context and The Call Stack
  5. Scope and The Scope Chain
  6. Scoping in Practice
  7. Variable Environment: Hoisting and TDZ
  8. Hoisting and TDZ in Practice
  9. The this Keyword
  10. The this Keyword Practice
  11. Regular Function vs. Arrow Functions
  12. Premetive vs. Objects ( Premitive vs. Reference Type )
  13. Premitives vs. Objects in Practice
Section 7: Data Structure, Modern Operators and Strings
  1. Section Intro
  2. Destructuring Arrays
  3. Destructuring Objects
  4. The Spread Operator ...
  5. Rest Pattern and Parameters
  6. Short Circutting && and ||
  7. The Nullish Coalescing Operator ??
  8. Logical Assignment Operators
  9. Looping Arrays: The for-of loop
  10. Enhanced Object Literals
  11. Operational Chaining ?.
  12. Looping Objects: Objects Keys, Values and Entries
  13. Sets
  14. Maps: Fundamental
  15. Maps: Iteration
  16. Summary: Which Data Structure to Use?
  17. Working with Strings - Part 1
  18. Working with Strings - Part 2
  19. Working With Strings - Part 3
  20. String Methods Practice
Section 8: A Closer Look at Functions
  1. Section Intro
  2. Default Parameters
  3. How Passing Arguments Works: Value vs. Reference
  4. First-Class and Higher-Order Functions
  5. Functions Accepting Callback Functions
  6. Function Returning Functions
  7. The Call and Apply Methods
  8. The Bind Method
  9. Immediately Invoke Function Expressions (IIFE)
  10. Closures
  11. More Closures Examples
Section 9: Working With Arrays
  1. Section Intor
  2. Simple Array Methods
  3. The new at Method
  4. Looping Arrays: forEach
  5. forEach with Maps and Sets
  6. PROJECT #5
  7. Creating DOM Elements
  8. Data Transfer: map, filter and reduce
  9. The Map Methods
  10. The filter method
  11. The reduce method
  12. The Magic of Chaining Methods
  13. The find method
  14. The findindex Method
  15. some and every
  16. Sorting Array
  17. flat and flatMap
  18. More Ways of Creating and Filling Arrays
  19. Summary: Which Arry Method to use?
  20. Array Method Practice
Section 10: Numbers, Dates, Intl and Timers
  1. Section Into
  2. Converting and Checking Numbers
  3. Math and Rounding
  4. The Remainder Operator
  5. Numberic Separators
  6. Working with BigInt
  7. Creating Dates
  8. Adding Dates to UI
  9. Operatons With Dates
  10. Internationalizing Dates(Intl)
  11. Internationalizing Numbers (Intl)
  12. Timers: setTimeout and setInterval
  13. Implementing a Countdown Timer
Section 11: Advanced DOM and Events
  1. Section Intro
  2. PROJECT #6
  3. How to DOM Really Works?
  4. Selecting, Creating, and Deleting Elements
  5. Styles, Attribures and Classes
  6. Implementing Smooth Scrolling
  7. Types of Events and Event Handlers
  8. Event Propagantion: Bubbling and Capturing
  9. Event Propagation in Practice
  10. Event Delegation: Implementing Page Navigation
  11. DOM Traversing
  12. Building a Tabbed Component
  13. Passing Arguments to Event Handlers
  14. Implementing a Sticky Navigation: The Scroll Event
  15. A Better Way: The Intersection Observer API
  16. Revealing Elements on Scroll
  17. Lazy Loading Images
  18. Building a Slider Cmoponent: Part 1
  19. Building a Slider Component: Part 2
  20. Lifecycle DOM Events
  21. Efficient Script Loading: defer and async
Section 12: Oject-Oriented Programming
  1. Section Intro
  2. What is object-oriented Programming?
  3. OPP in JavaScript
  4. Constructor Functions and the new Operator
  5. Prototype
  6. Prototypal Inheritance and The Prototype Chain
  7. Prototypal Inheritance on Bult-In Objects
  8. ES6 Classes
  9. Setters and Getters
  10. Static Mehtods
  11. Object.create
  12. Inheritance Between "Classes": Constructor Functions
  13. Inheritance Between "Classes": ES6 Clesses
  14. Inheritance Betwenn "Classes": Object.create
  15. Another Class Example
  16. Encapsulation: Protected Properties and Methods
  17. Chaining Methods
  18. ES6 Classes Summary
Section 13: Mapty App: OOP, Geolocation, External Libraries, and More!
  1. Section Intro
  2. Project #7 Overview
  3. How to Plan a Web Project
  4. Using the Geolocation API
  5. Desplaying a Map Using Leaflet Library
  6. Display a Map Maker
  7. Rendering Workout Input Form
  8. Project Archetecture
  9. Refectoring for Project Archetecture
  10. Managing Workout Data: Creating Classes
  11. Creating a New Workout
  12. Rendering Workouts
  13. Move to Marker On Click
  14. Workout with localStorage
  15. Final Considerations
Section 14: Asynchronous JavaScript: Promises, Async/Await, and AJAX
  1. Section Intro
  2. Asynchronous JavaScript, AJAX and APIs
  3. IMPORTANT: API URL change
  4. Our First AJAX Call: XHTMLHttpRequest
  5. [OPTIONAL]: How the Web Works: Request and Response
  6. Welcome to Callback Hell
  7. Promises and the Fetch API
  8. Consuming Promises
  9. Chainig Promises
  10. Handeling Rejected Promises
  11. Throwing Errors Manually
  12. Asynchronous Behind the Scenes: The Event Loop
  13. The Event Loop in Practice
  14. Building a Simple Promise
  15. Promisifying the Geolocation API
  16. Consuming Promises with Async/Await
  17. Error Handeling wiht try and catch
  18. Returning Values from Async functions
  19. Running Promises in Parallel
  20. Other Promise Combinators: race, allSettled and any
Section 15: Modern JavaScript Development: Modules, Tooling and Functional
  1. Section intro
  2. An Overview of Modern JavaScript Development
  3. An Overview of Modules in JavaScript
  4. Exporting and Importing in ES6 Modules
  5. Top-Level await (ES2022)
  6. The Module Pattern
  7. CommonJs Modules
  8. A Brief Introduction to the Command Line
  9. Introduction to NPM
  10. Bundling with Parcel and NPM Scripts
  11. Configuring Babel and Polyfiling
  12. Review: Writing Clean and Modern JavaScript
  13. Let's Fix Some Bad Code: Part 1
  14. Declarative and Functional JavaScript Principles
  15. Let's Fix Some Bad Code: Part 2
Section 16: COMPLETE PROJECT (Surprise)
Section 17: Setting Up Git and Deployement
  1. Section Intro
  2. Simple Deployement with Netlify
  3. Setting Up Git and GitHub
  4. Git Fundamentals
  5. Pushing to GitHub
  6. Setting Up Continuous Intregration with Netlify

Explore other resources :

YouTube