WebInteractionfor Everyone

Modern frontend development made easy

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.

Interactive Slider Component

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!

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

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

Meet the Instructor

Kyle Schaeffer has been designing and building software for nearly two decades. He is a senior software engineer at Facet, and teaches a few classes in his spare time.

@kyleschaeffer

Kyle Schaeffer