Skip to content

Instantly share code, notes, and snippets.

@Insidiae

Insidiae/beginner-js-learning-club.md

Created June 11, 2022 04:40
Show Gist options
  • Save Insidiae/41a164d21b96b458dfc04a798bea3df6 to your computer and use it in GitHub Desktop.
Save Insidiae/41a164d21b96b458dfc04a798bea3df6 to your computer and use it in GitHub Desktop.
Download ZIP
Beginner JavaScript Learning Club
Raw
beginner-js-learning-club.md

Beginner JavaScript Learning Club

Learning Goal:

  • For beginners: Go from absolute beginners to "I can get some stuff done but don't feel totally comfortable"
  • For experienced devs: Fill in the holes in our skill set and refresh our existing JavaScript knowledge and pick up some new tips & tricks along the way

Learning Curriculum:

Wes Bos' Beginner JavaScript course

Schedule

Inspired by Wes Bos' #JavaScript30 challenge, I structured this schedule as a 1 month challenge to complete the Beginner JavaScript course. I divvied up the course content into 30 days, with each day having around 1 hour (based on the video lecture lengths) of learning material.

Week 1

  • Day 1: Welcome and Setup (1:04:57)
    • Welcome and Course Methodologies (03:41)
    • Browser, Editor and Terminal Setup (10:00)
    • Running and Loading JS (09:22)
    • Variables and Statements (20:15)
    • Code Quality Tooling with Prettier and ESLint (21:39)
  • Day 2: The Basics (1:08:33)
    • Types - Introduction (02:50)
    • Types - Strings (14:16)
    • Types - Numbers (11:26)
    • Types - Objects (04:01)
    • Types - null and undefined (04:58)
    • Types - Booleans and Equality (05:47)
    • Functions - Built in (14:32)
    • Functions - Custom (10:43)
  • Day 3: Functions (59:52)
    • Functions - Parameters and Arguments (22:35)
    • Different Ways to Declare Functions (37:17)
  • Day 4: The Tricky Bits (1:08:15)
    • Debugging Tools (27:06)
    • Scope (23:02)
    • Hoisting (05:29)
    • Closures (12:38)
  • Day 5: The DOM (52:02)
    • Introduction to the document (05:34)
    • Selecting Elements (11:30)
    • Element Properties and Methods (14:29)
    • Working with Classes (08:48)
    • Build in and Custom Data Attributes (11:41)
  • Day 6: Working with HTML and CSS (1:12:33)
    • Creating HTML (19:53)
    • HTML from Strings and XSS (19:10)
    • Traversing and Removing Nodes (11:11)
    • The DOM - CARDIO (22:19)
  • Day 7: Events Part 1 (49:18)
    • Event Listener (23:17)
    • targets, bubbling, propagation and capture (26:01)

Week 2

  • Day 8: Events Part 2 (1:09:45)
    • Prevent Default and Form Events (15:05)
    • Accesibility Gotchas and Keyboard Codes (09:20)
    • Exercise: Etch-a-Sketch (45:20)
  • Day 9: Serious Practice Exercises (1:05:07)
    • Click Outside Modal (23:57)
    • Scroll Events and Intersection Observer (19:16)
    • Tabs (21:54)
  • Day 10: Logic and Flow Control Part 1 (49:28)
    • BEDMAS (04:23)
    • Flow Control - If Statements, Function Returns, Truthy, Falsy (29:05)
    • Coercion, Ternaries and Conditional Abuse (16:00)
  • Day 11: Logic and Flow Control Part 2 + Objects Basics (54:51)
    • Case Switch and Animating a Turtle with CSS Variables (18:04)
    • Intervals and Timers (13:10)
    • Objects (23:37)
  • Day 12: Data Types (1:05:32)
    • Object Reference vs Values (18:02)
    • Maps (15:34)
    • Arrays (31:56)
  • Day 13: Array Cardio (1:05:13)
    • Static Methods (15:50)
    • Instance Methods (15:34)
    • Callback Methods and Function Generation (33:49)
  • Day 14: Gettin' Loopy Part 1 (44:10)
    • Array .forEach (11:53)
    • Mapping (21:33)
    • Filter, Find and Higher Order Functions (10:44)

Week 3

  • Day 15: Gettin' Loopy Part 2 (52:29)
    • Reduce (16:40)
    • Reduce Exercise (16:14)
    • for, for in, for of and while Loops (19:35)
  • Day 16: Face Detection and Censorship (54:31)
  • Day 17: Sarcastic Text Generator (22:53)
  • Day 18: Shopping Form with Custom Events, Delegation and localstorage (58:50)
  • Day 19: Building a Gallery Exercise (35:25)
  • Day 20: Building a Slider (34:22)
  • Day 21: Prototypes, 'this', 'new', and Inheritance Part 1 (40:03)
    • The New Keyword (11:44)
    • The this Keyword (10:35)
    • Prototype Refactor of the Gallery Exercise (17:44)

Week 4

  • Day 22: Prototypes, 'this', 'new', and Inheritance Part 2 (51:38)
    • Prototypes and Prototypal Inheritance (19:30)
    • Prototype Refactor of the Slider Exercise (12:23)
    • bind, call and apply (19:45)
  • Day 23: Advanced Flow Control (55:38)
    • The Event Loop and Callback Hell (17:44)
    • Promises (21:24)
    • Promises - Error Handling (07:31)
    • Refactoring Callback Hell to Promise Land (08:59)
  • Day 24: Async + Await (28:25)
    • Async Await (14:23)
    • Async Await Error Handling (14:02)
  • Day 25: Async + Await Exercises (1:02:02)
    • Async Await Prompt UI (43:44)
    • Async Typer UI - two ways (18:18)
  • Day 26: AJAX and Fetching Data Part 1 (53:00)
    • Ajax and APIs (18:13)
    • CORS and Recipes (34:47)
  • Day 27: AJAX and Fetching Data Part 2 (51:41)
    • Dad Jokes (23:11)
    • Currency Converter (28:30)
  • Day 28: ES Modules (1:02:10)
    • Modules (32:57)
    • Currency Modules Refactor (15:14)
    • Dad Jokes Modules Refactor (13:59)
  • Day 29: Structuring Larger Apps (1:06:00)
    • Bundling and Building with Parcel (15:06)
    • using open source npm packages (34:22)
    • Security (16:32)
  • Day 30: Final Round of Exercises (1:13:43)
    • Web Speech Colours Game (29:13)
    • Audio Visualization (44:30)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment