Watch Chris Ferdinandi live-code vanilla JS projects. Follow along, try it yourself first, or dig into the completed source code.
- Audio Player. Build a music app using the Audio API.
- Notes App. Build a simple note taking app with the Local Storage API.
- Scroll Progress. Show how far down the page the user has scrolled with an accessible progress bar.
- Dice App. Roll digital dice for your table top role-playing games.
- jQuery to Vanilla JS: The Lettering.js Plugin. Convert the Lettering.js jQuery plugin to vanilla JS.
- jQuery to Vanilla JS: The FitVids Plugin. Convert the FitVids jQuery video plugin to vanilla JS.
- Progressively Enhanced Accordions. Build a progressively enhanced accordion from the
- Tip Calculator. Build a tip calculator app.
- Vue to Vanilla JS: Markdown Editor. Convert the Vue.js markdown editor demo to vanilla JS.
- Vue to Vanilla JS: GitHub Commits. Convert the Vue.js GitHub commits API demo to vanilla JS.
- Caesar’s Cipher. Create an old-school secret message app.
How it works
There are two ways you can approach the live coding sessions:
- Watch and learn. Watch me live-code the project, then dig into the source code and experiment with the finished project.
- Try to build it on your own. Once you know what I’m trying to build, you can go off and try it yourself first. Then, come back and watch how I approached the same project.
📱Stream in HD video, or download the original DRM-free MP4 video file on any device. You also get the completed source code for every project
- Learn modern best practices and code patterns.
- Spend less time Googling and more time working on cool stuff.
- Work on real projects and build your portfolio.
Your 100% Money-Back Guarantee 💰
Hi, I'm Chris Ferdinandi. 👋
The Complete Package
Get the complete live-coding sessions.
- All 9 Live-Coding Sessions
- Streaming HD Video
- Downloadable Videos (in DRM-free MP4 format)
- The Source Code
If you have any questions or comments, send me an email at firstname.lastname@example.org.