Building Website Interactivity with JavaScript

Course details

This project-based course dives deep into JavaScript, focusing on its practical applications in web development without relying on frameworks. Instructor Joe Chellman starts with the essentials of JavaScript interactivity and user experience enhancement, progressing through creating basic web components and developing a straightforward game. Joe emphasizes accessibility in web design, ensuring your projects are usable by everyone.

Experiment with building a simple, reusable web component and a game prototype, mastering both the fun and function of JavaScript. Suited for beginner and intermediate web designers and developers, this course requires only a foundational understanding of JavaScript, particularly functions and event handlers. Broaden your understanding of JavaScript's possibilities and enhance your web development skills.

Concepts

Introduction

JavaScript was made for interactivity
What you should know
Exercise files and Codespaces

Tools and Workflow

Using JavaScript responsibly
Finding a good editor or IDE
Using a debugger with Codespaces

Toggling Password Visibility

Understanding an accessible sign in form
Toggling the password via type change
Using data attributes for dynamic labeling
Syncing and swapping with a text field
Challenge - Sign up form with confirmation of password
Solution - Sign up form with confirmation of password

Accessible, Dismissible Dialogs

Reviewing a page to fulfill a design brief
Displaying modal information the old way
Displaying modal information the modern way
Handling multiple dialogs with event delegation
Making a dialog dismissible by backdrop
Adding a timer for self dismissal
Challenge - Displaying messages with dialog elements
Solution - Displaying messages with dialog elements

Sorting Table Data

Exploring an accessible data table
Collecting table data for sorting
Sorting arrays in JavaScript
Writing a custom sort function
Updating the HTML table with sorted data
Writing a custom numerical sort function
Challenge - Sorting a table of books
Solution - Sorting a table of books

Accessible Web Components

An overview of modern web component techniques
Creating a USA street address element
Adding JavaScript to the custom element
Refactoring a previous example as a custom element
Challenge - Cart line item component
Solution - Cart line item component

Starting to Build a Game

Inspecting the game prototype
Implementing basic interaction - Click to add
Reversing the interaction - Click to remove
Supporting the keyboard in the game
Allowing tiles to be dragged
Allowing tiles to be dropped
Adding animation to make interactions smoother
Challenge - Finalizing the basic gameplay
Solution - Finalizing the basic gameplay

Conclusion

Next steps