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:

NEW
Course
14
Lessons
1h 07m
Lesson time
beginner
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

0:01:39
Course introduction
free preview
0:01:30
Breaking down the background
free preview
0:07:55
Html css js crash course
free preview
0:07:04
The background
0:11:49
Styling our button
0:02:09
Centering the button
0:04:41
Modal background
0:03:14
The modal box
0:02:36
Custom fonts
0:07:44
Custom modal buttons
0:02:32
Hiding the modal by default
0:07:46
Opening the modal
0:04:14
Closing the modal
0:02:51
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