Create a Modal by Hand using HTML, CSS and JavaScript

——   Created by Kalob Taulien

Create an interactive modal using frontend web development technologies

Share this course:

1h 07m
Lesson time
Skill level
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today.

More about this course

We won't be using any coding libraries or packages, this is all hand-rolled (vanilla) HTML/CSS/JavaScript.

What does that mean for you?

It means this course is perfect for frontend developers looking for a bite-size project to practice their coding skills.

Do you need to know HTML, CSS and JavaScript like a pro to take this course?

No, not at all. There's an HTML/CSS/JavaScript crash course video included to get you up to speed on all three technologies quickly. Everything is also explained as we progress through the course together. And we won't be writing any complex code. This course is designed to create a modal from scratch without needing too much prior experience. But as with everything in life, the more experience you have the better

The course project

You will create a webpage modal (internal page popup message) that can be opened and closed with multiple buttons.

Below is the closed and open preview of the modal we'll create in this course.

14 Lessons

Course introduction
free preview
Breaking down the background
free preview
Html css js crash course
free preview
The background
Styling our button
Centering the button
Modal background
The modal box
Custom fonts
Custom modal buttons
Hiding the modal by default
Opening the modal
Closing the modal
Code cleanup
Enroll in this course for $19.97
or $15/mo for unlimited courses

Class benefits

  • Certificate of Completion
  • 14 day free trial
  • 24/7 streaming access
  • Project included
  • Teacher Q&A
  • 1h 07m of on-demand video
  • Have a coupon?

About the instructor

Hi everybody! I'm Kalob Taulien.

Here's the TL;DR (short) version about me:

  • I have been coding since 1999 and teaching people how to code since 2011
  • I have over 500,000 web development students world-wide
  • I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making …
View full profile

Access unlimited courses for only $15 per month

Start your 14 day free trial. Cancel at any time.

Join Today