Live-Code Sessions

Watch Chris Ferdinandi live-code vanilla JS projects. Follow along, try it yourself first, or dig into the completed source code.

Watch now →

The Projects

1. Audio Player. Build a music app using the Audio API.
2. Notes App. Build a simple note taking app with the Local Storage API.
3. Scroll Progress. Show how far down the page the user has scrolled with an accessible progress bar.
4. Dice App. Roll digital dice for your table top role-playing games.
5. jQuery to Vanilla JS: The Lettering.js Plugin. Convert the Lettering.js jQuery plugin to vanilla JS.
6. jQuery to Vanilla JS: The FitVids Plugin. Convert the FitVids jQuery video plugin to vanilla JS.
7. Progressively Enhanced Accordions. Build a progressively enhanced accordion from the details and summary elements.
8. Simple Accordion. Build a simple JavaScript “show-and-hide” component.
9. Tip Calculator. Build a tip calculator app.
10. Vue to Vanilla JS: Markdown Editor. Convert the Vue.js markdown editor demo to vanilla JS.
11. Vue to Vanilla JS: GitHub Commits. Convert the Vue.js GitHub commits API demo to vanilla JS.
12. Caesar’s Cipher. Create an old-school secret message app.

How it works

There are two ways you can approach the live coding sessions:

1. Watch and learn. Watch me live-code the project, then dig into the source code and experiment with the finished project.
2. 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

Wanting to learn JavaScript from scratch, make the transition from jQuery or some other library? Already pretty competent and just want to get better?

Chris Ferdinandi has got your back and his learning platform is a *tremendously good value*.- Jonathan Schofield

Go from beginner to JavaScript expert

• Learn modern best practices and code patterns.
• Spend less time Googling and more time working on cool stuff.
• Get the skills and confidence to really understand JavaScript.
• Work on real projects and build your portfolio.

Your 100% Money-Back Guarantee 💰

Don’t put off learning vanilla JavaScript! If you’re not 100% satisfied with the live-coding sessions, let me know and I’ll give you a full refund.

Hi, I'm Chris Ferdinandi. 👋

I help people learn front-end web development, and I believe there’s a simpler, more resilient way to make things for the web.

I’ve advised and written code for organizations like NASA, Apple, Harvard Business School, Chobani, and Adidas. My developer tips newsletter is read by over 14k developers each weekday.

I want to help you master web development, without all of the painful false starts and roadblocks I encountered when I was learning.

[One of the] absolute webdev blogging MVP's of 2018- Chris Coyier

I thank you from the bottom of my heart. If it had not been for you, I would not be able to learn JavaScript.- Patricia Parker

God, you're amazing... I'm learning so much from you.- Mojtaba Seyedi, Front End Developer

Clarity. Brevity. Unpretentious explanation. Care for best practices. Obvious attentiveness. Available to help "unstuck" students. You actually rock, Chris.- Kabolobari Benakole

If you have any questions or comments, send me an email at chris@gomakethings.com.