Creative Popup Modal with HTML & CSS & JavaScript | Safak Kocaoglu | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Creative Popup Modal with HTML & CSS & JavaScript

teacher avatar Safak Kocaoglu, Computer Engineer. Front-end Developer.

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (26m)
    • 1. Intro

      0:34
    • 2. Preparing HTML & CSS files

      1:02
    • 3. Creating a button

      2:22
    • 4. Creating the modal

      3:59
    • 5. Adding elements inside modal

      4:21
    • 6. Finishing HTML & CSS side

      6:08
    • 7. Creating CSS Animation

      2:12
    • 8. JavaScript Part

      5:37
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

52

Students

1

Project

About This Class

If you know HTML and CSS, but you don't have any impressive projects, here is the chance to build something creative. We are going to create an awesome popup modal with HTML, CSS, and a couple of lines of JavaScript. It is going to be an inspirational class that will help you to create something new. 

This class contains a project. Don't forget to check out the project section :)

You can find all resources and the entire course from here.

Let's create something new today :)

Meet Your Teacher

Teacher Profile Image

Safak Kocaoglu

Computer Engineer. Front-end Developer.

Teacher

Hello, I'm Safak. Here are a few things you might need to know :)

I am a full-stack web developer has 5 years of experience. My job is creating well-designed interactive web and mobile applications and sharing my experiences with the students. If you are interested in web design,  web animation, front-end development, and creating useful web APIs, I recommend you to check my courses out. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hey Dad, if you are bored seeing all those really basic web design courses, it's the perfect match for you. Let's build a creative real-world project. Today we are going to be creating this beautiful popup modal. It's going to be a subscription button here. And when I click this, this pop-up will show up. And when I click this cancel button, it's going to be disappeared again. It's really easy and really useful. If you want to learn something new today. Let's get started. 2. Preparing HTML & CSS files: Before starting, I just created some images here. It's going to be our menu items. This is our left container background, and this is going to be our Cancel button. Let's go to index.html. I created our documents and we are going to be using this style CSS. And we are going to be using this Poppins font family. You can find this font-family on the Google forms. Let me show you how you can find this edge right here, google phones. And here I'm going to choose Poppins. And this is going to be our family. You can choose here to a hundred, four hundred, five hundred and this bolt ones. And you can copy and paste this link into your HTML, or you can write here font-family, Poppins and sans serif. 3. Creating a button: Okay, let's get started. Firstly, I'm going to create a button here. It's going to be our subscription model. And class name, let's say SAP. And I'm going to write here, learn more. And I want to send to this item two here. To do that, I'm going to write here buddy, which means are all container. And I'm going to say display flex. And it's going to be a flex container right now, if I say align items center, center my item vertically. So how I'm going to center horizontally also, I'm going to say justify contact center. And it's centered right now. Let's give some properties for this button, our class name. And I will give some paddings. And I don't want to see these borders or outlines here. I will say about the nom and outline, none. Now so I can give some background. Let's say tomato. Oops, I said boulder. Okay, I want to change this text color also. To do that, I will say color and it's going to be a white. I can make this text a little bit. Take font-weight, bold. No, it's maybe a little bit less. Okay, it's good. Now you can give some border-radius here. I will say the radius, and it's going to be a five pixels. Perfect. But when I heard this, I can see any changing that's at cursor pointer. And it's going to be a pointer right now. Okay, We finished our button. Let's create a model here. 4. Creating the modal: And after this button, I will create a new model there. And we, it will be 600 pixels and height will be 400 pixels. As you can see, it's here. Let's give some background and we can see better. Yellow. Okay. I want to see this item on this button. How I'm gonna do this? I'm going to say position absolute. And right now it's centered. And this button behind this container, create. Let's do this white. And I want to give some shadow for this. So I'm going to come here and say box-shadow generator. You can choose whatever you want here I'm going to choose this one. And here I can choose my container color. It's like that. And you can arrange your shadow here. You can play around here. You can do this, whatever you want. I will do something like that. And hopeless TMA be like this. Okay, It looks great. Let's copy this and paste here. It's an awesome tool. You don't have to memorize any of them. You can just create here and copy and paste this cup. Let's check out soon. I can give some radius here. The radius, It's gonna be a TAM peaks us epsilon. It's going to be a left container and right container. I will say here, display flex. And inside, I'm going to create two other containers. Let's say left and right. Okay? So I will come here and say left and right. Table have a 100 percent height and each one will have a 100 percent wheat. So I will say wait 50 percent and hide a 100 percent. We can't see any changes. Let's give some background color for them. For now. Of course, we will delete them. Yellow and four, right? That's changed is perfect. As you can see, a 100 percent and 50 percent. Now possible. For this last one, I'm going to give some background image. To do that I will say URL. And as you remember, our image folder, I'm going to use this one. Image folder and background PNG. Good. But it looks a little bit weird. I'm going to center this to two tat I will write here, center and background size will be contained. When I do that, it's going to be more than one item here. Have I'm going to delete them. I will come here and say no-repeat. Absolutely. I can change background color. Maybe. Looks nice. 5. Adding elements inside modal: I'm going to create some items here, some menu, title description, and the other menu. And here input and button is going to be an H1 tag and something else. But I will add some margins and paddings for each items. So I don't want to disfigure reduce container. So I'm going to add some were up inside these right container. I will say wrapper. And inside this wrapper I can write my items, but before that, I'm going to resize this wrapper. Let's say wheat 90 percent and height night percent. Let's give some background. And you can see, as you can see, it starts from here. Hello, I'm going to center this as we did before. I will use display flex. I can write here align items center and justify content center, absolute. So I can create my first menu here. Let's slate this color. So I'm going to create many. And class name will be top, mid and inside this top menu item. And first one will be creative. And two more. Here, tasty. As you can see, it looks pretty ugly. I will arrange here, it's going to be horizontal. I will copy this list item. I will make this horizontal. I want to relate these dots. The style will be known. So we will not see anything. But as you can see, there is some default space here. So I will say margin and padding 0 absolute. So I'm going to give some space here. For each item. Margin, right? Ten pixels. I'm going to make this text size a little bit smaller. Font size, 12 pixels. And I will give some font-weight. Good. So let's create a H1 tag here. It's going to be our title. Okay, After that, I will create some text inside, let's say the description. And I will copy and paste Skillshare description here, something like that. And here also there are some default spaces. So I will come here for title and description, margin and padding 0. So I'm going to change this font weight. It looks a little bit peak for description. I will say font-weight, let's say 200. Know, maybe 300. Okay, it looks good. So right now I'm going to create four items here. It's going to be many. It's going to contain image and text. 6. Finishing HTML & CSS side: Another menu here and class name will be home Min. Let's create menu item here and className, bottom menu item. It's going to contain one image. And after that is going to be one text here. Let's say design, class name of course, Bottle menu text. And for image, menu image. And it's going to be R. As you can see, there are four items here. In which folder m1 dot PNG. It's really big. And it's also a vertical and tear is list-style here. That's our HTM. I will copy this and come here. Actually, I will use same thing here. So I can paste here. And right now, it's better. Let's arrange this item. But to many, an image which will be 50 pixels, height will pay 50 pixels. Good. But I don't want to make them next to each other. I'm going to write design here to do that. What was our container bottom menu item. So I will come here and say display flex. And flex direction will be column. Right now it's in the same row. So I want to center it is align items center. Absolutely. So let's create three more items here. I will duplicate them. And this 1, 2, 3, and 4. And it's going to be art, dance and size epsilon. But I wanna give some spaces between them. So here I will say justify content. Space between. Nothing has changed. Let's check our container. Bottom menu item. As you can see it there, which is not a 100 percent. So I'm going to come here and say with a 100 percent. So it's going to contain all these Min absolute. That's the late days. And after that, I'm going to create some input here and some buttons here. So I'm going to create another div and it's going to be formed container. And inside this is going to be input. And after that it's going to be a button. Class name, let's say submit. I will write here some place holder, which means inside texts in this input. So I can say here, enter your mail, something like that. So let's go to the style CSS and say input. As you can see, I didn't give you any class name because it's only one input here. You can give also look doesn't matter. I will say adding 7. And right now there is padding inside. I will give some border-radius. 10 pixels. Border, one pixel, solid and gray. Awesome. I can give some space here between input, button, margin, write ten peaks us. Good. So I will give some properties for this button also. Our class name, submit. I don't want to, any voter is going to be numb like this. I can give some padding and border radius. Perfect. So I'm going to give some cursor here. Cursor pointer. So it's like clickable right now. And as you can see, they are really close each other. As you remember, it was display flex and flex direction was column. I can give space between whereas wrapper here, I to the US. Display flex, flex direction, column. And if I write here, justify content space between. It's gonna look like this. Absolutely. It looks pretty good. But I won't. I gave some changes here. 7. Creating CSS Animation: It's going to be fancier. It's going to be some animation, and it's going to change this color every couple of seconds. It's not our concern right now, but if you want to learn more about animation, you can check my other course. I created an awesome animation course. So I'm not going to deep dive into it. I'm going to just write. So instead of this, I'm going to create an animation. And let's say change. It's our animation name. And we can write here animation duration is going to be ten seconds. And timing function will be 0s, which means color changing will not occur suddenly, it's going to be, is smoothly. So it's going to be infinite, which means this animation will work all the time after 10 seconds. It's not going to be stuff, it's going to continue again. So for i, keyframes and my animation name here change. So I'm going to enter here every duration, 0%, which means for a second off the animation background color will be white. 20%. That's actually copy and paste this. Or 20 percent, 40 percent, 60 percent, and 8%. And after two seconds, it's going to be light blue. And four to Poisson, it's going to be again light curl. And let's say light gray. And finally, it's going to be a scar. Let's check. It looks really, really good. I like it. 8. JavaScript Part: So what I'm gonna do is I will make this disappear. First, I want to see my button. If you remember our button here. When I click this, it's going to show up like Lex. Oh, I forgot giving cancel button here. And before this model, I'm going to add my cancel button. It's going to be cancel. Let's see first. Okay. I will come here and say the 20 pixels. 20 pixels. Okay? So I wanna give some spaces here. If I write here top 10 and 10, we can't see anything because it's position is static. So what I'm gonna do is I will say position absolute. So it's here right now. I can give cursor pointer. Okay? So when I click this, it's going to be disappeared. And when I click this Learn More button, it's going to show up again. So how I'm gonna do this? I should write here app.js or whatever you name, it doesn't matter. And when you see a JavaScript file, don't be afraid. It's going to be Charles couple of line codes. And it's really, really easy. Don't worry. I will define this JavaScript file here, app.js. So I will make this known for now. It's going to be our initial situation. It's going to be only this button. I'm going to click this. It's going to show up when I click Cancel is going to be disappeared again. So what I'm gonna do is choosing this button, choosing this model, and choosing these cancel button. So how I'm going to do this? I will say const sub, and I will say document and query selector. And I'm going to write here my class name. But was that just some let's console log this and see what we have. Console. It says null because we didn't give here dot because it's class. We are doing as we do in this style CSS. And right now, as you can see, we choose this button. I'm going to do the same thing for model and the Cancel button. Right now if I write here model, you can see our whole model d is here. Everything. So basically query selector, choose one class or one idea, one element inside whole document. Right now, I have the sub button. I define this here. So I'm going to add some listener here, which is clique, which means when I click this button. And after that, I will write here some function which I want. After clicking what I want, I will change this display property. I will say model and choose style. And my property display. And it was numb. I will change this to flex. Let's see. I'm clicking and magic. Right now. I'm gonna do the same thing for this button. I'm going to choose this cancel. And when I click cancel, these modal display will be not. I'm clicking and cancel. And that's all. It's really, really easy. So right now we've finished our project. I hope you liked it. It looks really nice. You can find all these illustrations and hand tire caught in the description. I will share it is as a GitHub repo. And don't forget to do your own project and share with us. I hope I will see you in the next course. Goodbye.