JavaScript: Build a Modal

Use pure CSS and vanilla JavaScript to build a modal from scratch.

In this series, you'll get to build a modal pop-up from scratch. Yes, modal pop-ups can be very annoying! But when used properly, they're very effective! Modals are very common on the web and often come included in user interface libraries like Bootstrap or Materialize.

That said, there is a lot to be learned by building something like this. You don't always need to load a heavy library, and slow down your site, to add these kinds of features. The project involves CSS animations, DOM manipulation, event-driven JavaScript, CSS variables, and more.

These lessons are taught by the amazing JavaScript instructor Brad Traversy. Brad is a well known instructor who is amazing at explaining concepts simply.

Skills covered in this course: HTML CSS JavaScript Events Animation


1. Introduction (1:42) Preview
2. Setting Up and Tips (8:53) Preview
3. Getting Started (2:18) Preview
4. Boilerplate HTML (5:55)
5. Adding CSS (3:01)
7. Modal Box CSS (6:30)
11. CSS Variables (3:16)