Components

Starter template

Lesson	Starter files	Source code
Starter files and Source codes

Off canvas menu

Lesson	Starter files	Source code
🛠 Off-canvas menu: Building an off-canvas menu
🛠 Off-canvas menu: Animations
🛠️ Off-canvas: Adding keyboard interaction
🛠️ Off-canvas: Accessibility
🛠️ Off Canvas: Building a Library

Modal

Lesson	Starter files	Source code
🛠 Modal: Building a Modal
🛠 Modal: Closing the modal
🛠 Modal: Animating the modal
🛠 Modal: Animating the pointing hand
🛠 Modal: Animating the waving hand
🛠 Modal: Wave hand animation with JavaScript (using GSAP)
🛠️ Modal: Adding keyboard interaction
🛠️ Modal: Screen reader accessibility
🛠️ Modal: Library setup
🛠️ Modal: Opening the Modal
🛠️ Modal: Closing the modal
🛠️ Modal: Inheritance and Polymorphism
🛠️ Modal: Resolving differences between subclasses
🛠️ Modal: Exposing properties and methods

Accordion

Lesson	Starter files	Source code
🛠 Accordion: Building an accordion
🛠 Accordion: Event delegation
🛠 Accordion: Animations
🛠 Accordion: Using useful JavaScript features
🛠 Accordion: Refactor
🛠️ Accordion: Adding keyboard interaction
🛠️ Accordion: Screen reader accessibility
🛠️ Accordion: Building a library

Tabby

Lesson	Starter files	Source code
🛠 Tabby: Building Tabby (A Tabbed component)
🛠 Tabby: Event delegation
🛠 Tabby: Using useful JavaScript features
🛠️ Tabby: Adding keyboard interaction
🛠️ Tabby: Refactoring
🛠️ Tabby: Screen reader accessibility
🛠️ Tabby: Refactor
🛠️ Tabby: Building a library

Carousel

Lesson	Starter files	Source code
🛠 Carousel: HTML and CSS
🛠 Carousel: Switching slides with JavaScript
🛠 Carousel: Working the dots
🛠 Carousel: Positioning slides with JavaScript
🛠 Carousel: Event delegation
🛠 Carousel: Animations
🛠 Carousel: Useful JavaScript features
🛠 Carousel: First refactor
🛠 Carousel: Refactoring the dots part
🛠 Carousel: Previous and next buttons
🛠 Carousel: Second refactor
🛠 Carousel: Creating dots with JavaScript
🛠️ Carousel: Adding keyboard interaction
🛠️ Carousel: Displaying help text
🛠️ Carousel: Screen reader accessibility
🛠️ Carousel: Building a library

Calculator

Lesson	Starter files	Source code
🛠️ Calculator: HTML and CSS
🛠️ Calculator: Happy Path
🛠️ Calculator: Testing the Happy Path
🛠️ Calculator: Easy Edge Cases
🛠️ Calculator: Difficult Edge Cases
🛠️ Calculator: Refactoring
🛠️ Calculator: Refactoring (Part 2)
🛠️ Calculator: Adding keyboard interaction
🛠️ Calculator: Library
🛠️ Calculator: Fixing the Clear Key
🛠️ Calculator: Handling other keys
🛠️ Calculator: State

Popover

Lesson	Starter files	Source code
🛠️ Popover: Making one popover
🛠️ Popover: Making four popovers
🛠️ Popover: Making popovers with JavaScript
🛠️ Popover: Dynamic ID
🛠️ Popover: Keyboard
🛠️ Popover: Refactor
🛠️ Popover: Library
🛠️ Popover: Adding event listeners

Todolist

Lesson	Starter files	Source code
🛠️ Todolist: The HTML and CSS
🛠️ Todolist: Creating tasks with JavaScript
🛠️ Todolist: Deleting tasks with JavaScript
🛠️ Todolist: The Todolist API
🛠️ Todolist: Fetching tasks
🛠️ Todolist: Creating tasks
🛠️ Todolist: Editing tasks
🛠️ Todolist: Deleting tasks
🛠️ Todolist: Creating tasks with Optimistic UI
🛠️ Todolist: Handling Optimistic UI errors
🛠️ Todolist: Editing tasks with Optimistic UI
🛠️ Todolist: Deleting tasks with Optimistic UI
🛠️ Todolist: Refactor
🛠️ Todolist: Keyboard

Typeahead

Lesson	Starter files	Source code
🛠️ Typeahead: The HTML and CSS
🛠️ Typeahead: Displaying predictions
🛠️ Typeahead: Selecting a prediction
🛠️ Typeahead: Bolding search terms
🛠️ Typeahead: How to add Ajax
🛠️ Typeahead: Adding Ajax
🛠️ Typeahead: Handling errors
🛠️ Typeahead: Keyboard
🛠️ Typeahead: Selecting a prediction with the keyboard
🛠️ Google Maps Clone: Keyboard
🛠️ Typeahead: Library

Datepicker

Lesson	Starter files	Source code
🛠️ Datepicker: HTML and CSS
🛠️ Datepicker: Building the calendar
🛠️ Datepicker: Building the datepicker with JavaScript
🛠️ Datepicker: Previous and Next buttons
🛠️ Datepicker: Selecting a date
🛠️ Datepicker: Positioning the datepicker
🛠️ Datepicker: Showing and hiding
🛠️ Datepicker: Tabbing in and out
🛠️ Datepicker: Keyboard shortcuts
🛠️ DatePicker: Library

Countdown

Lesson	Starter files	Source code
🛠️ Countdown timer: HTML and CSS
🛠️ Countdown timer: JavaScript
🛠️ Countdown timer: Counting Months
🛠️ Countdown timer: Daylight Saving Time
🛠️ Countdown timer: Counting Years

Google map

Lesson	Starter files	Source code
🛠️ Google Maps Clone: Creating your first Google Map
🛠️ Google Maps Clone: Fetching JSONP via JavaScript
🛠️ Google Maps Clone: Drawing directions
🛠️ Google Maps Clone: Driving directions
🛠️ Google Maps Clone: Handling errors
🛠️ Google Maps Clone: Adding stopovers
🛠️ Google Maps Clone: Refactor

Dota

Lesson	Starter files	Source code
🛠️ Dota Heroes: Listing heroes
🛠️ Dota Heroes: Filtering heroes (Part 1)
🛠️ Dota Heroes: Filtering heroes (Part 2)
🛠️ Dota Heroes: Refactoring
🛠️ Dota Heroes: Hero Page
🛠️ Dota Heroes: Making the hero page robust
🛠️ Dota Heroes: Heroes page refactor
🛠️ Dota Heroes: Keyboard

Sticky nav

Lesson	Starter files	Source code
🛠️ Auto-hiding Sticky-nav: HTML and CSS
🛠️ Auto-hiding Sticky-nav: JavaScript
🛠️ Auto-hiding Sticky-nav: Natural reveal

Slide reveal

Lesson	Starter files	Source code
🛠️ Slide & Reveal
🛠️ Slide & Reveal: Always fade-in when you scroll down
🛠️ Slide & Reveal: Fine-tuning the animation

Infinite scroll

Lesson	Starter files	Source code
🛠️ Infinite Scroll: Anatomy
🛠️ Infinite Scroll: Infinite load
🛠️ Infinite Scroll: Refactor
🛠️ Infinite Scroll: Implementing the Infinite Scroll

Spinning pacman

Lesson	Starter files	Source code
🛠️ Spinning Pacman: HTML and CSS
🛠️ Spinning Pacman: JavaScript
🛠️ Spinning Pacman: Supporting Touch

Drag drop

Lesson	Starter files	Source code
🛠️ DragDrop: HTML and CSS
🛠️ DragDrop: JavaScript
🛠️ DragDrop: Creating a drop preview
🛠️ DragDrop: Sortable drop preview
🛠️ DragDrop: Robustness
🛠️ DragDrop: Refactor

Tiny

Lesson	Starter files	Source code
🛠️ Building a Tiny framework
🛠️ Tiny: Add event listeners
🛠️ Tiny: Updating state
🛠️ Tiny: Rendering Child Components
🛠️ Tiny: Changing Parent State
🛠️ Tiny: Passing Props
🛠️ Tiny: Multiple Props
🛠️ Tiny: Passing values from sibling components
🛠️ Tiny: Mounting
🛠️ Tiny: Passing props to descendants
🛠️ Tiny: A tiny refactor

Dota spa

Lesson	Starter files	Source code
🛠️ Dota SPA: Introduction
🛠️ Dota SPA: Building The Heroes List
🛠️ Dota SPA: Building the filters
🛠️ Dota SPA: Filtering heroes
🛠️ Dota SPA: Displaying filtered heroes
🛠️ Dota SPA: Getting Ready to build the Hero Page
🛠️ Dota SPA: Building the hero page
🛠️ Dota SPA: Lore and abilities
🛠️ Dota SPA: Routing for Single-page apps