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

0. Introduction

01 - JavaScript was made for interactivity
02 - What you should know
03 - Exercise files and Codespaces

1. Tools and Workflow

04 - Using JavaScript responsibly
05 - Finding a good editor or IDE
06 - Using a debugger with Codespaces

2. Toggling Password Visibility

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

3. Accessible, Dismissible Dialogs

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

4. Sorting Table Data

21 - Exploring an accessible data table
22 - Collecting table data for sorting
23 - Sorting arrays in JavaScript
24 - Writing a custom sort function
25 - Updating the HTML table with sorted data
26 - Writing a custom numerical sort function
27 - Challenge - Sorting a table of books
28 - Solution - Sorting a table of books

5. Accessible Web Components

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

6. Starting to Build a Game

35 - Inspecting the game prototype
36 - Implementing basic interaction - Click to add
37 - Reversing the interaction - Click to remove
38 - Supporting the keyboard in the game
39 - Allowing tiles to be dragged
40 - Allowing tiles to be dropped
41 - Adding animation to make interactions smoother
42 - Challenge - Finalizing the basic gameplay
43 - Solution - Finalizing the basic gameplay

Conclusion

44 - Next steps