Accordion Component

$Accordion Component

In this series, we’ll create an accessible accordion component with HTML, CSS, and JavaScript that will include keyboard events, ARIA attributes, ARIA roles, and more.

Popup Gallery

$Popup Gallery

In this series, we’ll create a popup modal with an infinite image slider with HTML, CSS, and JavaScript. Click on any image open its custom gallery.

Blog Post Filter

$Blog Post Filter

In this project, we use client-side JavaScript, HTML, and CSS to build out a fully-responsive blog post filter. As site visitors type, the JS filters 600 posts and dynamically displays the most recent posts matching the query.

Tab Component

$Tab Component

In this project, we’ll build out a tab component, focusing especially on accessibility and object oriented programming.

Blog Post Layout

$Blog Post Layout

Laying out a page with grid and flex box can be confusing. In this two part series, I’ll show you how to layout a page using a combination of grid and flex box. We’ll create a fully-responsive design with modern CSS.

Light Dark

$Light Dark

In this series, we’ll convert a site using hard-coded colors to use css variables, let the site automatically respond to the user’s system theme, and then manually choose betwen light and dark mode.

Review Slider

$Review Slider

Learn how to load and parse data from a JSON file, update the UI with customer reviews, and create an infinite carousel without transitions.

Image Slider

$Image Slider

Learn how to load and parse data from a JSON file, update the UI with images, clone the first and last elements, and create an infinite carousel slider with transitions.

Coffee Recipes

$Coffee Recipes

In this video, we’ll build a recipe app from scratch using Bootstrap and Vanilla JavaScript.

Audio Player

$Audio Player

We’re building out a fully-responsive audio music player with plain 'ol HTML, CSS, and JavaScript. We’ll be pulling the info from a “server” and then using that data to populate the UI and play the audio.

Notes App

$Notes App

In this three-part project, we’ll build a note taking app from scratch. We’ll use only HTML, CSS (well, SCSS), and Javascript and store all notes in the user’s local storage.