JavaScript projects for beginners.
15 self-paced projects with short lessons, starting templates, and source code. Complete them on your own, or code along with me.
🔥 Join the Vanilla JS Academy! A new session starts on April 3. Click here to learn more.
Get the JavaScript Projects Bundle for FREE
Join over 2,710 other people, and get instant access to all of the projects, lessons, templates, and source code.
How It Works
Each project includes a few short lessons and a template to get you started. Depending on your comfort level, you can...
- Do It Yourself (DIY). You can try to complete the project on your own, then come back and watch me explain my approach.
- Code Along. If you'd prefer, you can code along with me as I walk through my solution.
Each project builds on the next. You'll apply the skills you learn on one project in the one you build after it.
What You’ll Learn
You’ll learn how to…
- Get elements in the DOM
- Listen for user events
- Get and set text and HTML
- Loop over arrays and elements
- Climb up and down the DOM tree
- Transform and manipulate arrays
- Combine, modify, and split up strings
- Transform text case
- Find and replace text inside a string
- Schedule code to run in the future
- Interact with forms using JavaScript
- Save and load app data in the browser
- Create HTML-only accordions
- Write code that can be easily reused
- Build accessible apps and UI
🧠 Multiple formats for different learning styles. All tutorials are available in streaming HD videos with captions and as written lessons. Watch or read on any device.
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
Work on Fun Projects
Fortune Teller
Build an app that tells users their fortune.Table of Contents
Dynamically add a table of contents to a site based on page headings.Randomize
Build an app that helps you randomly choose from a list of options.GitHub API
Use the GitHub API to dynamically render a list of your repositories and profile details.Join today for free!
Get the JavaScript Projects Bundle for FREE
Join over 2,710 other people, and get instant access to all of the projects, lessons, templates, and source code.
Go from beginner to confident coder
- 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.
- Follow a structured learning path to grow your skills more quickly.
- Work on real projects and build your portfolio.
A Sample Lesson
Element.addEventListener() method.Hi, I'm Chris Ferdinandi. 👋
I help people learn vanilla JavaScript, and I believe there’s a simpler, more resilient way to make things for the web.
I’ve taught developers at organizations like Salesforce and the Boston Globe, and my JavaScript libraries have been used by organizations like Apple and Harvard Business School. My developer tips newsletter is read by over 14k developers each weekday.
I want to help you master vanilla JavaScript, without all of the painful false starts and roadblocks I encountered when I was learning.
Join today for free!
Get the JavaScript Projects Bundle for FREE
Join over 2,710 other people, and get instant access to all of the projects, lessons, templates, and source code.
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
I recommend Chris Ferdinandi to all JavaScript learners :)- Alex Muraro
Clarity. Brevity. Unpretentious explanation. Care for best practices. Obvious attentiveness. Available to help "unstuck" students. You actually rock, Chris.- Kabolobari Benakole
As a front-ender I always found JS difficult and made the mistake "solving" my lack of knowledge with the use of jQuery and a lot of plugins.
When I stumbled over your site and watched the video I had the feeling that for the first time I had an insight how JS works and how to learn it.- Ruud van Zuidam
Very cool! Vanilla JS guru Chris Ferdinandi put together a free self-paced JS educational program with a boatload of super clear resources. Bravo!- Jonathan Stark
Frequently Asked Questions
Do the projects use new ES6 methods?
Yes. Where applicable, I cover new ES6 functions and browser APIs.
How do I access my projects?
Visit the Student Portal and create an account with the email address you used to make your purchase.
You can download the projects any time, and stream your videos or read the tutorials from any device. You can also download the videos for offline viewing.
Do I need any special tools or equipment?
All you need to work with the source code and projects is a modern web browser and a text editor (I recommend VS Code).
Do I need any prior knowledge or experience to learn vanilla JavaScript?
Ideally you're comfortable working with HTML and CSS already. Experience with another library or framework (like jQuery, React, and so on) is helpful but not required. If you're brand new to JavaScript, the projects are a great resource! If you have any specific questions, though, please email me at chris@gomakethings.com.
I have another question.
No problem! Send me an email at chris@gomakethings.com.
God, you're amazing... I'm learning so much from you.- Mojtaba Seyedi, Front End Developer
Not ready yet? Get daily developer tips.
Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.