I’ll show the basics of Tailwind 3, including how to customize and extend it. Then we’ll build out a fully-responsive light/dark mode landing page from scratch.
In this video, I'll show you how to create a fully responsive navigation menu with HTML, CSS, and Vanilla JavaScript. We’ll add aria attributes to achieve a basic accessible navigation.
Using the Google Calendar API, we’ll build out a custom event’s page with Tailwind CSS and vanilla JavaScript. We’ll also setup a Netlify serverless function to safely handle the API calls.
We’ll build custom SVG world clocks in both functional and object oriented programming styles using the requestAnimationFrame API and the date-fns library.
In this series, we’ll create a light-weight CMS using a Notion database, the Notion SKD for JavaScript, a Netlify serverless function with the Netlify CLI, and a few other tools.
In this video, we’ll create an accessible accordion component with HTML, CSS, and JavaScript that will include keyboard events, ARIA attributes, ARIA roles, and more.
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.
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.
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.
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.
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.
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.