Magical Devs
Astro Recipes
Unlock course
Essential CSS
Unlock course
GTM For Developers
Unlock course
JavaScript Roadmap
Unlock course
Learn JavaScript
Unlock course
Mastering Web Typography
Unlock course
Understanding Async JS
Unlock course
Unorthodox Tailwind
Unlock course
API Masterclass
Unlock workshop
Build and Deploy
Unlock workshop
The Beginner Freelancer
Unlock workshop
Real World Node
Unlock workshop
 Profile Billing Logout
Learn JavaScript
Lesson Plan
  1. JavaScript and its ecosystem
    1. Welcome to Learn JavaScript!
      Unlock lesson
    2. What is JavaScript used for?
      Unlock lesson
    3. The JavaScript ecosystem
      Unlock lesson
    4. Varying versions of JavaScript
      Unlock lesson
  2. JS Basics
    1. Linking your JavaScript file
      Unlock lesson
    2. Preparing your text editor
      Unlock lesson
    3. The Console
      Unlock lesson
    4. Comments
      Unlock lesson
    5. On semicolons
      Unlock lesson
    6. Strings, numbers and booleans
      Unlock lesson
    7. Understanding Variables
      Unlock lesson
    8. Understanding Functions
      Unlock lesson
    9. The Flow of a Function
      Unlock lesson
    10. Arrow functions
      Unlock lesson
    11. Intro to objects
      Unlock lesson
    12. If/else statements
      Unlock lesson
    13. Comparing Objects
      Unlock lesson
    14. The NOT operator
      Unlock lesson
    15. Null and Undefined
      Unlock lesson
    16. The BOM and the DOM
      Unlock lesson
    17. Selecting an Element
      Unlock lesson
    18. Changing Classes
      Unlock lesson
    19. Listening to events
      Unlock lesson
    20. Callbacks
      Unlock lesson
  3. Building simple components
    1. How to think like a developer
      Unlock lesson
    2. Starter files and Source codes
      Unlock lesson
    3. Do this for every component
      Unlock lesson
    4. 🛠 Off-canvas menu: Building an off-canvas menu
      Unlock lesson
    5. 🛠 Modal: Building a Modal
      Unlock lesson
    6. Lessons from the building process
      Unlock lesson
    7. Debugging errors
      Unlock lesson
    8. How to use a linter
      Unlock lesson
  4. Arrays and loops
    1. Introduction to Arrays
      Unlock lesson
    2. Array methods
      Unlock lesson
    3. For loops
      Unlock lesson
    4. The forEach loop
      Unlock lesson
    5. Selecting multiple elements
      Unlock lesson
    6. Nodes vs Elements
      Unlock lesson
    7. 🛠 Accordion: Building an accordion
      Unlock lesson
  5. Dom basics
    1. Id, classes, attributes, and tags
      Unlock lesson
    2. Changing CSS with JavaScript
      Unlock lesson
    3. Getting CSS with JavaScript
      Unlock lesson
    4. Changing Attributes
      Unlock lesson
    5. Finding an element's size and position
      Unlock lesson
    6. DOM Traversals
      Unlock lesson
    7. 🛠 Tabby: Building Tabby (A Tabbed component)
      Unlock lesson
    8. 🛠 Carousel: HTML and CSS
      Unlock lesson
    9. 🛠 Carousel: Switching slides with JavaScript
      Unlock lesson
    10. 🛠 Carousel: Working the dots
      Unlock lesson
    11. 🛠 Carousel: Positioning slides with JavaScript
      Unlock lesson
  6. Events deep dive
    1. The listening element
      Unlock lesson
    2. Default Behaviors
      Unlock lesson
    3. Event propagation
      Unlock lesson
    4. Event delegation
      Unlock lesson
    5. Removing Event Listeners
      Unlock lesson
    6. 🛠 Modal: Closing the modal
      Unlock lesson
    7. 🛠 Accordion: Event delegation
      Unlock lesson
    8. 🛠 Tabby: Event delegation
      Unlock lesson
    9. 🛠 Carousel: Event delegation
      Unlock lesson
  7. Transitions and Animations
    1. CSS Transitions
      Unlock lesson
    2. CSS Animations
      Unlock lesson
    3. Silky-smooth animations
      Unlock lesson
    4. Integrating CSS transitions and animations with JavaScript
      Unlock lesson
    5. Animating with JavaScript
      Unlock lesson
    6. GreenSock Animation API (GSAP)
      Unlock lesson
    7. 🛠 Off-canvas menu: Animations
      Unlock lesson
    8. 🛠 Modal: Animating the modal
      Unlock lesson
    9. 🛠 Modal: Animating the pointing hand
      Unlock lesson
    10. 🛠 Modal: Animating the waving hand
      Unlock lesson
    11. 🛠 Modal: Wave hand animation with JavaScript (using GSAP)
      Unlock lesson
    12. 🛠 Accordion: Animations
      Unlock lesson
    13. 🛠 Carousel: Animations
      Unlock lesson
  8. Useful JS features
    1. Ternary operators
      Unlock lesson
    2. AND and OR operators
      Unlock lesson
    3. Early returns
      Unlock lesson
    4. Template Literals
      Unlock lesson
    5. Destructuring
      Unlock lesson
    6. Default parameters
      Unlock lesson
    7. Enhanced Object Literals
      Unlock lesson
    8. Rest and Spread
      Unlock lesson
    9. Useful array methods
      Unlock lesson
    10. Reduce
      Unlock lesson
    11. Looping through objects
      Unlock lesson
    12. Returning objects with implicit return
      Unlock lesson
    13. 🛠 Accordion: Using useful JavaScript features
      Unlock lesson
    14. 🛠 Tabby: Using useful JavaScript features
      Unlock lesson
    15. 🛠 Carousel: Useful JavaScript features
      Unlock lesson
  9. JS Best practices
    1. Write declarative code
      Unlock lesson
    2. Functions with a purpose
      Unlock lesson
    3. Manage scope
      Unlock lesson
    4. Reduce state changes
      Unlock lesson
    5. Don't reassign
      Unlock lesson
    6. Don't mutate
      Unlock lesson
    7. Preventing Objects from mutating
      Unlock lesson
    8. Preventing Arrays from mutating
      Unlock lesson
    9. Write pure functions
      Unlock lesson
    10. 🛠 Accordion: Refactor
      Unlock lesson
    11. 🛠 Carousel: First refactor
      Unlock lesson
    12. 🛠 Carousel: Refactoring the dots part
      Unlock lesson
    13. 🛠 Carousel: Previous and next buttons
      Unlock lesson
    14. 🛠 Carousel: Second refactor
      Unlock lesson
  10. Manipulating text and content
    1. Changing Text and HTML
      Unlock lesson
    2. Creating HTML Elements
      Unlock lesson
    3. Adding multiple elements to the DOM
      Unlock lesson
    4. Removing Elements from the DOM
      Unlock lesson
    5. 🛠 Carousel: Creating dots with JavaScript
      Unlock lesson
    6. 🛠️ Calculator: HTML and CSS
      Unlock lesson
    7. 🛠️ Calculator: Happy Path
      Unlock lesson
    8. 🛠️ Calculator: Testing the Happy Path
      Unlock lesson
    9. 🛠️ Calculator: Easy Edge Cases
      Unlock lesson
    10. 🛠️ Calculator: Difficult Edge Cases
      Unlock lesson
    11. 🛠️ Calculator: Refactoring
      Unlock lesson
    12. The switch statement
      Unlock lesson
    13. 🛠️ Calculator: Refactoring (Part 2)
      Unlock lesson
    14. 🛠️ Popover: Making one popover
      Unlock lesson
    15. 🛠️ Popover: Making four popovers
      Unlock lesson
    16. 🛠️ Popover: Making popovers with JavaScript
      Unlock lesson
  11. Handling Forms
    1. Intro to forms
      Unlock lesson
    2. Selecting form fields with JavaScript
      Unlock lesson
    3. Form fields and their events
      Unlock lesson
    4. Sanitize your output
      Unlock lesson
    5. Generating unique IDs
      Unlock lesson
    6. 🛠️ Popover: Dynamic ID
      Unlock lesson
    7. 🛠️ Todolist: The HTML and CSS
      Unlock lesson
    8. 🛠️ Todolist: Creating tasks with JavaScript
      Unlock lesson
    9. 🛠️ Todolist: Deleting tasks with JavaScript
      Unlock lesson
    10. 🛠️ Typeahead: The HTML and CSS
      Unlock lesson
    11. 🛠️ Typeahead: Displaying predictions
      Unlock lesson
    12. 🛠️ Typeahead: Selecting a prediction
      Unlock lesson
    13. 🛠️ Typeahead: Bolding search terms
      Unlock lesson
  12. Handling Dates
    1. The Date object
      Unlock lesson
    2. Getting a formatted date
      Unlock lesson
    3. Getting the time
      Unlock lesson
    4. Local time and UTC Time
      Unlock lesson
    5. Setting a specific date
      Unlock lesson
    6. Setting a date with Date methods
      Unlock lesson
    7. Adding (or subtracting) date and time
      Unlock lesson
    8. Comparing Dates and times
      Unlock lesson
    9. 🛠️ Datepicker: HTML and CSS
      Unlock lesson
    10. 🛠️ Datepicker: Building the calendar
      Unlock lesson
    11. 🛠️ Datepicker: Building the datepicker with JavaScript
      Unlock lesson
    12. 🛠️ Datepicker: Previous and Next buttons
      Unlock lesson
    13. 🛠️ Datepicker: Selecting a date
      Unlock lesson
    14. 🛠️ Datepicker: Positioning the datepicker
      Unlock lesson
    15. 🛠️ Datepicker: Showing and hiding
      Unlock lesson
    16. Formatting a date with toLocaleString
      Unlock lesson
    17. setTimeout
      Unlock lesson
    18. setInterval
      Unlock lesson
    19. 🛠️ Countdown timer: HTML and CSS
      Unlock lesson
    20. 🛠️ Countdown timer: JavaScript
      Unlock lesson
    21. 🛠️ Countdown timer: Counting Months
      Unlock lesson
    22. 🛠️ Countdown timer: Daylight Saving Time
      Unlock lesson
    23. 🛠️ Countdown timer: Counting Years
      Unlock lesson
  13. Async JS
    1. Introduction to Ajax
      Unlock lesson
    2. Understanding JSON
      Unlock lesson
    3. The Fetch API
      Unlock lesson
    4. Possible data types
      Unlock lesson
    5. JavaScript Promises
      Unlock lesson
    6. Requests and responses
      Unlock lesson
    7. Sending a POST request
      Unlock lesson
    8. Authentication
      Unlock lesson
    9. Handling errors
      Unlock lesson
    10. Viewing response headers
      Unlock lesson
    11. CORS and JSONP
      Unlock lesson
    12. XHR vs Fetch
      Unlock lesson
    13. Using an Ajax library
      Unlock lesson
    14. Reading API documentation
      Unlock lesson
    15. Understanding curl
      Unlock lesson
    16. 🛠️ Todolist: The Todolist API
      Unlock lesson
    17. 🛠️ Todolist: Fetching tasks
      Unlock lesson
    18. 🛠️ Todolist: Creating tasks
      Unlock lesson
    19. 🛠️ Todolist: Editing tasks
      Unlock lesson
    20. 🛠️ Todolist: Deleting tasks
      Unlock lesson
    21. 🛠️ Todolist: Creating tasks with Optimistic UI
      Unlock lesson
    22. 🛠️ Todolist: Handling Optimistic UI errors
      Unlock lesson
    23. 🛠️ Todolist: Editing tasks with Optimistic UI
      Unlock lesson
    24. 🛠️ Todolist: Deleting tasks with Optimistic UI
      Unlock lesson
    25. 🛠️ Todolist: Refactor
      Unlock lesson
    26. 🛠️ Typeahead: How to add Ajax
      Unlock lesson
    27. 🛠️ Typeahead: Adding Ajax
      Unlock lesson
    28. 🛠️ Typeahead: Handling errors
      Unlock lesson
    29. 🛠️ Google Maps Clone: Creating your first Google Map
      Unlock lesson
    30. 🛠️ Google Maps Clone: Fetching JSONP via JavaScript
      Unlock lesson
    31. 🛠️ Google Maps Clone: Drawing directions
      Unlock lesson
    32. 🛠️ Google Maps Clone: Driving directions
      Unlock lesson
    33. 🛠️ Google Maps Clone: Handling errors
      Unlock lesson
    34. 🛠️ Google Maps Clone: Adding stopovers
      Unlock lesson
    35. 🛠️ Google Maps Clone: Refactor
      Unlock lesson
  14. Advanced Async JS
    1. Requesting many resources at once
      Unlock lesson
    2. Asynchronous functions
      Unlock lesson
    3. Handling multiple awaits
      Unlock lesson
    4. Asynchronous loops
      Unlock lesson
    5. 🛠️ Dota Heroes: Listing heroes
      Unlock lesson
    6. 🛠️ Dota Heroes: Filtering heroes (Part 1)
      Unlock lesson
    7. 🛠️ Dota Heroes: Filtering heroes (Part 2)
      Unlock lesson
    8. 🛠️ Dota Heroes: Refactoring
      Unlock lesson
    9. 🛠️ Dota Heroes: Hero Page
      Unlock lesson
    10. 🛠️ Dota Heroes: Making the hero page robust
      Unlock lesson
    11. 🛠️ Dota Heroes: Heroes page refactor
      Unlock lesson
  15. Handling Keyboard Events
    1. Keyboard users
      Unlock lesson
    2. Handling commonly used keys
      Unlock lesson
    3. Keyboard events
      Unlock lesson
    4. Understanding Tabindex
      Unlock lesson
    5. Detecting the focused element
      Unlock lesson
    6. Directing focus
      Unlock lesson
    7. Preventing people from tabbing into elements
      Unlock lesson
    8. How to choose keyboard shortcuts
      Unlock lesson
    9. Creating single-key shortcuts
      Unlock lesson
    10. 🛠️ Off-canvas: Adding keyboard interaction
      Unlock lesson
    11. 🛠️ Modal: Adding keyboard interaction
      Unlock lesson
    12. 🛠️ Accordion: Adding keyboard interaction
      Unlock lesson
    13. 🛠️ Tabby: Adding keyboard interaction
      Unlock lesson
    14. 🛠️ Tabby: Refactoring
      Unlock lesson
    15. 🛠️ Carousel: Adding keyboard interaction
      Unlock lesson
    16. 🛠️ Carousel: Displaying help text
      Unlock lesson
    17. 🛠️ Calculator: Adding keyboard interaction
      Unlock lesson
    18. 🛠️ Popover: Keyboard
      Unlock lesson
    19. 🛠️ Popover: Refactor
      Unlock lesson
    20. Keyboard shortcuts with Command and Control modifiers
      Unlock lesson
    21. 🛠️ Todolist: Keyboard
      Unlock lesson
    22. 🛠️ Typeahead: Keyboard
      Unlock lesson
    23. 🛠️ Typeahead: Selecting a prediction with the keyboard
      Unlock lesson
    24. 🛠️ Google Maps Clone: Keyboard
      Unlock lesson
    25. 🛠️ Dota Heroes: Keyboard
      Unlock lesson
    26. 🛠️ Datepicker: Tabbing in and out
      Unlock lesson
    27. 🛠️ Datepicker: Keyboard shortcuts
      Unlock lesson
  16. Screen reader accessibility
    1. What is accessibility?
      Unlock lesson
    2. How to use a screen reader
      Unlock lesson
    3. Using NVDA
      Unlock lesson
    4. Using Voiceover
      Unlock lesson
    5. Aria roles
      Unlock lesson
    6. Landmark roles
      Unlock lesson
    7. Document structure roles
      Unlock lesson
    8. Live region roles
      Unlock lesson
    9. Widget roles
      Unlock lesson
    10. Window and Abstract roles
      Unlock lesson
    11. Accessible names and descriptions
      Unlock lesson
    12. Hiding content
      Unlock lesson
    13. ARIA properties and ARIA states
      Unlock lesson
    14. ARIA for expandable widgets
      Unlock lesson
    15. 🛠️ Off-canvas: Accessibility
      Unlock lesson
    16. ARIA for modal dialogs
      Unlock lesson
    17. 🛠️ Modal: Screen reader accessibility
      Unlock lesson
    18. 🛠️ Accordion: Screen reader accessibility
      Unlock lesson
    19. ARIA for Tabbed components
      Unlock lesson
    20. 🛠️ Tabby: Screen reader accessibility
      Unlock lesson
    21. 🛠️ Tabby: Refactor
      Unlock lesson
    22. 🛠️ Carousel: Screen reader accessibility
      Unlock lesson
    23. Roles that trigger Forms and Application modes
      Unlock lesson
    24. What's next for accessibility?
      Unlock lesson
  17. Handling Scroll
    1. The Scroll event
      Unlock lesson
    2. 🛠️ Auto-hiding Sticky-nav: HTML and CSS
      Unlock lesson
    3. 🛠️ Auto-hiding Sticky-nav: JavaScript
      Unlock lesson
    4. 🛠️ Auto-hiding Sticky-nav: Natural reveal
      Unlock lesson
    5. Intersection Observer API
      Unlock lesson
    6. Intersection Observer Options
      Unlock lesson
    7. 🛠️ Slide & Reveal
      Unlock lesson
    8. 🛠️ Slide & Reveal: Always fade-in when you scroll down
      Unlock lesson
    9. 🛠️ Slide & Reveal: Fine-tuning the animation
      Unlock lesson
    10. 🛠️ Infinite Scroll: Anatomy
      Unlock lesson
    11. 🛠️ Infinite Scroll: Infinite load
      Unlock lesson
    12. 🛠️ Infinite Scroll: Refactor
      Unlock lesson
    13. 🛠️ Infinite Scroll: Implementing the Infinite Scroll
      Unlock lesson
  18. Mouse, Touch, and Pointer events
    1. Mouse Events
      Unlock lesson
    2. 🛠️ Spinning Pacman: HTML and CSS
      Unlock lesson
    3. 🛠️ Spinning Pacman: JavaScript
      Unlock lesson
    4. Touch events
      Unlock lesson
    5. Pointer events
      Unlock lesson
    6. Touch-action
      Unlock lesson
    7. 🛠️ Spinning Pacman: Supporting Touch
      Unlock lesson
    8. Cloning elements
      Unlock lesson
    9. 🛠️ DragDrop: HTML and CSS
      Unlock lesson
    10. 🛠️ DragDrop: JavaScript
      Unlock lesson
    11. 🛠️ DragDrop: Creating a drop preview
      Unlock lesson
    12. 🛠️ DragDrop: Sortable drop preview
      Unlock lesson
    13. 🛠️ DragDrop: Robustness
      Unlock lesson
    14. 🛠️ DragDrop: Refactor
      Unlock lesson
  19. Object Oriented Programming
    1. Before we begin
      Unlock lesson
    2. What is Object Oriented Programming?
      Unlock lesson
    3. Four Flavours of Object Oriented Programming
      Unlock lesson
    4. Inheritance
      Unlock lesson
    5. This in JavaScript
      Unlock lesson
    6. Call, bind, apply
      Unlock lesson
    7. Creating Derivative Objects
      Unlock lesson
    8. Composition vs Inheritance
      Unlock lesson
    9. Polymorphism
      Unlock lesson
    10. Encapsulation
      Unlock lesson
    11. Closures
      Unlock lesson
    12. Encapsulation in Object Oriented Programming
      Unlock lesson
    13. Getters and Setters
      Unlock lesson
    14. What OOP flavour to use
      Unlock lesson
    15. When to use Object Oriented Programming
      Unlock lesson
  20. Writing reusable code
    1. Creating reusable code by writing libraries
      Unlock lesson
    2. Two Types of libraries
      Unlock lesson
    3. Including libraries with Script tags
      Unlock lesson
    4. Including libraries with ES6 Modules
      Unlock lesson
    5. Dynamic imports
      Unlock lesson
    6. 🛠️ Off Canvas: Building a Library
      Unlock lesson
    7. 🛠️ Modal: Library setup
      Unlock lesson
    8. 🛠️ Modal: Opening the Modal
      Unlock lesson
    9. 🛠️ Modal: Closing the modal
      Unlock lesson
    10. 🛠️ Modal: Inheritance and Polymorphism
      Unlock lesson
    11. 🛠️ Modal: Resolving differences between subclasses
      Unlock lesson
    12. 🛠️ Modal: Exposing properties and methods
      Unlock lesson
    13. 🛠️ Accordion: Building a library
      Unlock lesson
    14. 🛠️ Tabby: Building a library
      Unlock lesson
    15. 🛠️ Carousel: Building a library
      Unlock lesson
    16. 🛠️ Calculator: Library
      Unlock lesson
    17. 🛠️ Calculator: Fixing the Clear Key
      Unlock lesson
    18. 🛠️ Calculator: Handling other keys
      Unlock lesson
    19. 🛠️ Calculator: State
      Unlock lesson
    20. 🛠️ Popover: Library
      Unlock lesson
    21. 🛠️ Popover: Adding event listeners
      Unlock lesson
    22. 🛠️ Typeahead: Library
      Unlock lesson
    23. 🛠️ DatePicker: Library
      Unlock lesson
  21. Going from Vanilla JS to JS Frameworks
    1. 🛠️ Building a Tiny framework
      Unlock lesson
    2. 🛠️ Tiny: Add event listeners
      Unlock lesson
    3. 🛠️ Tiny: Updating state
      Unlock lesson
    4. 🛠️ Tiny: Rendering Child Components
      Unlock lesson
    5. 🛠️ Tiny: Changing Parent State
      Unlock lesson
    6. 🛠️ Tiny: Passing Props
      Unlock lesson
    7. 🛠️ Tiny: Multiple Props
      Unlock lesson
    8. 🛠️ Tiny: Passing values from sibling components
      Unlock lesson
    9. 🛠️ Tiny: Mounting
      Unlock lesson
    10. 🛠️ Tiny: Passing props to descendants
      Unlock lesson
    11. 🛠️ Tiny: A tiny refactor
      Unlock lesson
  22. Single Page Apps
    1. What is a Single Page App?
      Unlock lesson
    2. Simple SPA using only CSS
      Unlock lesson
    3. The Location Interface
      Unlock lesson
    4. The History Interface
      Unlock lesson
    5. Minimum viable server for a SPA
      Unlock lesson
    6. 🛠️ Dota SPA: Introduction
      Unlock lesson
    7. 🛠️ Dota SPA: Building The Heroes List
      Unlock lesson
    8. 🛠️ Dota SPA: Building the filters
      Unlock lesson
    9. 🛠️ Dota SPA: Filtering heroes
      Unlock lesson
    10. 🛠️ Dota SPA: Displaying filtered heroes
      Unlock lesson
    11. 🛠️ Dota SPA: Getting Ready to build the Hero Page
      Unlock lesson
    12. 🛠️ Dota SPA: Building the hero page
      Unlock lesson
    13. 🛠️ Dota SPA: Lore and abilities
      Unlock lesson
    14. 🛠️ Dota SPA: Routing for Single-page apps
      Unlock lesson

🛠 Tabby: Using useful JavaScript features

0m:12s
Source code

We can improve Tabby using the Array spread operator. (This is a minor & optional change).

// Change this
const tabs = Array.from(tabby.querySelectorAll('.tab'))
const tabContents = Array.from(tabby.querySelectorAll('.tab-content'))


// To this
const tabs = [...tabby.querySelectorAll('.tab')]
const tabContents = [...tabby.querySelectorAll('.tab-content')]