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