US $19.97

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

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

2 mins
Course introduction
free preview
2 mins
Breaking down the background
free preview
8 mins
Html css js crash course
free preview
8 mins
The background
12 mins
Styling our button
3 mins
Centering the button
5 mins
Modal background
4 mins
The modal box
3 mins
Custom fonts
8 mins
Custom modal buttons
3 mins
Hiding the modal by default
8 mins
Opening the modal
5 mins
Closing the modal
3 mins
Code cleanup

Reviews

100% of 1 people enjoyed this course!

Mohammad Mohammed liked this class and said...

This course is well explained and totally awesome.

About the instructor

Kalob Taulien
Kalob Taulien
  • 134 students
  • 38 reviews
  • 38 courses

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 …
Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 1h 07m of on-demand video
  • Have a coupon?
  • Checkout