Web Interaction for Everyone

Updated June 2019

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
Buy the Course →

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.

Taylor

I can now say goodbye to npm install bloat!

Taylor
Vikram

Nice and fast, but not too fast. Great course.

Vikram
James

Sortables and drag/drop have been a mystery for years! Good stuff.

James

Meet the Instructor

Kyle Schaeffer

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.

@kyleschaeffer

Course Outline

6 modules
34 lessons
14 hours

Getting Started FREE!

About This Course

About This Course

6:53
Setting Up Your Workspace

Setting Up Your Workspace

7:51
Your First Web Interaction

Your First Web Interaction

42:17
Events and Listeners

Events and Listeners

22:03
Reusable Components

Reusable Components

9:51
Asynchronous Content

Asynchronous Content

32:58
Component Classes

Component Classes

32:58
Lifecycle Events

Lifecycle Events

14:28

Toggles

Simple Toggle

Simple Toggle

30:52
Accessibility and Animation

Accessibility and Animation

34:09
Dismissibles

Dismissibles

20:13
Tabs

Tabs

44:21
Accordions

Accordions

11:27
Animation Break

Animation Break

46:40

Advanced Toggles

Dropdown Blur

Dropdown Blur

31:57
Responsive Components

Responsive Components

23:07
Dropdown Keyboard Support

Dropdown Keyboard Support

25:09
Refactoring

Refactoring

46:04
Modal Dialogs

Modal Dialogs

29:19
Dismiss Buttons

Dismiss Buttons

12:34
Focus Trapping

Focus Trapping

10:17

Sortables

Sortable Component

Sortable Component

52:54
Sortable Improvements

Sortable Improvements

18:29
Sortable Lifecycle Events

Sortable Lifecycle Events

8:32
Sortable Keyboard Support

Sortable Keyboard Support

16:20
ARIA Live and Screen Readers

ARIA Live and Screen Readers

25:04

Sliders

Slider Styles

Slider Styles

15:44
Slider Component

Slider Component

33:56
Slider Navigation Style

Slider Navigation Style

16:16
Touch Swiping

Touch Swiping

35:04
Slider Accessibility

Slider Accessibility

7:55

Reactive Frameworks

Introduction to Vue.js

Introduction to Vue.js

40:58
Building the Crave App in Vue.js

Building the Crave App in Vue.js

27:01
Wrapping Up with Exit Animations

Wrapping Up with Exit Animations

16:27

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
Buy Student $99
Powered by Stripe

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?

Buy Team $446
Powered by Stripe

All prices are USD. Have a question? Want to pay via check? Contact us.

Still not sure? Try the first module completely free.