Build interactive components that work for everyone who uses your site or app.
Learn the ins-and-outs of building accessible interactive UI components in about an hour.
This guide is short, focused, and made for beginners. Get hands-on learning and grow your portfolio by building a collection of accessible components.
🔥 Hot off the press! This brand new guide was just released.
What you’ll learn
- What assistive technology is
- How to enable and use a screen reader
- The basics of navigating the web with a keyboard
- The dangers of CSS-only interactive components
- The importance of HTML semantics
- Focus management essentials
- How to hide content, and accessibility considerations when doing so
- How to announce dynamic changes to the UI
- How to indicate button state
- How to build four of the most common interactive components
🧠 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.
Reinforce your learning and build your portfolio by building a collection of accessible UI components, including a show/hide disclosure, accordion, tabs, and alert component.
BONUS: Don't go it alone! Upgrade to a bundle and get exclusive Slack access.
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
- Learn modern best practices and code patterns.
- Spend less time Googling and more time working on cool stuff.
- 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 💰
Hi, I'm Chris Ferdinandi. 👋
Ready to buy?
- The Pocket Guide (in ebook format, streaming HD video, or both)
- The Source Code & Demos
- FREE Updates for Life
Best Value: Ebook + Videos - $99
Want to save over 40% and get exclusive Slack access? Get this pocket guide as part of the Complete Set or Level-Up Bundle.
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 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 firstname.lastname@example.org, 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 email@example.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.
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 firstname.lastname@example.org and I’ll give you a full refund.
I have another question.
No problem! Send me an email at email@example.com.
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.