header mountains svg image

Modern
JavaScript

For Beginners

header mountains svg image

A modern, example led JavaScript
course for beginners.

Course Structure

#1 Introduction

  • Welcome To The Course
  • Let's See What JavaScript Can Do!
  • Download The Starter Files

#2 JavaScript Basics

  • Where To Add JavaScript
  • Async & Defer
  • Working With Strings
  • Storing Data With Variables
  • Mixing Strings With Variables
  • Data Types: Numbers
  • Data Types: Boolean, Null, & Undefined
  • Comments, Semi-colons & ASI
  • Operators: Assignment & Comparison
  • Operators: Logical & Arithmetic
  • Introduction To Arrays & Object Types
  • Introduction To Objects
  • Introduction To Functions

#3 Arrays In More Depth

  • The Array Constructor
  • Introduction To Properties, Methods & The Prototype
  • Modifying Arrays
  • Returning New Values
  • Iteration Methods
  • Reducers
  • Map & forEach
  • Array Destructuring
  • Unique Values With Set
  • Two Dimensional Arrays

#4 Functions

  • The Global Object & Built In Functions
  • Function Expressions
  • Immediately Invoked Function Expressions
  • Anonymous Or Named?
  • A Function Or a Method?
  • Arrow Functions
  • Default Parameter Values & Using Rest

#5 Events & The DOM

  • What Is The DOM?
  • Selecting Elements
  • Changing Values & Attributes
  • Changing An Elements CSS
  • Creating New Elements
  • Adding Elements To The Page
  • Cloning & Removing Elements
  • Mini Challenge: Create a New Section With JavaScript
  • Looping With DOM Elements
  • Introduction To Events
  • Listening For Events
  • Listening For Multiple Events & Event Data
  • Event Propagation
  • Running Events Once
  • Preventing Default Behaviour & The Passive Option
  • Removing Event Listeners
  • HTMLCollection Or NodeList?
  • Mini Challenge: Create a Dark Mode Button

#6 Time To Practice & Web API'S

  • Video Player Project- Creating The UI
  • Video Player Project- Events, Properties & Methods
  • Shape Drop Game- Creating The UI
  • Shape Drop Game- Drag & Drop Events
  • Shape Drop Game- Handling The Score & End of Game

#7 Loops & Conditionals

  • For Loops
  • For...in & For...of
  • While & do...while
  • If / Else Statements & Nesting
  • Else If
  • The Switch Statement
  • Conditional Operator (Ternary)
  • Type Coercion & Conversion
  • Truthy & Falsy
  • Optional Chaining

#8 Objects In More Depth

  • Creating & Modifying New Objects
  • Object Constructor Functions
  • Object Prototypes
  • Inheriting Object Prototypes
  • Copying Object Properties
  • CSS Style Objects
  • Looping With Objects
  • Dynamic Objects
  • Primitive & Reference Types
  • Comparing Objects

#9 Speedy Chef Project

  • Section Intro
  • Listing Orders
  • Listing Orders Refactor
  • Element Helper Function
  • Selecting The Current Order
  • Set The Current Pizza
  • Split & Join Strings
  • Adding Pizzas To The Oven
  • Starting & Ending The Game

#10 Math, Date & Timers

  • Introduction To JavaScript Math
  • Generating New Pizzas & Orders With Math
  • setInterval()
  • setTimeout()
  • Clearing Timers
  • Introduction To JavaScript Date
  • Setting The Cooking Time With Date

#11 Drawing With JavaScript

  • Introduction To The Canvas & Co-Ordinates
  • Setting Up The Ingredients
  • Drawing Circular Ingredients
  • Drawing Multiple Pieces
  • Clearing The Canvas

#12 Finishing Touches

  • Wasting Pizzas
  • Checking Steps
  • Completing The Order
  • Removing Orders From The Array
  • Updating The UI & Stats

#13 Scope, Hoisting & Closures

  • Introduction To Scope
  • Nesting Scope
  • Block & Function Scope
  • Hoisting
  • Temporal Dead Zone
  • Closures

#14 Async JavaScript

  • A Little Bit Of Background
  • Callbacks
  • Promises
  • The Promise Constructor
  • Handling Multiple Promises
  • Async / await
  • Handling Multiple Awaits
  • Error Handling

#15 More Practice

  • Leaving So Soon?
  • Image Carousel- Setting The Images
  • Image Carousel- Creating The Arrows
  • Image Carousel- Re-Ordering Images
  • Image Carousel- Swapping Images

Why Take This Course?

Learning any new skill can be tough and JavaScript is no exception! JavaScript has such a wide range of features and things it can do, meaning sometimes as beginners we have no idea where to even begin.

This is why I have created this class… Working from the very beginning, I will show you what JavaScript is, what it can do, and why we even use it at all. This class covers everything you need to know to become a competent JavaScript developer.

The class is beginner-focused for anybody new to JavaScript, or if you have a little experience and looking for an all-around class to take you to the next level. You should have at least a little experience with HTML & CSS to get the most out of this class.

Sign Up!

This class exceeded my expectations!
It is brilliant!

~ Suryanshu Rai