19 Web Dev Projects – HTML, CSS, JavaScript Tutorial

Key Takeaways

Hone your skills in HTML, CSS, and JavaScript by building a bunch of realworld projects. In this course, Barack will teach you how to build web development projects, including UI components, games, API powered apps, and more. This course will help you understand HTML, CSS, and JavaScript at a deeper level. Welcome to 100 days of code with HTML, CSS, and JavaScript. a hands-on course where you will build real projects every single day using these core web technologies. By the end of this course, you will be confident enough to build your own projects from scratch because once you complete it, you won't just understand the concepts, but you will also have 100 completed projects to showcase on your resume. Some of the projects we'll build include an e-commerce shopping cart, a weightless UI, a QR code generator, OTP input fields, frequently asked question accordians, light and dark mode toggle, password visibility toggles, and much more. We will also create practical UI components like order history pages, progress steps, team member sections, star ratings, pricing cards, contact forms, credit card formatterers, and even a custom 404 page UI, and plus a ton of other real world applications. Now, this video that you are currently watching on YouTube is the first 12 hours of the course. You can find the full version on Udemy, and it's ridiculously cheap. I will leave a discount link in the description. And before you ask, let me answer the question. Yes, I'll still be making free courses. And if you want to support my work, you can purchase the course with the link in the description. If you want to see every single project included in this course, just scroll down to the core sections. You will find a one minute preview for each project so you know exactly what you will be building. This course is completely beginnerfriendly. I only expect you to know the basics of HTML, CSS, and JavaScript. Nothing advanced, just the basics. I'll walk you through every project step by step, explaining everything along the way, so you never feel lost. Some students have already tried a few of the projects from this course, and they absolutely love the experience, and I'm pretty confident that you will enjoy it, too. This course is perfect for anyone who wants to build daily projects, stay consistent with coding, develop strong front-end skills, and learn something new with every build. And if you're serious about learning to code, but you don't know what to build, this course give you a clear path and a solid starting point. It also comes with a 30-day money back guarantee. So, if for any reason you decide it's not for you, you can request a full refund within the first 30 days. Now, I could talk about these projects for hours and hours, but I'll just keep it short and I'll see you inside the course. I just wanted to let you know that recording this course took me a couple of months, but subscribing will take you literally a second. All right, so before we start coding, let's try to set up our workspace. In this tutorial, I'll be using VS Code as my code editor. If you would like to have the exact same workspace that I do, you can go ahead and install it if you don't have it already. So, just search for VS Code, click to the first link, and here you will see a big download button. Now, it doesn't really matter if you have Mac or Windows or Linux. This tutorial will work completely fine. In this case, I'm using Mac, but once again, if you have something other than Mac, that's completely fine. Okay, go ahead and install it now. Then you need to open this up. And here I'll just show you my exact same workspace. So first off, for every single project, we are going to have three empty files. So we're going to have the HTML file style.css as well as the script.js. We will always start from scratch like the content will be empty and I will walk you through it. Okay, so that's the first thing. Now in some projects, we are not going to have JavaScript. So in that case we wouldn't have this file right now. Let me walk you through the extensions that I have or the most important ones. So a lot of people ask me what theme that I use. So it looks this clean like the colors are looking very good. Let me just I don't know generate something. So for this color theme I am using Houston. It is free. You can go ahead and install it. Once you install that just say set color theme. Okay, click it and you should be good to go. Now, the other thing that I have is the live server extension. This is something that you should definitely have. Go ahead and install it. Now, what this does, let me pretty quickly display here. I have an empty Let me just delete this part. I have an empty index.html file. Right here, I'll put H1. I'll say hey. And I'll save. Now, we'll say open with live server. Now, when we go here, let me put them side by side. All right. So, I just have them side by side. Thanks to this extension, whenever you put something and save, it'll it'll reload immediately. But if you don't open this up with the extension, whenever you update, every single time you have to come here and then reload it, which is not really convenient. So, that's one of the most important extensions. The other one that I'll be using in this course is the Google Fonts. Let's search it. I'll maximize the screen. Okay. Go ahead and install it. Now, this is going to allow you to import Google fonts while being within the VSS code. So, once you install it, then you can come here. Let's say go after the title. You can press command shiftp. Okay. Command shift and P. If you're on Windows, this would be control. Go ahead and press that. You're going to get a pallet. Then here you can say Google fonts. Then we'll just select the insert link. So click to it. After a couple of seconds you're going to see all the fonts that we have in Google. So we can say something like popins, right? And this is going to install the font family. And we'll be using this a lot. This also work in CSS file. Let's go right here. I'll just give you an example. Once again, command shiftp. And we'll say Google fonts. this time insert uh you know insert as CSS import. So click to it. You can get any font family. As you can tell it's going to import it. So this is something that we'll be doing time to time. For that reason I want you to install this extension. Now another important thing is the code formatting. So notice how if I add some extra spaces once I save it nicely predify my code. Right? For this, I'm using another extension called Pritier. Go ahead and install it. It should be this one. I'll zoom out so you can see it clearly. Okay. So, go ahead, install that. Then scroll to the bottom and maybe copy this part. Okay. The very first line. Once you copy it, you can press command shiftp and you will say open user settings. Make sure you have, you know, the JSON right here. Okay. Go ahead and run this. you will get this file. Then you would like to paste it somewhere. It could be anywhere. Like I would say go at the very bottom and paste that line. Since I already have it, it is warning me, but you get the point. You're not going to have this. So just go ahead and paste and save this file. The other thing that we would like to do, pressing command shiftp, going under the settings. I'm sorry, we don't really need to go into the settings. So just stay in this file and here type this out. So I already have it. So you can again just have it at the very bottom. It's completely fine. Um type this out. Let me zoom in exactly in this way. So editor format on save and colon then make it to be equal to true. Now what this does is basically whenever you save right let's say once you save it's going to format it on save. Now, one of the other extensions that I'm using is called VS Code Great icons. Okay, so I'll just try to zoom out so that you can see it clearly. If you wanted to have the exact same icons that I have, like the folders look like this. I think it looks pretty cool. And this is this is the extension that I'm using. You can see the entire example right here. But yeah, once you install it, you just need to say set this as the file icon theme. And then of course you have to select it. One more extension that I'm using is called auto rename tag. Let's search for it. So it is this one. It's really really handy. Let me display what that does. I'll zoom in. So here, let's say you have a P tag. You just have some content and then you decided to update it. So here you can just say, okay, this is going to be a span and it'll automatically update this part. If you don't have it, like if you don't have this extension, you have to copy this part and then paste it right here. Okay. So, let's say you decided to make this H6. It'll automatically update the closing tag as well. So, that's the beauty of it. I think these are all the extensions that I can mention at the moment. If you have any questions about the extensions, just let me know under the comments or the questions section. I'll just be there to help you out. All right, so that was the workspace setup. If you encounter any kind of issues, just let us know in the questions part. All right, so let's get started. In this section, we're going to build a quiz game. And before we jump into the code, I'd like to show you the end result so that you know what you're going to have at the end of the section. So this is the UI that you're going to get when you first visit the application. We have a button where we can start the quiz. I'll just click it. The UI will be updated. We got a question and how many questions we have in total and what is our score as well as a progress bar. So let's go ahead and answer some of these questions correctly and some of them incorrectly. So here we go. We got different feedback depending on our answer. Right. So let's try to complete it. Okay. Now once we are done with it, we are going to get a feedback as well as how many correct answers we have. Depending on the answer, we will have a different feedback. So if this was five out of five, you would get something like perfect, you're a genius, something like that. And if you got like one out of five, it would say keep studying, you'll get better, and you can just restart the quiz. So this is the end result. This is what we're going to have. Now let's just jump into the code. So, I just have an empty folder in my VS Code. This is the name that I came up with. Quiz-ash game. You can call this anything. Just go ahead and open this up. Now, we're going to have two I mean three different files. I'll say index.html. Let's create style. CSS as well as the script.js file. These are the convention names. You can't really call them anything but most of the time this is what we're going to this is what we're going to call them right all right so the first thing we'll be doing get started with HTML then we're going to put the styling and finally we will put the JavaScript to make it functionally work right so let's go into the index html and I can just zoom in shrink the left hand side and just get the boiler plate code with this exclamation point with VS Code all right let's just put the title Let's say quiz game. And then we can link our CSS file, right? We can say link colon CSS. Here we go. If your file name was something like styles, let me put styles. CSS, then you would come here and update it. But if you go with the style, this is the benefit in VS Code, right? If you just say link CSS, it is the correct name. Okay. So this is one thing that I'd like to mention at the beginning. Now we'll go ahead and build the uh HTML part right the markup. So I'll go ahead just right inside the body I'll say I'll have a dev that will be my container. So I'll say class container and then the other thing we would like to have is the start screen. Now let me display pretty quickly. When you refresh, this is the start screen, right? When you say start quiz, the start screen will will just disappear. And this is what we call the quiz screen. So, we're going to build two different divs for them. I'll say one div. And let's duplicate this. Give a little bit space. This is going to be the start screen. I'll say class. It will take the class name of screen. And initially, this will be the active. And then let's put a uh put an ID so that we can select it in our JavaScript file. I'll say start dash screen. You can call this anything but I would say just follow along with me. Just do whatever I do like at least until you complete the project. Once you are done with it, you can go ahead update anything. Uh just customize the project, make it your own. But if you are following along, just go with me so that we can have the exact same output and you don't really encounter any problems. All right. Now, the first thing we would like to have is the H1. I'd like to just put them side by side. Um, let me take this if I can take that correctly. Okay, for some reason I can't. Okay, here we go. And I would like to run this demo application. So, this is the end result. But the one that we have, I'll just say open with live server. It should be right here. Here we go. Now, I got some warnings because I am already running the demo application, but that's fine. Now, we don't have any content at the moment, but let's go ahead and get started with it. The first thing we would like to put is this H1 that says quiz time. So, right inside this start screen, I'll have an H1 where I'll say quiz time and exclamation point. Right after this, we'll say P tag and we can put this text. Let me copy and paste. We can type this out. And this should be the output. We're going to add styling just to make it nice. And finally, we'll have a button. Let's say start quiz. And this will take an ID. Let's say start banan. Okay. Now let's build the other screen which is the quiz screen. Right. I'd like to maybe just shrink this a little bit more. Okay. So this is the one that we're going to build for the quiz screen. Let's say class of screen and we'll say ID will be quiz dash screen. Let's put let's put the markup. So I'll have a div. This will be the quiz header that we have. I'll say class quiz dash header and we'll say it'll have an h2 that will have an ID. Let's say question text and we'll say question goes here. So we can put really anything here because we will update this. We will update this value whenever we got a next question. Right? As you can tell, this will be updated with JavaScript here. We can see every single time this will be something else. So I'll just say question goes here. And then we'll go ahead say div that will get the quiz info. So I'll say class quiz dash info and then we can put something like P tag and we'll say question. So this is the part that we are trying to build. We'll say question and now as you can imagine this part is dynamic. So when you select something it'll be updated. So we would like to have this as a span so that we can have an ID. I'll say current dash question and at the beginning it'll be one but we will be updating it whenever we go to the next question. Right? So for now we'll just start with one and then we'll say of um span. So once again we'll have another span because we will say questions.length. Maybe in your code you will add 10 different questions. So this will be dynamic depending on the length of the questions list right depending on the array. So for now just follow along with me. I promise everything will make sense once we just move forward with this project. All right, I can show you the entire screen. I'll just zoom out so that you can see everything in one line. Right after this P tag, we're going to put our score. Right, so I'll say give a little bit space. One more P tag and I'll say score. Now this part once again will be dynamic, right? So we'll say span. Uh, initially it'll be zero. And to be able to select it from our JavaScript code, we'll say ID of score. All right. So this is what we'll have for this span. So I would like to save my code. Right after the quiz header, I'd like to put an answer container. So this is that container here. We can see we have a bunch of different answers and we don't really know what are going to be the answers because if you take a look at it, whenever the question changes, we got different answers, right? So this will be dynamic coming from our JavaScript code. That's why we're going to leave the content empty. So let's see what I mean. We'll have a div. Let me zoom in. So we have the div. We'll say id of let's say answers container. And this will take the class name of the exact same thing. Let's say answers container. So we'll use the class to give some styling. And we'll use the ID to be able to select that query selector. Right now I'll just put a comment here. I'll say answer buttons will be inserted here from our JavaScript code later at some point. Okay, so this is what we're going to have for the answers container just an empty div. Then we can put the progress bar. I'll say div. Let's say class of progress dashbar and we'll go within this div. We'll have one more div with the let's say ID of progress and class of progress just like that the content will be empty. We will calculate it depending on where we are. Right? Okay. Now let's save. This is what we'll have. And finally we're going to have the result screen. Right. Let me just pretty quickly complete this. Okay. So this is the result screen that we're going to have. uh right after the progress bar as well as this div which is our container for the quiz screen right we'll have one more screen let's say div this is the very last one and we'll say id will be result dash screen and at the beginning of this tutorial I said we're going to have two screens but my bad turns out we are going to have three different screens the quiz screen result screen as well as the start screen right okay once again. My bad. Let me just zoom in. This will have the class name of screen as well. And if you say active on this one, which is what we're going to be doing once we complete the project, this is what you would see. But initially, this will not be the active. Then we can have an H1. Let's say quiz results. Then we're going to have this text, this one, and then the button. I'll just say div name of result dash info will have a p tag let's say you scored in the span because this will be dynamic let's say initially it'll be zero and then ID of final score within this p tag but outside of the span we'll say out of I'll just zoom out so that you can see it clearly we'll put another span let's say this will take the id of maximum score and we can say something like five and right after this p tag we would like to put the result message so I'll just say dev let's take the ID of result dash message and for now we can say something like good job but depending on your performance you'll see something else right and we're going to put this in our JavaScript code I'll say Good job. Then finally, I think that's it. Uh the only thing we left is this button. So right after this result message and this div which is the result info, just go outside and say button ID of restart btn and we'll say restart quiz. Okay, so believe it or not, this is the entire markup that we need to put that we need to have. Now, we'll just jump into the CSS file and get started with the styling. So, I'll just visit the CSS file that we have and let's get started with the basic reset. So, I'll say basic reset that we're going to have in almost every single project. So, the first thing you would like to do just say asterisk and then say margin of zero on every single element. Same thing for the padding. And then finally, and the most important one is the box sizing of border box. So I I assume that everyone knows this, but just in case some of you guys don't know this, I'd like to explain pretty quickly. If you know this properly, you can just skip couple of seconds or even minutes. Okay, so I just have a diagram that we're going to go through. And this is the end result screenshots that if you wanted to have the link of this diagram will be in the description. Okay, now let's take a look at the box sizing of border box. So what this does in the first place, it changes how the browser calculates an element's total width and height. Now what happens if you don't use this, right? So let's say you don't have this in your code. Okay, this is what'll happen. Let's say you would like to have a div with 100 pixels wide but you have added some paddings such as 10 pixels horizontally from the left hand side and right hand side. Now what'll happen is this browser will say all right you wanted to have 100 pixels but now you have added 10 pixels from the right and from the left. Okay so we got 10 and 10 more. Now, in total, we have 120 pixels, which is something that we don't really want. At first, we said, "Hey, dude, we want 100 pixels wide." But now, we have 120 pixels, which is something that is unexpected and that we don't really want and need, right? What we want is this one. We would like to say, okay, let's go ahead use the box sizing of border box. So, this is the example. if you use it. I'd like to just copy this or maybe do Ctrl + Z a little bit. Okay. So, this is what will happen. We have 100 pixels wide and we would like to add some paddings from the right hand side and left hand side. They will be added. So, we got padding from the right and left. They're equal to 10 pixels. Now the rest is going to be 80 pixels because in total we have 100 pixels. And now if you take a look at this at the end of the day you still have 100 pixels wide depth. And this is something that you would like to have 99% of the time. Trust me, you don't really ever want to have the other case where width changes because just imagine you came here in your code, right? You said I want this div to be width of 100 pixels and you write some more CSS properties and then you said all right padding is going to be let's say 20 pixels and then now the width has changed because you didn't use this property and this is something really really common if you like if you have ever got unexpected results you would know that it is because of this property I hope that makes sense. At the beginning, it kind of feels complicated, but at the end of the day, it just changes how the browser calculates an element's total width and height. All right, so I'll just leave the example here. You can watch this again if you don't really understand it or you can do some quick research. Just try to play around with it until it makes sense. Okay, now with this in mind, let's move on with our styling. This is something that I wanted to explain just just before we continue because this is the most important thing I think. Let's say body we're going to put the background color. This will be a custom color like F5 EF6 just like this one. And then we can say display of flex we'll say justify content center. And notice how I am using shortcuts. So I'll just say J CC and it should be completed. Same for the item uh let's say align item centers or center I should say a C. Then we can say minimum height of 100 VH and we can put the end result just next to it. Okay. So this is what we have at the moment. Let's say we would like to add padding from all directions of one rem. And then let's change the font to family to be sans serif. Let's save. This is what we got. Now we would like to update our container. I'll go ahead select this one and I'll say background color of let's say white. This is going to be for the container. We can add some border radiuses. Let's say one ram. And then we can give some box shadow. I'll say zero. We'll say 10 pixels. 30 pixels. And then we can add an RGBA color. Let's say zero. And it'll be basically black. But we're going to change the alpha value. So I'll just say 0.1, which stands for 0.1. If you wanted to, you can um change this. Let's say like 0.7. It is a lot more dark, but I think it doesn't really look nice. This one is a lot better. It is just subtle, but if you wanted to, you can update it. Then we can say something like width of 100% but the maximum width will be 600 pixels. Just like that. And then we'll say overflow of hidden. Finally we'll say position relative. All right. Now we'll go ahead and just build our screens. We'll put some comments. Let's say screens. We'll have the screen class that will be display of none for all of them because we will add the active just in a second. Let's say petting of twom and then text align of center. Now everything will be disappear. Let's let's comment this. Okay, this is what we're going to have only if only if we have the active class. So we'll say if screen has the active class we'll say display of block here we can see and if you take a look at the HTML code we have the active class let's see we have the active class on start screen if you cut it from here and put it onto the quiz screen here we can see now this is active so I hope that makes sense but initially the start screen should be active and by the way I have an additional folder. It's because uh I am running the end result as well as this demo application. They are both on a different port. VS Code just added this. If you don't have it, it's not really important. It is just a configuration file that I'll delete at the end of the section. All right. Now, let's go into the CSS file and keep building our styles here. I'll go ahead and just add the start screen. Okay, I'll select this start screen. Let's go ahead select the ID. I'll say H1 and we can say color of let's say E86 A33 and I'll say margin bottom of 20 pixels. Then we can say font size of 2.5mm. Okay, let's see if this is what we got. This should be active on the start screen. Okay, I have a typo. That's why it did not work. Here we go. Now, it has been updated. Now, let's move on. I'll just go at the very bottom. I'll have the quiz screen. So, I'll say dot quiz-ash header. We'll say it'll be margin bottom of 30 pixels or you can go with two twom. It should be the similar values. And then we'll say question dash text. We can add some more styling to the colors like 333. And then we'll say font size of 1.5 RM. Let's say margin bottom of 1 RM. And finally line height. Let's just increase it by 1.4. And then we can say update the quiz info. I'll say quiz dash info. We'll go ahead say display flex. And you can always take a look at the end result just by going in into the diagrams. Okay, so we're going to be building the quiz info which is this part I believe. Right, we have something on the left, something on the right, etc. And we'll say display flex. Let's say justify content. Now it's going to be not center but instead space between because we have something on the right. I mean something on the left and something on the right. So they should be space between. We'll say space between. Let's give the color of six six. Then finally we'll say font size of 1mm. Do we really need it? I think we don't really need this. By default it is 1M. And finally we'll just say margin bottom of something like 10 pixels. All right let's save. And then we'll go ahead update the answers container. Okay. So right here I'll I'll have display of flex but this time it'll be flex direction of column because as we can see we have something at at the top right and then it is just going in the column direction. Then we'll go ahead say gap of 10 pixels. Finally margin bottom of 25 pixels let's say. Then we can put the answer button. So every single one of these that you see, let me change the color pretty quickly. So this is an answer button. This is an answer button, right? Every one of them is an answer button. So let's go ahead and build it. I'll say dot answer dash btn. This is the class that we had. Now we'll just say background color of this custom color F8 F0 and E5. Then we'll go ahead update the color itself. Let's say it'll be 333. Then let's update the border. I'll say 2 pixels in the solid and color of E A D BC8. All right, we'll go ahead say border radius. Here we can see they have some rounded corners. So we can say 10 pixels. And then we'll give some padding. Let's say just one. And then font size. I'm sorry. Let's say cursor will be pointer. Then we can say something like text align left. And when we hover over this, we want the color change. So I'll go ahead say restart the quiz. Here we can see the background changes. So we can say something like answer btn hover and we'll say uh let's say background color will be updated to this value. I'll say e a d bc but it'll be eight this time and then we'll say border color will also be updated. We can say border color this will be d a c 0 a e. And let's actually take a look at what we have. So currently we cannot see that part because we don't really have the answers, right? We don't really have anything in the markup. This would be inserted. So we cannot really test it out. But we can take a look at the end result. And I want this transition to be like smooth. As you can tell right here, it just slides the uh slowly fades in. So we can go ahead and add it right here. I'll say transition will be on everything. Let's say all and it'll be 0 3 seconds. And we can say say the e is function. Okay. Then we can change the correct and incorrect styles. I'll go ahead say answer button dot correct. So if it is correct, we're going to get this green feedback. I'll say background color. It'll be this one E6 FF and zero. So it is kind of like greenish color. And then we'll have border color. It'll be something different like A 3F 0 C 4. Finally the color itself. It'll be 28 A745. Now let's duplicate this. Basically I'll select everything. Duplicate this. But this time it'll be incorrect. And for the colors, please feel free to go ahead pause the video, type this out. This is what I'll be doing. Just copy and paste. And then we can move forward with the progress bar here. I'll go ahead say select the class and we can give it a height like 10 pixels. Then we can say background color of let's say F8, F0 and E5. And this should have the hash at the beginning. Then we'll say border radius of 5 pixels. It is just a little bit subtle as you can tell. Then we'll say overflow of hidden. Finally, we can give some margin top of something like let's say 20 pixels. And then we'll just get the progress itself. So one of them is the container, right? This is the container and this is the progress itself. I hope that makes sense. We'll say the height will be 100%. So it'll just fill the container. Then we can say background color will be something like this value E8. Do we have it already? Okay, it is this one. As you can tell, we have used it previously in this button and in the title here. I'll go ahead say width of this. Initially, it'll be 0%. Right? When you first start the quiz, you don't really see it. It is width of zero. And as we move forward, as we select something, it'll just get incremented dynamically from our JavaScript code. Then we can add some transition like transition will be implemented on the width. Let's say 0.3 seconds and ease. You can give one of them, but I'll just go with this one. Then we can finally add the results screen, which is going to look like this here. Let's go ahead select that one. And maybe I can add a comment like result screen and just scroll a little bit to give some space here. I'll just select my uh let's say ID. I was going to say class but it's an ID. We'll say result dash screen and we'll select the H1. So I'll give the color this classic color that we have. And then we'll say margin bottom of 30 pixels. Then we can select the result dash info here. I'll go ahead say background color will be this value. So it is f8 f0 e5 and we'll say border radius of 10 pixels. We'll give padding of 20 pixels and finally margin bottom of 30 pixels. Then we can select the p tag itself. Here I'll say result info and p element. We'll say it'll have the font size of 1.2 RM. We can give the color which is going to be 333. And finally margin bottom of one rim let's say. And then we can select the result message itself which is this one. Right? We got the P, we got the H1. Now it is time to get the result message itself. I will select it with the ID. So this is the font size. The font weight it'll be a bit bold. Right? And then the color itself now we can change the button itself in general. Right? We can say just select the button elements. We'll say background color will be the primary color that we have so far. Then we can give the color itself to be white. And we can say border will be none. Border radius will be 10 pixels so that they are rounded. And then we can say padding will be 15 pixels as well as 30 pixels. Then we can say font size of 1.1m. We'll just increment it a little bit. We'll say cursor will be pointer just like this. And finally we can add some transitions. So first I'll save. Take a look at the end result. This is what we have right. Uh when you hover over this nothing happens. So we can say button on hover state. We're going to change the background color. It'll be D4 5 B as well as 28. But there is no any transition. So we can go ahead add the transition on the background color just like what we have done previously. So now if you take a look at it, there is a transition. I think we are missing the margin top or margin bottom from this text. So let's see if I have a typo. Then we can fix it. It should be in the start screen. So we are just missing this P tag margin bottom. And here is where it comes from. I'll just add this five lines of code. We selected the P tag under the start screen. We added some margin bottom and some other styling like color and font size. Let's save. Here we go. Now it has been updated. And just before we jump into the JavaScript file, what I'd like to do just scroll to the very bottom and add some media queries so that our application is responsive. Let's take a look at the end result. So I'll just try to refresh my page and try to open up the dev tools. So whenever we hit 500 pixels, just take a look at this. the UI will just change a little bit. So everything will shrink as you can tell. Let's take a look at the quiz screen once I hit 500 pixels. Everything just shrinks a bit so that it is responsive and it is looking nice in our mobile phone. So this is what we'd like to do. Just update some stuff whenever we hit 500 pixels and below. So I'll just say responsive design and we'll say add media. Then we can say something like maximum width of 500 pixels. So this will basically tell to the browser whenever we hit so let me type when we hit 500 pixels and below go ahead and just implement the styles below. Okay. So, I hope that makes sense. Let's try to get started with it. The first thing we would like to do just maybe update the uh padding on the screen. So, I'll just say we have the screen. We would like to change the petting to be something like let's see what we had previously. I don't really remember. Let's take a look at it. Okay. So, padding is two RAM. By default, it is equal to 32 pixels. So we can basically shrink this to health. So I'll just say 1 RM, right? Then we can change the font size of the H1. So I'll just say start screen H1. It should be font size of let's say 2M. What it was at the beginning? Did we update it? Okay. So it was 2.5 and we'll just update it to two, right? Two RM. And then I'll add a couple of more things that is not really hard. That's just super simple. This is what I what I have added the question text answer button and the button itself. Now let's save and try to see. So this is our application. When we hit 500 pixels, it just changes a bit, right? Okay. You can pause the video, change anything that you wish, but these are the values that I'll have. Now that we have the styling as well as the markup, we are ready to get started with the JavaScript file. Now, before we write anything here, we would like to link this file from our index.html file. So, just right above the body, I'll say script and select this source option. We'll just say script.js. Okay. Now this file is linked to our website and that means we can go ahead and get started with it. So the first thing we would like to do select our dome elements. So I'll go ahead add a comment and we'll have bunch of different selectors. Let's say the first one will be start screen that will be document getelement by id and then the ID was start dash screen. I'll duplicate this. will have another one. This will be for quiz screen. I'll basically uh select this part. Press command D or control D. Let's say this is the quiz screen. Now we'll have bunch of different elements and if you don't want to type them out, I have prepared a GitHub gest that you can find. The link will be in the description completely free. Okay. So this is what we have. Just find the quiz project. MD and you can copy this entire selectors. So I'll get into this just in a second. For now, this is what you need to copy and paste. I'll basically delete everything and paste this in. So we selected everything. This will save us a lot of time. We basically have the screens. Let's say we have the button, the question text, answer container, and all the elements that we'll be using. And then we're going to create an array of quiz questions. So, as you can tell, like I can copy and paste. No need to type this out from scratch. Okay, let's just paste this in and I'll walk you through it. And also, let's take a look at the end result. So, we have five different questions, right? First, we have an array that has five different objects. They all has the same fields. They have a question, which is the question itself, right? And then a list of answers. And each answer has a text as well as if it is the correct answer or not. So in this question the Paris is the correct answer. Right? So that's why we said this is true the others are false. And depending on this field we will give this kind of an uh feedback. So I hope that makes sense. You can add a lot more questions but for now I'll keep it simple. Just have only five different questions. Okay. Now we can shrink this list and just scroll to the bottom get started with our variables. So I'll just say quiz state bars and we'll have three different variables. So I'll say let current question index at the beginning once you start the application you will start from the very first question that's why you will say zero and we'll say let score which will be equal to zero at the beginning and answers disabled boolean which will be equal to false. Now why do we have this field? It's because let's say you click to this answer and you immediately click to it again. You don't really want the score to be incremented, right? When you first click to it, it'll be disabled until we get the next question. I hope that makes sense. Really important field that we should have. And then we can now uh like update our question and total counters. So what do I mean? Let's say total questions span. This is the element that we just selected right here. We will go ahead select this and we'll say the text content will be equal to quiz questions.length. So this is what I have explained previously. Let me go ahead and save and if we say start quiz nothing happens but we will just see this in in a second. Now I'll also say the maximum score span will be equal to text content of quiz questions dotlength. Okay, we'll just see these two different lines what they do in a second. Then we can add add our event listeners. Let's say start button dot add event listener. Right? Once we click to it, we would like to do something which will be the start quiz method. Let's go ahead and create it. We'll say function called start quiz. For now, we'll just leave it empty. Or you know what? Let's actually say console log quiz started. And let's duplicate this one. And this time it'll be for the reset restart button. Sorry. We'll say click restart the quiz. And this will be another function that we'll just build. So we can duplicate this one and say restart quiz. Okay. Now let's open up the terminal. I'll just click to this one. Okay. What do we have? It says text content. Where do we have? Do we have a typo? Let's see. So I think we have some kind of typo because one of these is equal to undefined. So let's take a look at this. It is called total questions. I'd like to open up my index.html file. Do I have any typo? Let's say total questions. And looks like I don't even have this field. Now let's see what are we missing. So right here when we said one of it should be five, but we'll add this ID that says total questions. Okay, just go ahead add this field. We forgot to add that. But now we should be good to go. I'll click to this button. It'll say quiz started. Right. Okay. Now that we have the methods, we can I think just start building them. So the first thing we would like to do, let me first zoom in. Once we start the quiz, we would like to just reset our variables. So here I'll say reset bars and we'll say the current question index will be equal to zero because we are just starting the quiz. Score will be equal to zero. And we will just update that span. Let's say scores span dot text content will be equal to the score variable which is equal to zero. You can also put zero like this but I think this is yes let's actually do it here. I'll just say zero. Okay. Now let's move on. We will say start screen dotclass list dot remove the active class because we just started the quiz. We would like to make the quiz screen to be active. Here I'll say go ahead select the quiz screen and add a class list of active. I'll just save and test this out. I'll click to this one. Here we can see now this is active. the other one is not active. Okay, then we would like to say something like show question. So we're going to show one question at a time and we can put it into this function. So let's copy the name and create a function right here. Okay, once again we are going to reset the state that will be answers disabled of false because if we are going to show the question we would like to not disable the answers right here I'll go ahead get the current question so we'll say const current question and we can say something like quiz questions and we can add our index which is the current question index. We got the current question. Now we can update the question number right which is going to be this part. So here I'll say current question span dot text content we'll say whatever the current question index is plus one because this will start from zero we would like to say something like one. Okay. So this is the very first question. Instead of seeing zero, we'll just add one. I know that we are going really slowly, but I just really want to make sure that everyone understands whatever we do. Okay. Then the next thing is to update the progress bar. So first we need to get a percent. I'll say const progress percent. And let's try to calculate it. I'll say current question index divided by quiz questions dolength. I'll just zoom out multiplied by 100. So this is the math that will give you the percent correctly. Then we can say progress barstyle do width and we'll say whatever the percent is. This is what we have calculated. We'll say plus percent. Now imagine this is what we're doing. Let's say the percent is equal to 50. Now the width will be 50%, so it'll be something in middle right. This is exactly what we are doing. Then we can update the question text here. I'll go ahead to say question text dot text content will be equal to current question.ext I'm sorry the question itself because if you take a look at this array we have the field which is the question. It is this part right and this is exactly what we are doing. And after this, we can clear the previous answer buttons. So, I'll just say explain this in a second. Okay, I'll even add a to-do right here. I'll show you this what this does. But let's just write the code for now. I'll say answer container inner HTML will be equal to nothing. Then we can create the answer buttons, right? So, this is a button. This is a button. So on and so forth. What do we want to do? Basically go through these questions. For every single answer, right? Right. For this answer, for this one, and all of these, we would like to create buttons. So, this is exactly what we'll be doing. Let's go ahead and say current question dot answers do for each for each answer, we would like to run this method where we would like to create a button. So let's say const button document dotcreateelement and maybe we should zoom in. I don't really know. Let's zoom in. Okay. We'll say create an element that is called as button. Right? Then we'll say button dot text content. We'll add the answer.ext such as like Venus, Mars, Jupiter, whatever that is. And then we'll go ahead say button dotcl class list dot add we would like to add this answer button so that we can get the styling and then one important thing we need to add the correct property on the button right so this is false this is true and these are false how do we add it if I click to it how my code knows that that was the correct answer well we can use what we call a data set so here I'll say button data set dot correct and you can call this anything really like true but you know like anything seriously but it should be correct so that our code makes sense right this is at least what I'd like to call it and I'll say it is equal to answer correct so either it is true or false and only one of these buttons will be equal to true and I'd like to put a comment so I'll say what is data set. Now, basically, it is a property of the button element that allows you to store custom data. Okay? So, you would like to use a data set whenever you want to store some custom data. And this is exactly what we are doing. We are adding the true fields on a button. You can call this, you can use this on anything, not only on the button. Uh, but it is something to keep in mind. And I'd like to add a comment right here. It is something that you would like to use whenever you want to store some custom data. Okay. Now that we have added this field, we can add the click event into the answer itself. So when we click to it, something will happen. So we'll say button dot add event listener which is going to be the click event. We'll call the select answer method. This is something that we'll build. And finally we'll say add to container. Let's say um answer container dotappend child add the button. Now we have created the button did bunch of different things on it but we never add it to the UI. That's why we need this line to add it into the UI. All right. Now let's save. We need to create this method. Let's just scroll right above the restart function. I'll create this one. add it and just get started with it. Now when you attach an event listener by default it will get an argument called event. So we can take the event so that we know like so that we can do a bunch of different things and we're going to see what what that is. Now as I said before when we click to an when we click to an answer we should check if the answer is disabled or not. So we'll say if answer disabled is equal to true, we'd like to just return don't do anything. Otherwise, the score would be incremented in a way that that we don't really need. So now that we check for it, this is something like an optimization optimization check really. Then we can go ahead say answer disabled will be equal to true because we are just selecting an answer. and we'll say get the selected button. So I'll say const selected button. Now how do we know which one we clicked? Right? If I click to this one, how do we know this is the one that we clicked? This is how we can do. We'll say event.target. This will basically give you the selected button. And we can say const is correct. This will be a boolean. and it'll say select the button data set correct if it is equal to true. If this is the case that means it is correct. Now notice how this and this one is matching. So here if you said something like hello we should also say hello right they should match. So once we got the variable we would like to do something let me display. Now when we click to this one, we are getting some kind of a feedback. If you select the wrong answer, you get another feedback. So we would like to add a class that would update it. And this is exactly what we'll be doing. So I'll say array from and I'll explain why are we using it. Let's say answers container. We'll basically convert this into an array. I'll add a to-do explain this in a second. Okay, now that we got all of them, we'll say for each every single button, just run this method. We'll say if button dot data set dot correct if it is equal to true. In this case, we would like to say button.class list dot add just add the correct class. But else we would like to add the incorrect class. So I'll go ahead and just say add the incorrect class. Let's save. Right after this we would like to update the score if it is correct. So we'll say if is correct go ahead say score ++ which is equal to one and we'll say scores span.ext content is equal to score itself. Here we go. And just before we move on with the next question we would like to just wait a second. Right here we can see we have 1 second of delay right here and then we move on. So this is what we'd like to do. And if you want to add some delays, you would use the set time out method, which would take a call back as well as the time out, which is going to be in milliseconds. So let's say we would like to wait about 1 second. So I'll put 1,00 milliseconds. And then we say current question index will be incremented. Then we'll say if cu