Skip to main content Accessibility Feedback

Vanilla JavaScript for Beginners

Vanilla JavaScript for Beginners is a step-by-step video training to help you master vanilla JavaScript.

Together, we’ll build a feature-rich show/hide script. You’ll walk away with a real, working project and solid understanding of foundational JavaScript.

If you’re sick of hostile answers on StackOverflow, bad documentation, and tutorials that assume you have a Computer Science degree, this is for you.

Pre-Order Now →

What you’ll learn

  • How to find and get elements on a webpage.
  • How to add and remove classes.
  • How to get and set styles.
  • How to add and remove content to a page with JavaScript.
  • How to listen for clicks and other events.
  • How to get and set attributes.
  • How to write accessible scripts that work for anyone.
  • How to debug your code when it breaks.
  • The easy way to deal with cross-browser quirks and inconsistencies.

Stream the course in HD video on any device.

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

You’ll also get these awesome bonuses

  • All of the source code and well-documented demos so that you can see the lessons in action.
  • A cheat sheet of all of the vanilla JavaScript functions, browser APIs, and code snippets from the guide, and a bunch of additional ones that aren’t.
  • A vanilla JS plugin reference guide, with links to dozens of vanilla JavaScript plugins and helper libraries that make working with vanilla JS even easier.
  • Vanilla JavaScript plugin boilerplates to help accelerate the development time of your next project.
  • Exclusive access to my private Slack team, where you can chat with other students, get feedback on code, ask questions, and share the latest tips, tricks, and strategies for going vanilla JavaScript.

Pre-Order Now →

The Lessons

No foo/bar. No terminal window. No “just… [insert complicated process here].” This course is short, focused, and made for beginners.

1. Setting up a simple show/hide module

  • Getting elements with querySelector()
  • Detecting clicks with addEventListener()
  • An introduction to classList
  • Using event.preventDefault()

2. Multiple show/hide modules on a page

  • Event bubbling
  • Doing more with classList
  • Writing code that can be easily reused

3. JavaScript Accessibility Basics

  • Adding ARIA attributes
  • Setting focus()
  • Making sure everyone can access your content

4. Adding accordion functionality

  • Climbing up the DOM tree with parentNode
  • Finding all of the elements that match a selector with querySelectorAll
  • Loop through a list of items with for
  • Additional accessibility considerations

5. Adding open/closed icons

  • Showing different icons on toggle links for opened and closed content (example: + to show more, - to show less)
  • Working with CSS
  • Adding content with JavaScript

6. Animating the open and close action

  • Letting the browser do the heavy lifting for you
  • A workaround for quirky CSS challenges

7. Add deep-linking capabilities

  • Automatically open a piece of content if the URL has a hash that matches its ID
  • Provide an easy way for people to share a link to the content

8. Browser Compatibility

  • A simple technique for dealing with cross-browser quirks
  • Adding polyfills
  • Preventing errors with scoping
  • How to catch bugs sooner

Pre-Order Now →

The cheat sheet and the ability to ask questions on Slack were worth the price of the book alone. - David Buchholz

Your 100% Money-Back Guarantee 💰

Don’t put off learning vanilla JavaScript! If you’re not 100% satisfied with the course, let me know within 30 days of purchase and I’ll give you a full refund.

About the Instructor

Chris Ferdinandi

Hi, I’m Chris Ferdinandi. I write vanilla JavaScript plugins that are used by organizations like Apple, Harvard Business School, and CNN.

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

Pre-order and save 50%!

Get everything you need to start learning vanilla JavaScript.

  • The Course (stream in HD video on any device)
  • The Source Code & Demos
  • The Vanilla JS Cheat Sheet
  • The Vanilla JS Plugins Reference Guide
  • The Vanilla JS Boilerplates
  • Exclusive Slack Access
  • FREE Updates for Life

Pre-order now for just $79 $39

Not ready yet? Get daily developer tips.

I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web.