Web Development Projects | Web Development Project Ideas For Beginners | Edureka Rewind

Key Takeaways

employment of web developers is projected to grow 15% from 2016 to 2026 much faster than the average for all occupations this is definitely the right time to enhance your skills and start your web developer career hi everyone this is shanton from Ed and in today's session we will discuss some of the web development projects that will help you build applications on your own now before we begin the session let's have a look at the agenda so at first we will discuss about the career in web development and then we will move on and have a look at different levels of web development projects so in today's session we will have a look at three different levels of web development projects the first one is about creating a responsive layout with which is definitely a very important part of web development then next up we will see how to create a dynamic web page and finally we will see how to create an interesting quiz game now before we get started don't forget to subscribe to Ed rea's YouTube channel to stay connected now talking about the career in web development a web developer is a programmer who specializes in the development of worldwide web applications using a client server model now they are also responsible for Designing coding and modifying websites from layout to function and according to a client specifications so you can find professionals trained in web development working as computer programmers software engineers and even web focused graphic designers now some of the key job roles are the web developer so web developers use programming and Technology skills to construct the appearance and user experience of a site and for a web developer the average salary is around 480,000 per anom the next role is of a computer programmer now a computer programmer develops and adjusts the proper function of software by writing and testing code the average salary ranges between uh 232k to around 1 million now the next role is of a web designer so web designers work on the front end of a and are concerned with outward appearance and user experience the average salary for a web designer in India is around 2 lakh 81,000 perom and the final role is of a graphic web designer so a graphic designer Works to enhance the user experience or application by creating graphics and other visual media and the average salary ranges from around 118k to around 619k now that you know about the career growth let's move on and have a look at some of the web development projects that will help you understand the process of web designing better and also help you build your own projects now the web development projects are divided into three levels so first we have the basic level then the intermediate and the advanced level so we will discuss the different levels of projects and how the code works and this will definitely help you understand the process of web development better and provide you the idea to build your own websites using different scripting languages so let's get started with the first level that is the basic level project so here the basic level project is about a responsive layout now one major role of a front-end developer is to understand the responsive design principles and how to implement them on the coding site now in this project we will create a basic layout of a single responsive page and how it works in web development for building multi-purpose websites so let's see how our responsive layout looks like so here is a sample responsive layout page that I have created and it is just a very basic structure to show how a responsive layout actually works so here you can see that you have different sections of the same page so first section is a heading which says welcome to Eda and in the left site you can see different links that I have inserted now these links will take you to these particular locations of the Eda website that is the original website so for example here I have given links to our data science course cloud computing big data and the full stack course so as soon as I click these links you will be redirected to the original page and the link that I have inserted here so now let's see how the code for a responsive layout works now to check the code you can go to inspect and here you can find all the elements now for each section you will be able to see how we have written the code and how you can build this particular section of your responsive layout page so this will help you understand that what exactly this particular section of code is doing so as soon as I go to the div classes you can see that it shows the div menu which are these four links that are inserted here now this is one way of understanding the different elements now let's get back to the original code that I have written in order to create this responsive layout page and I will explain you step by step on how you can do it now the first step is to create the HTML layout and then design the head part of the web page so this is the HTML code for our responsive layout page here we have also used a little bit of CSS in order to do the styling so let's let's get started here so the first section is the head section so this represents the head part of your page so here what we have done is we have created a head section with a meta name that is the viewport and inside the viewport we have our device width then we have scaled it as 1.0 you can add different scalings and you can make the page look like however you want it to so you can add your width length the way you want to style it now here begins The Styling section for the head part so here I have added the Box sizing as a border box then I've given the width as 20% the text has been aligned to Center you can add different colors different margins different borders to your boxes as per your wish but this is a very basic responsive layout that I have created in order to make you understand that what exactly a responsive layout is and how you can build the structure of it now the next section is the menu section which is this part where I have given four different links which is kind of a menu where I'm serving different links and that will take you to the original website so here you can see that the first thing I've done is set a background color you can add colors as per your wish and then you just have to do the styling with padding margin top display how you want to show the texts and what color your text should be so this was The Styling for the menu part where I have inserted the four different links and how they are supposed to look the next part is the main section now the main section is this one where I have just given an introduction or a oneliner for the website so here I just have given a little bit of styling that is the width and the padding next up is the right section which represents the about part of the website so here I've given a small description about what Eda actually does and it is just like the about section for Eddie Rea now for this The Styling that I've done is given it a background color the width padding margin top and how I want the text to look like now here is another important part so for a responsive layout you need to keep in mind that the page works fine for any device so if you're are viewing in a laptop it will look different when you are viewing the same website in a mobile phone it will have different Outlook all over so here for the mobile phones I've specified how the menu Main and right section will look like I've given the width as 100% so that it covers the entire section while you are viewing this particular website or the web page in your mobile phone and not in your desktop now next part is getting into the body section so we have done the styling of all our head sections now is time for the body section so inside the body style what we have added is is the different background colors and padding and texts that we want to align or what are the colors of the text that you want also here we have inserted all our head tags or all the headings that we want to insert in our page so the first one is welcome to Eda and in the next section we have our division Styles so in this part we have the menu so we have created a menu section for our page already now inside this menu I wanted to add different links that will redirect you to the original page of these particular links so what I've done is created links with the help of the a tag and here I have inserted links for each of these courses so I've given a heading which is data science but along with it I have given the original link that is the link to the data science certification courses and to the original website of Ed Rea so like this I have added around four links here for data science cloud computing big data and full stack so basically this will show you the heading as data science cloud computing big data and full stack but as soon as you click on the name it will redirect you to this particular link now the next class is the main section so in the main section what we have done is we have just given a heading as edureka and just a one liner to describe about edureka so here I've written your One-Stop solution to trending Technologies so this is just any catchy line or just another class that I wanted to add here so just a oneliner description and a small introduction the next class is the right now here what I have added is an about section for Ed Rea so I've given the heading as about and then again I have written a oneliner or a description about what Eda actually does that it provides different technical courses Etc so whatever page you're creating you can build it accordingly you can style it according accordingly it's not necessary that you have to add these particular elements for any page this is just an example of how you can build a responsive layout so what you can do is you can add anything or any sort of description inside these classes and finally I've added the background color text alignment padding and all of that now the final section here I have styled the end part of the responsive layout that is this one so here you can see that I've given the copyright Ed e.co so for this I just styled with a background color and the text alignment and what should be the text inside this and with this we've completed the HTML code in order to create a responsive layout so this is a very small code and a very simple code that will help you build the basic responsive layout structure this is just to show that how you can create a basic structure for a responsive layout web page so that you can use it it from your desktop your mobile phone and access all of it in the same manner now this responsive layout is definitely a very important part of web development because you wouldn't want your users to miss out on anything from your website based on the devices they are using now finally when we run this code this is exactly what we get to see here so as soon as you click on these particular links you will be redirected to the original page like how I clicked on data science course and I was redirected to the original course link here you can also increase the width and make it a full page in your desktop you can also change it according to your needs so when you check out this particular page from your mobile phone as I have specify the WID to be 100% it will cover your entire screen and you will still be able to see all of these sections together now this was the most basic level project for your web development and I hope you understood that how you can create create a very simple responsive layout web page that can be accessed from any device and which will show the same output and help you understand all of it better from any device you're accessing it now with this we're done with the basic level web development project now let's move on and get into the depth of web development and understand how a dynamic web page actually works now in this particular example we will create a dynamic web page showing the environment ment awareness and adding different sections of the campaign in a single layout page so this is the dynamic web page that I have created here so basically I have created this web page in order to create awareness and how we can save our Earth right now you can do anything with this particular web page and add as many elements that you want to and also you can create it according to your needs but this is just an example to show you how you can create a dynamic web page and what are the different sections that you can add here so you can see that I have home about and contact sections but I've not added much details inside it you can also add elements and links so that as soon as you click on it you get more details about it but I have created different sections of this particular web page so the first section is an introduction that says save our Earth and here I have added another hover element where you can see the different Works done by this particular website or this particular Association now this is just to create an awareness so I have used pictures and elements accordingly so I have added text that will gain your attention and help you understand what actually has been happening to our Earth and how we can save it now in the final section what I've done is I have added different works that can be done in order to save the environment the first one is one plant one life which basically depicts to plant more trees then we have this don't Litter where it's mostly about not to throw Plastics so not to throw garbage around or not to litter around third one is stop the factory pollution then we have the forest fires and then single use Plastics and how oceans are covered with plastic and how it's affecting the water animals and also we have the melting glaciers now these are few very important factors that we need to keep in mind right now and these are very important because this is what is causing our Earth a great damage right now so these are some elements that I have added in my uh Dynamic web page so that we focus on these things and uh make our Earth a better place to live in and then you can add all of these different elements that you want to in order to make your page look better so now let's see how you can build a dynamic web page so here you can see the different elements of the web page that I've added so this is my HTML head part where I have added the different classes I have a container a portfolio a CTA section all of that so you can see that how each section has been divided here and how we have particularly written different classes for each of these sections so now let's go to the original code and let me explain you how you can create a dynamic web page so the first thing is to create the head section of your web page so this is similar to the responsive layout that we have created we have a meta name as a viewport where we have inserted the content and then you can just add a title here now for your head section you just have to make it critical to a responsive layout that's all so here we have a meta name and the content will be inserted inside this now next up we have linked our CSS here that we will be doing here so we have a separate code in order to style this particular web page which is our CSS code so once you have written that CSS code you need to link it to your HTML code now let's enter the body section of the web page and how it will look like now inside the body we have different sections the first one is the header section inside which we have inserted different navigations or links that can be used so in my web page you can see that we have three different sections as home about and content now I haven't added much to these particular links but I have added them in the code AS links so if I want to redirect them to any particular position or any other website I can definitely enter the link here so this is similar to what I have done in the previous example where I have given different links to different courses courses from the original website so you can create the link for these three particular divisions so that's why we have the a tag here and we have the home about and contact and if you want to add certain links and redirect it somewhere you can insert the link here so this is for the header section next up is the class so we have divided our web page into different classes so you can see that these particular sections are all different different classes so for first one is this then we have another class here which says what have we done then we have bring the change be the change where we have six different things that can be done and that should be stopped then we have another class telling get started and how you can get started with these particular things and also a conclusion at the end so these are all different classes of the same program now talking about the classes the first one is the home hero now this container class is used to ensure that contents do not touch edge of the box so now this is mostly done in CSS where we have built our containers in a manner so that it does not overlap each other and thus we have created different containers here now the first class or the container has a title that says save our Earth so you can see that the first section says save our Earth so this is basically our first class and the first container where we have given the heading as save our now the next thing that I've added is a button so what does this button do is it says see our work so here also I have not added any particular link because this is just an example of how a dynamic web page looks like but if you're building a real website and you want to redirect it or to show your work and you want to add a different link to a different website that will show the different examples you can click on this particular link which will will redirect you to that particular web page so in this particular section that is the after the a tag you can insert the link that you want to add here so here I've just given the button Class A heading that says CR our work so now with this our first section ends here so this was our first section which shows save our Earth and see our work now we will move on to the next section so the next section is the home about so here I have given the class name as home about so in the home about what we have done is added a picture and on top of it we have just added a text that says what have we actually done and that climate change is real so I've just given the heading here as what have we done and then inside the paragraph tag I have written a small description of what is actually happening and what is climate change all about so this was our second section in the web page and then we will move on to the Third section which shows different examples of what can be done and what needs to be stopped and how we can bring the change also you can see here also I've added different buttons and if you link it to certain works it will redirect you to those particular details so you can add project details here so you can create a different page where you write about how planting trees will help in saving our Earth and you can link it here so that as soon as you click on the c pro project details you go to that particular website here I have not given anything so it just redirects me to this particular web page itself so now this is the third section that is the portfolio where I've have given the heading as bring the change be the change now inside this particular section I have added six different items that is six different things that we need to do in order to save our environment and also things that needs to be stopped so here we have the class name that is the port item and then I have added an image for each of these now adding these images make sure that these are all of the same size so that you can add them in the same frame or if you want to style them differently you can take different pictures The Styling entirely depends on how you want your web page to look like so this is all your designing all your imagination and all your creativity so here I've added the pictures and also given descript Des itions to it so for the first one I have written one plant one life and as I said you can add a link to another web page that might describe that how planting trees will save the environment so I've just created a button and written as C project details but have not added any particular link you can add links to these sections as well so that as soon as you click on these buttons you redirected to a different section of the same web page or a different web page as well now in the same way I have added six different items in this particular section the second one also has an image which says the description says don't L and the same thing I've created a button but without any particular link here then we have the third item which is the stop Factory pollution for which I have added another image and also the button in similar way we have the fourth item which says no more melting glaze years and I've added a picture for the fifth one I have stopped single use plastic and how it's destroying the oceans as well and how it's affecting the water animals as well and finally for the sixth item we have the forest fire so I've written don't let it burn and I've added another picture here so for each of these elements or each of these items in this particular section you can add a different link or a link that will take you to the same web page or different web page and add more description to it so you can definitely keep on adding more details or more elements to each of these particular classes or sections of your Dynamic web page so now this was the end of this particular section so this was our section of bring the change be the change which gives you different items and then we have another section here which is basically like a CTA where you are asking people to make their contribution here also I've added a button as get started so for example you're creating a web page uh which gives you a course or which will allow you to take up on any particular course so you can link those course sections in the get started button so what I have done here is this is another class as a CTA and inside this container I have the H1 as make your contribution then I've written let's work together for better future this is all styling design designing and you can add different catchy lines in order to attract the users so here you can see that I have the a tag and I've created this button as get started now what you can do is if you're creating a website for which you will enroll people or which will provide any particular course or anything so what you can do is add that particular link here so that as soon as the user clicks on the button get started it redirects them to the course link or anything that needs to be enrolled into and finally we have the final section of our web page that is the footer section or the footer paragraph So This is just in order to make your web page look better or you can add different uh links here as well or you can create a summarization here so here I've written this is an initiative to spread awareness about climate change and we must join hands and take steps towards saving the Earth and here I've listed different events that needs to be done so if you're creating a page for any particular event you can link it here as well so for this section I have created the different classes and I have named them accordingly so this was all about the HTML code in order to create a dynamic web page and how you have to insert different classes and add the containers accordingly so that they don't overlap but that's mostly done in CSS so you just have to create the different container use the different class names and add different elements to each of your section in a web page so now you can see that this is the web page that I've created and I have not added such links to redirect it to another web page because I've just created a structure to show you how it actually looks like but you can add links to each of these buttons and redirect them to a more detailed version now this was all about creating the structure or the HTML code for your your Dynamic web page what about the styling now for that you need the CSS code now this CSS code is all about styling and designing your web page and how you want the output to look like or how you want the entire web page to look like now this is completely your own choice and your own creation and designing so you can make it look like the way you want to you you can give different colors different text fonts different button hovering Etc so now talking about the styling part so we have created different sections and according to those sections we have styled them so first is the body and we have the font and text alignment here so for each of these images that I have added I need to make sure that they don't overlap and the margin and the borders are done accordingly so that it's seen beautifully and it does not not overlap or cross over anything so now this can be done with experiments you can check with the width and how it looks like you can try different paddings and see that if the picture is fitting into the screen perfectly so now for each of these classes that I had created in my HTML code that is the containers I have added width maximum width margin Etc and also in my code I have created different columns so now for each each of these columns I've styled them together so here I have created a class equals to column which means that any class which starts with the string column receives the following properties so here I've given the width and the margin top so each of the columns will receive the same uh designing here I've given the float as left and width as 33.33% so these are nothing but styling different columns or different sections of your web page page and how you can add paddings and margins so basically this is all experimental and how the width actually changes the Dynamics of your pictures and how your website looks like so you can change them according to the needs and see that if it's actually making your web page look better now here I have added different font weight and font size to my H1 that is the head tags and then for the P tag as well now you can see these are the different sections of my web page so this is the title section so for which I've given the font size margin bottom weight and the margin top as well so basically I have done all of these and checked that how the text looks like or if it's collapsing or overlapping with the second section so this is all experimental and all about how you want to design your web page so accordingly for all these different classes that is these fan CTA and the different lists that I have added I have done a little bit of styling by adding the margin or padding as whenever it was required so now this is the button class for which I've given the different stylings that is the padding and how it should be displayed I've also added the colors and Border color for each of these also you must have noticed that as soon as you hover around all of these buttons the color changes so this is what I've done in this particular section so as soon as you hover around that button the background color changes so the same thing I have done for each of these particular section that is all the navigation sections and the header sections and how the lists are actually seen in the particular website so this is for the navigation a here I've given the font weight and how the color changes when I hover on top of it and these are the logos or the images that I've inserted and how they must be aligned now this is the first section and here I've added another image so this is basically this particular section where I have added this image in my first container or the first division of my web page so I have just given the link to the image and it has been inserted and how the color or the background color or the Border colors look like in the same way there's this class as home about text box so the home about text box is basically this part where I've written what have we done so I've styled it accordingly I've given it a heading a background color and then outline and also the positions and how it should not overlap with this picture or the next section but also it covers a specific area of the web page so that even the picture is visible properly and and also the text is at the center so now these are the different styling for each of the text box heading one and what should be the background color what should be the margin from left or right and the position as well I've specified the font size here for the H1 tag inside the text box then again we have the home about page where I have added another picture which is this particular picture so I've added the URL or the link to that particular picture and and here I have done the styling for the text box as well this is the styling for the H1 tag which says what have we done now the next thing is the portfolio section which includes the six different items so now for each of these items I have just given a position and the margin and I have also given the styling for the description which means that this particular section and how it will look like that is the one plan one line and see project details so I've added a little bit of styling for these sections as well and finally for the CDA section I've just added a background color and how the text will look like for the footer also same thing the background color and the text color as well because there's nothing much to be done the CD section includes just the background color and how this particular font looks like so I've added the font color or the size and and all of that and how the button works and in the footer section also I've just added one paragraph and different events that are listed out here so that's all about the styling part of your code which basically depends on how you want your web page to look like there's always more experiment and room for improvement and also you can keep checking and keep changing the margins with borders and texts and see if it makes your web page look any better or not because at the the end of the day what matters is what is the outcome of your code and how your web page or website actually looks like it actually needs to look visually pleasing to the user and that's how you should style your website as well keeping in mind that how it actually looks like and how it's going to attract your users so this was all about the HTML and CSS code of your uh Dynamic web page and the final outcome is like this where you have different pictures and buttons and you have different sections of your web page that takes you around through the different parts or different dynamics of what can be done what should be done and the different events as well so this was all about creating a dynamic web page you can create a dynamic web page on any topic or according to your needs and add different links different styling different pictures it's all on you how you want to do it this was so it's just an example to show how you can actually create the structure of a dynamic web page and how you can add different classes or different sections and build containers and add more elements to your website so this was all about the intermediate level web development project and here we have seen how you can create a dynamic web page now let's move on to the final level which is the advanced level and here we will create something fun and something interesting now this is one of the most common topic that people look for and if you're learning web development you would definitely want to create something interesting like a quiz game because quizzes are definitely fun and they are a great way of learning about new subjects and allow you to engage your audience in a fun and playful manner so in this final section we will see how you can code your own JavaScript quiz and you can deal with different events handle user input manipulate the Dom provide the user with feedback and keep track of their score as well so this is the quiz game that I was talking about and I have created this quiz game which is a very simple one but it will help you understand how you can create a basic quiz game and also this is quite interesting so here I have added three different questions you can add as many questions as you want to now the first question says which SE creature has three hearts so I will go for the answer octopus now once I've selected the answer I'll go to the next question so it says what is the Italian word for pi so let's go for pie cake then let's move on to the final question which says which is the only mammal that cannot jump so let me select elephant now once you have selected all the answers for all the three questions it's time to submit the quiz so now let's see what happens so as soon as I submit the quiz it shows me my score as well which says two out of three which means I've answered two answers correctly so in the third one the option I selected was elephant which is the right answer and the color changed to Green now in order to check the previous answers let's go to previous question so you can see that the pie cake was the wrong answer and it turned red and the correct answer is pizza and the color has been changed to green and for the first question also my answer was correct and it shows in green that octopus was the right answer now this is a simple yet an interesting quiz you can add as many questions as you want to now let's move on to the coding part and see how you can create your own quiz with the help of JavaScript HTML and CSS so now this is the HTML code in order to create your quiz so to set up the structure of the JavaScript quiz we need to start with the diff tag that will hold the quiz then we we have a button here now this button will help you in submitting the quiz and then the final diff tag in order to view the results so the first div tag is to create the container or the class and create the quiz then we have the button and then finally we have the results now the main thing that we need to do is in our JavaScript code so let's see what needs to be done here now before I explain you the entire code based on what I have told what needs to be done in the HTML coming to the JavaScript code we have this const quiz container results container and submit button so basically we select those HTML tags and store references to these elements in variables like the quiz container results container and the submit button now the next thing we will need is a way to build a quiz show results and put it all together so for that we can start by laying out our functions and then we will fill them in so the first one is the function build quiz so here we have functions to build the quiz and show the results so we will run our build quiz function immediately and we will have our show results function run when the user clicks the submit button so for this we have this particular function and here for each question we will want to store the list of answer choices and for each available answer we also add an HTML radio button so what happens is you have three different options here and I have added this radio button and given the label ID as the question number and then I've given the input type as radio then added the question number value and ID so this basically helps in pushing the three different options and also it will help the user in selecting any one of these particular options now once we have built the quiz now we also need the questions to be visible so for that we have a constant value as my questions and here I have inserted different questions along with the correct answers so here you can add as many questions as you want to I have added three different questions along with the options that I want to add so I've given the answers as a BC and also I've given the correct answer value here now the three options that I've provided for each of these questions actually work like a radio button and that's exactly why here I have given the label ID as question number and given the input type as radio and these answers that is the current question. answers are viewed as radio buttons and you can select any one of these now here we have added the questions and its answers to the output so we have output. Push so here we have the first class's question where we have given the current question and then we have the answers where we have joined all the answers that is all the three options that I have provided then finally we combine our output list into one string of HTML and put it on the page so for this reason we get to view the answers in this particular manner so where we have joined the entire section together so basically this is the quiz container with the inner HTML and output. join basically gives you the entire string of HTML in the same page now the next function is the show results so here we gathered the answer containers from our quiz inside the answer containers we have the correct option in all the other answers as well so we have taken the constant answer containers which equals to quiz container do query selector all and inside this we have given dot answers which means that it keeps track of the user's answer so in this particular part what will happen is it will keep a track or it will select the particular answer that the user is opting for now for each of these questions the correct question and the question number will lead you to the selected answer so what happens is as soon as you select an answer it'll go to this particular function which is my questions. for each current question question number so it will find the question number and find out the selected answer for that particular question so suppose the third question I'm opting for c for the second question I'm opting for option b and for the first question I'm opting for option A so it will match the question numbers and also find the selected answer now this particular section is all about finding the selected answer for each of this question so first of all we will go to the answer container and inside the answer containers we will have our question number next up is the constant selector now here what happens is we have inserted radio buttons for each of these inputs or each of these options so we take the label then take the question and the question number and then we check it which means that we have selected that particular answer for that particular question itself now the next step is to check the user answer so for the user answer we have answer container do query selector selector so what happens we go to the answer container we take the query selector which opts for the value that the user has selected now how do we match this for matching this we have an answer ID now each of these answers have a specific ID so according to that ID we match the selectors so we take the answer container. query selector selector do ID and see if the ID and the value matches or not now in the selector one we select the users answer so according to the selector and the ID that we have matched before we take that particular answer and Mark it as sticked or mark it as selected by the user now what happens once you're done selecting all the answers and once you submit the quiz now it's time to check if the answer is correct or not now how do we check this that if the answer is correct or not we have already provided the correct answers in our answer container itself so for that we need to find out if the user selected answer is also the correct answer now if the user answer is equal to the current question. correct answer which takes us to the first section where we have added a correct answer for each of the question so it will match if the current question matches with the correct answer then we add to the number of correct answer and then we increase the count because we also need to display how many questions have have been answered correctly so if the first question has been answered correctly the count becomes one which means you have answered one answer correctly as of now now this is just to color the answers green so as soon as you select the correct answer and if the answer is correct it will be changed into a green color for which I have taken an answer element and styled the background color as green now what happens if the answer is wrong or if you have not selected any particular answer here that is if the answer is wrong or black so for that we have colored the answer as red we have taken the answer element and we have added the color to be Jed and we have shown that what is the wrong answer and what is the right answer here so this is an if else condition that's happening here if your answer is correct we make that particular answer is green based on how we match the answer with the correct answer from the container itself and then we have an else condition which shows that the answer has been changed to a red color if it's wrong or if it does not match with the value that we have provided now the next thing is showing the number of current answers out of total so previously we have seen this num correct plus plus so what happens here is that it keeps increasing the number of counts so now finally what we do is we show the number of correct answers out of total so for that we take the results container. in our HTML which will take the value from the num correct so if you have given two correct answers the value will increase to two and out of my questions. link so the number of questions that you have added so suppose you have given two correct answers it will take the num correct value as two out of my questions. length which represents the number of questions that I've added so here I have added three so it will show me two out of three questions are correct and this is to display your quiz right away where I have already told how we have built the quiz and we have got these elements from our HTML code and as soon as you submit the results what happens is you click the submit button at the event listener click and then it will show the result it'll also show the previous slide and show the next slide and the events of these slides are specified here inside the function show Slide so here you have the current slide then you have the class list. remove active slide so this is basically the function that takes place when you keep changing your questions and go to the next question or the previous question and these are all what happens when you click these particular buttons so what happens when you click submit quiz and how it shows the value so this was all about creating a quiz with the help of your HTML and JavaScript code next we have the CSS code as well now again the Cs code is just to style all the elements in this particular quiz now this is all about what font or what text size you want your answers or your slides to be now this completely depends on how you want your quiz to look like so I have not done too much of styling here I have just added the different font size and color and weight of every element in this particular quiz so I have the body part then I have the H1 tag so the body and the H1 contact represents the do you know part and then we have the question sections so for each of the questions I specified a font size and a margin button and also for the answers I've given the alignment and how we are displaying them now also we have these buttons as previous questions submit quiz next question so for this the same thing I've done a little bit of styling with the font family and background color and specifying the colors of the texts and Border radius padding this is all on you how you want the button to look like or where you want to place it or what should be the size of the text inside it and then I've also added button hover which is basically what happens when I hover over this button so I've have just changed the color so that once you hover on top of it the color changes so this is some minimal styling that I've done in my quiz you can do it according to your needs and how you want this particular quiz to be viewed as or how it should look like so this was all about creating a simple yet an interesting quiz with the help of HTML JavaScript and CSS now you can add or use these elements and create a better game or any particular thing that you want to now this was just the structure you can add more elements to your quiz you can add pictures you can add more questions or more options and tally it accordingly you can change the way of representing the total scores as well you can give it in person percentages it all depends on how you want to represent the quiz so this was an advanced level web development project which is also most commonly looked for because of course it is an interesting game to create and it is an interesting way of answering different questions so HTML JavaScript and CSS will help you in building one so these were some of the web development projects and I hope you understood all the three different levels that is the basic level into me