Web Interaction for Everyone
The Best Way to Learn Modern Front-End Development
What you’ll learn in this course:
-
Getting started
- What is web interaction?
- Configuring your development workspace
- Working with HTML, CSS, JavaScript, and the Document Object Model (DOM)
- Building your first interaction
-
Building interactive components from scratch
- Simple switch buttons
- Toggles
- Dismissibles
- Tabs
- Accordions
- Dropdown menus
- Modal dialogs
- Sortables
- Sliders
- To-do lists
-
Interaction development
- DOM manipulation and traversal
- JavaScript event listeners
- JavaScript component classes
- Working with asynchronous content
- Adding keyboard support
- Drag and drop
- Swipe gestures for touch screen devices
- Working with popular reactive frameworks like Vue.js
-
Interaction design
- Using CSS and SCSS modules
- CSS transitions
- CSS entry and exit animations
- ARIA attributes and accessibility
- ARIA “live” content and screen reader design considerations
- Working with popular UI frameworks like Bulma
Who should attend:
- This course is designed for anyone looking to improve their skill in front-end web development
- Developers of all skill levels will enjoy this course; we start out at a basic level, and quickly ramp up to more advanced techniques
- Introductory JavaScript programming concepts like variables, loops, and scope are not covered; if you’re an absolute beginner, this probably isn’t the course for you
- Concepts in each lesson are clearly communicated, yet fast-paced and respectful of your time
Let’s build something.
Throughout the duration of this course, we use practical real-world scenarios to demonstrate fundamental web interaction development techniques.
Upon completion, you’ll have built an entire library of common web interaction components, including toggles, tabs, accordions, sliders, and more. These components are production-ready and can be easily deployed to any web application.

I can now say goodbye to npm install bloat!
Taylor
Nice and fast, but not too fast. Great course.
Vikram
Sortables and drag/drop have been a mystery for years! Good stuff.
JamesMeet the Instructor

Kyle Schaeffer has been designing and building web applications for over fifteen years. With a focus on the intersection of design, user experience, and front-end development, he has created countless apps and websites for clients around the world.
With a degree in Information Systems and a background in design, Kyle explores the interactive science of app development, user experience, artificial intelligence, data science, and machine learning as it relates to web technology. He is the co-founder of Spiritous, where he leads a team of researchers and developers who build cutting-edge apps for clients around the globe. Outside of work, Kyle tries his hand as an amateur woodworker, musician, writer, and outdoorsman.
Course Outline
Getting Started FREE!

About This Course

Setting Up Your Workspace

Your First Web Interaction
Web Interaction

Events and Listeners

Reusable Components

Asynchronous Content

Component Classes

Lifecycle Events
Toggles

Simple Toggle

Accessibility and Animation

Dismissibles

Tabs

Accordions

Animation Break
Advanced Toggles

Dropdown Blur

Responsive Components

Dropdown Keyboard Support

Refactoring

Modal Dialogs

Dismiss Buttons

Focus Trapping
Sortables

Sortable Component

Sortable Improvements

Sortable Lifecycle Events

Sortable Keyboard Support

ARIA Live and Screen Readers
Sliders

Slider Styles

Slider Component

Slider Navigation Style

Touch Swiping

Slider Accessibility
Reactive Frameworks

Introduction to Vue.js

Building the Crave App in Vue.js

Wrapping Up with Exit Animations
Buy the Course
For Students
- Access to over 14 hours of instructional video content
- Unlimited future updates
- Stream videos from any device
- Download all video content for offline use
- Download all source code, including production-ready toggles, dropdowns, tabs, accordions, sliders, and sortables
For Teams
- Purchase any number of student licenses to be allocated to teammates at any time
- Save 10% when you purchase 5 or more student licenses
- Save 15% when you purchase 10 or more student licenses
How many students are on your team?
All prices are USD. Have a question? Want to pay via check? Contact us.
Still not sure? Try the first module completely free.