/complete-javascript-course

The Complete JavaScript course materials

Primary LanguageJavaScript

Course Materials and Projects made within the Complete JavaScript Course

This repo contains starter files and final code for all sections and projects contained in the course.

Starter (.js) files keep my own notes, solved tasks, assignments, and challenges. Final code was used to compare it with my own code whenever something didn't work!

👇 This is a description of what I have learned in each section 👇

Course Content

01-Fundamentals-Part-1

  • Demo notes: 01-Fundamentals-Part-1
  • Values and Variables
  • Data Types
  • let, const, and var
  • Basic Operators
  • Strings and Template Literals
  • If/else, switch Statement
  • Type Conversion and Coercion
  • Truthy and Falsy Values
  • Equality and Logical Operators
  • Expressions

02-Fundamentals-Part-2

  • Demo notes: 02-Fundamentals-Part-2
  • Functions
  • Function Declarations vs. Expressions
  • Arrow Functions
  • Arrays
  • Basic Array Operations (Methods)
  • Objects and their Methods
  • Iteration: The for and while Loops

03-Developer-Skills

  • Demo notes: 03-Developer-Skills
  • Prettier, VS Code, Node.js
  • Setting Up s Dev Environment
  • Debugging, Console, Breakpoints

04-HTML-CSS/final

  • Demo notes: 04-HTML-CSS/final
  • Basic HTML Structure and Elements
  • Attributes, Classes and IDs
  • CSS

05-Guess-My-Number

  • #f03c15 Demo app: 05-Guess-My-Number
  • DOM Manipulation
  • Handling Click Events
  • Refactoring the Code

06-Modal

  • #f03c15 Demo app: 06-Modal
  • Classes
  • Handlink Keypress Event

07-Pig-Game

  • #f03c15 Demo app: 07-Pig-Game
  • Implementing gained knowledge by building a pig game
  • Two players
  • The goal is to gain 21 score
  • When the dice throws 1, the player's score is reset to 0 and the turn goes to another player

08-Behind-the-Scenes

  • Demo notes: 08-Behind-the-Scenes
  • The JavaScript Engine and Runtime
  • Execution Context and The Call Stack
  • Scope and The Scope Chain
  • Variable Environment: Hoisting and the Temporal Dead Zone (TDZ)
  • The this Keyword
  • Regular Functions vs. Arrow Functions
  • Primitives vs. Objects (Primitive vs. Reference Types)

09-Data-Structures-Operators

  • Demo notes: 09-Data-Structures-Operators
  • Destructuring Arrays and Objects
  • The Spread Operator (...)
  • Rest Pattern and Parameters
  • Short Circuiting (&& and ||)
  • The Nullish Coalescing Operator (??)
  • Enhanced Object Literals
  • Optional Chaining (?.)
  • Looping Objects: Keys, Values, and Entries
  • Sets and Maps
  • Strings and their Methods

10-Functions

  • Demo notes: 10-Functions
  • Default Parameters
  • First-Class and Higher-Order Functions
  • Functions Accepting Callback Functions
  • Function returning Functions
  • The call, apply, and bind Methods
  • Immediately Invoked Function Expressions (IIFE)
  • Closures

11-Arrays-Bankist

  • #f03c15 Demo app: Bankist app
  • Login the app with user js and PIN 1111, or user jd and PIN 2222, or user stw and PIN 3333, or user ss and PIN 4444
  • The app shows current balance and basic statistics, transfers money, requests loans, closes accounts, sorts transactions
  • 23 array methods: forEach, map, filter, reduce, filter, find, some, every, flat, flatMap, and others.

12-Numbers-Dates-Timers-Bankist

  • #f03c15 Demo app: Bankist app
  • Login the app with user js and PIN 1111, or user jd and PIN 2222
  • This is an enhanced version of the Bankist app from section 11
  • Converting, Checking, Rounding numbers
  • The remainder operator
  • BigInt, Dates, Intl (Internationalization)
  • Timers: setTimeOut and setInterval

13-Advanced-DOM-Bankist

  • #f03c15 Demo app: Bankist website
  • Advanced DOM and Events
  • Styles, Attributes, and Classes
  • Smooth Scrolling, Page Navigation, Tabbed Component
  • Event Propagation: Bubbling and Capturing
  • The Scroll Events, Lazy Loading
  • Slider Component
  • Efficient Script Loading: defer and async

14-OOP

  • Demo notes: 14-OOP
  • Object-Oriented Programming theory, Abstraction, Encapsulation, Inheritance, and Polymorphism
  • Constructor functions and the new Operator
  • Prototypes, Prototypal Inheritance, and the Prototype Chain
  • ES6 Classes
  • Setters, Getters, Static Methods
  • Object.create()
  • Inheritance between Classes
  • Encapsulation: Protected Properties and Methods, Private Class Fields and Methods
  • Chaining Methods

15-Mapty

  • #f03c15 Demo app: Map your workouts app
  • Object-Oriented Programming project
  • Geolocation API
  • External Libraries (leaflet.js)
  • Project planning
  • Local Storage

16-Asynchronous

  • #f03c15 Demo app: Where am I?
  • Asynchronous JavaScript, AJAX and APIs
  • Callback Hell, Promises, and Fetch API
  • Consuming, Chaining, Handling Rejected Promises
  • Throwing Errors Manually
  • Building a Simple Promise, Promisifying the Geolocation API
  • Consuming Promises with Async/Await
  • Error Handling with try{} catch()
  • Returning Values from Async Functions
  • Running Promises in Parallel
  • Promise Combinators: race, allSettled, and any

17-Modern-JS-Modules-Tooling

  • Demo notes: 17-Modern-JS-Modules-Tooling
  • An Overview of Modern JavaScript Development
  • Modules, Exporting and Importing, the Module Pattern, CommonJS Modules
  • Command Line, NPM, Bundling with Parcel
  • Configuring Babel and Polyfilling
  • Declarative and Functional JavaScript Principles
  • Writing Clean and Modern JavaScript, Fixing Bad Code Tasks

18-forkify

  • #f03c15 Demo app: Forkify
  • Building a Modern Recipe application with custom recipe uploads
  • Project Planning
  • The MVC Architecture (Model-View-Controller)
  • Listening for load and hashchange Events
  • Event Handlers in MVC: Publisher-Subscriber Pattern
  • Bundling with Parcel

19-setting-up-git-and-deployment

  • Deployment of the Forkify app (from section 18) with Netlify
  • Git and GitHub
  • Setting Up Continuous Integration with Netlify (the app link is in the section 18)