These are frontend projects built during live streams, with links to the source code, working demos, and YouTube playlists or videos. Most projects are made with HTML, vanilla CSS and JavaScript; three things a broswer renders natively. Examples of my client work are available upon request.
Designed in 2015, and meant to be a WordPress theme, I found this PSD when I was browsing old files. I decided instead to build it as a static website using HTML, vanilla CSS and JavaScript. It also has a working contact form using a Form Spree endpoint.
Designed in 2014 as a one page landing site, I found this PSD when I was browsing old files. I decided to build it as a static website using HTML, vanilla CSS and JavaScript. It also has a working contact form using a Form Spree endpoint.
Responsive Video Gallery was my first open source project, originally built in December 2013 using jQuery. After more than a decade, I rebuilt the UI with only vanilla JavaScript to remove all dependencies. I also included a toggle for light and dark mode.
This demo page is an example of a responsive and accessible navbar. After years fine tuning my process for building navigation, this system ensures navigation is both mobile responsive and accessible for screen readers and keyboard navigation.
This landing page is a clone of the KnitPicks.com homepage. Using my own assets, color scheme, images and content; and I copied the layout. Fiber & Kraft is a personal project for my my knitting, crocheting, spinning and yarn dyeing hobbies.
Follow along as I build my new website from the ground up using PHP, semantic HTML, SCSS, and vanilla JavaScript. There's plenty of project planning, QA, and real-time problem solving along the way—just like a real dev workflow.
In this project, we dive into the early stages of front-end project planning. Watch as we write user stories to define project goals and build a custom style guide using Affinity Photo. These videos lay the groundwork for strong, focused UI development.
Join me as I tackle a fun Frontend Mentor challenge where I'll build a product list with an interactive shopping cart from scratch! We'll dive into HTML, CSS, and JavaScript to create a clean, responsive layout, and I'll walk you through adding key features like item quantities, total pricing, and cart updates.
Follow along as I build a responsive blog-style layout from a Photoshop mockup using HTML, SCSS, and JavaScript. In this series, I cover key steps from design setup to clean, accessible code, perfect for anyone looking to sharpen their front-end skills.
In this 2-part live stream series, watch as I walk through the step-by-step process of building a responsive masonry layout using HTML, SCSS, and JavaScript. From setting up the structure to creating a dynamic, Pinterest-style grid, you'll learn how to create a beautiful and functional layout that adapts to different screen sizes.
In this live stream series, we'll break down building a modal window step by step using HTML, SCSS, and JavaScript. From the basic structure to styling and adding interactive features, you'll have everything you need to create your own custom modals.
In this project, we're turning a Photoshop mockup into a fully functional landing page called Soho using HTML, vanilla CSS, and JavaScript. Over the course of eight live streams, we dive deep into creating a page that's responsive, accessible, and packed with smooth navigation and submenus (we spent 4 videos perfecting them).