Projects
Work on real projects and learn by doing.
Each project includes detailed instructions, a starting template, and a walk through of the completed project. Work through projects on your own, or code along with me.
If you get stuck along the way, the private Slack community is a great place to ask questions and get help.
- Join now for free →
- 14 day free trial, then just $9/month
Password Visibility (series)
Write a script to toggle password visibility in form fields.
HTML JavaScriptCharacter Count (series)
Show the number of characters and words as a user types.
HTML JavaScript AccessibilityRandom Ron (series)
A Ron Swanson quote generator.
HTML JavaScript Accessibility APIsTemperature App (series)
Build a small app that converts the temperature from Fahrenheit to Celsius, or vice-versa.
HTML JavaScriptForm Autosave (series)
Write a script that automatically saves form fields.
HTML JavaScriptTip Calculator
Calculate how much each person owes (including tip) for a food bill.
HTML JavaScript AccessibilityPet Rescue
Display a list of adoptable dogs for an animal rescue.
HTML JavaScriptDragon Trainer (series)
Use an API to display stories on a magazine website.
HTML JavaScript APIsDice Library (series)
Use a variety of coding patterns to create a library you can use to roll digital dice.
JavaScriptDice Component (series)
Create a web component that developers can use to add interactive digital dice buttons in a variety of dice sizes to their UI.
HTML JavaScriptTreasure Chest (series)
A library that pirates can use to track the amount of loot they find on their travels.
JavaScriptAh! Monsters! (series)
Build a game where you find your monster friends.
HTML JavaScript AccessibilityLazy Load
Build a script that lazy loads videos from YouTube and Vimeo.
HTML JavaScriptSkwaks
An API-driven Twitter for Pirates.
HTML JavaScript APIsBin.js
A small library that makes working with localStorage easier.
JavaScriptSpork.js
Add structure to a library with ES modules.
JavaScript DevOpsGoing Offline
Add offline support to a restaurant website with Service Workers.
JavaScript DevOpsLoading Spinner
Build a Web Component that renders a loading spinner.
HTML JavaScript AccessibilityFilter UI
Use state-based UI to filter a list of dogs.
HTML JavaScriptComments API (series)
Build a serverless comments API that you can use to save comments to a database and display on a site.
HTML JavaScript DevOps APIsApp Testing (series)
Create a suite of JavaScript tests for a calculator app.
HTML JavaScript DevOpsSeven Seas (series)
A travel app for pirates.
HTML JavaScript DevOps- Join now for free →
- 14 day free trial, then just $9/month
This program is super hands-on. I always wanted to learn how to make my own libraries, or to know how jQuery library works. Async, Promises and Fetch was another huge one for me, that I used in my projects right away.
It gave me a lot of confidence as a developer, I wish I had a training like this when I started. It got me much closer to my goal of becoming a senior front-end dev.- Maria Blair