Create a Modal by Hand using HTML, CSS and JavaScript | Kalob Taulien | Skillshare

Create a Modal by Hand using HTML, CSS and JavaScript

Kalob Taulien, Web Development Teacher

Create a Modal by Hand using HTML, CSS and JavaScript

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 9m)
    • 1. Course Introduction

      1:39
    • 2. Breaking Down The Project

      1:30
    • 3. HTML/CSS/JavaScript Crash Course

      7:55
    • 4. The Background

      7:04
    • 5. Styling The Main Button

      11:49
    • 6. Centering The Main Button

      2:09
    • 7. Modal Background

      4:41
    • 8. The Modal Box

      3:14
    • 9. Using Custom Fonts

      2:36
    • 10. Custom Modal Buttons

      7:44
    • 11. Hiding The Modal By Default

      2:32
    • 12. Opening The Modal

      7:46
    • 13. Closing The Modal

      4:14
    • 14. Code Cleanup

      2:51
    • 15. Your Project

      1:43
  • --
  • 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.

55

Students

1

Project

About This Class

You will create a webpage modal by hand using simple HTML, CSS and JavaScript. 

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

d568925b

.

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

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 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... 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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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. Course Introduction: welcome to creating a custom motile from scratch. In this course, we are going to be creating our own motile using our own HTML. We're going to write our own CSS and we're going to write our own JavaScript now. You don't need to know all of us like an expert does. But you do need to know some of the basics and I'll go over some of them as well as the course progresses. So if you're not super familiar with CSS, that's okay. We're going to use a basic CSS. If you're not familiar with JavaScript, that's OK. You can just steal my JavaScript. This is not a JavaScript course. We want to make a nice looking motile. JavaScript just happens to be a part of it. Now the final product is going to look something like this. We've got a page with a big button on it that says open motile on. When we click it, it opens our motile. Your final project is basically going to be creating this exact same motile, but customizing it so it looks and feels more like you. So you're going to find a nice new background you're gonna want to change your styles. So this button, this button and that red one, that one. You're gonna want to change those tiles as well. And if you know javascript, great, you can work with JavaScript. But if you don't know javascript again, that's OK. You don't need to know what you can literally just steal mine. That's not the purpose behind this course. JavaScript is not the purpose behind this course. So, as a demonstration, open your model. Close your model open Yumoto except your motive. That's what we're going to be creating. And you can customize that all the way through this course. You have access to all of the code. I'll give you all of my final code that you can work with that any point in time. And you can ask questions and create a project as well to get some hands on experience. Throat this skill share course. Now this looks like a fun little project you might be interested in. Feel free to enroll in this course and let's get started right away. 2. Breaking Down The Project: Hello. Let's just dive right into this. So we need to create this motile here where basically, we have a button where we can click it and we've got close and accept buttons. And really, all that does is close your motile. Now, if you're brand new to what a motile is, it's that little pop up on your screen. It's not actually a pop up. It's a sort of a papa, but not really. It's actually in the same page. So it's not another tab or another window or anything like that. And it sort of blocks you from using the rest of the site until you accept or you close. So there are a few components that we need to work on in this course, and the 1st 1 is going to be sort of this whole page in here. So we need this background and you can use whatever background you like. We're going to create this button where when we click it, it actually sort of presses down on again. You can customize that's toe whatever way you like, and then when you click, it needs to open up this motor, so we need to actually style, this motile style of the background that you can see it gets a little bit darker back there , and then we also need some interactivity where you close or you accept, and then you can open your model. And so this is the functionality that we are looking at now. That's really the first step to breaking down any sort of project. Any time you have to work on something, you need to look at how it works and the steps to get there. So our first step is to create this page. It doesn't need to work doesn't even need to really look good. We just need to create the HTML and CSS toe. Make this sort of visual on. Then we need to create this on. Then we're going to use some JavaScript to glue it together, so it's interactive. So in the next lesson, what we're going to do is just create this background 3. HTML/CSS/JavaScript Crash Course: in this course, we're going to be using HTML, CSS and JavaScript, so you should be somewhat familiar with those. Now, if you are not familiar with those, that's okay. This lesson is a quick little crash course into all three of those html JavaScript and CSS . So H e mails what we're looking at here we have these things called elements, and so you can see that these two are sort of the same. One says Body one says slash body. So this is your opening tag, and this is your closing tag, and typically we put stuff in the middle. Now, tags can also have attributes such as an I D, which we're going to be using, and classes which will also be using in the course. Now, if I save this file hails, open this file. So I was creating new tab. That's what the final project is going to look like. But if I go to file open file, and I just opened that you can see we get this big, white blank page that just says stuff in the middle, you can also see it says our custom model at the top. We can change us to our custom. Hi. Hi. Hi. Hi. I high and all I did was change that and change it up here, Stuff in the middle. We could put this in here, over and over and over again. That's just sort of all jams onto one line. And so that's html Really? In a nutshell. Now we have different elements, and you're going to see a few different ones in this course. In this course, you're going to see body and HTML. We're going to use those quite a bit. We're also going to use developments. We're going to use h one elements were going to use paragraph elements and button elements . Now these all work the same way you can add i ds and classes to all of these, and you can style them any way you want. So this one is going to be a div. This one is going to be 81 This one is going to be a paragraph with warm ipsum in there and ah, button. So if I save this and go in here and just refresh my page regular def H one is ahead of one . That's a large header. Regular paragraph and then a button. So let's add some CSS so we can do internal CSS with style. And to select any elements, you just have to take the element name. So if you want to select, let's not do the body. But if you want us like every div on this page, you can just write def. And that matches this tag name here, and we could give us a border of one pixel, solid red, for instance. We're not going to stick with us. This is just an example, and that selects this def. It's the only one that exists on the page, and he gave it a one pixel, solid red border. Now, if we wanted to select every Div and also every paragraph we were, just use a comma. So we say Div, comma and then P, and that's the paragraph tag right here. Let's save that and refresh this page. You will see that this is then going to be surrounded by a red border just like that. Next, we can select things by a class, so let's give this button a class of test class. Now, whenever we want to select a class, we can just type dot And that means it's going to select just class and we put the class name and that matches this one right there. And so that dot just means class and any class that has test class in it or has the word test class in it because you could have a second class in here, you could have 1/3 1 But anyone that has test class in it is going to have these stylings. So D. C is us stylings. Here are called declarations. You've got border colon and then some sort of value. This test class can have, like a background color of blue and maybe a text color of white. And that's only going to target this particular button because it matches a class test dash class. So when you refresh will see that this changes just like that. Last but not least, in this course, you are also going to see I d is equal to something Now. Ideas don't have space separators. I ds should be totally unique. You can reuse classes if you want anywhere, but I d should totally be unique. And in this case, we select that I d you can see that title is highlighted down here. So you want to select that with the number signs we use number sign title on. And then you can add any sort of CSS declaration you want in there. So we could change this color too. Read. And we can change his background color two blue, which is going to be very hard to see. But this will work. Last but not least, we have some javascript. Now, this is not really a JavaScript course. And if you don't know javascript, that's actually okay. You don't need to know JavaScript. In this course, you can always steal my final project source code. And just use that javascript as well. Ah, but typically, we write our JavaScript at the bottom of our body tag. So inside of this body tag, we've got opening and closing. We have an opening body tag and a closing body tag inside of it. We put all of our code, and at the bottom of it, we put our JavaScript. Now you're going to see things like Var const and let these are just variable pipes. The strangest one is const. So when we get to the JavaScript part. You see constant something like constant name is equal to Caleb. This just means it's a constant. It cannot change the ones name. Variable is set with the equal sign, and it's got some sort of value in it. It cannot be changed. We're also going to see document query selector, so document dot queary selector, selector, all directions. He both so selector, always going to select every element based on some sort of CSS selector. So this is a selector. This is a selector, these air selectors and so we can select all the paragraphs and this will give us what's called a node list, which is basically just a list of all the paragraphs. So it'll give us this element in JavaScript, and if we had a 2nd 1 it would give us this one as well. Now, if we just want to select one thing like the test class or the I D, there's two ways we can do this. We use query selector dot test class. This one's only going to get the first instance. That's only going to get this one. If we used this, it's only going to find this 1st 1 is not going to find the 2nd 1 So that's the difference between career selector increase like you're all. We're also going to be adding event listeners, which I'll talk through once we get to that point on, the last one you're going to see here is get element by I. D. And this one does not take a regular CSS selector like what we wrote up here. It's assuming that it's an idea. So you don't need that number sign. You just need the name. And because ideas should be unique, you should only ever have one on any given page. So we would do this. Actually, we would do this. Collins title is equal to and get element by i D title, and it's going to get us this note, and then we can work with that in JavaScript again. You don't really need to know the JavaScript too much, but that was a very quick rundown on the JavaScript that will use in this course. The main thing to take away here is HTML has tags, attributes and like idea in class. You can put content inside of these tags, and then with CSS, you can use different selectors. So you've got element selectors. You've got class selectors and you have title selectors. If at any point in time this was a little confusing or you just forgot some of it. Because that happens. Feel free to come back to this video as a quick little crash course on HTML CSS and the JavaScript will be using in this course. 4. The Background: OK, first thing's first. We're going to need some sort of program to actually write some code. So I'm going to use a program called V s Code. It's a completely free text editor that you can download. You don't have to use it. You can also use this website called code pen dot io and you can just creating new pen. And then you can write your HTML, your CSS and JavaScript in here, and then you can save it. It's totally free. You can do it that way as well. You don't need to use V s code. You could also use sublime Adam brackets. Any other text editor that you want to use that's totally up to you. But I'm going to be using V S code and Firefox for the most part. So I have a full to hear just called the code, and I'm going to create a new file in here called index dot html. And in here I'm going to just give this an H one. A large heading says hello world. Save that. And then when I flip on over to Firefox, what I can do is I'm gonna keep this one up because that's sort of the original one. What I can do is file open and then just like the new index file. And it just says hello world. So nothing really fantastic there. But all this does is prove to us that we can create on index dot html file and open it in our browser, and that's really all we need to do at this point in time. So next What we need to do if we skip back to sort of with the final product is going to look like we need this background and we need a buttons. Let's create that background first. So in our html, I'm going to select all of that and delete it V s code. I have this nice little shortcut where I could just type html cool and five hit tab, and it creates it for me. Let me change the title here too. Our custom motile. Now, if I save this and reload a page looks like nothing happened. We can always go to the view page source So I just write, collect and go to view page source and you can see that we have a bunch of code in here, and that's exactly what we wrote our custom model. But we need a background and we're going to need a little extra CSS to help us with this. So let's create some CSS and this is going to be internal steel CSS. So it's just going to be written inside of this file, and then at the end, we could move it to an external file. So it's a little better in terms of best practices. So first things first. I'm going to select the HTML element and the body element. And all this is doing a selecting this element against yet selected up here and down here. And I'm selecting the body, which is selected online 13 and line 15 and I separate those with a comma. And then I used to say, opening and closing curly bracket, and then I can give it some sort of declaration. So, for instance, I could say background color is equal to read, and it turns my page read when I refresh it. Now that's pretty ugly and hard on the eyes. So let's not use that. I, first of all, want to do a little bit of resetting here. So I'm gonna leave this as an empty declaration and just do the word test in my body. And when I refresh this, you can see up here and that sort of hard to see you can see that there's a space up here that's your default margin and patting for any page. We want to reset that. So the first thing we want to do in our HTML in body is type patting zero that just says don't give the HTML or the body element any padding, same thing with margin. And lastly, we want to give this a height of 100%. So now if I say that and refresh my page over here, you can see those that text moved up. I can't really tell anything that the height actually did anything but that text moved up. So there's no padding or margin up there and sort of just reset that the height 100% basically means we're going to be using 100% of all of this with so by default, your body is only going to take up sort of like this space here and nothing below it. But we're saying mm no use the whole space instead. So now let's select just our html html and that's our entire document and see the entire There we go select at all. That's the entire HTML document, including the body, including the head, including all sorts of things. So we want to create a background image in here. So this is going to be the background image declaration back on image, and we're going to give this a whirl, but we don't have that yet, so we'll come back to that in just a second. Then we have our background size. We want to make sure that this background size is going to cover the entire page. We can touch on that in just a second as well. And let's to give our default font size like 30 pixel sore font sizes by default fairly large. And now let's go and find a background image in here. So I'm just gonna open up my browser and go to UN's splash dot com. Then this is a great place to get free royalty free images. And so I'm just taking wall, and there it is. This is the image that I'm going to be using so you can download this, which I'm going to do right now. I'm gonna get the large one because I'm on a large monitor. You might not need the large one if you've got a smaller monitor to be totally honest. And last but not least, let's always say thank you and give ATTRIBUTION to the creators. So thank you, Patrick. Tommaso help! I said your name, right? This is a great photo. And it is a perfect example for what I need. So thank you so much. Next, we need to get that image into our project here, and we don't currently have that. So what we can do is I'm gonna open up finder and in my code, I'm just gonna put my file in here So you could just directly download that file into the same folder that your index dot html files that's important has to be in the same folder as index dot html. I'm going to rename this to background dot J peg. So you have to remember, this is called background to dodge a peg and it's in the same folder as index dot html. You can actually see V s code was live updating behind me here and so that you are l is actually going to be a Web. Buehrle is going to be a local, Um, and we're just going to put that name in here. So background dodge a peg, and that just relates up to here and again. It's important that it's in the same folder. If you wanted to use, like, an Images folder, so you'd have, like index dot html and then you'd have another folder in here called Images. You would have to then prefix this you Earl with image. So this would be your folder name, and this would be your filing. We don't have that, though, so we're not going to use that now. Let's go ahead and save that. That's head on, back over to Firefox and look at that and it looks a little squishy, but it's not bad. Are font sizes little large, but also I'm zoomed into 300%. As you can see it here just to make this nice and easy to view in a video so we have our background now we need to create that button. I think we should do that in the next lesson where we create a nice button that has, Well, let's just take a look. This sort of feature weaken hover over. It sort of changes color and you compress down. We're going to get into some CSS with that. 5. Styling The Main Button: all right. The next thing we need in here is this button. So let's go ahead and create this. But we wanted to be perfectly centered as well. Now, if you're going to implement your motive on an existing page, you might not want this to be perfectly centered. So you might want to just sort of ditched that. Now, one thing I forgot in the last video is I was going to quickly show you the difference between background size, uh, being covered in something else. So let's just quickly do this. This will only take about a minute. We can go into, uh So all I did there was right click inspect element, and then you can go into your inspector click html, make that a tad bigger, and we can see our CSS declaration Over here. We can just delete that and we can actually see that it changes here based on sort of the size that we select so we can say contain. And it's going to make sure that that image is always contained. We can say cover inherit from its parent. There is no parent, so it's just going to be whatever your browser thinks is best initial is whatever the default is, which is what we see here. Revert and onset. We're not going to use, but we're going to use cover. And one last thing we might want to do in here is a set this background position to center on the X and center on the y. So this is your ex access? This is your Y access. And so when I just carried this and refresh this page, we're going to see this image actually moves up a little bit. Just like that, I think that looks a little bit better. So going back to our button, we have this fella here and we need to have some interaction. Let's go ahead and create a new button in our body. We're literally just going to have an element called button. The type is going to be a regular button. So if you throw this into like a form or some sort of event where submitting a button actually submits something and changes your page, this is going to say, Don't do that. Just use a regular button, Then we're going to give us a couple classes. So first of all, we're going to give us the button. Classical weaken style are button, and then we're a little bit later. I think we'll get into centering and using some JavaScript. But for now, let's keep it would. Let's keep it at one class and in here. Let's just say open motile. And if I flip back here and refresher page, we've got this standard buttons. It's pretty ugly. Looks a little different on each browser. So let's go ahead and make sure that looks the same on each browser and that it looks a little more like this button here and actually just for fun. What I'm going to do is I'm gonna live. Code this on code pen code pen dot I'll let's create a new one. And I just want you to be able to see the updates as we progress here. So I'm gonna change this view to put that on the left and let's just look at our CSS here. Well, we need her HTML. We've got a button. Class is equal to button. We don't have to worry about the type because we're not going to do anything with that, not in code pen. Anyways, we're just going to use this to sort of stuff about our code. Is it going to say open motile and in our CSS gonna make that bigger? Oh yes, and inner CSS. So we can just write regular CSS so we can say Select the button border one pixel, solid red and you can't really see. But it does in fact, have a border there. So if we change it to 10 that should have been tend, not zero. We can see that there's this ugly red border, so we know we're selecting our element properly. Let's go ahead and actually make this look fairly nice. So first things first. Let's change our font size a little bit. Let's change the font size that something like 22 pixels. We also want to make sure that no matter what's going on with this button, we want that text to always be aligned center. So text align center. We're not going to see a difference with this one, but if this button was significantly bigger, we might actually see that different. So it's just good to have that to fall back on. That's what the line height as well to something like 44 pixels, which is going to be twice the font size, and you can see that I just sort of centers it as well. Can also experiment with that. So if we trained yet to 20 pixels, it gets a little squishy. There. Change your background color. Background color is going to be some sort of hex color. Now we could say background color is red and this is not going to look super great boat. We could actually specify a nicer hex color as well, so let's enter the hex color of Sisi for 331 I think that's yeah, that's the one that I originally used. Looks pretty good. I like that. But the black on red, the black text with a red background doesn't look too goods. Let's go ahead and change that text color to wait. Let's go ahead and I work with this border is while the border should have a radius. So it's going to have some sort of smoothing around the corners, and I see what six pixels looks like. Um, that might be a bit much. Let's go four pixels. That looks a little better, so it's a little smoother, not too smooth, because if we go to smooth, let's say 10 starts to look a little too rounded. We could even crank this up like 50 if we wanted to, or 50% and it gets super around. So that's up to you. But I'm too sick with something like four pixels. Now let's add some padding, and that's just going to add some spacing at the top. Right bottom and left in that order slips to five on the top 25 on the right, five on the bottom, 25 on the left. It's now where Button is looking a little more Spacey, less looks a lot less crammed with patting like that. Now, when we click this thing, you can actually sort of see there's an outline and not really. That's hard to see, but usually when you click a button, there's going to be like a default blue outline. We just want to make sure that that doesn't ever exist. You've probably seen it when you click a link or something on any sort of Web page. We're going to make sure that there is no outlined by saying Outline zero and we're going to make sure that that stays that way by using important. So no matter what else we add to this button, that outline will never show up. Now we need to add Ah, some sort of box shadow. So this is going to get into some pretty I would say more advanced CSS. But feel free to experiment with this. So we're gonna say box shadow of zero, maybe four pixels and zero, and I'm gonna choose a color. Let's just go with blue for now. And then we can also add some more in here. So let's say 05 pixels, five pixels, one pixel eso a lot of these settings air like how much you want to blur. What is your distance, Your ex and why things like that. We're not going to get too much into that because this isn't a CSS course. I do have a CSS masterclass course. If you are interested in learning more about this and this one is going to be black and so you can actually see that we've got a little blue underlying there with a black shadow behind it. Let's go ahead and actually adjust that a little bit so I'm to throw in a color that I already know that I like a f three a to a Okay, not bad. And instead of black, what we can say is red, green, blue Alfa, That's RGB a 000 that's black 000 is always black. And then we want to given Alfa, so no pay city level. We're going to give it 40% or 0.4. Now we can see that there is a gentle little shadow back there. Next, let's take a look at hovering when we put her most over what happens? Nothing. Let's go ahead and change that as well. So let's say the button classes what we're going to select, and we're going to use the hover pseudo element in what happens here. Well, we could say order to pixels solid blue. And when that refresh is, we can see that something happens when I put my mouse over. And that's not what we want. Not exactly, but it does prove that that is actually working for us. Let's go ahead and change his background. Color is something just a little lighter than the original background color. This one's going to be de to 55 44 If I could spell that right and the box shadow is going to be very, very similar. However, we're going to want to change it just a little bit. So I just copy that box shadow line and that underline No, that color that we see just under here. We're gonna change that. I mean, changer toe, See, for four zero to after something like that and we're going to leave the rest the same, just so we don't want to change that too much. It's now when we have our over, we can actually see that the color changes, but it's a little jarring. It's not smooth, so let's make that smooth By adding a transition in here, the transition is going to be all. We're going to transition every CSS style overvote 0.15 seconds or 150 milliseconds, and we're going to say, Is that transition in and out? And so we could say linear or just ease in Just he's out. Things like that we're gonna say, Is it in and out? And when we put our most over, we can see that it's sort of actually fades now. So it's not just a quick change. It's a fade. Last but not least, let's take a look at what happens when we click so we can see that. Ah, it doesn't actually do anything. We wanted to actually sort of move down a little bit. So what we can say now is we can select Button, which comes from his class button. And on the active state. We can change that background color once again if we wanted to or or change the border or text color, anything like that. But we're not going to do that. We're actually just going to give this a negative. Margins were gonna say Margin top minus 18 pixels, and this is going to look really weird at first. We're also going to get rid of our box shadows. A box shadow is zero now because we said this transition to all it's going to transition the box shadow and the margin top. Just go ahead and click this button. You can see it actually moves up a little bit. No, that's cool, but we don't want to move up. We want the buttons actually move down so on our button. We're going to give it a margin top, have something like minus 22 pixels, and now we can see that it moves down. Now, we actually don't have to do that whatsoever. We could se margin top is going to be minus four pixels and the margin top when it's active is going to be zero pixels. Man, it's a little better. And one thing that's not working here is our box shadow is not going away. And it's not box shadow zero. It's box shadow None. Let's go ahead and their radio on our buttons actually pressing down. And now we have this working buttons. What we can do is we can select all of us and just cut that and put it right into our project. So basically, I just use code pen to live codes and stuff so I could see the changes immediately. And in our project, I'm just gonna going here. But boo boo boo and paste and I'm gonna fix my own inventing here. Now I'm gonna save this, and I can close code pen, cause that code is now in my project. So yep. Leave Paige. That's fine. And Let's refresh our work in progress page. We have this big button when we can. Actually that page a little smaller here, and it's not quite centred. But the button does work. Now you might notice that there's a border around it. You can change that if you like. I'm using Firefox. Actually, don't mind that this border is the way that it is, But it might look different on Safari or Microsoft Edge or Chrome, in which case you're going to want to give us a border in the next lesson. Let's go ahead and make this button actually center perfectly in the middle of our page. 6. Centering The Main Button: Okay, Doke. We have this nice looking button and when we hover over it, it is little fade. And when we pressed down, it moves down. But we wanted to be in the center of our page. Now, if you're going to integrate this into an existing project that you have, just keep this video altogether. Otherwise, if you want to create the exact project that I have here, where the buttons in the middle and creates this motel right in the middle of your page, then follow this video and we're going to create a centering. So what we need to do is in our button here. We're going to give us a new class called center. And in CSS, we can just say class, that's this little dot here center, and then we can add some styling around it. So we're gonna say position is going to be absolute, and that's just going to allow us to move this to anywhere on the page. We're going to say top 50% so it's gonna move it from the top down 50% of the page and noone rates going to move left 50%. So basically it's going to go from right up here and it's gonna move down 50% so that top of this element is gonna move down 50% and then it's going to go left, which is furthest over here, and it's gonna move in 50%. So if you picture a grid is actually not going to be perfectly centered and when I refresh this, we might Yeah, we can actually see that is not perfectly centered. It's off center. This corner here is perfectly centered. But we wanted to actually move sort of the hack left a little bit and then just up a little bit. And we can do that by giving it the transform transform declaration in here. We're gonna say, translate where it's currently at by minus 50% on the X access and minus 50% on the Y access. So move this left 50%. Whatever the width of the element is, our browser will figure that out for us and then up minus 50% of whatever this height is. Some doesn't save that page and let's refresh, and there it is perfectly centered. Now again, if you don't want that, that's totally cool. Let's just get rid of this and it goes back to being wherever you would normally position your button, but we're gonna keep it centered for the duration of this course. 7. Modal Background: Okay, Now we need to actually make our motile. So if I hop on over to the final project here and I click this this mortal pops up. Now, we need a little background back here to make that that wall look a little darker. You can actually see it fades in, phase out, and we need a box in here, plus a couple extra buttons. Now, we're going have to do this in multiple steps because this is a lot of work on. Also, we don't have the JavaScript functionality yet, so we're going to actually create to this on our page. We're gonna make sure it's all visible, and it's layering on top of our current work right now. If I click this, nothing happens. We wanted to layer on top of our work and then weaken immediately, hide it and allow JavaScript to change some of our CSS when we actually click open. So that it phase interview. So first things first, let's go ahead and create this background. So we just want a nice layer on top of our entire page, and this is going to just make the page a little darker. Now there are multiple ways that you can do this. The way I'm going to do it is using to HTML elements. So I'm going to create a new def with an I d. Of motile background. You don't have to use 90. You can just use a class as well. I'm just going to use us to sort of creates more flexibility in this course, not flexibility. Diversity. So we're not just using classes all the time. We'll use an idea. So we're gonna create a mortal background and we're gonna create another one in here. That's not really going to be visible. Not yet anyways. But we're just going to create it just for the sake of creating it. And it's going to be called motile box. So this is going to be our background in here, and this is where all of our contents going to be. So for all intensive purposes, this doesn't exist. And I just commented that out using HTML comment. Now, if we go back to our page and refresh, we'll see nothing has changed. But we have this element in here that we can now target using CSS. So in our CSS, let's select it with the number sign. That's how we select an I d. And so like that motile background. Now we want to this background to be a certain color. You might want that to be a different color. You might want a lighter background or a colored background. I'm missing. Use a black background, but it's going to have a no pay city. Eso first things I'm going to do here is change the background color of this to RGB a so red green blue Alfa zero 00 that's black and then 0.45%. And when I refresh us, he'll actually see you can't even see anything in there yet. But if I do, let's do this. 123 You can see that it shows up in here. Now we have to make sure that this covers the entire page. So let's go ahead and get rid of that text. We don't want that to always have text in there. What we're going to say is position fixed. So even if your page scrolls down, this moto will cover the entire screen, we're gonna say start at the top and start all the way to the left. They were going to give us a width of 100% and a height of 100%. And if I refresh my page now, you can actually see that it's making my page darker. This is what it usually looks like back here. This is what it now looks like. Now we're going to make this fade in and sort of fade out a little bit later. But let's go ahead and move right on to that motile box. So we have something that we can work with visually. So in this motile box, we have this white sort of background in here that could be a div. We have some sort of title. We've got a couple of paragraphs in here and we've got a couple buttons. So let's go ahead and stuff about that HTML and this by no means needs to be perfect. We can always come back and changes, So let's give us just a H one and it's gonna say custom motile. We're going to give this a class with Laura MIPs, um, in here and another one so just has a couple of paragraphs of dummy text, nothing important. And then We need a section for those buttons, so it's creating new dip because we want to buttons in here. And let's a copy of these buttons. It was one button. We're gonna copy it twice. So the 1st 1 is going to say close. And the 2nd 1 is going to say Except now, if we refresh our page, we're gonna see that this is going to look just terrible. You can actually see his looks pretty terrible. It actually looks like regular text behind everything. Our except Button shows up. That's cool. There's actually another button behind it. So if we get rid of center here, refresh, you can see that close and accept are still there. They're not styled, but our content does show up. Let's go ahead and work on adding that motile box in the next lesson. 8. The Modal Box: all right, we're getting pretty close here. We just need this motile to show up the way that we currently see it or something similar. If you have something different in mind for your design, definitely feel free to implement. That says, Go ahead and give this a nice white box and does go back to our editor and we've got this motile box and we can target that to using CSS. So in our CSS up here we can say number sign because we're selecting an I D motile box and we can give us a background color of white. So that's F f f f f f f. Or we could just say White as the exact same thing in HTML. Go back here and just refresh and we can see that's got a white background. But it's not really popping above anything yet, and it's still so sort. It doesn't look very nice, So let's let's add some extra stuffing. Let's style this whole thing. First things first. We want this mortal to be above that dark background. So, on that motile background, we can give that a set index of like 10 if we wanted to could really be any number, but the motive box is going to have a set index of something higher, and in this case we're going to give it 11. So it's just gonna be one point higher than the background. And when we refresh us, we're going to see that that background still exists. But our model is above it. Or at least it would be above it if we didn't miss a key component in here. Now. The reason that that set index isn't working is because we aren't specifying a position. We need to specify a position for that. That's that index to work. So go ahead and give us a position of fixed. Let's just use this as an example and refresh. Now we can see that this is above and that darker background is back there. Now we need to constrain this a little bit because this is looking very large and sort of a little bit jarring. So let's go ahead and give us some inside padding of like 25 pixels. That's going to be top right to bottom left. We only specified once was going to go all the way around All four edges in regards to position. Let's say it has to be topped. 50% left, 50%. That's going to mostly center. Our motile. Let's also give it a max with a max with, of, say, 80 pixels. 800 picks is not 80 and a minute of something like 600 pixels. Now this is not going to be mobile friendly. Eso You might want to reduce that or create a media query down the road. But for now, just for demonstration purposes, let's keep this simple back to our page. And as we can see, this corner is perfectly centered. So we actually need to move the width of this motile to the left. And the height of this motile half of the with and half of the height we needs is basically adjusted so that this is sitting perfectly in the center here, and we can do that with again transformed translate. That's this guy right here. It's what we use to center our button. We're going to use the exact same thing here, so I just copied and pasted done, and that's refresh, refresh, refresh. Now we're getting somewhere in the next lesson. Let's go ahead and style, our title, some of our text in here. And then maybe we'll get to the buttons if we have time. Or maybe that will be the video after that. Let's go ahead and style some of the stuff. 9. Using Custom Fonts: okay, We want to style this and so that it's using a different fund. Now you can use any font you want, but I'm going to go grab a custom font, and the way I'm going to do that is go to fonts. Think it's fonts dot google dot com, Fahnestock google dot com and we can pick any front we want. So I just wanted to find something that looks a little cursive, and I have one in mind already called. There it is in the flour and it looks a little like handwriting, so a little sketchy. It's not perfectly formatted, like Computer Texture fund, which I sort of like just for this purpose feels a little more custom, a little more homegrown, so I can select this fund, and I want to select this style. And let's embed this and it's going to give me this in here so I could just copy that, and you could do this with any fund on foreign stock google dot com There are some premium phones on here you can't do that with, in which case you just find a free fund and it's a very top of our page above our custom styling. I'm just gonna pay site in there, and all this is doing is giving us a new style sheets. Um, new CSS. And it's going to give us in the flower. That's the front family. So now we can select all over H ones and all of our P tags all over each one's all of our paragraph tags, and we can say that font family is You want to be Indy flour. And if there is no indie flower, where since a select something cursive from the front library that's already on your computer and where I'm getting that from is right here. So if you're using a different font, Google is going to give you the exact CSS you need to use. So you just change that fund family toe, whatever they're calling it. This one's called Indie Flower, and then it falls back to cursive. Now, when I refresh the page and let's make that a little smaller here, you actually see that my phone change. So that's pretty nice, but we want these buttons to be a little more I know morally, I guess so. We should probably put them to the right. Ah, and change this styling in here and they do. Behind that is, except is usually blue or green button something like that and closes usually something boring, like, uh, standard White because white background sort of fits in or just text, and we can go and change that as well. So that's what we're going to do in the next video. We'll adjust these buttons to make them look a little nicer. We're going to use this thing called them Block Element. Mata fires on. Basically, we're going to reuse our button, but we're just going to overwrite some of the things that come with the default button. 10. Custom Modal Buttons: Okay, let's change the styling of these buttons and also move them to the right. This is actually going to be a lot easier than we think, and we don't have to copy and paste a lot of code, either. So we have these buttons down here, and we can do some in line styling as well. So we do style text align is equal to write, and we can move this into our internal style sheet in just a moment. And if I just refresh this page, it moves to the right just like that, nice and easy. So usually we don't like to stick with in line styles like that. It's usually not that good of a practice. That's what we want to do is move this into our internal style sheet, and we're just going to call this text right, and it's going to be a class, so it starts with a dot. So let's move up here. And let's add this to the bottom of our style sheet dot text rate Text line is equal to right. Let's go ahead. Save that and refresher pages make sure we don't have any typos, and it's still working as we expect, and it is next. We need to modify the clothes and accept buttons so they're not both red. So what we're going to do here is in these classes, we could say button, dash, dash clothes and this is going to be a modifier. So all this is doing is taking this class and is going to apply another class that's going to be called dot button dash dash close. But the idea is that because it starts with button, dash, Dash is going to They're supposed to be paired with the regular button class anyways, and so down here we can do button, dash, dash except, and currently, this is not going to do anything. This is just adding to classes that don't exist. So let's go ahead and add the clothes class right now. So let's make this just a tad smaller and let's move us where our buttons live. So we've got here. It is our button, hover and active. Let's go ahead and add a modifier. We have button dash, dash closed and a few things we're going to want to change your so we definitely want to change the background color and we could change out to really anything we like. And again, that's up to you. I'm gonna changes to something a sort of fits in with the background, so it looks a little more boring because the close button is always boring. So it's changes to like an off white color, and you can actually see NVs code. If I hover over this long enough, I can select really any other color that I want this one just going to be the off white color. I also want to change the text color to something a little darker. So it's do 999 which is a shade of gray. Go ahead and see what this looks like when we refresh. Okay, not bad. But when we hover, doesn't quite do what we want. So you know we're close, not close enough. We also need to get rid of that box shadow underneath, so it's just tackle one of these. What happens when we hover? That's do you button dash dash clothes and then the hover state. We can just keep that background color or fade that background color rather to white so we can just type white. Let's refresh And so you know it has something in there, which is nice, but it's still not really eye catching, which is the purpose of the close button. Really, you want someone to accept, not necessarily just to close it. Next, we need that box shadows. Let's take that box shadow from our regular button and copy and paste, and you can see that we've got a box shadow back here. That's the That's the black one that has a 40% opacity. You can see RGB a So 000 was black. It's the absence of color. That's why it's all zeros. Ah, and then 0.4 is 40% as a decimal. We want to keep that the same, I think. But let's change this to something not read at least s. So we're just gonna change it to ah, darker shade of a white but a lighter shade of gray. And when we hover, that works, and that's only because I put that totally in the wrong place. Let's just move this up level and let's refresh that page again, and that's looking a little better now. It could also give this a border because on Firefox. That border looks a little funky. So border, let's say one pixel solid. And let's also make it the same color as the background. And the hex is going to be F five f five F five. Okay, okay, not bad. But the problem here is you still see that when we hover, We've got that red background, which actually doesn't look terrible. But if we wanted to change that, we could as well. So let's just copy that down here. We want to make sure that that that's secondary box shadow is pretty much identical all the way through. We're not going to change that at all. How about we do want change this one to be maybe a little darker, and that's refreshing to see how that looks Not bad, right? Okay, I can live with that. So that's the close button. Change the accept button to like, blue or something. So what we can do is we can select all of that copy and paste, and I'm gonna select the too close lines here and called except And the reason I called it button, dash, dash. Except is because if we scroll all the way down says Button, space button, dash, dash. Except now. Currently, this is going to be the exact same as the button closed background color, that regular color. All that's going to be the same. Let's go ahead and change that, too, to be something bluish, I guess. So I'm gonna type in what I know is going to be a blue hex of one of 489 c and let's see if it looks any good. But let's get rid of that text color because we want that color to be white, which is going to come from the original class up here. Button color is going to be white, and so we don't need to override that. The reason we did that with the close button is because we didn't want it to be white anymore. We wanted it to be a shade of gray, but in the accept button, because we want a blue background, a white text color looks a little nicer on it. And let's also change that box shadow. But ah, let's maybe that's see what we can do here. One. I don't know where I'm going with us somewhere in here. I'm going to throw in some hex numbers that I sort of know off the top of my head. But again, you can mess around with this and really change this to be anything that you want something to go with. 10259 c and the border. Let's see what happens when we get rid of that border now. I didn't do anything with a hover. Not yet. We just want to see how this looks, and I actually looks pretty good. I'm pretty happy with that. The hover is terrible, though, and the active state is. I guess it's fine. It's only hover. Let's go ahead and change us to another color. Do do do do do, man. Let's select that color, I guess. Okay, so that underlying there stays the same, but that background color doesn't change. Back on color is white. That's correct. We don't want that to be white anymore. Let's take this color and let's just make it a little darker, just a tad darker. Save. Let's refresh. That looks pretty good. I like that. I'm happy with those now. If you're not happy with those, that's okay. You can modify that all you like You don't have to build exactly what I'm building here. You can make it look nicer. You to make it look ugly. You could make a look retro. You do anything you like with it. So the next lesson, what we're going to do is hide this motile by default, and then we're going to add some JavaScript so that we can actually click the open button, and these clothes, buttons and accept buttons will actually do something. 11. Hiding The Modal By Default: Okay, now that we have these motile elements, we've got this mortal box in here and we've got this background. Let's go ahead and make sure that those don't show up by default. And as I'm actually looking at this, I'm noticing that this corner is a little too hard and I sort of wanted to match these corners down here. So a little rounder eso before we do anything that's hot back over to our motile box and let's give that a border radius of four pixels and that just matches the buttons refresh. And that looks a little less sharp. I like that. Now we need to hide these. We want these to always be in our document object model. So if we right click and go to view page source Wow, that's huge. Andi scroll all the way down. We should see these two elements all the time in our source, but we don't want it to show up on her actual page. We need to hide it now to do this nicely with JavaScript, we actually need to just change the opacity and change the zed index. So in our motel here, we're going to hide this one. First we're gonna say your pasty is going to be zero and by default it zed Index. Let's just say it's going to be minus 10 so it's going to be hidden and you can see that this is set twice. Originally, we said it's at 11 and now we're saying it's minus 10. So zero is where your page lays flat. Anything above zero is going to pop out. Anything below zero is going to layer behind the original page. Let's go ahead and just delete that and we'll see that it doesn't show up anymore. No, we just have to do the same thing with our background. That's the motile background here. We can change that site index to be minus 10 as well. It doesn't have to be further behind or in front of the metal box, because it's hiding behind everything anyways. And to make sure that we can actually fade this in and out. Let's give us a nope, a city of zero. And this way JavaScript has something to work with. It can move that debt index into positive numbers, and it can also change that. Oh, pay city 200% or the number one, but we're gonna let JavaScript handle that. Let's go ahead and refresh your page. And now we don't have that motile showing up. But if we look at her source code and refresh here, it's still available. That's good. That means JavaScript will have something to work with in our document object model. That's all the code that you see in here. But the motel isn't right in your face right when you load the page. So when I refresh the page every single time, it doesn't show up. Now this doesn't work either. We're going to have to make that work. So the next lesson, let's add some javascript to open that motile. 12. Opening The Modal: all right, We need to add some JavaScript. Now, we're only going to write about 15 ish, maybe 20 ish lines of JavaScript, so it's not going to be a lot, but it's going to be modern JavaScript. So if you're not super familiar with javascript, that's okay. You actually don't even need to know what? You can just steal it from the final source code, and it's going to work for you. But if you already know a little bit of javascript, you know what? If you need a refresher, I have a JavaScript for beginners. Course, it is a very, very big course, very thorough. And it'll go over everything you need to know. So first things first. We need to create a script down here. We're not going to be using Jake weary or reactor view. We're going to use vanilla JavaScript, so we don't need to depend on anything else. So we need to first create some sort of node selector so that we can actually select one of these elements up here in the 1st 1 we need is this one. We need to be able to do something with this button. So we have this open button and I'm going to give us a class called Js Dash Open and I could just select all the classes called Js Open and then I can work with them down the road. So I'm to create a new CONST. In my script. Constant open Bt N is going to be a document dot query selector. Now I've only got the one, so I'm only going to select the one. If you have multiple, you can do cruelly selector all on. You can loop through all of them if you want, which will see with the clothes buttons. But with the open button, we only have the one, so we only need to specify regular query, select or not query sector All now we need to add an event. Listeners. Let's do open Bt and DOT add event listener and what happens when you click this button? So click is the event listener. Let's go ahead and use a function in here, and that first parameter in the function is going to be event and we always want to say events dot prevent default and what this is going to do is any time someone clicks your open motile button or this button. If it's in a form or if it was a link instead of a button, it's not going to do anything. It's going to tell your browser. Hey, don't do what it normally does. We're going to do something different. Then we need to make the motile box show up and the motile background show up. So we need to sort of selectees as well, and we can do this a different way. So let's lengthy motile background motile BG is equal to I'll just move that up a tad here . I'm not queries lecture. Let's do get element by i d. And this i d for the motile background. Is this one get element by this i d, and that's what we're gonna put in here. We don't need the dot because it's not a regular CSS query selector. It's a very specific function called Get Element by I D. So it's assuming that is already an I D. It's not a class, it's an attribute. Its i D. Let's go ahead and basically do the same thing with the motile box. So let's change that to two bucks, and over here we've got motile box and we're going to get that by its ideas. Well, that just matches up here. Total box and the idea Now, before anything, let's make sure that this event listener is working. We could do console, log Hello. This is a click. Save that page and when we refresh, let's just right click Inspect our element and go to console Let's click open You can see that this is executing down here every single time I click this button So that is working So now what we needed to do is when we click it we need the motile, BG and the motile box to actually show up. Now they're a few different ways We could do this, but I'm going to use mostly CSS for this. So before we can move on here, we need to be able to add basically an active class to our ah motile background and our model box. So intermodal background Uh huh. We can say select the motile background to CSS, but also, if it has a class called active, we can give it a Nope, a city of one and we can bring that set index forward to like 10 or something, and then with our mortal box, we could do the same thing here. So select I d motile box. And if it has a class of active, then we want to change that opacity toe one. And that is that index has to be just one notch higher than the background so that the box layers on top of the background. We're gonna give this 11 now to demo. If this is working without JavaScript, we can just go in here and I just hit command and clicked into place is Or if you're on Windows, I think it's just control and clicking to places. And I'm gonna give us a class of active both of them, because that's the CSS that we wrote. Now, if we go back here, this is not going to be executing any JavaScript, really? So if I refresh the background and the motile should show up just like that, So now we have thes active states and we can actually go into our inspector. So I just right click, inspect element. And if we click in here and get rid of it and clicking here and get rid of that one hit, Enter. It's working. That's exactly what we're looking for. So now we can get rid of these classes because it should be turned off by default. And in here we can say the Motile BG Dodd class list dot ad, and we're going to add the active class. So it's taking the class list, and that's like, for instance, button and button dash dash except and it's going to add active to it, we're going to do the same thing with our motile box. Let's get rid of this, and we're going to see when I refresh the page here and I click. This is going to open up, but it's going to be a little jarring. It's not going to animate the way we like, but it does open, so any time I refresh, click it, it opens. Now let's go ahead and make that animate as the last step in this video before we move onto figuring out how to close a model. So if we scroll on up here, we are going to have our mortal background and we need to transition in here, so transition and we're going to say, transition, the opacity. Let's take 0.25 seconds for the 250 milliseconds. And let's say easy in and out, so it looks nice and smooth. Let's also do these that index at the same time. So is that index 0.25 seconds. He's in and out now. We could just say all instead of specifying the too. But we really only want to specify the two. We don't need to animate everything else. We just need to animate your pasty moving in and out along with these at Index. Now we could do the same thing with our motile box. So if I literally just copy this line here, copy and paste, this should do what we're looking for. So let's go ahead. Refresh this page and click, and it fades in. We can't get rid of this yet, but it does fade in. And so that's how we open the motile. So it just has a quick little recap of the javascript. We said the open button is a query selector for the class called J s Dash open and whatever that is clicked at Event listener click Going to basically tell the browser not to do what it normally does, just in case. And then we said the motile background and the motile BG, which we selected by their respective i ds motile background on metal box. We selected their class list and we added active to it so that it shows up in the next lesson. Let's go ahead and make sure that we can actually close these. Now there's two buttons, so we're going to do it a little bit differently. 13. Closing The Modal: all right, so we have this motor that opens up, but it doesn't close. Why? Why doesn't it close for us when we click closer? Except it doesn't do anything. That's because there's no JavaScript event listener attached to these. So let's add JavaScript event listeners. That's going to look for whenever one of these buttons is clicked on. And then it's going to close the motile for us. Now this is getting a little more advanced JavaScript and again, if you don't know javascript, you don't care to know JavaScript. That's cool. You could just copy and paste my source code, and it'll just work for you as long as you have the element I ds and the classes sort of name the same as I have them. The JavaScript will just work for you. Let's go ahead and grab all of our clothes. Buttons of CONST closed Bt ends is equal to documents dot queary selector All we want to select all of them and we're gonna start all the buttons called Js close and we don't have any. So let's add it in here J s clothes. So no matter what happens if someone clicks clothes or accept, the same thing will happen. So we have these clothes buttons in here and a cool way of showing this off is Consul. Don't log close bt ends and I just matches this variable name here. And if I right click, inspect and then refresh the page and in my console you'll see that I have this thing called a node list and I have two of them in here. You can actually see that they are available in the document object model whenever I move them here. They're just not visible yet. And so each one of these buttons in JavaScript terms are in html, terms is called a note, and we're going to have to loop through these and basically allow the same action happen on both. So let's go ahead and get rid of that council log and say close Bt ends. We want to loop through each one. So for each again, this is more modern javascript as well. And we're gonna say passing each note and with each node weaken, do something so we can console dot Log That individual knowed you say node is no den fresh , says note is and this one has the close button, and this one has the one called button dash dash. Except they're not visible yet. And that's OK, but if we make invisible, you can actually see that it's selecting the buttons here. So those are the nodes. Now with each node, we want to be able to add an event listener. So we say no dot and even listener every time you click this node. So it's going to look through the 1st 1 say, but in close, Okay, at an event listener whenever you click it and then it's going to go through the 2nd 1 to say, Okay, when you accept the 2nd 1 or you click this one, do something as well so we can pass in a function in here, and this one is going to be just e. So we Paston event in the 1st 1 In the second, when we're going to pass any, it's the exact same thing. We just renamed it. You got prevent default. You can see it's the exact same as what we have online 1 45 and I'll throw that up just a tad, and now basically, we want to take this line But we don't want to get the motile background of the motor box class lists and then add, um, we actually just want to remove from them. So it's going to grab that motile BG that's up here. It's already been selected only ever needs to be selected one same thing with the motile box. It's gonna grab that class list. Currently, there is no classless, but if we clicked open, it's going to add the active class. And if we click, close is going to then remove active class. What's going to stay active whenever we click the open button, and when we click the close button, it basically just gets rid of it for us, and we can get rid of this console log. Now let's go ahead and refresh our page and let's see if this works. If I have any typos that will let me know, okay, that works close networks perfect and the except works as well, so they both work, and that is how we create a hand rolled custom made motile using our own HTML, CSS and JavaScript. So now you don't need to use bootstrap or foundation or tailwind or anything like that. You can make your own 14. Code Cleanup: Okay, look, we are nearly there. We just have a little code clean up that we can do here. So we have some javascript in here and we also have a bunch of html are not html CSS. So it's grab all of our c s s here, all of it, and cut that and we're going to you just get rid of those style tags and it's great a new filing here called style dot CSS And in here we're just going to paste that exact same CSS . So we're just going to move this into an external style sheet. And currently, if we save this page, this is going to break everything. It's not going to look good at all, But we can add that back very, very easily with a link attributes in the head. So link rail is equal to style sheet and we should see that right here. If I spell that right and see that these to highlight each other whenever I click one of them and we're just going to link to a style sheet we're going to link to style dot CSS. That's literally all we have to dio Now if you put this in a folder called CSS. So instead of having style here you create a new folder called CSS. And then put this file called style dot CSS inside of that folder, you would use this kind of path, but we don't have that. So we're not going to use it. So let's save that refresher page. And today that works. Now we need to go and grab our javascript, which should always be at the bottom of your page. Let's grab all this JavaScript, and we don't necessarily want to delete this JavaScript. We would just want to repurpose this one. The javascript SRC is going to be. Let's call it app dot Js. And currently this is not going to do anything. But if we create a new file in here called app dot Js and I just paste that javascript in here I go back here. Refresh my page. This works now. Good way of debugging. This is right. Click. Inspect. If something is not working for you in your JavaScript, go to your console and just refresh your page. And it will tell you that you'll have a typo or something like that in there. for instance, if if wasn't called apt address, maybe it was called main dot Js or script dodge as well. That file does not exist. You don't see it in the folder over here beside index dot html. So that's going to complain. So I can do is a refresh this page and I've got a warning in here and it says loading failed for script with the source. And then all this stuff is the word. My files are script at. Jazz does not exist, just can't find it. You can always go into your inspect tools and check out your inspector and your counsel, and this will help you debug everything regarding JavaScript. 15. Your Project: all right. Your task for this lesson not this lesson in this course is to basically recreate what I've created. Now, maybe you've been courting along with me and if so, great. If not, don't forget you can download all of the project files and you can modify this to your heart's content. Now, what I would like you to do is change the background image, change the button styling so it looks a little different. Doesn't necessarily have to be the same way I have. It could be any way that you like. You don't have to do anything with a JavaScript. That's fine. You can literally just steal the JavaScript. I even have that in your you can write your own JavaScript or you can steal mine to make your model work. But you're motile should always work, and then you should change the maybe changes. Styling of this motile in general doesn't necessarily have to be a white background. I like that style, but, you know, maybe you don't maybe add a box shadow behind it. If you wanted to change the clothes and accept buttons, you do all sorts of stuff. So feel free to customize the entire source code and make it look and feel the way you want it to. Then once you're done writing all of your code, you can go to your project section in skill share. Every course comes with its own project section, and you can either put it all in a code pen. You can show that code pen link or you can take a screenshot. Do you take a screen shot of what you have, and you can share that as well, so make sure you share the before and after. And don't forget. If you have questions along the way at any point time, you can leave them in the section down below in the very last note. But your project here is again. You can download all of my code, and if you break anything that's OK. You can just throw away those files and you can read download the code and you have the exact stuff that you see right on my screen here