State-Based UI
Learn how to build fast and efficient interactive websites and web apps.
Learn the ins-and-outs of state-based UI, data reactivity, and DOM diffing in about an hour.
This guide is short, focused, and made for beginners. Get hands-on learning and grow your portfolio building a real, working web app.
🔥 Just Updated! This guide was just completely updated based on emerging trends and changes in how modern state-based UI libraries approach building sites and apps.
🔥 Cyber Monday Sale (extended)! This week only, save 50% on every ebook, video course, and bundle. If you buy a bundle, you'll also get $673 in free bonus gifts. This sale ends this week, so don't wait!
What you’ll learn
- What state is in JavaScript.
- What state-based UI is, and when and why you might use it.
- How to create simple state-based UI components.
- What data reactivity is.
- Different approaches for making data reactive.
- How to improve UI rendering performance with state-based UI and data reactivity.
- What DOM diffing is, how it works, and why it’s important.
- What the virtual DOM is, and whether or not it’s necessary.
🧠 Multiple formats for different learning styles. Available in streaming HD videos with captions, and written lessons in ebook format. Watch or read on any device.
Loved your book, it's become a daily reference for me. Fantastic stuff!- Chris Baughman
Learn by doing with a real JavaScript project
Reinforce your learning and build your portfolio by working on a real project. Together, we’ll build a web app that filters a list of dogs by age, size, and whether or not they get along with cats.
BONUS: Don't go it alone! Upgrade to a bundle and get exclusive Discord access.
Upgrade to one of the Pocket Guide Bundles and you'll also get exclusive access to my private Discord community, where you can chat with other students, get feedback on code, and ask questions to help you get unstuck and deepen your understanding.
This is not available for sale at any price, and my students regularly tell me it's one of the most valuable things that comes with the guides.
The cheat sheet and the ability to ask questions on Slack were worth the price of the book alone.- David Buchholz
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.
- Follow a learning path or jump around based on your needs.
- Work on real projects and build your portfolio.
A Sample Lesson
Try it for free
Want to get a sense for what my pocket guides are like? Get a free copy of the DOM Manipulation guide in PDF format.
This isn't a sample chapter. It's the full guide. The paid version comes in more formats and includes the source code for the lessons and project.
Your 100% Money-Back Guarantee 💰
Don’t put off learning vanilla JavaScript! If you’re not 100% satisfied with the pocket guides, let me know and I’ll give you a full refund.
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.
Ready to buy?
Get everything you need to start building web apps with vanilla JavaScript:
- The Pocket Guide (in ebook format, streaming HD video, or both)
- The Source Code & Demos
- FREE Updates for Life
🔥 Cyber Monday Sale (extended)! This week only, save 50% with the code BLACKFRIDAY2023 at checkout.
Want to save over 40% and get exclusive Slack access? Get this pocket guide as part of the Complete Set or Level-Up Bundle.
Join over 1,780 other people and start learning JavaScript now.
If you’re a beginner, or just looking to fill in some knowledge gaps, the Vanilla JavaScript Pocket Guides from Chris Ferdinandi are clear, informative and to the point. Cannot recommend enough!- Dino Koutrouzas
I've been stuck on the same JavaScript project for AGES, but I'm so happy because I've finally managed to finish it all thanks to Chris Ferdinandi!
I found out about him, signed up for his daily newsletter and bought his Vanilla JS Guides. I'm so glad I did because I've only worked through two of the guides and yet he's COMPLETELY changed the way I think about JavaScript.
Putting everything he's taught me into practice, I managed to rewrite the project over a weekend! He was even kind enough to personally help me on Slack with an aspect I was particularly struggling with... I SERIOUSLY recommend checking him out! 😄
- Kieran Barker
Chris’s pocket guides are great. I definitely recommend picking them up if you’re learning or interested in learning Vanilla JavaScript.- Scott Tirrell
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
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
Frequently Asked Questions
Do the pocket guides include new ES6 methods?
Yes. Where applicable, I cover new ES6 functions and browser APIs. I also include polyfills when available to push browser support as far back as possible.
What happens if I buy a pocket guide and you release an update? Do I get free updates?
Yes, you get free updates for life. You'll get an email letting you know whenever new content is available.
Do you offer any discounts?
Absolutely! There are three discount programs available:
- Student Discount. This applies to anyone in any type of schooling, including evening classes and coding bootcamps. Learn more about student discounts.
- Under-Represented Groups in Tech. I've had a lot of helping getting where I am, and I want to pay it forward. If you're a member of an under-represented group in tech, you can get special pricing. Learn more about discounts for under-represented groups in tech.
- Location-Based Pricing. I totally get that in some countries salaries and cost of living are such that the Vanilla JS Pocket Guides are unaffordable. These should show up automatically at checkout, but if they don't, send me an email at chris@gomakethings.com, and I'll send you a discount to make it fair for where you live.
If I buy just one guide and love it, can I upgrade to a bundle? What if I buy the ebooks and decide I want the videos, too?
Absolutely. Just send me an email at chris@gomakethings.com
I'll upgrade you to the bundle or format you want. You'll only have to pay the difference in price between what you purchased and the bundle or format you want.
How do I access my pocket guides and videos?
Visit and create an account with the email address you used to make your purchase.
You can download your guides at any time, and stream your video courses 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). The pocket guides come in PDF, EPUB, MOBI, and HTML formats, so you can read it on any device you own. The videos can be streamed on any device.
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 guides are a great resource! If you have any specific questions, though, please email me at chris@gomakethings.com.
Are there any rules or requirements around the Slack team?
Yes. You must be at least 18 years old, and read and agree to follow the Code of Conduct.
Do you have a return policy?
Absolutely! If you’re not 100% satisfied with the pocket guide, email me at chris@gomakethings.com and I’ll give you a full refund.
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
Ever wanted to ditch jQuery but not sure how? This book by Chris Ferdinandi will set you on the right path.- Jeremy Green
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.