HTML CSS JS projects (Beginner): 16 projects using HTML CSS and JavaScript

welcome to the best course for learning html css and javascript by creating simple and interesting projects my name is sehan and i'm a web developer with over 15 years of programming experience i created this brand new course to share my experience with you this course is made to help you get familiar with the html css and javascript while building simple but practical websites by the end of this course you'll be able to write html css and javascript codes and build interesting and responsive websites the course starts with a simple preview on projects and how they work then in each project first we write the html part and once we are done with the html part we'll begin to work on the css and javascript sections it is completely fine if you have no prior knowledge of html css and javascript all html css and javascript syntaxes are explained in details all the projects are started from scratch and continued with no copy pasting of the code all codes are carefully explained line by line and demonstrated on the project this is a fun project based course that will teach you about html css and javascript while building modern super cool and responsive websites if you're excited as i am to learn about html css and javascript and build super amazing websites then let's get started welcome back to another project in this project we are going to create a digital clock as you can see from the final version of the project we have a background image in the website we have a title and also we can see the current time in a digital form if you check the computer time as you can see the time is exactly the same and it's showing here in this project we're going to use javascript to dynamically get the current time from the computer and set it inside this beautifully designed website in the next section we're going to start with the html part of our project so see in the next section all right let's start our project first we open the visual studio code here we close the get started tab in the file menu we click on the open folder i would like to create the project in my desktop so i click on the desktop and here we click on the new folder button to create a new folder rename the folder digital clock which is the name of our project here we click on the select folder button to select the folder we close the get started tab again and on the left side in the explorer section we right click and we click on the new file rename the file index dot html and we press enter as you can see now we have our index.html file on the right side but it's completely empty [Music] but we can easily make an html5 boilerplate using an exclamation mark so we write an exclamation mark and we click on the first auto suggestion the html5 boilerplate includes doctype which tells the browser which version of html the page is written in and in our case as we are using html5 we just need to have html here then we have the html tag which is the top level element inside the html file it includes two tags the head and the body tags and also the length attribute inside the opening html tag sets the language of the page in our case we set the language to be english then we have the head tags which includes three metadata tags and also one title tag the chart set attribute inside the first metadata tag defines the html character encoding utf-8 is recommended by html5 for web developers because it nearly contains all the characters and symbols the second metadata tag tells the internet explorer browser to use the most recent rendering engine which is edge then we have the viewport meta tag which tells the browser on how to resize the page let's use alt c to turn on the word wrap so we can see all the codes clearly the content attribute here has two parts the first part sets the page's width to devices screens with for example if the user is using mobile screen the page's width will be smaller than another person using a computer screen then we have the initial zoom level of the browser which is said to be 100 percent as a default the title method the title tag sets the title of the page in order to see the browser inside the visual studio code we can use the live preview extension we just need to right click inside the index.html file and click on the live preview show preview as you can see now we have the browser on the right side which is completely empty because we haven't add anything inside the body section yet but with the title document we can change the title here to our pages to our project's name which is digital clock you can see the digital clock on the tab of the browser let's close this explorer section to have more space on the right side we just need to drag this line to the right to the left let's decrease the size of the browser and let's start coding inside the body section first we just added edge to tag to have some heading and we just write digital clock and after the h2 tag we add a div with the class of clock we just write dot clock and inside the div we have our hours minutes seconds and also the am and pm section so first we add a div here it's just an empty div and inside this div we add a span and the id the first the spam the id will be power and we just write double zero for just hard coded because we can style this later using css before using javascript for dynamically get these numbers from the computer we have another spam with a class of text and here we just say hours we just need to copy this div three more times using alt shift error done [Music] and this one would be minutes and here minutes then we have the next one seconds here as well second and finally here this one is we don't need anything inside it and also we delete this spam picture because this is just for the am and pm we can just write down am hard coded for now for styling the project in the next section that was it for the html part of the project in the next section we're going to start styling our project using css so see in the next section all right in the last section we have finished with the html part of our project in this section we're going to start styling our project using css first we need to create a css file so we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file rename the file style.css and we press enter before styling our project using css we must add a link to the css file within the html code so we go back to index.html and just under the title tag here we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external style sheet and the href attribute here defines the destination of the link as both files are located at the same directory we just need to have installed css for the url now we can close the explorer section again and we go to install the css to start styling our project first we start with the body section we just need to remove the default margin and bring everything to the center using display flex so we just write body and we open a set of curly braces we remove the default margin using margin 0 then for bringing everything to the center horizontally we can just write display flex and as everything went next to each other we can use flex direction column to bring them back uh as a column and also we can use align item center to bring everything to the center horizontally in order to bring them to the center vertically as well first we need to set the height of the body to the height of the screens by using height 100 percent of the viewport heights then we use justify content center to bring everything to the center uh vertically the next things we need to do is just i would like to add a background image to our project so we just write background and we can use the url function to add an external background url so we go to the desktop and we click on the google chrome or any browser you would like to use and in the search of the google we search for unsplash the the website we were going to use is unsplash.com we click here and here in the search results in the search bar we search for for example nature we change the orientation to landscape and we just choose one of these images yeah anything is fine this one would be okay or this one so here on the picture we right click and we click on the copy image address and we go back to the visual studio code and we add a double quote set and inside this set of double code we paste the link now we can see the image in the background let's use rc to turn on the word wrap so we can see all the codes and we go to the next section for styling firstly this headline the digital clock the digital clock had the tag of h2 so we target that we just use first we make all the letters capitalized using text transform capitalize or sorry uppercase to make everything capitalized and then which we increase the letter spacing and the space between the characters of this text using letter spacing and we just set it to be 4 pixels let's change the font size to be 14 pixels a little bit smaller and [Music] and which use text align center to bring it to the center it's already in the center but but when we change the other section we want it exactly to be in the center so we use text alarms center the next things we will we are going to start is this section first we install this class the div that contains everything so we target that which we just say dot clock because it's a class we just use dot we change the display to flex so everything is now next to each other and the next thing is this div so all these dips we're going to target this div so we just write clock and we target the div we add some margin for example 5 pixels to makes everything a little bit separated from each other then we go to the next section and we target the span all the spans so we just write here dot clock span we change the width to be 100 pixels and we change the height to be 80 pixel then we change the background color to be a slate blue we can see the change and we change the opacity to be eighty percent because we want that's a little bit lighter and then we change the color of the text to be white [Music] then for bringing everything to the center we can use display flex as soon as we did this displaced flex we saw the effects of the width and height so and then we use justify content center to bring everything to the center horizontally and align item center to bring everything to the center vertically we change the font size to be 50 pixels to make them a little bit bigger and we add some text shadow to have some text shadow so we just say text shadow the first parameter inside the text shadow is the position of the horizontal shadow so we set it to be 2 pixels then we have the position of the vertical shadow we set it to be two pixels as well then we have the blur radius four pixels and now the color is white we want the color to be black so we use rgba function we set 0 0 and 0 for red green and blue which gives us the black color and also 0.3 for the alpha value which means 30 percent transparency or opacity so let's uh change the we forgot to change the font family we set the found family to send serif so the text looks better now and we're going to decrease the size of them later but we're just designing these upper zeros and am all right so next we're going to target this spam which is here and the class is text so we we target them here we just say dot clock dot text [Music] we set the height to be 30 pixels we set the font size we make them a little bit smaller not a little bit 10 pixels and we change the with make them uppercase using text transform upper class and we increase the space between the letters using letter spacing and we set it to be just two pixels and also let's change the color of the background of them differently so we just say background and we set it to be dark blue instead of a slate blue okay and also we add some opacity 80 percent yeah this picture if the background image we add background size cover we're going to see all the image betterly yeah now we can see the effects of the opacity on the our website and let's change the color of this to white as well so h2 [Music] we change the color to white to be more visible now after this we're going to target this am and make it a little bit smaller and we bring it to the down section in order to change the position of the this am we can position this one absolute but in order to be relative to other things so we need to change the position of this div to be relative and here we target that am we just say dot clock and the am has the id of am pm so we need to have hashtag here am pm we open a set of curly braces and we set it first we bring it down we just say bottom 0 [Music] and now we change the position to absolute so so we bring that in the bottom we change the width to be 60 pixels [Music] and height to be 30 pixels like the one we did for this section and also the font size is it's a little bit big so we make it to be 20 pixels and also we want to have a different color for this section so we change the background [Music] to be green for example the color is okay too white and yeah everything looks fine for the styling in the next section we're going to use java javascript to dynamically change these numbers and we get the current real time from our computer so see in the next section for the javascript part of our project alright in the last section we have finished with the css part of our project in this section we're going to start using javascript in our project first we need to create a javascript file so here we open the explorer section using contour shift e and on the left side in the explorer section we right click and we click on the new file we name the file index dot js and we press enter before using javascript in our project we must add a link to the javascript file within the html code so we go back to index.html and just at the end of the body section here we added script tag we just write sc and we click on the second auto suggestion the one with the src as both files i mean index.html and index.js are located at the same directory we just need to write index dot js for the url we save the file using ctrl s and we close this explorer section by dragging this line to the left to have more space on the right side and let's use overflow hidden in the body section of the css to remove these scroll bars to have a more beautiful websites so we just write overflow hidden so now by decreasing the size we don't see any overflow we save this file as well using contour s and we we go to index.js four things we need to have inside our javascript the four elements we need to manipulate as this section the hour minutes seconds and also this am because we want to change it dynamically using javascript so the four things we have in inside the index.js has four ids minutes sorry hour minutes seconds and am pm we can return an element with an id using getelementbyid method so we go to index.js and we create a constant and we call it our element and we equal it to document.getelementbyid and the id is power we can use alt z to turn on the volt draft so we can see the code completely and next we have the minutes we just write minutes or minute element and we equal it to document dot get element by id and the id is here minutes next we have seconds we just copy this and we change this minutes to seconds and this one second element [Music] and finally we get this am we create a constant we call it am pm element and equal to document.getelement by id and the id is am pm all right now we have the all the elements we can change them dynamically first we create a function to get the data from our computer so we call the function clock or update clock [Music] and first we get the hour from our from the computer using the date constructor so we you just need to create a variable because we want to change it later as well so we equal it to new space date [Music] and we want to get the hours sorry the lit is our so we had put h so we have our new date and we want to get the hours so we use get hours method for the minutes we just write m equal to new date and we get get minutes use get minutes method next we have the second and we just say new date dot get seconds [Music] and finally we just set the am pm variable this one we we cannot get it from the computer but we can make a logic to create it first we set it to be am as a default and we're going to check it later for example here we just say if the hour is greater than 12 first we set the hour to be hour minus 12 because after 12 we have 13 for example and the the new hour will be 13 minus 12 which is one and then we change the am pm to pm so after 12 for example one in the afternoon the h would be one and the am pm would be pm as well all right and also the other things is we uh let's uh first let's see the the result so we use inner text method to change the text inside this our element which is here so we just say [Music] our element dot inner text and we set it to be equal to h and we call this uh we need to call this function every second first we call it here we just say update clock one time and we can see that hour here but for the seconds we need to call it every second so let's first [Music] finish this part so we the minutes element inner text would be m now my computer is 8 30 am i'm recording now the video in the h830 so the next one is second element dot inner text is equal to s and then we have the am pm element equal sorry dot inner text to am pm which we defined here all right so everything is okay now because the time is 8 30 1 35 second if you refresh it each time we get the new second as well but we can call this function every second using settimeout method we just write settimeout method actually set a timer that execute a function after the timer expires so the first parameter inside the set timeout method is a function and the second parameter is the timer [Music] and we set it to be one second which is one thousand milliseconds and every one second we wanna call this function not every is just after one second we call it again so first we the code runs until here call the function first and then as soon as reach to the set timeout after one second call the function again and then the codes goes from here again to here and after one second call the function again it's gonna be an infinite loop so we call the update clock function here so now you can see every second there this function is being called and we are getting a real time seconds here the next things we need to do is just [Music] as i mentioned before here now we have we don't have zero here usually the digital clocks have zero eight or uh it doesn't have a single digits so in order to achieve this one here we create a statement the conditional statement we just say h is equal to and if the h is less than 10 you see no it's true because it's eight just if this one happens you just write zero plus h otherwise just use the edge now because the 8 is less than 10 we are getting 0 8 but after that we don't get any 0 at the beginning we just get the 8 after 10. for the seconds we we write this one for the m and s as well so we copy this two more times using alt shift aerodyne and we change this h to [Music] to m i can use all i can highlight all of them using ctrl d so we need you just need to highlight the first one and use ctrl d to go to the next one and now we just use s as well so now we did all the parts let's check the project inside the browser as well so we open it inside the browser as you can see now we have they're correctly showing the try let's decrease the size and you can see it's responsive too yeah that was it for our project i hope you enjoyed and learned many things see you for the next project welcome back to another project in this project we are going to create a multiplication app as you can see from the final version of the project we have a question here which can be answered in this input section and also we have a submit button in a score section on the top right of the box we store the scores that the user achieved by answering the right questions and also if the quit if the user answer a question wrongly the scores decreased by one number each time we refresh the page we get a new question randomly and if we answer the question correctly for example if we say 2 multiplied to 7 14 we get this score one and the next question is six and we get this score two but if the we answer the question wrongly for example here the answer is 12 but if you write 1 and enter the score would be decreased by 1. this is a very simple multiplication app but can be useful for kids and we're going to use javascript local storage uh to store the scores of the user and also we're going to use the random function to create the random questions using javascript so see in the next section for the html part of the project all right let's start our project first we open the visual studio code here we close the get started tab and in the file menu we click on the open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so we click here on the desktop and we click on the new folder button to create a new folder we name the file multiplication app [Music] and we press enter here we click on the select folder button and we close the get started tab again on the left side in the explorer section we create our html file so here we right click and we click on the new file [Music] and we name the file index.html and we press enter on the right side now we have our index.html file which is completely empty but we can use an exclamation mark to have an html5 boilerplate here we click on the first auto suggestion to have our boilerplate in the html5 boilerplate the first line is the doctype which tells the browser what version of html the page is written in and in our case we are using html5 so we just need to have html here then we have the html tag which covers the head tag and the body tags the length attribute inside the opening html tag sets the language of the page and in our case we set the language to be english then we have the hit tag which includes the meta data tags and also the title tag the charted attribute inside the first metadata tag defines the html character encoding and the utf-8 is recommended by the html5 to all the web developers because it contains nearly all the characters and the symbols then this meta tag tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag sets the width of this screen when the page is loaded if the first section sets the width of the page to the devices screen for example if we have a mobile screen the width will be smaller than the computer then we have the initial zoom level of the browser which is in our case is 100 percent let's use alt c to turn on the word wrap so we can see all the codes here in the next tag we have the title tag which sets the title of the page in order to see the browser inside the visual studio code we can use the live preview extension here we just need to right click and we click on live preview show preview now we can see the browser on the right side which is completely empty but with the title document which is coming from here we can change the dark title to our project's name which is multiplication uh app we just say mod to application [Music] app and [Music] sorry inside the body section we add a form with a class of form and also with the idea form we need the class for styling and we need the id for the javascript section to get the data from the form let's close this explorer section so we have more space on the right side so we just need to drag this line to the left let's enter to accept the auto suggestion so we have a form with a class of form and an id of form we don't need the action we can delete it and also inside the form we have first we have it just the h4 tag with a class of score and an idea for score [Music] and inside it we have just now we have a hard-coded score equals zero later using javascript we're going to create this dynamically and we calculate the score of the person who is using the application after the h4 tag we have h1 tag which is the question we just add the class at the id of question we don't need to [Music] actually let's style this but we need the we need to manipulate it using javascript later so the question we just hard code a question we just say what is one multiply [Music] sorry multiply by one yeah and a question mark yeah later using javascript we're going to dynamically create these numbers and create random questions so let's finish the html part first after the a question we have an input to the person is able to answer the question inside the input so we just have an input with a class of inputs and and also an id of inputs we need the data inside the javascript so we're going to get it using an id and also we're going to style this input using the class so we press enter the type of the input is text we have id and also the class here we can see the input let's add a placeholder just saying enter your answer all right the other things i would like to do is to bring the marker to the input when the page is like a refreshed so for example i should i'll show you in the browser we can see this in the browser using this hamburger and open in browser so as you can see now the marker is not here so we have to come here and click here to have this like a mercury but if we add the attribute auto focus when we go to the browser when we refresh the page we always see the marker inside the input this one is gonna going to help the user to quickly answer the questions after each other after that we want to remove the auto complete which which suggests the user different numbers based on the history of the person so we're not we're going to set it to be off so we the user doesn't get any suggestion after the input we have a submit button so we just have us button [Music] which we choose this auto suggestion to create a button with the type of submit and also we want to add a class of btn so we can going to style this button using this class and inside the button we just write submit all right you can see the button here as well that's that was it for the html part was very simple but in the next section we're going to start firstly style this project and make it a little bit more beautiful and after that we're going to use javascript to dynamically create random questions and uh and also store the score of the user answers using the local storage of the browser so see in the next section for the css part of our project all right in the last section we have finished with the html part of our project in this section we're going to start styling our project using css first we need to create a css file so we open the v we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file we name the file style [Music] dot css but before styling our project using css we must add a link to the css file within the html code so we go back to index.html and just under the title tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external style sheet the href attribute defines the destination of the link and as both files i mean the index.html and the solid css are located at the same directory we just need to have install.css for the url let's close this explorer section we don't need we don't need it anymore so we can have more space on the right side for the our coding and the browser and we go to install.css to start styling our project first we stop we start with the bodies section [Music] we remove the space around the body element using margin zero and we can bring these items to the center horizontally using display flex and justify content center [Music] and also we can bring them to the center or vertically if using the height hundred percent of the viewport height and also align item center so first we set the height to be 100 of the viewport height so we the size of the body would be the same as this screen size then we set the align item center to bring the items to the center vertically also we can use text align center to bring the inline contents to the center as well so everything looks fine we just need to add a background color i just use yellow and we change we can change the font family to be cursive for example all right let me finish with the body section next we we can start styling the form which covers everything inside the body so for the form we can change the background color to be white we can see it now let's uh add some padding so we bring these items inside the form so we just add 20 of 20 pixels of padding and let's add some box shadows so we can see this form better so we just add box shadow the first value in box in the box shadow property is actually the position of the horizontal shadow we set it to be zero the second value is the position of the vertical shadow we set it to be four pixels we can see it here and the third value is the blur radius so we set it to be 8 pixels now we can see the shadow around the box but this shadow is a little bit dim we can remove the transparency or decrease it using rgba functions rgb function sets a color with the alpha value which is the transparency so we set 0 for the red 0 for green and zero for blue which gives us the black color and also we set point three for the alpha value which means thirty percent transparency or opacity all right that looks okay we just need to add some borders uh rounded borders so let's first use alt c to turn on the wardrobe so we can see the code completely and then we use border radius to add the rounded border we set it to be 10 pixels that looks fine now when we decrease the size and the form gets smaller that's okay but we want a little bit of the space around them as well so we add a margin of like a 5 pixels or let's say 10 pixels to have some space around the form as well all right let's style this input and the bottom sorry the yeah the bottom the submit button so we just say input [Music] let's change the display to flex to bring the submit to the bottom and make sorry set the display to block to have the input in the all line and push the submit button to the um to the bottom section so we just say display block and we set the width to be [Music] we set the width to be 100 percent so we have the input all the way as you may notice the space from here to here is bigger than that size because it's calculating the border as well we can prevent this using box sizing border box so now we can have the same space on the left and the right section let's increase the size of the text inside we just say font size for example 25 pixels and we bring the we bring it to the center using text align center and let's add some padding just say 10 pixels padding and let's increase the size of this border around the input so we can see it better so we just say border solid [Music] 4 pixels and also let's change the color to green and let's decrease the color of the text let's change the color of the text first we just say color green [Music] now we have a green color inside and also this enter your answer i want it to be a little bit lighter in order to access to that one we need to just use the sudo element placeholder and we just change the color to be light light gray would be fine and also let's change the font family [Music] to be inherited so we have we have the same font i think yeah we just need to define it first we just say cursive would be better yeah we have the same take font for here and here as well that's okay for the input section [Music] or we can increase the size font size to 30. it would be better yeah [Music] and also let's uh let's style the button so we just say we target the button oh by its class which is btn so we just say dot vtn we set the background color to be green let's change the color of the text to be white then we have we remove the border we're using border none and let's set the display to block as well for this item and then we just set the width to be 100 percent and then we add some padding just say 20 pixels or it's too much just say 10 pixels and font size to be 25 pixels uh just 20 is fine just say font family cursive as well and then i wanted a little bit of a space between the top and bottom so we just add a margin to add space around the button so we just say our margin 20 picks just the top and bottom the left and right to be zero so now we have the submit button just add some border radius to have a a rounded corner to be 5 pixels and let's add some box shadow for the submit button as well so we can see it a little bit in a 3d form we just say 0 for the horizontal position 2 pixels for the vertical shadow then we have 4 pixels for the radius and the color would be rgba 0 0 0 for black and 0.3 for 30 percent transparency or opacity and also let's add curse let's change the cursor to be pointer so when we can see a pointing hand when we hover over the button and i want this button to be a little bit uh the color to be a little bit uh darker when we hover over the buttons so we tap to its hover sudo class just say hover and we add a filter to it and we change the brightness to be 90 instead of 100 so it would be a little bit dimmer when we hover over the button all right that's and also we didn't install this score we forgot this score so the score has the class of the score so we just say score we change the color to be green and let's bring it to the right section so we just say text align right instead of center [Music] that's okay there we don't need to install it more the functionality is more important in the next section we're going to use javascript to dynamically create these questions and also we get the answer from the users we calculate and check if it's correct or wrong and if it's correct we increase the score and also if it's wrong we decrease the score by one point so see in the next section for the javascript part of our project all right in the last section we have finished styling our project using css in this section we're going to add functionality to the project using javascript first we need to create a javascript file so we click we use ctrl shift e to open the explorer section and in the explorer section we right click and we click on the new file we name default index dot js [Music] before using javascript in our project we must add a link to the javascript file within the html code so we go back to the index.html and just at the end of the body tag we added a script a script tag we just write sc and we click on the second auto suggestion the script with the src as both files i mean the index.html and index.js are located at the same directory we just need to write index.js for the url now we can use javascript in our project we save the file using contour as we close this explorer section and we go to index.js to start adding functionality to our project first we need to create a random number between 1 to 10 uh to replace this one by these numbers to create a random number we can use random function from the math properly so we just need to create a constant and we call it just num1 and we create the random number using math dot random [Music] and we don't forget to add the parenthesis because the random is a function if we console console.log this [Music] console.log nom1 and we open the console using open dev tools pane we go to the console section we see we got a number between zero and one and if we refresh the page we get uh different random numbers just ignore this error because this is in the internal browser of the visual studio code doesn't support the autofocus that we added to the input but it's fine in the other browsers so just ignore this error in order to create the random number between 0 and 10 we just need to multiply this to 10 now we are getting for example 8 94 8 59 and 9 92 or something like that but we don't want a number with the decimals we just need to we just want to a rounded number so we add math we just first put this one in the parenthesis and we added another function called math dot seal [Music] now we get one if you refresh the page we get two one four six three so it's a number between one and ten all right let's use alt c to turn on the word wrap so we can see the code completely and it decreased the size of this a little bit more yeah that was for the that was it for the num1 let's create another number we just say num 2 will be the same things we just need to copy this because we are creating another number between one and ten so now we just need to change this one by the number one and the second one with the number two so in order to manipulate this header we need to bring it first to the javascript and return it here as the h1 tag has an id of question we can return it using get element by id method so we create the account a constant we call it question element and we use document dot get element by id method to [Music] to get that element and the id was question now we are getting the question element now we can manipulate it using dot inner inner html or inner text actually because it's just a text we just say in a text and as soon as we add the backticks we remove it and whatever we write down here we see inside the browser so we just want to say what is one it was one multiplied by one but we want to multiply number one with number two so we just say number one because the number one is a variable we need to add a dollar sign and open it a set of curly braces and inside this we just write number one and we want to multiply this multiply [Music] by number two so we add another dollar sign and set up curly braces and we just write num2 now if we refresh the page each time let's add the question mark two now it's if we refresh the page each time we get a different question by different numbers so we refresh it we see what is two multiply by six three by nine five by two or one by one yeah so the question is created but we need the answer as well to compare it with the answer that the user enters so we the correct answer we just say the correct answ so sorry we create a constant we call it a correct answer and we just say num1 multiplied by num2 would be the correct answer because this is the real mathematics and now we need to get the answer from the user so we add a form here so we need to add a add event listener method to the form and track the submission of the form and get the data from the input first we bring the form form has the idea form so here we add we can add it at the top so we just say constant form element and we equal to document.getelementbyid and the id is 4. and here we add a add event listener to the form and the event that we want to handle is submit so anytime the user submit the form we activate if if callback function which is here so each time someone submit the form we want to get the information so the information we want to get is the whatever inside the input and we can get this one by just bringing the input element first the input element here has the id of input so we bring it here we just say const input element and the equal to document that gala get element by id and the id is input so we can get the information inside the input by just adding the dot dot value method so we save it to a constant and we call it user [Music] answer the user answer will be equal to input element dot value but the value we are getting is actually as a string it's not a number we can test it here we just say a log let's log the user answer and also the type of user answer we just say type of user answer let's open the console again so when we submit a number a random number we submitted we can see the number is here and the type of this user answers is 3. in order to convert this string to number we just need to add a plus at the beginning of this string now we if we write down a number and we submitted we get the number and the type is number as well so now we can compare this user answer with the correct answer which we are we are getting from the question so we delete the console and we we compare the both of them the user answer and we say if the user answer is equal to correct answer then we want to increase this score let's first set this score to be zero for example just here we just create a variable call it a score and we set it to be zero at the beginning and here we just say if the answer was correct we increase the score by one and otherwise we decrease the score [Music] let's counsel lock the score and see the change console log it in the both sides and we open this first the score is zero if we answer the question correctly then the score would be one and if we answer the question wrong the score would be minus one so we just and first we answer it correctly we just say 35 we press enter now we get one for the score this one is a 21 record the correct answer is 21 but we just say 4 and we enter now we get minus 1 for the score the reason we are not getting 0 because the the first it was 1 and then we decreased it by 1 we didn't get zero because we are not uh storing this score because each time we submit a number the page would be refreshed and we get this javascript from beginning and the score would be set again to zero in order to prevent this we can we can store the score inside the local storage of the browser so we create a function here and we call it local storage or we just call it update update local storage and we just save [Music] the score variable inside the local storage we can use set item method this if a store item this the item we want to store and we want to call it a score and we cannot save this score directly to the local storage because the score is a number we have to convert this score to a to a string otherwise the browser doesn't allow us to do it this is for the security of the browser doesn't allow you to store anything except a and a string so in order to convert this number to a string we can use json [Music] dot stringify method and we just say a score and we get the variable from here so each time we we need to update the local storage and we call this function here instead of the log we just call the local storage function all right so now we open the local storage using open dev tools pane and we go to the application and here inside the local storage we go to our website which is this url we see from here now we don't have anything in the storage but let's answer one question we just answer it correctly use three multiplied by one is three so we submit it now we have a variable inside the local storage which is a score and it's one the value is one now if we answer another question correctly we don't get the value two because the reason is that we always set the score to zero at the beginning and then we even we increase it by one we always update the local storage and the scope will be always one in order to prevent this we need to first get the score value from the local storage and set it to the variable score at the beginning so here at the top we need to instead of setting the score to zero we just say local storage that instead of set item we need to use get item and the item we want to get is the score but still this local search.getitem is a string now and in order to have it as a number as as a number for a score we need to add json dot parse it instead of json.screenify and then we can have the correct value now if we answer the question another question correctly we just say 36 the value inside the local storage would be two so it's updating and let's answer another one correctly and now if we even answer one question wrong we decrease the value so now it's this one is 30 the correct answer we just answer for example two now the value is two all right uh in order to prevent a situation when the there's no score in the local storage in order to don't get any error we need to just say if this score is not existed we just said add an [Music] not sign at the beginning if there is no score just uh set the score to be zero all right now we are saving our scores inside the local storage but we haven't updated this section yet in the browser so in order to get this score we need to bring it from the html the id we use for this part is this one is the id is a score so we just bring it inside the javascript using the get elements by id method here we just say const score element document dot get element by id and the id is the score [Music] now we have the score element after updating the score and getting it from the local storage we can update the score element and we change the inner text to be now we remove it completely we just say store sorry score equal to a variable and in order to have a variable we add a dollar sign and a set of curly braces and the variable is a score which we are getting from here or here so now the score is two we we can answer one question correctly [Music] so it becomes 3 this is 12 this one is 63 so each time we are answering a correct uh we are answering a correct one we get the increase in the score and if each time we answer it wrongly we get a decrease in the score for example this one is 10 you just write 53 and the score would be 4. let's try this in the browser as well so we so let's go to the browser as you can see now the score is zero here because this browser is different from the browser of the visual studio code and this is a chrome browser so the local storage is empty so the score is zero let's answer some questions we just say nine and press enter and we get the score one and also we as you may notice each time we answer the autofocus comes to the input section so we can answer the next question very fast let's make a mistake and we just say 2 so we decrease the point in the score section that was it for our projects and i hope you enjoyed and may learn many things see you in the next project welcome back to another project in this project we're going to create a button ripple effect as you can see from the final version of the project we have a button and if we hover over the button from any direction we see a ripple that starts from that position for example if we go from this side we can see that the ripple starts from that side we're going to use a javascript to get the position of the mouse when we entered from any direction of the button and also we are going to use a css to create such a beautiful rippling effects in the next section we're going to start with the html part of the project so see in the next section all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on the open folder i would like to create a project in my desktop but you can create it anywhere you like in your computer so here we click on the desktop and here we click on the new folder button to create a new folder we name the folder button ripple effect which is the name of our project [Music] we press enter and here we click on the select folder to select the folder we close the get started tab again and here on the left in the explorer section we create an html file we right click and we click on the new file we name the file index dot html and we press enter now on the right side we have our index.h file which is completely empty but we can use an exclamation mark to create an html5 boilerplate so we write an exclamation mark and here we click on the first auto suggestion now we have our html5 boilerplate and here the first line is doctype which tells the browser which version of html the page is written in [Music] and in our case we write only html because we are using html5 then we have html tag which is the top level element of the html file and in it includes the head tag and the body tag the length attribute inside the html opening tag sets the language of the page and in our case we set the language to be english then we have the head tag which includes the meta tags and the title tag the charts that attribute inside the first meta tag defines the html character encoding and in our case we set it to be utf-8 which is recommended by html5 because it contains nearly all the characters and symbols then we have this meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag tells the browser on how to resize the page and these two sections inside the content attribute first the firstly they set their pages with to devices and screens with for example the mobile screen will be smaller than the computer screen then the second part sets the initial zoom level of the browser which is in our case this hundred percent let's use alt c to turn on the word wrap so we can see all the codes clearly and after these meta tags we have the title tag here which sets the title of the pro browser in order to see the browser inside the visual studio code we can right click and we click on live preview show preview which enables us to see our website in real time when we are changing our code now on the right side we see our website which has the title document let's change the title to our page's name which is button ripple effect and let's close this explorer section to have more space on the right side and in the body section we just have a button to to be in in the middle of the screen later and we can add the ripple effect using javascript and css to this button and we use an anchor tag for this button and the class we want to add is btn and the href would be enhashed a hashtag which means that we're not going to anywhere by clicking on the button and we have a span in the middle and we just write button the reason we are adding span is because we want to later add effect on the button and in order to see the the the text inside the button when we hovering over the button and we are adding the effect we want to bring up this spam using z index later we're going to see it and you're going to understand it clearly but for now we just write it like this and in the next section we're going to use css to style this button and bring it to the center and add the hovering effect and also the ripple effect so see in the next section for the css part of our project all right in the last section we have finished with the html part of our project in this section we are going to style our project using css first we need to create a css file we just open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file we name the file style dot css and we press enter before using css in our project we need to add a link to the css file within the html code so we go back to the index.html and just after the title tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external style sheet which is the style the css the href attribute defines the destination of the link and as both files i mean the index.html and the style.css are located at the same directory we just need to have a style.css for the url and now we can use javascript we can use css in our project we just close the explorer section on the left side by dragging this bar to the left and we save this file using contour s and we go to start.css when we start with the body section of our project we just write body we open a set of curly braces first we remove the margin the default margin around the body of the body element using margin zero then we want to bring this button to the center first we bring it to the center horizontally using display flex and justify content center then for bring it bring it to the center vertically we can use we can set the height to be 100 of the viewport height which means all the screen size from top to bottom then we can use align item center to bring it to the center vertically let's add a background color we just say background color and we set it to alice blue or allies blue which is a creamy color then we change the font of this button using font family and we set it to be sans serif after body section let's start styling the button the button had the class of btn so we just need to target this class using dot btn we just change the background color first to see it properly we just set it to be pink we change the padding we add some padding to the top and bottom 20 pixels and left and right 40 pixels so we have a very big button so we can see the ripples later easily let's change the border we add make the border rounded using border radius and we set it to be 5 pixels [Music] and let's add some box shadow to the button the first value in the box shadow is the position of the horizontal shadow we set it to be zero the next one is the position of the vertical shadow we said it to be four pixels we can see it at the bottom then we add the blur radius using yeah we set it to be eight pixels the the shadow the color of the shadow is blue we want it to be black uh we can use rgba function to set the color we use 0 for red 0 for green and 0 for blue for the red color and we just set the 0.3 for the alpha value which means 30 percent transparency or opacity now we have a beautiful button here let's remove this line under the button text using [Music] text decoration none and let's change the color of the text to black then [Music] that's fine for the button for now and the next things is to add the hover effect and add something inside that has a ripple effect so in order to add this we can use the before pseudo element to add this content is we have to set the content to empty first for the before and after sudo elements and then we need to position this absolute we want to position it absolutely so in order to have this one absolutely we need to use its parents to be relative so we position this relative and we cannot see it yet let's add some color to it which we set the color to orange red but still we cannot see it we add the width to [Music] for example 20 pixels and height to 20 pixels as well so we can see this one here and we want to bring it to the center so we set the left to 50 percent and top to 50 percent as well and in order to bring it exactly to the center we can use i mean exactly because we are we brought the edge of the this element to the center not the middle of it so we can use transform translate and we set the x and y to minus 50 so it it came to the center exactly let's add some border radius let's set it to be 50 so it be it becomes like a like a circle and that's that's fine for it and we want when we hover over the button this circle uh the size of the circle increases so in order to target the hovering effect we can just say btn hover so when someone hovered over there they beat the button and we want to target this before sudo elements and we set the width to be for example 300 pixels and height to 300 pixels as well so when we hover over them we can see a big circle but uh it's bigger than the button so we can use here overflow hidden for a button to remove the extra hovering [Music] so we just say overflow heading so now we getting this one and in order to see that uh ripple effect we can use a transition to make it a little bit more smooth and the transition should be on both width and height so for the width we add 0.5 second and for the height so we add a comma here for height we add 0.5 second as well [Music] so now when we hover over the button we can see this hovering effect so let's remove this width and height so we set it to zero so we don't see it but anywhere we enter the button we see this hovering effect from the center because we set the left and top to be in the center later using javascript we're going to target the mouse position and we center this circle from the position of the mouse let's bring this button to the top as you remember we added span for the button text so we can target this here we just say btn and we we target that span and we change the z index to the one but before doing that we need to change the position to relative and we change the z index to one then the normal default the index is zero but when you set it to one it comes over all the elements so now we see the button over everything else that was it for the css part of the project in the next section we're going to add the functionality to our projects using javascript and we are going to start this rippling effect exactly from the the place that the mouse enter into the button so see you in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project in this section we're going to start adding functionality to our project using javascript first we need to create a javascript file we just need to first open the explorer section using ctrl shift e and on the left side we right click and we click on the new file we name the file index dot js and we press enter now we have our index.js here but before using the javascript in our project we must add a link to this index.js file within the html code so we switch to index.html and just at the end of the body section we added script tag we just write sc and we click on the second auto suggestion the one with the src the src attribute defines the destination of the link and as both files are located at the same directory we just need to write the index dot js for the url now we can use the javascript in our projects let's close this explorer section first and then the only things we need here is this button element we need to return it inside the javascript and the button has the class of btn so in order to return a an element with a class we just need to use queryselector method so we just write here btn element equal to document dot query selector and the element we want to return is button so we just write dot btn here and we need to add a add event listener method to this button to track the a mouse event when we moving the mouse inside the button so we just say btn element dot add event listener and event we want to listen is mouse over and when the mouse over happens we want to trigger a function and here inside this parenthesis we can get the event which is the position of we can get the position of x y and anything inside related to this mouse over event let's console.log the event [Music] dot page x so when we open the console log when we go inside this button we can see a number inside the console when we move it we can see different numbers in the left we have a smaller on the right we have a bigger numbers but this x is from this point to here all right and we have also the y we can get the y as well so this is the position from the top to this place but in order to get the position exactly in the inside the button for example here will be zero and increases until here for the x and from the top to bottom we we need to subtract this amount from the position of the button from the top so in order to get this one we can use btn element dot for the y for example we can use offset top [Music] now when we go here we can get the position from the top of the button as you can see it starts from zero to close to the bottom here so here at the top it's almost zero it shows minus one and from the button is like a 57 for the x we need to [Music] subtract this number from the offset left instead of offset top so here should be one or near near one so you see minus one and this way would be 125. so in this case we can set this value here left and top instead of center we just get this point any point that the mouse is entering but unfortunately you cannot have access to the before pseudo-class pseudo elements inside javascript because the before and after pseudo-elements are not part of the dom but the the things we can do is to is just add a variable here and we change the variable inside the javascript so here inside this before element we just add a variable and this we call it for example x position and for the top one we just say for example y position and we can change this variable inside this inside javascript using set property method so here first let's save these numbers for example we save this one we call it x and we copy this we change this y to [Music] this one y and we change the variable that we have created here in this way we just write down that style because we want to change the style and we change the set property [Music] and the property we want to change is expositions inside a double quote they just write down x position [Music] and we set this to be equal to this x plus pixels because this is just a number we wanted this left and top our base of pixel or percentage so we do the same things for the y as well so we just add the use the style and set property and this one is y position [Music] and the value is we're getting from here y plus pixels so now if we enter from any size of the button we can see the ripples it starts from that point so the the center of the uh the the circle starts from here and increases its size from top this way that's anywhere yeah let's check this inside the browser as well so we open this inside the browser we can see it here all right that was it for our project i hope you enjoyed and learned many things that was a kind of a cool button that you can use for your own website so see you in the next project welcome to another project in this project we are going to create a real-time character counter as you can see from the final version of the project we have a container here with a text area and we have the total characters which is zero now and the remaining 50. as we start writing you can see that the total characters is increasing and also the remaining is decreasing and when we reach to the 50 characters we can see that we cannot add more uh tags inside this text area it doesn't allow me to write any more text and also the remaining is said to be zero in this project we're going to use javascript to calculate the number of texts inside this text area in real time and also dynamically change the total characters and remaining using javascript in the next section we're going to start with the html parts of the project so see in the next section all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on the open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so here we click on the desktop in we click on the new folder button to create a new folder and rename the file real time character counter real time character counter is the name of our project we enter to save the name and we click on the select folder button to select the folder we close the get started tab again and on the left side in the explorer section we right click and we click on the new file to create an html file we name the file index dot html now on the right side we have our html file which is completely empty but we can use an exclamation point to create an html5 boilerplate we just write an exclamation point and we can press tab or we click on the first auto suggestion to have our html5 boilerplate in the html5 polyplate we have doctype which tells the browser which version of html the page is written in [Music] and in our case as we are using html5 we just need to have html in the opening tag then we have the html tag which is the top level element inside the html file and the head and the body tags are inside the html tag then we have the length attribute inside the opening html tag which sets the language of the page and we set it to be english by just writing en here and then they have the head tag which includes the three meta tags and a title tag the character attribute inside the first metadata tag defines the html character encoding and it's said to be utf-8 which is recommended by html5 because it nearly contains all the characters and symbols then we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta sag sets the initial zoom level and the page's width by this settings the first one is the sets the pages with to devices the screens with for example if the page is small like mobile screen the page's width will be smaller than a bigger screens like desktop computers then we have the initial zoom level of the page which is 100 as default let's use all c to turn on the word wrap so we can see all the codes then we have the title tag which sets the title of the page we can see the browser inside the visual studio code in real time using live preview extension and we just need to right click and we click on live preview show preview but you have to install live free extension previously so we click on [Music] this section now we have our browser on the right side which is completely empty but with the title document let's close the explorer section to have more space on the right side and let's change the title of the page to the name of the page which is real time character counter so we just say real time character counter [Music] then in the body section we have a container that is the main container and the box that we're gonna have our contour so we call it just container it's a dip with a class of container and inside this div we have a h we have an h2 tag just the name of our project which is layer time character counter after the h2 tag we have a text area so we can write our text here so we add a text area tag the text area um just remove the name we don't need it we just add an id of text area and also we add a class of text area we don't need columns and all rows we're gonna style it later using css and also we have a placeholder saying please write your text here we can write our text here and then we want to limit the number of characters that we're going to write here um to for example 50 characters you just need to use max length for example 50 you you can change this one according to your website or project later so if you write something as soon as we get to the 50 characters we cannot write anymore it's it's gonna limit us now i i'm typing but we cannot see anything adding inside the text area after this we have the contour area we we have the total counter and also the remaining so we create a div here with a class of contour container and inside this div we have a paragraph saying inside total characters and inside we have a span because we want to change this section using javascript later dynamically when we are typing so this spam has a class of total counter and and also an idea of total contact so we can easily get them inside the javascript just for now we we just write a number inside the span just say for example uh 30 or something and then we're going going to change this number dynamically using javascript let's copy this using alt shift arrow down and we change this total characters to remaining and also here the these two totals we just change it to remaining and just change this number to for example 20. also later we're going to use javascript to dynamically calculate the remaining and also the total characters in the next section we're going to start styling our project using css so see you in the next section all right in the last section we have finished with the html part of our project in this section we're going to start styling our project using css first we need to create a css file so here we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file we name the file style dot css and we press enter now we have our install the css file which is completely empty but we can't use it yet because we must add a link to the css file within the html code so we go back to index.html and just after the title tag and at the end of the hit tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external cell sheet the href attribute defines the destination of the link and as both files i mean the index.html and the solid css are located at the same directory we just need to have a style.css for the url now we save the file using contour s we close the explorer section and we start a styling from the body tag so we go to install the css and we add body here we open a set of curly braces first we remove the space around the body element [Music] using margin 0 then [Music] we bring these items to the center horizontally using display flex and justify content center next we bring them to the center horse vertically using 100 percent of the viewport height it means that the height of the body is similar to the height of the screen [Music] then we can use a line item center to bring everything to the center vertically let's change the background color of the body and we set it to be for example salmon color and then we change the font of the project using font family property and we set it to be cursive it's just my preference you can use any font family you like for your own project the next things we you want to style is this container that covers everything this step with the class of container as it is a class we we have to use dots at the beginning of the name of the class as the css selector we change the background color to light pink we we can use alt c to turn on the word wrap so we can see all the codes clearly then let's change the width to be 400 pixels then we add some padding to push everything to the inside and we set the padding to be for example 20 pixels let's bring let's use display flex to be able actually we don't need display flex uh let's add some margin so when we decrease the size we want to add i want to add some space around the element so we just say margin 5 pixels and let's add some borders around the container using border radius and we set it to be for example 10 pixels and let's add some box shadow so we can see this container more clear so we use box shadow property the first value inside the box shadow property is the position of the horizontal shadow and we set it to be zero the next value is the position of the vertical shadow and we use four pixels for it we can see it here then we have the border radius which is eight pixels sorry not border radius the uh [Music] blur radius yeah below radius to be 8 pixels and then the color is black is fine but i want to add some transparency to this color so we use rgba function to set the color rgba stands for red green blue and alpha we set 0 for red 0 for green and 0 for blue which gives us the black color then we use 0.3 for the alpha value which means 30 percent transparency or you can say opacity all right now we have a beautiful box shadow let's size this text area style it so the text area has the class of text area as well so we can target it using dot text area selector we open a set of curly braces first we prevent the resizing now we can use our air our mouse to resize the text area but we can just set it to be none so now we cannot resize it but besides it ourselves we set it to be 100 percent the width then [Music] we have the height to be for example 100 pixels let's ch let's increase the size of the text using font size for example 18 pixels we can change the font of this text using font family and we set it to be sent serif as an example let's push these text a little bit inside using padding so we just say padding 10 pixels as you can see the padding is affected the size of the text area in order to prevent this one we can use a box sizing border box which removes the padding and borders when we are sizing a text area or input inside css all right let's add some border so we we set the border to be solid 2 pixels width and change the color to dark gray yeah everything looks fine now let's install this part the contour section we set the div that cover the this area contour container so we target that using dot counter container first we change the display to flex to bring them next to each other but i want this part to be in the left side and this part on the right side so we can use justify content a space between [Music] to achieve this score then uh we want to change the like uh we we push the button push these texas to the right and this one to the left a little bit we can use it padding we want the padding top and bottom to be zero but left and right just five pixels all right that looks fine now let's uh style this paragraph and these numbers i want this number to be blue and this one to be red so first we target the paragraph this paragraph so we we target counter counter container and its paragraph and we just change the font size to be 18 pixels and we change the color to be gray let's target the color of 30 and 20 these this pen has the class different classes the first one is total counter the second one is the remaining counter so we target them here using dot total contour we set the color to be white but i want to use this late wire state blue sorry blue but the state blue and for this one i want to use the orange red color so we target this using remaining [Music] contour and we set the color to be orange gripped and that looks okay for now and in the next section we're going to use javascript to dynamically calculate this total character and the remaining character as well so when we are writing here this number is gonna go up and this one goes down from this target which is here the max length which is 50 for now so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project in this section we are going to start adding functionality to our project using javascript first we need to create a javascript file so we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file we name the file index dot js and we press enter before using javascript in our project we must add a link to the javascript file within the html code so we go back to index.html and at the end of the body section we add a script tag we just write sc and we click on the second auto suggestion the one with the src as both files i mean index.html and index.js are located at the same directory for the src we just need to have index dot js now we can use javascript in our project first we close the explorer section on the left side to have more space on the right side we save this file using contour s and we also save the install.css using contour s and we go to index.js to start adding functionality to our project the things we want to do is to track that the text which is being written inside this text area and we count the characters of this text and put it here and also we get the information from the max length of the text area from here inside the text area tag we get this max lens and minus that one from the total characters so first we need to get this text area so the text area has the idea of text area as well so we can get this element using getelementbyid method inside the javascript file we just make a constant here and we call it text area or [Music] text area element equal to document dot get element by id and the id is text area from here this and then the the things we want to do is to add it event listener to this text area element and we track the writing inside this section first we use alt c to turn on the word wrap so we can see all the codes on the left side we close this a little bit and we add the add event listener method to this element the add event listener method has two parameters the first parameter is the event handler so the event handler we want to use is key up it which means whatever we press here and we remove the key uh we trigger this function that we are going to create here so this function is going to be triggered once this event handler happens so let's let's console.log something [Music] we just say key is pressed we open the console section here using open dev tools pane inside the console now if you write something inside this text area we see that the console log is showing something i wrote four characters and we got four key [Music] is pressed all right the things we want to do instead of console logging we want to change the total character here and calculate the amount of character from here so we just create a function we just say update counter and we create the function under this we just say updates [Music] counter [Music] and we need to get the length of this the things we write here and we can do it by just just saying text area element dot value so we get the value and we calculate the length of it so we want to put this one inside this instead of the 30 so we need to get this element as well so the element is here the total characters and the element is this span and the span has the idea of total counter so we bring this element using get element by id method so we just create a constant and we call it total character or total counter element and we equal it to document.getelementbyid and we just write total counter and here we just equal this to total counter element dot inner text and equal to this so when we write something here for example i'm writing hello we have to get the total characters here for example 5 but we are getting a wrong one because here instead of value we write area value max which is the problem of the auto correction all right and also we try again so we are not getting yet should be some problem we check uh total counter and here is toast this one is typo total counter let's try again we just write hello now we can see the change inside the total characters which is five and if you keep continue writing we're getting the real time character counter until we get to the point which is 50 which is the max a length of the text area next things we want to do is to show the remaining characters when we are writing the inside the text area the remaining area has the id of remaining counter so we copy this and we go to the javascript and we write const we create a constant we call it remaining counter element and you call it to document.getelementbyid and here we paste the id and [Music] we also wanted to get this max lens so in order to get that one we need to uh we just say text area the element dot get attribute and the attribute you want to get is this one max lens so inside install ins inside a double quote we just say max length we want to equal this to [Music] this remaining elements so we copy this we put it here and we just say dot inner text equal to this one equal to this one now if you start writing the remaining is 50 but we want to minus this from the total characters which is this one we are getting here so minus this so when we start writing we see that this one is three this one's 47 and if we keep continue this one goes bigger and this one gets smaller [Music] until we get to the 50 and the remaining is zero and the other things i would like to do is when we someone comes to the website i want to set the total character to 0 and the remaining 250 to the best things is just call this function once here we just say update counter when we do that one when someone comes first the function is triggered and we get the total characters calculated which is zero and the remaining is 50. so now we can even remove this 30 and 20 from the spans also if you want to change the max lens you can change it here for example you put at 150. so now the remaining is 150 and you can write 150 characters yeah that was it for our project i hope you enjoyed and learn many things see you in the next project welcome back to another project in this project we are going to create a sticky nav bar as you can see from the final version of the project we have an image at the background of our main section we have a navbar at the top with the logo and the menu and if you scroll down we see some uh like lorem ipsum texas and if we scroll down more we see that then our navbar has been changed to black color and also if we go back again to the top we see our navbar has been changed to vice color again we're going to use javascript to calculate this certain point that the nav will reach and we're going to add and remove some classes to reach different styles for the navbar so see in the next section for the html part of our project all right let's start our project first we open the visual studio code here we close the get started tab in the file menu we click on the open folder as usual i would like to create a project in my desktop but you can create it anywhere you like in your computer so we click on the desktop and here we click on the new folder button to create a new folder we name the folder sticky navbar which is the name of our project we press enter and here we click on the select folder button to select the folder we close the get started tab again and on the left side in the explorer section we right click and we click on new file to create an html file rename default index dot html and we press enter as you can see now we have the indexed html file on the right side which is now completely empty but we can use an exclamation mark to have an html5 boilerplate so we write an exclamation mark and we click on the first auto suggestion now we have here the complete html5 boilerplate which has doctype which tells the browser which version of html is using and for html5 we just need to write html here and then we have html tag which covers the head and body tags the length attribute here inside the html opening tag sets the language of the page in our case we set the language to be english by just writing en for short then we have the head tag which has three meta tags and also a title tag the chart set attribute inside the first meta tag defines the html character encoding utf-8 which covers nearly all the characters and symbols is recommended by html5 for [Music] web developers then we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge and finally we have the viewport meta tag which tells the browser on how to resize the page and the way he says how to resize the page is to set the width of the page to the devices screen and also set the initial zoom level to 100 percent let's use alt c to turn on the word wrap so we can see all the codes inside this window then we have the title tag which sets the title of the page we can see the browser inside the visual studio code using the live preview extension we just need to right click and we click on live preview show preview now we have the browser on the right side which has the title document we close this explorer section to have more space on the right side by just dragging this line to the left let's change the title to sticky navbar which is the name of our project we can see the sticky nap or here on the title in the body section we have three parts for this project first is the nav bar part then we have a image section which is the top container and we have the text container which is the bottom container so we need three div to divide our website to three sections so the first div is [Music] just the top one it's a div with the class of navbar [Music] and it contains the logo and also the navbar menu for creating the logo we can use a website for a website called svg logo creator or generator to create an svg logo svg logos are seo friendly and it helps usually the website to be ranked better in the search engines so we go to our browser the google chrome and we search for svg logo generator [Music] here if we scroll down a little bit here we can see a website called svglocalmaker.com we click on this website and we just make the logo in my case i just write my name you can make any logo you you like so i just write my name we first refresh we see the logo here the font size is fine but i want the width to be 200 so we don't waste with after the logo and also i want the height to be uh just 40. yeah that's looks okay and although i don't want to have the frame for my logo so i remove it by just using this frame and set it to be no we change the logo to a color for example red we refresh it and we can download the logo by clicking on this button we drag this downloaded logo to our folder i created the project in desktop so i bring it to the desktop and put it inside the folder sticky nav bar i go inside the folder and i would like to change the name of this svg logo to just logo if we go back to the visual studio code and we open the explorer section we can see now we have another file called logo that's dot svg we can have a access to that one just making a image tag here [Music] and inside the source as the both files i mean the indexed html and logo.svg are located at the same directory and or folder we just need to write here logo dot svg [Music] as soon as we write down the url we can see that we have our logo on the browser on the right side we don't need an alternative or we just write logo for our alternative all right we can close the explorer section now we don't need it so we can have more space after the image we have the menu the menu is just the unordered list tag and inside the unordered list tag we have a list and the first list would be a link so we use an anchor tag to have a link and the address would be nothing just we don't want to go anywhere now for this website we just add a hashtag and inside the anchor tag we just write for example home the first one now we can see it here we just need to copy this you two times using alt shift error down one two and we just change this home to for example block [Music] and these are optional as well you can have anything you like in your computer sorry in your website all right yeah that was for the that was it for the navbar section we go to the top container so we create a div with the glass of top container [Music] and the the top container is just an image and we have a some uh like a title in the middle so we added h1 tag we just write welcome [Music] to our [Music] website all right so after that we have the bottom container so we had a dip with the class of bottom container [Music] so this is just uh i want to create just a lorem uh like a lorem text so just a junky text so we just write we added a paragraph with a class of for example text and inside that we want to add this hundred words of lorem so we just write lorem and we add alarm we add hundred after lauren if we enter and accept the auto suggestion we get hundred words of lorem ipsum right so we just make kind of this uh paragraphs a few times so we copy this paragraph using alt shift arrow down for example four times one two three four so we have some text here because we want to able to scroll down and see the nav bar changing from for example background color white to background color black and vice versa bnb going up but if you don't have any text so we are not able to scroll down because the page would be very small all right that was it for the html part of our projects uh see you in the next section for styling our projects using css all right in the last section we have finished with the html part of our project in this section we're going to start styling our projects using css first we need to create a css file so we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file rename the file install.css and we press enter but before using this css in our project we need to add a link to the css file within the html code so we go back to the index.html file and just under the title tag here and just at the end of the hit tag we add a link tag so we write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external stylesheet which is the install.css the href attribute defines the destination of the link and as both files i mean the index.html and install.css are located at the same directory we just need to have installed css for the url so now we can start styling our project using css we just save this file using contour s and we close this explorer section by dragging this line to have more space on the right side so we go to the is to this file install the css first we start from the body section for removing the default margin usually we have i think around 8 pixels default margin around the body element so we just remove it using margin 0 and now we can style our project easier so first we start with the top container section we add the background image so after that we can easier install the nav bar section because the navbar is going to be on the top of the top container section so in the index.html first we had a div with the class of top container which contains this uh h1 tag which saying will come to our website as you can see here so we we target this div and we return it to the and which we choose it we select it inside the css because using dot top container because it has class so here at just the bottom of the body section we just write dot top container and we just add a background image we use url function to add the background image the image we want to choose is we can choose it from the on splash website so we go to the browser we open a new tab and we search for unsplash [Music] the first resolve is unsplash.com so we click on this link and here we search for for example i want to add a computer behind this container we search for computers so the first images is just the premium we need to pay but if you scroll down more we see that we have the results for the three images but still you have to you can see that a sponsor one these are not free so we go down a little bit the i would like to choose this image for the website so we click on this and we right click and we click on the copy image address to get the url we go back to to the visual studio code and inside the url we add a set of double quotes and inside the double code we paste the link using ctrl v now we can see the image but as we don't have enough height for the this section we cannot see it properly we can use alt c to turn on the word wrap so we can see all the codes so after that we set the height to be hundred percent of the viewport height which means it's the size will be exactly the size of the screen size so and in any zoom levels this image would be the same size of the all the screen we can check it inside the browser as well we can open it inside the browser using this hamburger icon and open in browser as you can see the image is exactly with the size of the screen we can change the zoom level you can see still the image looks like this but it's repetitive we can remove this one and make the image as large as possible to fill the container using background size cover now if you come back to the browser we can see the image is bigger and it covers everything as you can see by changing the zoom level we still have the same amount of image for the height so we remove this part now let's install this h1 to or before doing that h1 we we need to bring this each one to the center so here we just change the display to flex to be able to bring this one to the center horizontally using justify content center and then we use align item center [Music] to bring the h1 tank to the center vertically here we cannot see it properly because the color and the size so we target the h1 tag using top container h1 [Music] first we change the color so we can see it better so we just change it to white we increase the size of the text using font size property and we set it to be 50 pixels and also i want this text to be exactly in the middle so we can bring it in we can bring the indoor inline content using text align center all right let's change the font of this text using font family i would like to choose impact and let's add some space between the characters of the world using letter spacing for example we set it to be two pixels all right looks good now we can start uh selling our never but i would like to install this text as well so we finish with the website and then we go to the nav bar section so the text these texts are located inside the bottom container and also it has the class of text as well so we can target this class so we just say dot text [Music] we add some margin we just say margin top and bottom 50 pixels [Music] and we have left and right just we say 5 [Music] so now we have this one and um i think it's fine we just changed the [Music] font family to be send serve [Music] all right that's that's enough because it's not very important we in this project our focus is the nav bar and how to make it sticky and how to change it when we reach to the to a certain point all right so let's install this nav bar so we target the nav bar by choosing its class navbar here so we just write dot nav bar [Music] and we just change the background color sorry we just change the display to [Music] flex to bring them next to each other but we want this actually be in the top of this images image and to be like a with a different position but just say position [Music] fixed so when we change the position to fix we see the nav4 on the top of the image so now we just need to change the height we changed first we change the background color [Music] to be white [Music] and so now we know exactly where the uh navbar is so will we set the width to be hundred percent [Music] and we change the justify content to space between [Music] so we bring the logo this way and the other menu to the right side and let's install this menu first so we bring them next to each other so we're just saying that nav bar ul we target this url inside the div we just change the display to flex [Music] and we remove these dots using a list style type none and [Music] next we need to target the ally so we can change the color and also remove these text decorations so after this as you can see from the index.html we had the div with the class of navbar and then we had ul and after that we have li and inside the airline we have a which is the anchor tag so we want to target this a to fix everything so you just say navbar ul li and then we have a so we don't want the text decoration so the underline we set it to be none as you can see now we don't have any underline then this we add some margin we say top and bottom to be zero and left and right to be 10 pixels let's change the color to be black and change the font family to be cursive [Music] let's bring this logo to the center using in the navbar we just we can use align item center to bring everything to the center that looks fine now all right let's add some hover effects using hover css pseudo class so when we change the color of the text when we hover over them so we need to just target the same things now for ul li and a but the hover suiter class and we just say change the color to be red when we hover over them that looks fine also we want the this logo to be clickable so when we click on this logo we go to the home page but we didn't do it from the beginning so here we added tag which goes to the index.html which is the homepage and we just cut this image and we bring it inside this now if we click on this logo we go to the home page all right i think if you check this website and change the zoom level i think it's fine for now we can add some box shadow at the bottom so we can have it more beautiful when it's white so for the nav4 we add a box shadow the first value inside the box shadow is the position of the horizontal shadow we set it to be for example zero and then we have the vertical shadow which is the bottom of the element we just say 4 pixels and then for the blur radius we just say 8 pixel and for the color is we use rgba function and we set 0 for red green and blue which gives us the black color and also we said 0.3 for alpha which gives us the 30 percent transparency or opacity so when we go down we can now see the box shadow at the bottom all right the things we want to do in the next section so when we pass this image as soon as we go to the bottom section we want to change the color of the nav navbar to black and change the text to white the the things we want to do is just add a class to the nav bar here we had a class of active we tested now and then we we changed the style of this navbar when the active class is added differently so we just say for example now for when it has it it has a class of active just change the background color for example to black [Music] as you can see now and the we want the color of the [Music] li sorry the ul li and a which is here ulli and a we want the color of the text of the menu to be white now we can see them so when we have this active we have the black navbar but if we don't have it by removing it we have a white vector white nav bar in the next section we're going to use javascript to actually add and remove this navbar when we reach to a certain point which is exactly this line between the the up top container and bottom container so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project in this section we're going to use javascript to add functionality to our project we we have a class now the active class when we add the active class our navbar uh turns to black and when we remove it it it returns to its original color which is white by using javascript we're going to calculate the this point when the top container and the bottom container meets each other so first we create a javascript file we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file we name default index dot js we drag it to that side before using javascript in our project we need to add a link to the javascript file within the html code so we go back to the index.html and just at the end of this file and at the end of the body tag we add a script tag we just write sc and we select the second auto suggestion the one with the src as both files index.html and index.js are located at the same directory we just need to write index.js for the url of the script tag so now we can close the explorer section by dragging the line to the left and we go to index.js to start adding functionality to our project using javascript first we we need to return this navbar element to the inside the javascript using query selector method as where the navbar has a cl the nappa section has a class of navbar we can return this div with the using its css selector and query selector method we just need to make it constant and we call it navbar element equal to document.queryselector and inside a set of parentheses we need to specify the selector of the navbar which is dot navbar because it's a it's a class so we just write dot network we use alt c to turn on the vote wrap so we can see the code clearly on the left side so now we have the nav for we can [Music] we can actually see it [Music] we cancel log f bar element we can open the exp the default stain pane using this hamburger icon and we can see the console here now we return the the element navbar so first we need to add an event listener to the window so we can target when we scrolling in the in the website so we just say windows dot add event listener and the event we want to listen is a scroll sorry scroll so when this happens we want to trigger a function here so we just cancel log here we can see that it's working or not we just say scrolled [Music] so now if we scroll we see that we are getting this message we delete it and we we get it again that's working so how we know that actually how do we know that we when we are going down we reached this point first we need to target the scroll amount so we can console.log something called window dot scroll y so it shows uh what's the number of the y amounts when we are scrolling sorry we scroll while we scroll y yeah so at the beginning the amount is zero as you can see at the bottom but when we're going down slowly this number increase and this number is based on pixel actually so we are here in the 50 50 pixels and if we go down we reach to this point we see now it's 272 pixels as we go to the end of the website we get the 1560 and this number is b is different when we have a different zoom level in our website we can check this in our browser we can open the web developer tools using ctrl shift c here we should click first and in the console when we are scrolling we see the number is changing from zero and at the end we have thousand three hundred if we change the zoom level of our browser for example if we put it to 200 percent when we go down we get more number so right a bigger number 2 500 so depend depending on the zoom level we get a different number for the pixels and also the ball y amount so we are getting this one and also we want to get the the position of this section the bottom section so first we need to bring this bottom container so we just say here [Music] bottom container element we set it to be equal to document.queryselector and because it's a class we just need to add dots here and we just say bottom container so for the bottom uh let's console.log it first [Music] with console.log bottom container element so it's uh we are returning the div if we get its offset [Music] top [Music] we can see that we are getting let's remove this council lot so we focus on this we are getting 378 for this number but this number actually it's here after the margin and also when this place goes to this part to the very top part not here because this sticky bar is on the top of the website not it's not separated so we need to divide this num number to the height of the navbar and also this margin so we have to say here inside this function so if [Music] a window dot scroll y which we got before is greater than this number which is 375 minus the height of the uh navbar how we get the height of the navbar we we can use just first console logins and we can see if we log the nav for element dot dot offset height [Music] so we're getting an error because we didn't finish this part yet so we deleted for now [Music] so we are getting 54 pixels for the height of the nav bar and also the position of this is 374. so here we just ctrl z we get this if again and we just say if the window.the score y is bigger than bottom container element dot offset hot offset top minus this one now for element dot offset height and also we have some margin here if you go to the installer css we added uh in the in the bottom section now in the paragraph text in the text section we added 50 pixels for uh top and bottom of the text so we need to add this 50 as well so here we just say minus 50. so if this one happens we want to add that class let's close this one we want to add the class to the nav form we just say navbar element.classlist dot add the class we want to add is active let's test it so when we go down and we reach to this point this one should work yeah but when we go back we want this to be white again so we add else here so we just say navbar element.classlist dot remove [Music] and we just remove the active class so now when we are going down we reach to this point we re we change to black when we're going up can we change to white let's add some transition to the nav bar so we can see this changing a little bit more smooth so we just say transition on background color [Music] only for example four point sorry point four seconds so when we are going down we see a change but with the transition so let me explain this one again i feel that it's very confusing so we calculate the scroll y so here in this point this scroll y window screw dot the scroll y is zero and here is in its maximum depending on the zoom level so we say if this one is greater than this this point when it it goes it goes to the top so when this one goes to the top i mean uh when this one goes to the top which x actually this one is here under that one i mean this point when it goes to the r this number the bottom container that offset top actually gives us this number when it's in the top but we want this line when it reached to this at this point so we have to minus this amount which is here at the top minus the height of the navbar and also at the margin from this point to this point which is 50 pixels so when we calculate this one we when we reach exactly to this point and reaching this to this we activate this f and this one becomes true and then we add the active class and also in any other situation we remove the class which when it's less than this amount we are in the top that was it for our project i hope you enjoyed and learned many things if it was confusing for you please ask any questions you have in the quick q and a section so see on the next project welcome back to another project in this project we are going to create a random color generator as you can see from the final version of the project we have different colors in the website with different color code and if you refresh the page each time we we get different colors with different color codes we are going to create these uh color codes using javascript and we we're going to create them randomly each time for 30 color container the website also is responsive if we decrease the size of the website we can see in the bigger screen we have four columns and then we have three two and one columns when we are decreasing the size of this screen so see in the next section for the html part of our project all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on the open folder i would like to create a project as usual in my desktop but you can create it anywhere you like in your computer so here we click on the desktop and here on the we click on the new folder button to create a new folder we name the folder random color generator which is the name of our project we press enter and we choose the folder that we have created and we click on the select folder here we close the get started tab again and here on the left side in the explorer section we need to create an html file we just need to right click and we click on the new file we name the file index dot html and we press enter now on the right side we have our index.html file which is completely empty but we can use an exclamation mark to create an html5 boilerplate so we just need to write an exclamation mark and we click on the first auto suggestion as you can see now we have our html5 boilerplate which includes doctype which tells the browser which version of html the page is written in and in our case which we are using html5 we just need to have html here then we have the html tag which is the top level element in the html file which includes the head and the body text the link attribute inside the opening html tag sets the language of the page and as we are writing the our project in english we set the language to be english by just writing en then we have the head tag which includes three meta data tags and also one title tag the chart set attribute inside the first metadata tag defines the html character encoding and utf-8 is recommended by html5 for web developers because it nearly contains all the characters or symbols so the users can easily see our project and they won't have any problem seeing the characters and symbols of the page then we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag tells the browser on how to resize the page based on the here devices the screens with so hit this attribute the content attribute sets the width of the page to the devices it screens with for example the mobile screen will be smaller than the computer screen the width of the mobile screen let's use all c to turn on the wall trap to see the next part which is the setting the initial zoom level of the page and the default value is 100 percent then we have the title tag which sets the title of the page we can see the browser here inside the visual studio code using the live preview extension we just need to right click here and we click on live preview show preview now we can see the browser on the right side which is completely empty but with the title document let's close the explorer section to have more space on the right side and let's change the title of our website to the name of our website which is random color generator [Music] we can see the random color generated inside the tab of the browser then we start our html coding inside the body tag first we add a header by using a h1 tag and this would be the name of our project we just write random color generator we can see here then we have a div with a class of container to include all the colors that we're going to create later using javascript and inside this container we have the color container that is just a box that has a color and the title in the middle so we have a div with the class of color container and inside this div we have just a color code let me just add a random color code it should be six characters one two three four five six yeah so we just copy this few times for example six times because we we're going to use this data to next in the next video we're going to install the project using this information and divs and the numbers and later using javascript we're going to create these divs randomly with different color codes and diff different background colors and also the title but we just hard coded a few numbers and a few divs to be able to install our project in the next section that was it for the html part of our project in the next section we're going to start styling our project using css so see in the next section all right in the last section we have finished with the html part of our project in this section we are going to start styling our project using css first we need to create a css file so we open the explorer section using ctrl shift e and on the ref on the left side in the explorer section we right click and we click on the new file we name the file style dot css before using css in our project we need to add a link to the css file within the html code so we go back to the index.html and just after the title tag we added link tag we just write link and we click on this third auto suggestion the one with the css now we have a link tag with the relationship between the html code and the external style sheet which is style.css the href attribute defines the destination of the link and as both files i mean the index.html and starlet css are located at the same directory we just need to have stalled css for the url now we can use css in our project we we save this html file using contour s and we close this explorer section by dragging this line to the left to have more space on the right side and we go to solid css and we start with the body section we just write body we open a set of curly braces first we remove the default margin of the body section we just write margin 0 and we change the font family to be for example cursive and uh yeah that's it for the body section and we let's uh install the h1 bring it in this to the center we just say h1 and we use text align center to bring it to the center then we have uh we need to style this container the main container that covers the all the divs with the class of container color container so here we target the container class using dot container and we change the display to flex to bring bring them next to each other but we want them to go to the next line when we decrease the size so we change the flex wrap to wrap instead of no wrap so each time the new container goes to the next line when we have a smaller screen then we use justify content center to bring the items to the center horizontally after the container we start styling the color container itself let's change the background color to orange to see it better later we're going to create this background color randomly using javascript but just for now we we keep it to be for orange so we can style it better we set the width to be 300 pixels and we set the height to be 150 pixels we change the color of this text to white and let's change the display to flex to bring this one to the center and before that let's add some margins so we can see the boxes separately so we just say margin 5 pixels so now we see the boxes in a different place because we use justify we use flex wrap wrap when we increase the size we have two and depends on the size we have different number of uh boxes in one row and different columns number so let's change the display to flex to bring this text to the center horizontally and vertically using justify content center and align item center justify content sentence brings them to the center horizontally and align item center bring them to the center vertically and let's change the font size and increase the size of the text to be 25 pixels and as may we have a very light colors in the background using the generator maybe we cannot see this text later so let's add some text shadow to this text to have some shadow effects so we can see them clearly in the lighter colors as well so we change we use the text shadow property and the first value in the text shadow property is the position of the horizontal shadow is set it to be two pixels then we have the position of the vertical shadow we set it to be two pixels as well and four pixels for the blur radius and we want the shadow to be black with some transparency so we use rgba function [Music] to set the color and we set zero for red green and blue which gives us the black color and we use point five for fifty percent turns transparency let's use all c to turn on the word trap so we can see all the codes clearly and let's add some border to each box we just say border we want it to be solid with black color and also with two pixels with and let's change the border radius to be for example 10 pixels i think this is fine yeah in the next section we are going to use javascript to create these color codes randomly and also depending on these color codes we change the background color of these boxes so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project we have in we have installed our projects and in this section we are going to start adding functionality to our project using javascript we're going to create and generate these color color codes randomly using javascript first we need to create a javascript files here we open the explorer section using contour shift e and on the left side in the explorer section we right click and we click on the new file we name the file index.js and we press enter this as the same as the solar css before using javascript in our project we must add a link to the javascript file within the html code so we go back to the index.html and here at the end of the body tag we add a script tag we just write sc and we click on the second auto suggestion the one with the src and as both files i mean the index.html and index.js are located at the same directory we just need to write index.js for the url and inside the src attribute which defines the destination of the link let's close this explorer section again by dragging this line to the left so we have more space on the right side and we go to index.js to start coding first i would like to generate these boxes using a for loop and we add this we create this div with a class of container a color container and add it to this container so first we bring this container and return it using query selector so we create a cons and we call it container element and we equal it to document because we want to create it inside the dom and we use query selector method and because the div has the class of container we just need to add dot container as the selector inside the parenthesis and the double quotes we can use alt c to turn on the word wrap so we can see the code clearly and then we add a for loop we just write four and here we click on the second other suggestion with the one with the for loop so it gives us a template and we have a index which starts from zero to the array lengths we we want to create 30 for example boxes and containers so we just write 30 and we want to increase the number of index each time one and here we want to create a div in order to create an element we can use the create element method so we just write here we know we want to create the color container element and we can use the document dot method and the element we want to create is div and after creating it we want to add the class of color container in order to add a class to the to the element we can use the class list property and add method so here we have the color container elements we can use the class list property and we use add method to add the class and the class we want to add is color container and after that we need to append this new element inside this container so we just write container element dot append child and the child we want to append is this color container element color container atom as soon as we add it you can see that we have more elements here let's remove this hard coded one that we have created before so from here to here we delete them all so the all the the boxes you see is created here which should be 30 boxes let's open this project inside the google chrome by using the open in browser and you can see now we have 30 boxes and they are responsive in a bigger screen we have four box and four columns then we have three two and one so now we go back to the visual studio code now we want to add the uh we want to create this uh color codes using creating a function first we create the function we create a function we call it uh random color the charset that we have for the creating the color palette uh it has it has the all the numbers from 0 to 9 so we write it here and also it has alphabets from a to f so we just have to write a b c d e f so we want to create the random color codes depending on these char characters all right and the color length the the color code lens is so we just write color code lens is equal to six then we start the variable color or we can use let for variable we just say color first we start from empty and we use a for loop again but this time the forward will be the the length will be the color code length so we just write color goal lens so we're going to loop through the color code lens so we're going to we're going to create each character one by one randomly and added to this color variable so first we create the random number so we we want to this is like a 10 okay 11 12 13 14 15 and 16 we have 16 characters so we want to create a number between 0 to 15. so in order to create it we just create the random number we just create a constant we call it random number and we use the math dot random method because we want it to be between [Music] 0 and 15 so we just can say multiply this one to these chars but the lengths of this chart so it's just a chars dot lens so now we are creating the random number but this is the number uh let's log it first so we see so what we are doing and we let's call this function as well so we just say random color we open the console as you can see we are creating a six random numbers but as you can see it had it's it's not a rounded one so we can use the floor method just a math dot floor to create these numbers like this now we have 0 8 0 14 4 13. so this one means zero means the first number is zero eight is one eight is uh zero one two three four five six seven 7 would be the number for the 8 and then we have 0 which is 0 14. so we want to add this random characters together to create this color code so let's change this to color code and here let's close this console log so we want to add this new number to this color so first the color is empty and then we want to add the new random characters which is the chars dot substring so you want to get the string inside it but which one we want to get the one that has the the the index of the random number and also the random number plus one what does this mean if this the random number is for example two so we have it here and then until the tree so it means from two to three we get the num number two let's uh log this character color sorry the color code we are getting the color code so let's uh console.log the color code and see it inside the console as you can see the colors code first it starts from empty and then it it became b b3 b3 2 and each time one new character added to this one and if we we check that which what is the random number so let's clean the console log and refresh the page you can see first we get the character 11 which is the letter b then we get the 14 which is the letter e then we get 0 which is 0 and then we have 11 which is the character b 6 is 6 and 14 is e so where each time we refresh the page we get the new new random color and also we want to create 30 of these random numbers and put it inside these boxes that we have created so instead of random calling it here we create another function which we really generate the colors and this function is going to loop through all these 30 boxes that we have created so we just here we just say color container element actually we don't have these 13 still now so we can get all of them we just create a constant and we say all the color containers we add seo so we are getting all of them we use document.queryselectorall to get all the containers with this class so we just copy this and put it here and let's delete this one first and we cancel log this we can see that we have we get a node with 30 elements which all the divs with the class of color container now we can loop through all of them using forage method which actually execute a function once for each element of this array so we just say color lm container we add the s to get all of them and then we just say four each and we get each of them first we create a function we trigger this function and we can get each element of this array here inside this parenthesis we just call this um we just say color container element without s and put it here so we are getting each element with this name and then we we we create a random color first by using this function so we should create a constant we call it random or we just call it new color code and we get it from this function random color so when we actually we are not returning anything so we have to instead of console logging we return the color code so we just say return color code so here if we cancel log the new color code we get we should get 30 uh first we should call this generate color colors function when we do it again color quotes is not defined in the line 27 yeah color code instead of color yeah as you can see oh we are returning each of them it this return should be outside this loop so we are returning the last color code so if we now refresh the page we should get 30 color codes like this and each time should be different we we clear the console we refresh the page and we each time we get a new color code all right now we get we are creating the color code here and we want to first we change the background color of these elements these boxes using the style method we just say color container element dot the style dot background color as you can see the javascript syntax and this one should be styled i don't know the joker's syntax for css is a little bit different from the css itself the background color here has a dash but inside the javascript it's in camel case mode so we don't have any dash they're connected and the second lit second board is capitalized so the background color should be this color new color code but the new color actually starts from the with the hashtag so we just add a hashtag at the beginning and we add this new color code all right so now we can see different colors in each box each time we refresh the page we see different background color for any of the boxes and also we want to get the text inside so here we just say color container element dot inner text we can with this font and with this matte uh method we can change the text inside an element so we add a hashtag again plus new color code now we are getting the codes inside as well now each time we get a different one let's check it inside the browser as well is as you can see each time we refresh we get the new colors and new color codes all right that was it for our project i hope you enjoyed and learned many things see you in the next project welcome back to another project in this project we are going to create a heart tray animation as you can see from the final version of the project when we move our mouse inside the browser we are creating some heart inside the browser with different colors and also different sizes in this project we are going to use the keyframe queries to create an animation that has some hue effect and also some changing inside the opacity and sizes of the heart and also we're going to use javascript to detect the position of the mouse inside the the browser the x and the y position and we're going to use this position to set the heart in exact position of the mouse so in the next section we are going to start with the html parts of this project so see in the next section all right welcome back let's start our project first we open the visual studio code here we close the get started tab and in the file menu we click on the open folder i would like to create a project in my desktop but you can create it anywhere you like in your computer so here we click on the desktop and we click on the new folder button to create a new folder rename the folder heart trail animation which is the name of our project sorry [Music] trail animation we press enter and we click here on the select folder to select the folder we close the get started tab again and here on the left we right click and we click on the new file we name the file index dot html and we press enter now we have our index.html file here on the right side but it is completely empty we can use an exclamation mark to create an html5 boilerplate so we write an exclamation mark and here we click on the first auto suggestion we can use all c to turn on the volt wrap so we can see all the codes clearly now we have the html5 bullet plate which has the doctype which tells the browser which version of html the page is written in and in our case as we are using html5 we just need to have html here then we have an html tag which covers the head tag and the body tags the length attribute inside the html opening tag sets the language of the page and in our case we set the language to be english by adjusting writing en here then we have the head tag the head tag has metadata tags and also the title tag the chart set attribute inside the first meta tag defines the html character encoding and utf-8 is recommended by html5 for web developers because it nearly contains all the characters and symbols then we have the con compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge then we have viewport meta tag which tells the browser on how to resize the page inside the viewport meta tag we have and we have the content at attribute which tells the browser sets the width of the page to devices the screen for example the mobile mobile screen will be smaller than a computer screen then we have the initial zoom level of the browser which is said to be 100 percent as a default then we have the title tag which sells sets the title of the page we can open the browser inside the visual studio code using the live preview extension we just need to right click here and we click on the live preview show preview now we can see the browser on the right side which is completely empty but with the title document let's close the explorer section by dragging the this line to the left so we have more space on the right side and let's change the title to the name of our project which is heart trail [Music] animation now we can see the heart rate animation on the tab and then we inside the body tag we just have a span that we're going to add a background color sorry the background image to this expand using css that was it for the html part of our project in the next section we're going to to use css to style and add the heart image to the background of this span and we're going to style it using css so see in the next section all right in the last section we have finished with the html part of our project in this section we're going to start styling our project using css first we need to create a css file here we we can use ctrl shift e to open the explorer section and in the explorer section we right click and we click on the new file we name the file style dot css and we press enter now we have our installer.css file here which is empty but we can't use it yet because we must add a link to this css file within the html code so we go back to the indexed html file and just after the title tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external stylesheet which is a style.css the href attribute defines the destination of the link and as both files i mean the index.html and install.css are located at the same directory we just need to have a stalled css for the url now we can use css in our project so we just save the file using ctrl s and we close this explorer section to have more space on the right side and the only things we need to do is to add some background image to this span tag and style it so we go to solid css and first we start from the body section and we remove the default margin of our project so we just remove the margin so we can install the components inside the body section easily and we set the height of the body to be 100 of the viewport height which means 100 percent of the screen size then we change the background color to be black so we have now a completely black website with nothing inside but we're going to add some background image to this spam tag inside the body section to have an image so inside the span we add a background we use the background property to add an background image so for the image or the icon we want to use the heart icon for using the for having icon in our browser we can use a website called icon finder so we go to the desktop and we click on the google chrome [Music] and here in the search bar we search icon finder [Music] and in the search result we can see a website with the url iconfinder.com we click on this website and we close this and here inside the tab section we search for heart [Music] and in the search result they have too many hearts different shapes but some of them are free and some of them are paid we just we can in inside this tab we can choose the free one so we can get all the free icons the icon i would like to choose is this one we just need to click on it and here on the picture we right click and we click on the copy image address and we go back to the visual studio code and here we add a url function and inside a double quote instead of double curve we paste the link we can't see the image yet because the span tag doesn't have any width or height so we change the width to 100 pixels and height to be 100 pixel as well then we position it to to the middle so we can see the icon so we position it absolute first so we can see it here a little bit and in order to put this image inside exactly that uh that place with the width and height of 100 pixels we can use background color sorry background size cover to increase the size of the image as large as possible to fill the container and we can see it now properly all right let's bring this heart to the center just for our styling and so we just say left fifty percent [Music] and top 50 this one actually brings the edge of the icon to the center from the top and the left in order to bring exactly the middle to the center we need to use a transform property and its translate function and we set the x and y to minus 50 percent [Music] now we have the heart exactly in the middle of our [Music] website that was it for the css part of our project in the next section we are going to use javascript to firstly detect the movement of the mouse inside the browser and we get the position of the mouse x and y and also we're going to create this heart in different size and different colors when we we are moving the mouse in the different area of the browser so see in the next section for the javascript part of our project all right in the last section we have finished styling our project using css in this section we're going to start adding functionality to our project using javascript first we need to create a javascript file so here we click and we use ctrl shift e to open the explorer section in the explorer section on the left side we right click and we click on the new file here we name the file index dot js and we press enter and before using javascript in our project as same as the css file we must add a link to the javascript file within the html code so we go back to index set html and just at the end of the body section we add a script tag we just write sc and we click on the second auto suggestion the one with the src the src attribute is similar to href attribute here and defines the destination of the link and as both file are located at the same directory we just need to write index.js for the url now we can use a javascript in our project so we close this explorer section and we go to index.js first things we need to bring to javascript is the body element and as the body element just is a tag with a class with no class or with no id we can use query selector method to return this element inside the javascript so we just write const to create a constant and we name the constant body element and we target the document and we use queryselector method to return the body and as it doesn't have any class or id we just need to have body here we can use alt c to turn on the word wrap so we can see the code completely on the in two lines so now we can add a add event listener method to this body section and attach an event handler to detect the must the mouse moving inside the browser so here we just write body element dot add event listener [Music] and the add event listener method has the first parameter inside the add event listener method is the event that is going to trigger a function so this event the event we want to use is mouse move which means when the mouse move we're going to trigger a function so let's test it we just say console.log and for example we just say moved or mouse move whatever we open the console section here it's clicking on open dev tools pane as you can see we clear the console by using this icon and when we go to the browser and move the mouse there we can see them we are seeing move many times because each pixel is going to be one [Music] trigger for the function so this is working we just need to get the x and y position of the mouse when we are moving it so we can get it using and we just get the event here and if we cancel log event dot for example offset x and we open the console and if we move we can see the position of the mouse and the x offset so when we go up to the left we see a smaller number but in the right side we see a bigger number and also if we we can get the y-axis as well so upper is lower and [Music] in the bottom we are getting the bigger number so we are getting the both numbers x and y offset so we just save them inside a constant and we just say x position equal to event dot offset x we copy this and we change this to y [Music] and next we want to create a span like this so we have a span here in the body but we are going to create exactly the same span using create element method [Music] and we just write a constant and we just say span element this is a new one so we just say each each time the mouse moves here just create a span and we just say dot create element and the element we want to create is a span [Music] so if we we cannot see it yet because we have to append this span inside the body section which is here so for the body element we append a child and the child we want to append is this a span element so when we go now inside this uh let's remove this inside this browser we can see this span inside the body section we have to open this inside a browser and we open the dev tools using ctrl shift c as you can see now we have we're having a lot of span inside the body as we are moving we are creating a span inside the body all right but we want to position this s-pen as well so we go back to visual studio code and before appending we position this span from the left and top by using this x and y position so we just say span dot style it because we are styling them because we are doing the same things inside the installed css we're positioning them left and top so we're actually styling them so we just say dot style dot left and we want it to be left x position and because this exposition is just a number we need to add pixels at the end so now we can see this one in the left when we are moving it moving our mouse there but let's add the top position as well we copy this and change this left to top and instead of y we add instead of x we add y so now we see the heart creating when we are moving and the reason you see double um heart is because we need to add something called uh pointer events we change the pointer events to none and we're going to fix this so now we're only creating the heart exactly on the mouse position but this is actually creating infinite number uh or thousands of millions of heart each time we are moving but we want to remove this heart after a few seconds and also we want to create an animation and bring this heart to up and also changed its color as well so we go back to installer css and we add an animation inside the span so for creating animation we need to use the keyframe query and we just name this animation animate and the keyframe queries has you can create different positions we just say zero percent set the transform translate x as the same as the the top minus fifty percent [Music] in the both side because zero percent we want to have the same things and the opacity to be 100 percent as well it means uh we don't have yeah opacity 100 means no opacity and then we're going to copy this and instead of zero we have hundred percent and instead of having five fifty percent top we just make this one a big big number for example five thousand to bring this heart the browser at the top and also change the opacity to zero so make it invisible over time so we add this animation here inside the span using animation property and the animation we want to use is animate which we have created here and the animation duration we choose 6 second and linear [Music] as you can see now the heart is going up and after a while we see too many hearts inside and gets a little bit messy so we can remove the heart after a few seconds we just use a set timeout method inside the javascript at the end to remove the span so we just say set timeout the sit timeout method actually sets a timer and trigger a function after the timer expires this we can set the timer here we just say for example three seconds and we want to remove this band element when we after three seconds we want to remove the span element so we create it here but after three seconds we remove it so it's not going to be messy like that and also we want to create different size of the heart instead of just having one heart so it's going to be a little bit more beautiful so for changing the size of the heart we can create a random number here for example we create a constant and we just say size [Music] and we use the math dot random function to create a random number and we use this random number to change the [Music] width and height of the s pen we will we set the height and width to be 100 100 pixels at the beginning but we can randomly change them here so we just say span element dot style because we want to style them and [Music] we've changed the width to be this size this random number is between zero and one so it's very small we want it to be between zero and hundred so we can add a hundred here so it's gonna be between this size is going to be between 0 and 100 and we just say something like above size plus pixel so we change the width and we can change the height as well by just copying the upper code and change the width to height now we are creating different size of a heart we can get rid of the middle heart which we have created by removing this span so we're just creating the heart by moving the the mouse and also another cool things we can do is to change the color of the heart by changing by using a function called hue rotate inside the filter property so we just need to go to install the css and inside the animation first we just set the filter you rotate to zero it means nothing and no change but after i until each it reaches to its hundred percent we want to change the hue rotate to for example 720 degree [Music] so now we can see that first the heart starts from the uh like a red color and it changes goes to green and finally blue and red we can test as you can see when we go to the right and the top we can see a scroll bar [Music] we can remove the scroll bar by using just uh [Music] overflow hidden inside the body section so we we're not getting so we can hide the scroll bar easily by just using overflow hidden so let's see this inside our browser as you can see the spans are creating inside the body section and they are removing just by using the set timeout method it's created after three seconds we don't have any spam this concept is can be used for creating very cool animations and also some like a congratulation or some uh things in your website that you want some beautiful things comes from the top or bottom so i hope you enjoyed this project and i learned many things i'll see you in the next project welcome back to another project in this project we are going to create a movie trailer pop-up as you can see from the final version of the project we have an image here with a movie title and some lauren ipsum text then we have a button so when we click on the button we can see a video pops up and we can play the movie and we can fully screen the video and also we can change the playback speed and we can download it and also we can watch it in a smaller screen and also we have a button here for closing the video and just pay attention the video is in the 15 second when we close it and we open the pop-up video again by pressing the watch now button we can see that the video is reset to be in the zero second and we can play it from the beginning we're going to use javascript to add these functionalities like resetting the videos and also adding and removing this popup window when we click on this button and we can close it using this button using javascript and also we're going to use the video tag of the html to create this video player and we're going to style it using css so see in the next section for the html part of our project all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on the open folder i would like to create a project in my desktop but you can create it anywhere you like in your computer so here we click on the desktop and here we click on the new folder button to create a new folder rename the folder for example video [Music] trailer pop-up [Music] and we press enter and here we click on the select folder button to select the folder we close the get started tab again and now we can create our html file so here on the left side in the explorer section we right click and we click on the new file rename the file index dot html and we press enter now we have an html file on the right side which is completely empty but we can use an exclamation mark to have an html5 boilerplate in the html5 boilerplate the doctype tells the browser on a which version of html the page is written in and for html5 we just need to have html here then we have an html tag which covers the head tag and the body tag the lend attribute inside the html opening tag sets the language of the page and in our case we set the language to be english in the head section we have three meta tags and also a title tag the chart set attribute inside the first meta tag defines the html character encoding which is said to be utf-8 which is recommended by html5 for web developers because it nearly contains all the characters or symbols next we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag tells the browser on how to resize the paste page we can use alt c to turn on the word wrap to see all the quotes and here inside the content attribute we set the width of the page to be the same as the devices the screen with which means for example for the mobile screen we have a smaller width than a computer screen then we have the initial zoom level of the browser which is said to be 100 this met this tag sets the title of the page in order to see the browser inside the visual studio code we can use the live preview extension that we have installed so we right click and we click on the live preview show preview now we have the browser on the right side which is completely empty but with the title document let's close this explorer section by dragging this line to the left to so we have more space on the right side in our browser and also the coding editor so let's change the title to be the same as the name of our project which is video trailer [Music] pop-up [Music] and inside the body section we create a div with a class of top container or the main container which is the main section for our website including the title the image and also the paragraph of the movie so we create this step with the class of main container and inside this div we add an image tag which is img and in the source we we just get an image from a website for example we get from the pixels.com so we go to the desktop and here we click on the google chrome here we search for pixels and in the search results we c we click on pixels.com [Music] in the search result we just search for movie and we just choose a picture for example this one and we right click on the image and we click on the copy image address we go back to the visual studio code and here in the src attribute which is the destination of the link we paste the link we can see the image now inside our browser which is huge but later using css we're going to style this image in the alt we just say movie [Music] image all right after the image we have the name of the our movie we can use a h2 tag we just say movie title as an example you can see it here then we have a paragraph which is we just can use lauren ipsum to create some random words we just say learn and we press enter so we have a kind of paragraph of the lorem ipsum texas then we have an anchor tag or a button we can create a button [Music] with a class of ptn and inside the button we just say [Music] watch now so for the trailer and we can press enter to accept the auto suggestion to have the button with the class of btn and the text of watch now okay that was it for the main container div i think uh yeah we should put this button h2 and the paragraph inside this div not the outside so we just cut this and put it inside the stiff right that is correct now and outside this div we can we can have our pop-up video window so we created there with a class of trailer [Music] container [Music] and inside this tip we just add a video tag and inside src we can just find an a video from the from the pixels.com website we just here we are inside the photo section we can click on the videos and we just choose our video and anything is fine we just click on any videos and yeah that's a video we just download it with the original or any quality you want we can just uh full hd is fine it's just free use free download to download it and in the download section of the google chrome we we just drag this file and bring it inside the folder that we have created for our project and we go inside the folder and we change the name of this file to just trailer we go back to the visual studio code and inside the source we just say trailer dot mp four as a index.html and the file are located at the same directory we just need to have trailer dot mp4 for the src of the video tag we can see the video here but it doesn't have any controller like a play or pause button so here we just add the controls attribute so now we have the controller we can play the movie we can pause it we can just change we download it put it in a picture in picture mode but the size is big but we're going to use css to style this video or other parts of our project later another things we're going to have is a close button for closing the video pop-up section so here we just we go back to the browser and in the new tab we search for font awesome to bring the icon so we here in the search results font awesome.com we click on icons in this in the search bar we search for [Music] times [Music] and in the first result we have the closing closing icon so we click on it and here we see the html tag of this icon which is an i tag with the class of fas fa types we click to copy the html tag and we go back to the visual studio code and we paste it here we can't see it yet because we must add a link to the font awesome cdn within the html code so we go back to the browser and inside a new tab we search for cdnjs in the search result we click on cdnjs.com and here in the search bar we search for font awesome [Music] we click here on font awesome and we scroll down a little bit and in the first results we click on this icon to copy the link tag we go back to the visual studio code and just under the title tag we paste the link using ctrl v if we scroll down we can see the letter icon here we can increase the size of this icon by just adding fa dash for example 2x we can double the size of the icon yeah that was it for the html part of our projects in the next section we're going to style our project using css so see in the next section all right in the last section we have finished with the html part of our project in this section we are going to start styling our project using css first we need to create a css file so on the left side in the explorer section we right click and we click on the new file we name the file style dot css and we press enter now we have the installer css file on the right side but before using css we must add a link to the css file within the html code so we go back to the index.html and just under the font awesome tag and at the end of the head tag we add a link tag and we press and we select the s third auto suggestion the one with this css now we have a link tag with the relationship between the html file and the external style sheet the edge reference attribute here defines the destination of the link and as both files i mean the index.html and install the css are located at the same directory we just need to have install.css for the url now we can start styling our project using css we just saved the file using ctrl s we close this explorer section [Music] by dragging this line to the left to have more space on the right side and we go to installer css and we start starting from the body section [Music] first we remove the the merging around the body element using margin 0 and we can use box sizing [Music] border box to easily install the containers inside our project and we change the f font family to for example send serve and then we want to position everything to the center so we have to change the width to be 100 or we just change first we change the display to flex and then we use justify content center to bring the items to the center horizontally and we set the height of the body to be 100 of the viewport height and we use a line item center to bring the items to the center vertically and we change the background color to be black we can't see the changes yet but we're going to decrease the size of the image so we can see everything better so for the main container that we have here that covers the image the h2 and the paragraph and button this one so here we just write main container [Music] we set the max width to be 550 pixels and we change the image size we just say main container img which is the first image we change the max width to be a hundred percent we can't see it yet because it's under the video tag and we change the margin button [Music] to be 15 pixels all right so let's remove this video section so we can see our everything else first we just this change the display of the trailer container to none [Music] otherwise we don't know what we are doing here display none are we going to change it later so now we set the image to be 100 of the max width and the the width was 550 pixels you can see here and then we cannot see the title and the texas yet because the the color is black and the background color is black as well so here we target the main container h2 and we change the color to white firstly and we change the font weight to be 500 which is a thinner font and we change the font size to change the size of this and make it double by using two em or instead of this we can just use a h1 tag so we change this h2 to h1 and we change this one to h1 so the size would be enough all right let's style the paragraph so we just say main container paragraph first we change the color to white so we can see it properly and we just add some margin to it margin 15 pixels we just add margin for 15 pixels and yeah just 15 pixels for left top and bottom and zero for left and right you can see that's responsive to and then if we add some padding to the main container probably we don't have any problem for the we just say 5 pixels i want to yeah maybe 10 pixels so we have some space around these elements when even we have a smaller screen so this is completely responsive now and after this paragraph let's install the button so here we just say the main the button has the class of ptn so we just remove we change the background color to white we remove the border using border none we add some padding we add 10 pixels open down or top and bottom and 20 pixels left and right and change the cursor to be pointer so we see a pointing hand when we hover over the element and i think everything looks fine you just add some border radius 5 pixels yeah everything looks okay we let's check this one in the real browser like chrome so we open it inside the browser we close this yeah as you can see now we have a like this website and in this smaller screen looks okay too let's add some border radius to the image as well so we go back to the visual studio code and the image section we just add a border radius 10 pixels all right looks okay now let's add some hovering effect when we hover over the btn so we just say btn hover and we change the background color to [Music] for example orange like this all right so next we're going to like a style the video section so we remove this display none so we can see the video but we're going to style them first so for the trailer container we position it fixed so we can bring it in the center we by using top fifty percent left fifty percent and we use transform translate to because this is in the center but the edge of the video is in the center so in order to bring it exactly in the center we can add minus 50 for translate x and y all right and let's change the background color to be black for the video container we change the width to be hundred percent the height should be 100 percent as well and we bring the video to the center using display flex justify content center and align item center all right so for the video inside we just trailer container and we target the video tag so now if we check we have a div with the class of trailer container and inside the div we have a video uh video tag so now we're target targeting the video so here we position this as a relative and we change the max width to be 900 pixels so we have a smaller and we remove the outline to by using offline nine none inside the browser now we can see the image but it's in the left side now so we can position it first so we already position it using this trailer container let's i i i made a mistake here the left is 15 it should be 50 sorry about that so now we have the video exactly in the center that was a little bit confusing for me so here now we have the video at the center we can play it we can pause it but we want this video to be smaller when we have a smaller screen [Music] so we can use media query to set this so we just say media query and we say if the max width [Music] is for example 991 pixels we set the trailer container video to the we change the max width to 90 [Music] so as you can see now the if we have a smaller screen we have a video like this let's test it here as well see in the big screen we have only this size but in the smaller screen we have the 90 of the width so that was it for the video part let's install this close button that we have brought this one so let's uh now we have this close button has the has a unique class but we can add another class we just say close icon and we can install it using this we just say close [Music] sorry close icon we position it [Music] absolutely and we just say top 30 pixels and right [Music] 30 pixels we can't see it because the color is white so we change the color the color is black we change the color to white so now we can see the button on the right side let's make it a little bit like a thinner or [Music] that's fine we here is the size is okay yeah yeah that's that's fine for the we change the cursor to be pointer so we have a pointing hand when we hover over it so i think that was it for the css part we just need to remove this pop-up video when we have a class of active inside the [Music] inside this here inside the div with the main container if not sorry here inside the trailer container if we have the class of active we want to remove this pop-up video so here the trailer container we just say if we have the class of active [Music] we want to change the visibility to hidden so now when we add this class we don't see the pop-up window and if we remove it we see the pop-up vendor so in the next section we're going to use javascript to add and remove this active class when we click on this button and also we remove it using the closing button that we have here all right so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project in this section we are going to add functionality to our project using javascript first we need to create a javascript file so here we open the explorer section using ctrl shift e and on the left side in the explorer section we right click and we click on the new file rename the file index dot js and we press enter before using javascript in our project we must add a link to the javascript file within the html code so we switch to index.html file and just at the end of the body tag we add a script tag we just write sc and we click on the second auto suggestion the one with the src as both files are located at the same directory i mean the index.html and index.js we just need to write index.js for the url of the javascript file so we can close the explore section now we don't need it so we have more space on the right side and the elements we need to bring and return to the javascript is this button and also the closing button and this trailer container dip to add and remove the active class so three things we need we create a constant and first we bring the button we just say btn element and inside the document we use query selector method to return the element with the class of btn so here we can use alt c to turn on the word wrap so we can see the codes clearly and after this [Music] we bring the closing button so we just say close icon element say document.queryselector and the element had the class of we had the this class here close icon we copy this and we paste it after the dot the next element we need to return is this trailer container because we want to add and remove the class of active to this class so we just say const trailer [Music] container element and inside the document we used query selector method and the class name is trailer container all right we have everything now inside the javascript we first we added add event listener method to this button so when we click it we can trigger a function so we just write btn element dot add event listener the first parameter is the event handler the event is click because we want to track the click and when the track click event happens we want to trigger a function and what we want to do is to remove the class of active when we click on this button from this trailer container element this element here so we just say trailer container element dot class list and we remove the class of active [Music] so when we click here now we see the video pop-up now we wanna add the event listener to this closing button so when we click on this button we're gonna add the class of active so we just say close icon element dot add event listener the event is click and the trigger function [Music] and inside the trailer container element we want to add the class of active [Music] like this i want to add some like a transition to this pop-up because it's coming very suddenly so for the trailer container we add the app we add the opacity [Music] opacity one and when the it has the class of active we want this opacity to be zero but we want to add the transition here so we just say transition on [Music] opacity [Music] and we just say 0.4 seconds now we see a transition when we are doing it just make it a little bit more maybe seven all right now when we click on this play button after a few seconds if we close the button and we open it we still see that the video is playing even we are not seeing the video so we can fix this one by adding by just after closing the button we want to stop the video so we need to bring the this video tag inside the javascript so here we just say const video element and we use the query selector method and we target the video tag and here we just say video element first we pause it we check this so we're playing it when we click on this the video should be paused we can see and then we we want to set the current time of the video to zero so when we play it for example now the seconds is five six then we close it and we open again the video time is zero and it's already passed so we have to play again so each time someone click on watch now watch now sees the video from the beginning let's test it inside the browser we can see in the full size we have a bigger screen you can play it and we close the video we play we see that this is reset already as you can see we can use the change the volume we can fully screen the video and the other features is you can change the playback speed like a increase it or decrease it as well yeah that was it for the our project i hope you enjoyed and may learn many things so see you in the next project welcome back to another project in this project we are going to create a blurred background pop-up as you can see from the final version of the project we have our main website which is very simple it has a background image with a title and also a call to action button which means saying click to join when we click on this button the pop-up window appears from the top with the transition and also we have a blurred background in the back the pop-up window has an input for email and also a join button and also a close icon at the top right when we click on the close icon the pop-up window disappears and also our main website returns to normal and without any filter or blurness we can try it again in the next section we're going to start with the html part of our project so see you in the next section all right let's start our project first we open the visual studio code [Music] here we close the get started tab in the file menu we click on the open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so here we click on the desktop and we create a new folder by clicking on this a new folder button we name the file rename the folder blurred background [Music] pop-up [Music] which is the name of our project we press enter and here we click on the select folder button we close the get started tab again and here on the left side in the explorer section we create an html file so we right click here and we click on the new file we name the file index dot html and we press enter here on the right side we have our index.html file which is completely empty but we can use an exclamation mark to create an html5 boilerplate so we write an exclamation point and we play and we choose the first author suggestion or we can press tab now we have our boilerplate and the first line in the boilerplate is the type is the doc type which tells the browser which version of html the page is written in and for html5 we just need to have here html then we have the html tag which is the top level element in the html file and it has head and the body tags inside it then we have the length attribute inside the opening html tag which sets the language of the page and as we are using english in our website we just need to have en for the length then we have the head tag which has the meta tags and also the title tag the chart set attribute inside the first meta tag defines the html character encoding [Music] and h and utf-8 is recommended by the html5 for web developers because it mostly contains all the characters and symbols so the users won't have any problem reading our website then we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the view port meta tag tells the browser onto how to resize the page let's use alt c to turn on the word wrap so we can see all the codes and in the content attribute we have two sections first we set the width of the page to devices it screens with for example for mobile mobile screen we have a smaller width than in the computer screen then we have the initial zoom level of the browser which is in our case is 100 percent the title tag sets the title of the page and we can see it in the tabs section of the browser in order to see the browser here inside the visual studio code we can use the live preview extension so we just need to right click and we click on live preview show preview now on the right side we can see our browser which is completely empty but with the title document we can change the title here and we set it to be the same as the name of our project which is blurred [Music] background background pop-up [Music] all right we can see the new title inside the tab of the browser let's close this explorer section by dragging this slide to the left so we have more space on the right side for the html file and also the browser then in the body section we have to [Music] two div with the class of container and also the class of pop-up container so we have two sections the container that covers the title of the our website and also a button which is a callback call for action button and we we just write click to join in it then we have a our pop-up container that has the offer and input for the email and also we have a button for the joining inside the pop-up container so we have two containers the first container has the class of container or we can say main container or just we leave it as a container then inside this container we have a an h1 tag which is the title of our page we just say welcome [Music] to our website [Music] after the tag we have a button which is a call for action button for joining to our website so we add a button here with a class of btn and inside this button we just write click [Music] to join we can see the button and the title in inside the browser and after this container which is the main section of our website we have another container for our pop-up window so here we click we create a div with a class of pop-up container [Music] and inside this div with the class of pop-up container we have a h4 tag saying for example 20 of offer then we have a label an input and button so first we add the h4 tag saying 20 off offer [Music] then we have a label for our input just saying your email we just say label for our email and the label is just your email for the label we have an input [Music] and the input has the class of input as well so we just say input and also the type of the input is email because we are using it for users to enter their email so we just added clone and [Music] we just write down email and we add a class by adding dots and the classes input as well [Music] all right we just press enter to accept the auto suggestion so now we have an input we have an input with the type of email the name is email as well the same as the label and we don't need any id [Music] and we can see it here the input we just need a placeholder so it's just a text inside the input and the place of a placeholder just saying enter your email [Music] all right after this this label and input we have a button with a class of pop-up btn just saying join we just say button with a class of popup [Music] btn and inside the button we have the text just saying join we press enter to accept the auto suggestion now we have the button with the class of popup btn and the text of join we can see here all right the other things uh i would like to have inside the pop-up button is a closing icon so to close the pop-up window in order to have this icon which is a times icon we can use font awesome in our project so we go to desktop and we click on the google chrome here inside the search bar we search for font awesome [Music] in the search results we have font awesome.com and we have some some sub sections and we click on the icons here we wait for the website to be loaded and we can see that we have a lot of icons here 7864 awesome icons and we can search for the times icon the icon i would like to use is this icon we click on this icon and wait for the page to be loaded and here we can copy the html tag which is an i tag with the class of fas and f8 times so we click here to copy the html tag and we go back to visual studio code and inside this div with the class of pop-up container under this button we create another div with the class of just say close icon and inside this step we paste the link that we have just copied [Music] all right still we cannot see the icon in our browser because we must add a link to the cdn of the font awesome website within the html code so we go back to the browser and we open a new tab and here in the search bar we search for cdn [Music] js [Music] cdngs is a website that provides the cdn for popular popular frameworks and also the website like fault awesome jquery crown carousels and search you can search for all the libraries here first we click on the cdnjs.com here and in the search bar we search for font awesome in the search result we click on the first one font awesome with the version of 5.15 and we scroll down a little bit and here we click on this icon to copy the link tag we go back to the visual studio code and just under the title tag we paste the link as soon as we paste the link we get the times icon inside our browser i would like to have a bigger icon so in order to just make the size double we can just add a class of fa three x a three x for three times we can just say two x for two times for the icon and you can see the instruction inside the font awesome as well here for different sizes you have to write 3x 2x 5x until 9x all right that was it for the html part of our project in the next section we are going to style our project using css so see you in the next section all right in the last section we have finished with the html part of our project in this section we're going to start styling our project using css first we need to create a css file we can open the explorer section using ctrl shift b or we can go to the view menu and click on the explorer and on the left side in the explorer section we can right click and we click on the new file we name the file style dot css and we press enter before using css in our project we must add a link to the css file within the html code so we go back to the index.html file and just under this link tag related to the font awesome and at the end of the hit tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we can use css in our project we save the file using ctrl s we close this explorer section by dragging this line to the left so we can have more space on the right side then we go to installer css and we start from body section we just write body we open a set of curly braces and the only things we need to do in the body section is just to remove the default margin from the from the body i mean the space around the body element so we just write margin zero now we don't have any space around the container the main container which is here div with a class of container that covers the h1 and the button so now we're going to start styling this div with the class of container because it's a class we need to add dots at the beginning of the name of the container so we just write dot container [Music] we open a set of curly braces and first we need to bring the items to the center horizontally and vertically for bring the items to the center horizontally we just need to change the display to flex as you can see the button came next to the h1 tag in order to prevent this [Music] we just need to change the flex direction to column the default flex direction is row so you can see the both items next to each other but when you change it to column they come right after each other and also um the the first item on the top of the second item now we can use justify uh sorry align item center to bring the items to the center horizontally like this after this we can set the height of the this place the main container to the height of the screen by setting the height to be 100 percent of the viewport height so as you can see the the pop-up section went down after the hundred percent of the viewport height now we can use justify content center to bring the items to the center vertically now we have our everything uh centrally located the next things we can do is to add the background image to the container i would like to use the website unsplash.com to get the background image for our website but you can get it from anywhere you like from the internet so we go to browser the google chrome we open a new tab and here in the search bar we search for unsplash [Music] in the search results we click on the unsplash.com here in the search bar we search for for example computer [Music] i just assume that our website is a tech website i would like to use this picture so we click on it and we right click and we get the url using this icon the this car copy image address so because we click on copy image address and we go back to the visual studio code and here we create a background property we use url function to add the url of the picture from this black onsplash.com website so we paste the url here as soon as we paste it we can see the picture behind our website let's use altc to turn on the word wrap so we can see all the code inside this container and we cannot see the picture properly we can change that we can change the background size to cover to large the picture as as much as possible to cover all the container okay i think that was it for the container section and we just need to style the head one and the button at the bottom of this alright so here we target the h1 tag [Music] which is this welcome to our website the things i would like to do is to first increase the size change the color to white and also change the font family and add some text shadow so first we change the font size to be for example 60 pixels [Music] then we can change the color to whites [Music] for bringing this text to the center we can add text align center to the container [Music] to bring the inline content to the center as well so now we have the color white we change the font family to be impact and then we increase the space between the letters of the words using letter spacing [Music] properties you just say little spacing and just had four pixels so we increase the space between the two letters then we add a text shadow to the text text shadow property has the first value in the text shadow property is the position of the horizontal shadow we set it to be two pixels [Music] the next one is the position of the vertical shadow we set it to be two pixels as well we can see the shadow let's add some blur the third value is the blur so we add 4 pixels blur and we don't want the shadow to be white we want it to be black so we just change the rgba we use rgba function to set the color rgba stands for red green blue and alpha we set zero for red 0 for green and 0 for blue which gives us the black color and for alpha we set 0.3 which means 30 percent transparency or opacity all right that was it for the h1 let's the next things we would like to style is this button which has the class of btn here so we target this button just say dot btn we just change the padding width we add some margin and also background color to be red and we add some border radius as well so first we start with the padding we just say padding 10 pixels for the top and bottom padding and 20 pixels for the left left and right we set the width to be 200 pixels so we have a bigger button and then we change the cursor to be pointer so when we hover over the button we can see a pointing hand then we change the background color back around color to be orange red this color and we remove the border as you can see here let's just say border none for removing the border and we change the border radius to add a rounded border to the button we just set it to be 5 pixels and after that we change the font size to be 20 pixels [Music] all right we just need to add some hovering effect when we hover over the buttons so we can add that one using btn hovers css sudo class and we set it receive and filter and we use brightness function to change the brightness when we hover over the button you can see now we can open the website inside the browser we check it in the bigger size here we can see now the button is beautiful and also our website is fine the next things we need to do is just install this section the a pop-up section we don't want it to be at the bottom we just wanted to have a fix position at the middle and also we want to add some background color white and the other stuff first let's add some class to the this container that we have here we call it active and we say if this active class exists we want this background color the background image or everything here to be blurred and has some brightness so we just say active [Music] just say if the active access and inside the container so we want to change the filter to be we add some blurriness so we just say blur we add 5 pixel blur and also we want to we want it to be a little bit dark so we change the brightness to be seventy percent we can see it now if we add the pop-up at the top we can see the pop-up better so before uh before styling the pop-up i would i wanted to change this container to see the pop-up better so now we start with the pop-up container here this class with the class this div with the class of popup container so here we just write dot pop up container [Music] and we set the position to be fixed first now we can't we can't see it anymore because it doesn't have any positioning we can bring it from the left 50 percent and else actually because it doesn't have any width we cannot see it so we just set the width to be 400 pixels and height to be 200 pixels so from the left 50 and from the top [Music] 30 now we can see it inside uh our main container let's bring it exactly in the middle because this left 50 bring the edge of this container to the middle we want we can use form translate x minus 50 to bring it exactly in the middle so let's add some background color background color white and we can see it better but actually we want to add an image behind it finally so but first let's install everything we just use display flex let's do it here under this we just say display flex [Music] we bring everything next to each other but we can change the flex direction column and now everything is on top of each other let's add some padding for example 20 pixels so everything came inside a little bit and after the padding we can because we want to add the background image so let's add find an image for this one as well we go back to the browser and inside the unsplash website let's exclude down a little bit more and we can choose well let's choose this image that's for for an example you can choose any background image you like so you can click on copy image address and we go back to the vs code and we change the background and we change the url function and inside a double quote we paste it an image but as the same as the one we did for the previous div we need to change the background size to cover to see the image completely all right so everything is fine but we we need to install this h4 distance later but for this uh this pop-up container we just add some border radius to have it to be rounded at the corners 10 pixels for example and we add some box shadow the first value in the box shadow is the position of the horizontal shadow we set it to be zero the vertical shadow to be four pixels and eight pixels for the blur and we add the rgba black color with the thirty percent transparency all right if everything looks fine we just need to a little bit style these items so we go for styling the h4 so we just write h4 we change the font size to be 30 pixels [Music] we we add some margin we just say top and bottom to be 10 pixels left and right to be zero then let's change the font family to be sans serif and then we change the color to be blue blue violet just an example but you can choose any color you like let's style this label here as well we just say label or we the color is the same as above blue eyelet and the font family as well just say censure and let's install the the this button first the buttons class here is popup btn so we just say btn pop-up pop-up dash btn [Music] it's similar to the one we did for the previous one we just need to change the background color to be orange red we add some cursor to the pointer and padding and font size so we just change the background color [Music] to be orange red we add some padding 10 pixels [Music] we can see the space around that we change the font size to be 20 pixels and also we change the cursor to be pointed so we when we hover over the button we can see a pointing head for this button particular pattern i want to add a border two pixels border and solid [Music] all right next we we're going to style the inputs at the top so the input had the class of input as well so which you can just say input [Music] and we let's add some border for this as well border 2 pixels and solid [Music] we change the padding to be 10 pixels [Music] and we want some space between the input and the buttons so we write margin 10 pixels and 0 for the left and right the other the last things we we can do is just change the font size and also bring this to the middle so we just say font size 20 pixel and text align [Music] center so i would like to change this color the color of this enter your email to be a little bit lighter so we can achieve this one by using the placeholder sudo element we change the color to be light gray [Music] all right the the last thing i would like to do to bring this uh times icon to the right uh right top of this pop-up container [Music] so we target this icon and the icon has the class of closed icon so here we just write close icon we open a set of curly braces and first we set the position to be absolute [Music] so it went up but we wanted to be at the right 20 pixels that looks fine the the other things i would like to do is just change the cursor to the pointer [Music] so when we hover over this icon we see a pointing hand and when we hover it over it we want to change the color of it to be red as well so we just say close icon we use the hover sudo class and we change the color to be same orange red would be fine all right so the next things we need to do is just add the active as here as well to this div with the class of pop-up container but the things we do here uh instead of blurring we want to remove this so we just say if the active class exists the dot active inside the pop pop-up container we want the change the visibility [Music] to hidden so you cannot see it as well all right that was it for the css part of our project we added two class active the second active uh removes the pop-up window the first active we added in the first div actually blurred the background image in the next section we are going to use javascript to add and remove this active class when someone click on this button and also click on the close icon inside the pop-up pop-up window so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project we have added a class of active to each container the pop-up container also the background container the the main website so by adding the active container in the main container they have blurred the container and also by removing the active class we can see the pop-up container again inside our website so we bring back this active class as a default we don't want to see the pop-up container and as a default we want to see our website clearly now in this section we're going to start using javascript to add and remove this active class from our html divs so first we need to create a javascript file so we can open the explorer section using contour shift e and on the left side in the explorer section we right click and we click on the new file rename the file index dot js before using javascript in our project we need to add a link to the javascript file within the html code so we switch to the index.html file and at the end of the body section we add a script tag we just write sc and we click on the second auto suggestion the one with the src the src attribute defines the destination of the link and as both files i mean the index.html and [Music] index.js are located at the same directory we just need to write index.js for the url all right now we can use the javascript in our project we close this explorer section by dragging this line to the left so we have more space on the right side and we go save the installer css file using ctrl s and we finally we go to index.js to start adding functionality to our project first we need to bring some elements inside the javascript the element we need is this icon here because we want to track the click on this button another element is the container here because we want to add the class active and remove the class active from this container the next thing is the container of the pop-up window and also we need to target the close button the times icon inside the pop-up window so we in order to return the a class a div with a class we can use queryselector method inside the javascript so we go to index.js and we create a constant first we want to bring the container the main container here we just say the name container element we use the document.queryselector method to [Music] return an element with a with a class attribute so the class was container [Music] we can use alt c to turn on the word draft so we can see this code completely the next things we want to bring is the this button the button has the class of btn so we just say btn element equal to document dot query selector and the class name was btn [Music] after that we want to bring the popup window container the popup window has the class of pop-up container so we just write const pop up [Music] container [Music] element equal to document dot query selector and the class name was popup dash container [Music] alright next is the this icon with the class of close icon so we just say cast close icon element document dot query selector and the name was close [Music] dash icon [Music] now we have everything we just need to add add event listener to this button to we bring the pop-up window and also we blur the background image so we just uh this button was btn element we brought it and we just added add event listener method the first parameter inside the ad event listener method is the event we want to handle and the event we want to use is click and then the second parameter is a function to be triggered when the event happens so we want to add the class of active to the container so we add the classlist property and add methods so we just say active [Music] so we've tested now when we press the active button active class added to the background image and also we want to remove the active class from the pop-up container so there we can see the pop-up window so for the pop-up container element we use the class list property and remove method and we remove the class of active [Music] so we test it now we can see it's working then we want to add add event listener method to this icon here so we just say close icon element dot add event listener method [Music] and the event we want to add is click and we want to trigger a function and also when we click on that one we want to do the reverse remove the active icon active class from the container and add it to this one so we just copy this and we just remove this section and add this one [Music] we test it when we click on this first button we add the class of active to the container and remove the class of active from the pop-up container and we click on this one we remove declare a class of active from the container so and then we add the class of active to the pop-up container we want this happen with the transition not suddenly so we go back to the installer css and for the when we have active pop-up we want the opacity to be a hundred percent we just say one and when we don't have it and also we want the top to be uh 10 pixel 10 instead of 30 percent that we added at the top pop-up yeah pop-up container we add the top 30 and here the visibility was we change yeah we change the opacity here to zero and we add a transition to everything just point or 0.7 seconds now we can see actually yeah we did the opposite we should be the opacity here should be one and when we have it the opacity should be zero now we can see it correctly so the the pop-up window is coming from the top to the bottom with the opacity 0 to 1 and when we remove it it goes up we and the opacity goes to 100 percent all right and also the blur we want we don't want this blur to happen suddenly so for the container main container we just add a transition on the [Music] on the filter [Music] and we want this to be 0.7 seconds as well so when we do this we see a transition on the this browser has a little bit of the like a problem you can test it inside the main browser you can see now here is more smooth actually adding transition actually a little bit consumed cpu for the user so without having transition your website's going to work better for the for the user all right that was it for the our project i hope you enjoyed and learned many things so see you in the next project welcome back to another project in this project we are going to create a blurred background pop-up as you can see from the final version of the project we have our main website which is very simple it has a background image with a title and also a call to action button which means saying click to join when we click on this button the pop-up window appears from the top with the transition and also we have a blurred background in the back the pop-up window has an input for email and also a join button and also a close icon at the top right when we click on the close icon the pop-up window disappears and also our main website returns to normal and without any filter or blurriness we can try it again in the next section we're going to start with the html part of our project so see you in the next section all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on the open folder i would like to create the project as usual in my desktop but you can create it anywhere you like in your computer so we click here on the desktop and we click in here and on the new folder button to create a new folder we name the folder for example background [Music] image scroll effect which is the name of our project we press enter and here we close we click on the select folder button to select the folder we close the get started tab again and on the left side in the explorer section we right click and we click on the new file to create an html file we name the file index dot html and we press enter now on the right side we have our index.html file which is completely empty but we can use an exclamation point to create an html5 boilerplate so we write an exclamation point and we click on the first auto suggestion now we have our html5 polar plate and the first line is doctype which tells the browser what version of html the page is written in and in our case as we are using html5 we just need to have html here then the html tag which is the top level element inside the html5 and we inside that tag we have head and body tags the length attribute inside the html opening tag sets the language of the page and as we are using english we just need to have en here the hit tag includes the metadata tags and also the title tag the chart set attribute inside the meta tag the first meta tag sets the html character encoding which is utf-8 and utf-8 is recommended by html5 because it nearly contains all the characters and symbol that may user see in our project then we have the compatibility meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag tells the browser on how to resize the page let's use altc to turn on the word wrap so we can see all the codes the content attribute here inside the viewport meta tag sets the page's width to devices the screens with and also sets the initial zoom level of the browser to be 100 then we have the title tag which sets the title of the page in order to see the browser inside the visual studio code we can use the live preview extension we just need to right click here and we click on the live preview show preview now we have the browser on the right side which is completely empty but with the title document let's close this explorer section by dragging this line to the left side and we have now more space on the right side let's change this title to our project's name which is background image scroll effect [Music] you can see the background image scholar effect in the tab of the browser as the title and inside the body section we create a div with a class of background image we just write bg image and we added id of bg image as well background image [Music] this is just an empty div that we're going to use later css to change the background image of this empty dev but for now we just leave it like this and then we we have the main container that our websites can text and titles goes there so we just write down dot container and inside this container we have it h1 tag we just say welcome to our website [Music] after this h1 tag we're going to have a paragraph that inside it we have just some lauren pick some texts and we're just going to copy this paragraph a few times to have more text so when we are scrolling we can see the scroll effect this is just a simple website that we're going to use this is not important the important part is this background image that we're going to add the zoom and opacity effect using javascript to it in the next section we're going to start styling our project and add the background image using css so see you in the next section all right in the last section we have finished with the html part of our project in this section we're going to start installing our project using css first we create a css file here we open the explorer section using ctrl shift p and on the left side in the explorer section we right click and we click on the new file we name the file style dot css before using css in our project we must add a link to the css file within the html code so we switch to index.html and just after the title tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external excel sheet and the href attribute here defines the destination of the link and as both files are located at the same directory we just need to have started css for the href or the url now we can use css in our project we save this file using contour s we close this explorer section by dragging this line to the left to have more space on the right side and we go to start at css and we start from styling the body section of the project so we just write body and we open a set of curly braces first we remove the default margin space around the body section and we just write margin 0 and we change the font family to [Music] send serve that was it for the body section next we are going to style the background image div the mtdf we're going to add some image to it so we just target it by dot dg image [Music] first we set the height and width we just say hit with 100 percent and height 100 of the viewport height which means 100 of the screen size you can see now that they're at the top it's completely empty but we added background image to it in order to have the background image i would like to use the website called unsplash so we go to desktop we click on google chrome and here in this search bar we search unsplash in the search result in the first one we have onsplash.com we click on the unsplash beautiful free images and pictures and in the search bar we search for for example nature [Music] all right and here we can choose one of them i just choose this image of ocean so we right click here and we click on copy image address and we go back to visual studio code and here we add a background property and we use url function to add the external image so we add a double quote here and we paste the link now we can see the image on the right side but we want this image to be fixed at the top and when we are going down yeah that's fine for now and then later using uh let's first change the background position to be center so we see the center of the image and we change the background [Music] attachment to fixed so as you can see the background became fixed and when you're moving down uh they don't move we just go to the so this is all right for our project the only things we need to do is just when we're scrolling down we zoom zoom out the image and also change the opacity all right so let's install this well h1 tag and also the paragraphs here before going to the javascript part so the the here the the div that contains this one it has the class of container so we target that and we change the padding to be 100 pixels to push everything inside yeah we just check this one in the browser yeah here it's fine for this size but [Music] let's add some media query so we just say media query if the max with [Music] is 500 pixels i mean when we have a screen smaller than 500 pixels we want this dot container has only [Music] like a 10 pixel padding [Music] all right now looks fine when we increase the size you see that the image like this that's actually not important our website the design this this picture is important that we're going to style later and let's change the size of this heading so we target h1 and we just say we change the font size and we set it to be 50 pixels we can see in the browser and as you can see the image has some repeated effects on the top we can fix this one by just adding the background [Music] size [Music] to [Music] for example 160 percent and if you check the browser now now it is actually in the zoom mode and when we are scrolling scrolling down we want to zoom out the image so we're gonna have a zooming effect later using javascript and let's also increase the paragraph looks fine to me just change the color of the paragraph [Music] we set it to be gray all right so that was it for the css part of our project in the next section we're going to add functionality to our project using javascript we're going to add zooming and opacity effect when we are scrolling down the project so see in the next section for the javascript part of our project all right in the last section we have finished with the css part of our project we added a background image and also we installed our main website in this section we're going to add functionality to our project using javascript first we need to create a javascript file and here we open the explorer section using ctrl shift e on the left side in the explorer section we right click and we click on the new file to create a javascript file we name the file index dot js before using javascript in our project we must add a link to the javascript file within the html code so we switch to index.html and just at the end of the body section we add a script tag we just write sc and we click on the second auto suggestion the one with the src as both files i mean the index.html and the index.js are located at the same directory we just need to have index.js for the url now we can use javascript in our project first we save the file using ctrl s we close this explorer section by dragging the line to the left and we go to index.js and it starts coding our javascript the first element we need to bring is just this background image which is here a div with the class of background image and an id of background image we can use git element by id method to return an element with the id attribute so inside the javascript file we just add a constant and we call it background image element and we equal it to document dot get element by id and the id was background image we can use alt c to turn on the wall trap so we can see all the codes and we want to add add event listener to the window so when we're scrolling we can track this scroll [Music] so we just write here window dot add event listener the event we want to add is a scroll and we want this when this event happens if a callback function triggers and you wanna [Music] call a function and update the size and also the opacity of the image so we call a function we just make a function we call it update [Music] image [Music] and we create the function here let's just call it update image [Music] so in this object image we're going to target this element which is this background image and we're going to change the first we change the opacity so we're going to change the style so we just write dot style and we change the opacity the opacity we want to start when it's full we are in the top we want to have uh just one the opacity to be one and we want to decrease it by when we are scrolling we can calculate the scroll by just using window dot page y of set all right and then we want this number to be divided by a big number like 800 so this number will be smaller than one and we wanted minus one ma use one minus this number so now when we're scrolling down you see the opacity of the background image is changing we can console log this to see the number so we just console log two things the windows dot offset and also we one minus windows dot offset divided by 800. so we open the console here using this hamburger icon and open dev tools pane and we go to console section and we scroll down as we scroll down you see that the windows y offset is 2 something and then the opacity starts from 99 and it's going down when you're scrolling down and finally when we reach to the button you see that the opacity is going to zero and also getting the minus and this opacity page offset is 837. so we can choose different numbers so we don't get minus so we can change this one to 900. it depends on the zoom level and the screen size of your but it doesn't matter even the opacity becomes negative all right now we add ch we added the opacity let's change the background size and we start from this 160 percent background size so we just target the background image element dot style dot background size [Music] and we change the background size from 160 percent and we decrease it by this [Music] window dot page y offset and also this one is a percentage so we should add a percentage at the end so when we are going down you see that this one is getting smaller but this number is very big so we divide it by for example 12 so now we see that the zoom level is okay let's test it inside the real browser the google chrome so as you can see when you're going down the zoom level is decreasing and also we're having more opacity at the top in different zoom level we can see it as well yeah that was it for our projects i hope you enjoyed and learned many things we have used css to style our background image and fix it at the top and also we use javascript to change the opacity and the background size of the the background image when we are scrolling down so see you in the next project welcome back to another project in this project we are going to create drum kits as you can see from the final version of the project we have four buttons and if you press on each button you can hear the associated kit for example if we click on crash we can hear the crash sound and also kick snare and top also we have background image for each button and when we click on the button we can see an animation in the background image another feature of this project is if we press the first character of the letter for example if we press c or k we can hear the sound as well for example now i'm pressing c now i press t s and k also we see an animation and change in the scale of the button in the next section we are going to start with the html part of this project so see in the next section all right let's start the project first we open the visual studio code and here we close the get started tab in the file menu we click on open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so we click on desktop here we click a new folder button to create a new folder and we name the folder drumcat [Music] we press enter and here we click on select folder button we close the get started tab again and here in the left in the explorer section we create an html file we right click we click on new file we name the file index.html [Music] and we press enter now we have the index.html file on the right side which is completely empty but we can use an exclamation mark to have html5 boilerplate so we write an exclamation mark [Music] and we click on the first auto suggestion now we got the html5 boilerplate which has doctype which tells the browser what version of html the page is written in for html5 we just need to write html here then we have a html tag which is the top level element in the html file and includes the head and body tags the length attribute here inside the opening html file html tag sets the language of the page in our case as we want to use the english for our website we just set it to be en which is which it stands for english the head tag has meta tags and also the title the first meta tag is for the html character encoding the utf-8 is recommended by html5 for web developers because it contains all the characters and symbols so uh the user won't have any problem seeing our page and can see all the characters and symbols this meta tag tells the internet explorer browser to use the most recent rendering engine which is h and the next one is the viewport meta tag which tells the browser on how to resize the page the first part we can use alt c to turn on the word wrap to see all the code here the first part is uh adjusts the width of the page to the devices screen for example the mobile screen has a smaller with than the computer screen then we have here the initial zoom level of the browser which is hundred percent as a default then we have the title tag which changed the title of the page we can see the title in the browser in order to see the browser inside the visual studio code we can use the live previews extension that we have installed previously we just need to right click and click on live preview show preview now on the right side you can see the browser which is completely empty but the document title we can change the title here we just write drum kit drum kits which is the name of our project and now we can see the drum kits in the title of the page let's add a h1 tag here inside the body tag we write down drum kit [Music] i would like to edit an icon here that is similar to drum i would like to use font awesome for bringing icons to my website so in order to use the font awesome we need to just go back to the desktop and we click on google chrome and here we search for fontasa [Music] in the search results we we see the foundation.com website we can click here on icons we can see a lot of icons here that some of them are pro so we need to pay but most of them are free we in the search bar we search drum [Music] and we click on the first drum icon which is the free version [Music] and here we click on the html tag which is an i tag with the class of fa drum we just click to copy the html tag we go back to the vs code and just after the drop kits here we had a space and we paste the link using ctrl v we can't see the icon yet because we must add a link to the font awesome cdn within the html code so if we go back to the browser we open a new tag to new tab and here we search for cdnjs [Music] the first website is cdnjs.com we search we click on this website and here we can search for the font awesome cdn [Music] we write font and we can click here in the first font the first link and if you scroll down a little bit we can click here to copy the link tag we go back to the vs code and just under the title tag and the at the end of the hit tag we paste the link now we can see the drum icon in the browser let's add a container an empty div so we write dot container and we press enter to accept the auto suggestion so now we have a div with the class of container and inside this empty container we add some buttons because we want to style the buttons after the html part we just make the buttons hard coded now but later we're going to make these buttons using javascript so first we just write button we had a clear class of btn and we press enter to accept the auto suggestion [Music] and the first button is we just write snare for the drum drum kit name first drum kit name snare we copy this button three times using alt shift arrow down one two three we just change this snare to for example kick [Music] and we have trash or crash sorry [Music] and tom [Music] so we have now our four buttons here and that was it for the html part in the next section we are going to start styling the website using css so see on the next section all right in the last section we have finished the html part of our project in this section we are going to start styling our project using css first we need to create a css file so in the explorer section on the left side we right click and we click on new file we name the file style.css and we press enter now we have our installed css file here but before styling the website using css we need to include a link to this to the css file within the html code so we switch to the index.html and just after the font awesome tag font awesome link tag we create a link tag and we choose the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external style sheet the href here the href attribute defines the destination of the link as both files i mean the index.html and install.css are located at the same directory we just need to have here a style.css now we can use css in our projects so we go to the install.css we start installing the body so the right body and inside a set of curly braces first we remove the space around the body by margin zero we can see that there is no space and for bringing the items to the middle very very i mean horizontally we need to add a we need to change the display to flex as we wanted the the the title and the bottoms to be on the top of each other we change the flex direction to column because the default is row now we can see them on the top of each other and we can use align items center to bring the items to the middle horizontally after that we can change the height to be 100 of the viewport height to makes us the ability to bring the items to the middle vertically because the body would be the same size of the viewport height which is the size of the screen and any screen including mobile or desktop screen it doesn't matter the items will be in the middle in order to bring it to the middle we need to use justify content center all right let's change the background color of the body to be for example pink and for the heading and the icon we target this h1 so here we write h1 and we want the size to be bigger so we change this font size for example 50 pixels and let's change the the font to be for example in a different font family so we use the font family we use impact we can use alt c to see all the codes and let's increase the increase this distance between the characters of the text using letter spacing and we just say 4 pixels now we have more space between the letters let's change the color to be white and let's add some shadow effects around the text using text shadow so we write here text shadow the first value in the text shadow is the position of the position of the vertical shadow which is we want it to be two pixels the next one will be horizontal horizontal shadow we set it to be 2 pixel as well and we want to set the blur radius to 4 pixels and the last value of the text shadow is the color of the shadow we want it to be black but with transparency so we use rgba function and we use zero for blue sorry for red zero for green and finally zero for blue which gives us the black color and we we use point three for the alpha value which gives us thirty percent opacity all right that's enough for the title but you can see that when we decrease the size of the screen the title wraps in two lines in order to remove this line wrapping we can use white space no wrap now always the title will be the same in the same line all right let's start styling the buttons so we target the button using its class here the class btn so we write dot btn first we add a padding 30 pixel for the padding top and button here and here and 50 pixels for left and right and let's remove the background color we just set the background color to white let's remove the border by using border none and let's add some space around the buttons using margin just say 10 pixels as you can see it's responsive but the buttons are on the left so we can fix it by adding text align center to the parents of the buttons which is this div div with the class of container so we just here we write dot container to target the div and just say text align center to bring them in the middle all right let's increase the size of the text just say font size for example 30 pixels and let's you see that's the size of the this button is smaller than this this one because it has only four characters and this one has all five characters so we just change the mean width sorry mean width to 200 pixels all of them will be in the same size we can add some box shadow as well first let's round the border of the buttons by using border radius 10 pixels and we add the box shadow same as the text shadow the first value is the whole uh vertical shadow i think uh it's a horizontal shadow because the shadows goes this way and that way yeah that's correct the horizontal shadow so we call it we set this one to be zero the vertical shadow we want it to be four pixels so it's yeah and we set the blur to be 8 pixels and we change the color transparency by using rgba 0 0 and 0 for the black color and 0.3 for 30 transparency now we have a beautiful button shadow also we want to add the background image for this button the the images we want to use if you go inside the and if you download the resources of this project and if you go in the folder you you see two folders one is images and one is sounds the images has four image four images including crash kick snare and tom and the sounds are four audio files including crash kick snare and tom so you just need to copy these two folders you go inside the folder that you created the project i created the project in the desktop in this folder and you go any uh wherever you created the project and here paste the two folders if you go back now to the visual studio code they can see these folders here we want to change the background image firstly we want to make it like a static all the all the buttons has the same background image for example the tom1 and later we're going to use javascript to dynamically change the background images one by one so here we just say background image and we use url and the url is images slash tom.png so we write here images slash tom dot png that is suggested here now we can see all the background images let's increase the size of the image as big as to fit all the container by using background size cover and let's change the color of the snare kick and tom texas so we just say color we make it white but let's change the font family to be for example cursive and let's add some text shadow as well like the same as we used for the h1 so we just write it again text shadow two pixels for the position of the horizontal shadow two pixels for the position of the vertical shadow and we have four pixels for the blur and also the color you want to use is black with 30 transparency the alpha value and these are red green and blue all right the next things we i want to do is to change the cursor to be pointer so when we hover on the buttons we see a point the hand pointing a pointing hand and when we hover over the button we can use this pseudo class hover to change the color of the text so we just write btn hover and we change the color to be for example pink now when we hover over the buttons we see the difference in the color of the text and also when we click on the button let's change the background size and we can use active pseudo class so we just write btn and you use the active css sudo class to change the background size of the image for example to be 105 percent and when we click on them you see the change in the background size yeah that was it for the css part of our project in the next section we're going to start adding functionality to the project using javascript so we're going to start create these buttons dynamically using javascript and we're gonna we're going to add some audio tags as well to hear the sound of these drum kits so see on the next section all right in the last section we have finished starting our project using css in this section we are going to start adding functionality to our project using javascript first we create a javascript file we go here in the explorer section [Music] we right click and we click on new file rename the file index.js [Music] and we press enter before adding functionality to our project using javascript we need to add a link to the javascript file within the html code so we switch to the index.html file and just at the end of the body tag we add a script tag and we click on the second auto suggestion the one with the src as both files i mean the index.js and index.html are located at the same directory we just need to write index.js for the url of the link all right let's go back to our index.js file and first we create an array we just add a const we name the area kits and for the first element we just write down the name of the our kit or instrument so the first one is crash the second element is kick [Music] the third one is snare and the last one is tom we can use alt c to turn on the word wrap so we can see all the quotes now we need to loop through the kids array using forage method so we just write kits dot for each the forage method actually triggers a function for each element one by one so and we can get each element in each in each loop here so we just write kit so we get each kit and we can write our function inside these curly brackets the one the things we want to do is to create these buttons using javascript dynamically for all the instruments so first we go back to the index.js and we delete all these buttons that we created hard-coded and we're going to create these buttons using javascript here for creating an element inside javascript we can use a create element method so we just create a constant and we name the constant btn element for the button and inside the document we create an element the element we want to create is button so we just write here inside it double quote button now the buttons is created but we cannot see it yet because we have to append it as a child inside this div the div with the class of container first we need to return this div inside the javascript so we create a constant [Music] we name the constant container element as the div has a class we need to return it using query selector method so we just write document dot query selector and as the selector is a coming from a class we need to add dot here and write down the class name and the class name is container all right now we can append this button inside this container so here we just write down container element and we use append child method to append btn element to the container element all right now we can see the buttons here but they're not installed yet because in the installed css we use the class btn to style the buttons but we haven't add any class to the buttons for being more clear let's go to the browser using opening browser we open the web developer tools using ctrl shift c and as you can see inside the div class of container we just have four buttons but they don't have any class the method we can use to add the class is the classlist method inside javascript so we go back to the our index.js file and just under the create element we just write vtn element dot class list and we use add method to add the class the class we want to add is uh ptn so we just write btn here as soon as we rewrite btn we can see the buttons and styles inside the browser but still we don't have any text inside the buttons we can use the [Music] let's let's first check it inside browser now we have a div with a class of container inside this div we have buttons with the class of btn and here we can add another method that is called inner text so we just write dot inner text and the text we want to add is the elements inside the array for example crash kick snare on top we are getting these elements here cats so we just write in round kit and in for each loop we get one kit and we create the elements accordingly so we have crash kick snare on top we can make the first character of each let each word uppercase using text transform capitalize actually so we need to go back to the solid css and in the ptn section and at the end we add text transform [Music] capitalize and all right we already made the buttons the next things we want to do is to add us their song for example if you click on crash button we can hear the crash dot mp4 mp3 sounds so if you the only things we need to do is just create another element and the element we want to create is an audio element so we create a constant here we call it audio element and we just created using create element method and we just inside the parentheses we write down audio so if you go back to the browser inside the dip with the class of container we can see the buttons but we cannot see the audio tags and we need to use the append child method again to append this element so we write container element dot append child and they want their child we want to append is the audio element all right let's go back to the browser we open the div with the class of container and now we can see the buttons as well as the audio tags next let's add a source for the audio tags and the source will be sorry inside the image tag we have the our images and inside the songs folder we have our crash uh files uh i mean this the audio files so we added just under this we add the src resource so we just write down audioelement.src and we equal it to this folder and the src will be actually [Music] slash and we wanted the the name of this the sounds would be dynamic so we use plus kit and plus dot mp3 so if we go back to our browser and we see inside the div we have the audio files and the sources sounds the first one is crash the second one is kick and snare on top let's change the background image as well because the background image is all the same so we go back to the index.js and for the button before appending it we just add the background image so we just need to style it first and dot background [Music] image as you can see the the javascript syntax for css properties are different from the css and css for background image we are we use background dash image but in javascript we just connect them together background image together and this one would be equal to url the openness parenthesis and this one we want it to be dynamic so we just had a plus and kit and we just say oh we need to add the folder as well so here we just add images slash and kit dot png and also we close the parenthesis so we can see different images background images for the buttons now uh let's add an event listener to the button so when we click on the button we can hear the associated sounds so here we just write btn element dot add event listener the event listener the first parameter is the event and the event we want to use is click so we just right click and the second parameter is a callback function that will be triggered after the event happens so after we click here this function will be triggered so but they want to do the things we want to do is just play the song we just say audio element dot play and if we now go to the browser and just close the web developer tools and if we let me zoom it a little bit if you click on the first button you can hear the song second one snare and top the the next things i would like to do is to play the sounds when we press c in the keyboard or k or s or t so we just target to the first letter of each text and if this key is pressed we want to play the song so we go back to the index.js and just at the end we add event listener this time to the window and the first parameter which is the event is key down it means if someone press the key this function will be triggered so we get the function and we want to know which key is pressed so here we get the event and if console.log event that key and you open the console here it's using open dev tools pane and inside the browser if you press for example now i'm pressing s now you can see s here or f or h the reason we have four because we are in the loop and the loop is has four elements all right so instead of console logging let's add a condition here we say if the key that event dot key which is the key that someone pressed is equal to the the first letter after each text so we can get it here like just say kit dot slice method the slice method actually returns to the parts of a string and here for example for crash the first letter is has the position zero and the second one has the position one and if you want to get the first character or letter we just need to write inside a parenthesis zero and one so now we are getting the first letter and we equal it to the the to the key that someone pressed and we just said if this condition happens we want to hear the sound just we write down audio elements dot play we go back to the browser and here now i'm pressing c you can hear the christ sound t you can hear the thomson but we don't see any animation in the buttons we can add some animations as well we can change the scale of the button for example so we go to the index.js and here we just change the scale by using a scale function so we just say btn element dot the transform method and transform method has the scale function inside it so this just says scale and inside a set of parenthesis we just say 0.9 it means 90 percent of this scale so if you go back to the browser and now we press c uh it didn't work transform oh we missed the style here because we are changing this style we have to write down style first now you go back to the browser we press c you see that the scale of the button changed now we press k s and t but the we want this skill come back to normal after a few seconds yes actu actually after some milliseconds so here we added settimeout method we just say set timeout same timeout actually triggers a function after a a timer is expired actually we can the first place is a function the first parameter so we create the function and if this function will be triggered after a delay and then we can set the delay here for example we say 100 milliseconds so we just say after 100 milliseconds just change the scale to the hundred percent again so we just say btn element dot style dot transform and we set it to scale again but this time the scale would be a hundred percent so we go back to the browser now i press k you see the animation the kick c for crash and s and top also we can click it by the mouse you see the animation differently yeah that was it for our project i hope you enjoyed and see you in the next project welcome to another project in this project we are going to create a random image fit as you can see from the final version of the project we have six images and when we refresh the page we see new random images each time also we have a button at the bottom of the page so when we click on this button we can see new images adding to the website we are going to use a website called lorempixon to get the images so see in the next section for the html part of our project all right let's start our project first we open the visual studio code here we close the get started tab and in the file menu we click on the folder we click on the open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so we click on desktop and here we click on the new folder button to create a new folder we name the file for example random photos which which is the name of our project and here we select the folder we close the get started tab again and here on the left side in the explorer section we create an html file so we right click and we click on new file we name default index.html and we press enter now on the right side we have our index.html file which is completely empty but we can use an exclamation mark to have an html5 boilerplate so we write an exclamation mark and we click on the first auto suggestion we can use alt c to turn on the word wrap so we can see the code clearly here we have our html5 boilerplate including a doctype which tells the browser what version of html we are using for html5 we just need to have html here then we have the html tag which is the top level element in the html file the length attribute here sets the language of the page and in our case the language is english then we have the head tag and also the body tag in the head in the head tag we have three meta tags and also a title tag the chart set attribute defines the this uh the html character encoding and utf-8 is recommended by html5 because it contains all nearly all the characters or symbols then we have this meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge this viewport meta tag tells the browser on how to resize the page and the first part actually tells the uh sets the pages with to the devices the screen for example the mobile screen is smaller than a computer screen so the width will be smaller as well and then we have the initial zoom level of the page which is in our case hundred percent then we have the title tag which sets the title of the page in order to see the title and the browser inside the visual studio code we can use the live preview extension so we right click and we click on live preview and show preview here on the right side we have our browser which is completely empty but with the title document let's change the title let's first actually close this explorer section by dragging this line to the left and we change the title to random photos so we can see the random photos in the title section in the bar let's decrease the size of the browser and in the body section let's add a container which covers all our image in our page we just say container or just let's net let's make it more specific by saying just image container image dash content and here we click on the auto suggestion to have a div with the class of image container for the images i would like to use a website called lauren pixom [Music] to get some random images so we go to our desktop and we click on the google chrome here we search for lorem pixel and we press enter yeah i missed the s so in the first result we have a website called pick some dot photos and the the name of the website is lauren pixel so we click on this website if you read the tutorial it's so it's very easy to use you can have this link to have a photo with the size of 200 to 300 if you copy this and we go to a new tab and we paste this link and we press enter we get a photo and if you paste it again and we get another photo if you want the photo to be square and only be for example 200 to 200 we can use this link so we copy this and test it we get a square image each time we paste this one on the browser all right sometimes the browser catch the photo and and show you the repetitive image in order to avoid this we can add some uh query at the end and just say random one random two and so on so we always get as the same as a different image so we we need this kind of text in our html so we copy this to text and we go back to our visual studio code so we paste the link and we can see two different images now here but we don't want the image to be this size we just want it to be 300 to 300 so we delete the 200 section as you can see now we have two images let's add another one so we copy this using alt shift arrow down we change this two to three so we get three images and after this container we added a button we had a button with uh we had a button with a class of ptn and inside the button we want to just write down load more so here we choose the auto suggestion so we get a button with a class of ptn which saying load more at the end we are going to use this button to load more images from the website using javascript and also in the next section we're going to use css to install our project so see you in the next section all right in the last section we have finished with the html part of our project in this section we are going to start our project using css first we need to create a css file so we open the explorer section using ctrl shift e and on the right on the left side we right click and click on new file rename default style dot css and we press enter before starting our project using using css we need to [Music] add a link to the css file within the html code so we go back to the index.html file and just under the title tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we have a link tag with the relationship between the html file and the external style sheet the href attribute defines the destination of the link and as we as both files i mean the index.html and style.css are located at the same directory we just need to write a solid css for the url now we can use css in our project so we save this file and we close this explorer section by dragging this line to the left so we open this one a little bit and we go to the style.css section first we start with the body section so we write body we open a set of curly braces first we remove this margin the default margin using margin [Music] 0 then we can use display flex to bring the items to the center horizontally we just write display flex [Music] as you can see the button came to the right side we can use flex direction column to bring back the item to the end of the screen then we can use align item center to bring the items to the center horizontally as you can see the the button came in the middle but still we have the images on the left side we can decrease the size of the image to fix this problem or yeah just have this div class of image container so we just say image container [Music] and we can [Music] use text align center to bring the all the images and in the center as you can see when we open the when we increase the size of the browser the we have two images and when we decrease we have one images so it's already responsive and we just need to target the image and just make it more beautiful let's change the background color of the body using background color we just choose the color i would like to choose a color called brown yeah brown color looks fine then we change the image just say image container img we target this img tag inside the class vertical air img container so we can add a margin just say 20 pixels maybe it's too much just 10 pixels is fine just change the border radius we add a border around the border of the images using border radius which we add a 10 pixels border let's add some [Music] box shadow [Music] and we add some shadow shadow effect around the elements so which if the first ele the first value of the box shadow element box shadow property is the position of the horizontal shadow we set it to be zero and then we have the vertical position of the vertical shadow we set it to be four pixels you can see the dark here we set 8 pixel for the blur and the last value is the color of the box shadow we use rgba [Music] we use rgba function and we set 0 0 and 0 for the red green and blue values which gives us the black color and then we have alpha we set it to be point three which is thirty percent transparency let's add some background color [Music] we just say light gray you cannot see the background color because the the width and the height of the image is not defined yet so we just say width to be 300 pixels and height to be 300 pixels as well so this background color helps when the image is not loaded it's kind of pre-loader for the image as well especially when we have too many images we can see the background color all right let's uh install the button here so we start target the class of dtn so we just say dot ptn [Music] we remove the just say background color to be for example slate blue [Music] remove the border [Music] border none and then we add some padding we just say 10 pixels for the top and bottom padding and 20 pixels for the left and right let's add some margin so we just say 20 pixels margin we see the button here let's change the color of the text to be white [Music] then let's add some border sorry border we round the border of the buttons using border radius just 5 pixels and we can add some box shadow as well so we just say box shadow zero percent zero for the horizontal shadow position of the horizontal shadow four pixels for the position of the vertical shadow eight pixels for the blur and [Music] they use the black color and 30 percent transparency all right let's change the cursor to be pointer so when we hover over the button we can see a pointing hand then also let's use the hover pseudo class [Music] so we change the opacity of the opacity of the button when we hover over it so we just say 90 opacity so you see a little bit change all right that's it for the css part of our project in the next section we are going to make this uh images to comes dynamically and when we click on the button we can see more images loading inside our website so see you in the next section all right in the last section we have finished installing our project using css in this section we're going to add functionality to our project using javascript we're going to add some add event listener to this button when we click on this button we can see new images coming from the lauren pixon website and we keep we can keep loading images on and on so first we need to create a javascript file so we open the explorer section using ctrl shift e and on the left side we right click and we click on new file we name the file index dot js and we press enter before using javascript in our project we need to add a link to the javascript file within the html code so we go back to the index.html and just at the end of the body tag we add a script tag we just add sc and we click on the second auto suggestion src defines the destination of the link so as we have index.html and the index.js in the same directory we just need to write index dot js for the url now we can use javascript in our project the first things we need to do is to bring this div with the class of image container and return it inside the javascript inside a constant so we can add new images using create element method because the we have class here we need to return the element using the query selector method so we go to the in index.js we create a constant and we call it image container element and we just write document dot query selector to return the element and the cell the css selector is dot image container as the same as here we can use alt c to turn on the word wrap so we can see all the code and also we can close this explorer section to be so we can see the code clearly and we have more space for our browser the other things we need to bring is this button so we can add some event listener to the button the button has a class of btn so it's the same as above we just create a constant and we just say btn element and we change we add the document.queryselector and inside a set of parentheses we add dot ptn for the class css selector all right so we added we add the event listener to this button first we just say btn element dot add event listener the event we want to add is click so when someone click on the button we want to trigger a function we just add the function here in order to see that it's working we can use log console.log and gently just say clicked so we open the console using this hamburger icon and we click on the open dev tools pane so in the console section now if we click on the button we can see clicked each time we click so we create a function here we just say add new images [Music] and the the things this function does add more images to our container so for in order to create an image image element we just need to use the create element method so we just say new image new img element we just said document dot create element and the element we want to create is img and the sources for the new the img because the img has a source attribute so the source will be so we just say new image element dot src equal to it would be the same source but we want to change this random number so we copy this we copy the first link and we put it here but we put it inside a set of backtech so we can do this number randomly so instead of one we just create a variable using dollar sign and open a set of calorie braces and we just create a random number we're using math dot random [Music] and the number we want to create the number between for example 0 and 2 000. so we multiply it to 2000 but this number is now actually because this is a random number be between 0 and 1 so this number is not like a rounded in order to create the to round the number we need to wrap this inside the math dot floor so in this case the number would be between [Music] 0 and 2000 so now we create the image and we set this src now we can add it to inside the container we just say container the image container [Music] element that we we got here that append child so we're gonna append the child which is this new image and we write down new image here to append it as a child so the things we do here when we click on the button we we call this function at new images so now we have three images when we click on the load more we see one more image coming each time we click in order to see more images we can add instead of adding only one image we can put this one inside a loop if for loop so we just create a for loop let me do it again so you just write 4 and we click on for loop or auto suggestion and now we have uh index which is from zero and it should be until the number of images we want so we just say image number and we set this image number before calling the function we just say let image number to be for example 10. [Music] so in this case we're going to create 10 images and inside this instead of this constant we put our function so we contour x the function and we paste it here so now each time we click on the load more we get 10 more images it's not working now let me check the reason is not working because we set this variable as a lead and this variable is not access accessible outside this function we just need to delete this lit now when we click on the load more we get 10 new images each time so let's increase the number of images we have at the beginning to for example six so we just copy this three more times using alt shift and down arrow one more time we just change this to four [Music] five and six so let's open this in the browser if you're using this hamburger sign and click on open in browser so when the the image is loaded when the uh let me close and decrease the size so when the page is loaded at the beginning we have six images and when we click on the load more we can see each time more images are loading and we never get a repetitive image because we are creating the random number between zero and two thousand actually it's possible to get the repetitive image but it's less likely yeah that was it for our project i hope you enjoyed and learn new things see you in the next project welcome back to another project in this project we are going to create an image slider as you can see from the final version of the project we have an image slider that automatically changes every for example five seconds then we have two buttons here the previous and the next button as you can see when we click on the button we go to the previous image and when we reach to the first image we go to the last one and also here when we reach the last image we go to the first one also we have a very beautiful box shadow and beautiful icons from font awesome in the next section we're going to start our project by doing the html part of the project and then we're going to continue is styling our project using css and finally we add a functionality to the project using javascript so see on the next section all right let's start our project first we open the visual studio code and here we close the get started tab in the file menu we click on open folder and we create our project whatever we want to do i would like to create a project in my desktop but you can create it anywhere you like in your computer so we click on desktop and here we click on the new folder button to create a new folder [Music] and the name the folder image slider [Music] which is the name of our project we press enter and we choose the select folder we close the get started tab again and here on the left in the explorer section we right click and we click on new file we create an html file and we name the file index.html [Music] here on the right side we see our file index.html which is completely empty clearly and we can use an exclamation mark to create an html5 boilerplate so we write an exclamation mark and we choose the first auto suggestion we can use alt c to turn on the word wrap to see all the codes and here we have the doctype which tells the browser what version of html the page is written in and in our case we are using html5 so we just write html here then we have the html tag which covers the head section and the body section the length attribute here sets the language of the page and in our case it's english then we have the hit tag that includes meta data tags and the title the first metadata defines the html encoding characters so here we are using utf-8 which is recommended by html5 and because it contains all the characters and the symbols contains all of them the next metatec data tells the internet explorer browser to use the most recent rendering engine which is edge and the viewport metadata tells the browser on how to resize the page the first part of this meta tag is just telling the browser to set the width to the device's width i mean if the device is mobile the width will be smaller than the computer screen the second part initialized the zoom level of the page and in our case it's 100 percent then we have the title tag which is the title of our page we can see the title by opening the browser we can see the browser inside the visual studio code by using the live preview extension that we have installed previously so we right click and we click on new sorry on live preview show preview now we can see the browser on the right side with the title document which comes from here we can change the title let's change it to be image slider which is the name of our project [Music] we can see it here and in the body section let's add a container image container for our actually just call it a slider container [Music] so it's a div with the class of slider container just make this one small [Music] and we click on the auto suggestion to get the div let's close this explorer section by dragging this line to the left and inside this div we make another div for covering all the images so we called it the we call the class of the image container [Music] and we press enter to accept the auto suggestion and inside the image container we're going to have some image tag or img tag and for the src we're going to use a website called lorem pixel so let's go to the desktop we click on the google chrome browser and here we search for lauren pixum so we just lorem pick some yeah i missed the s here that's fine uh we have to click on the pick some dot photos here lauren pixar this this is actually a website that we don't need to sign up to get the images and it's based on the unsplash website so the the the good things about this website so we don't need to sign up or get an api key or some sort of things and for example here if you want to get a random image of 200 to 300 you can just write down this one so if you just copy this and test it here [Music] we see we're getting a image and if we paste it again you get another image so that's a random but i would like to choose a specific image for a specific image and not a random one we just need to add id and just put the number there are plenty of images in this website if you check here the list of all images they have a too many image and these are the ids of the image if you use the id1 you get this image 10 you get this and so on there are plenty of images like thousands of images so we just copy this link using contrast c and we go back to the visual studio code and here in the src attribute which is the destination of the link we paste the link now we can see the image here for the alt section we just say image alternative one so this for the size i wanted to be like it 500 pixels width and 300 pixels height so this size and we just need to copy this four or like three more times to have four images anything you like it's a dynamic website whatever image you add it goes inside this slider so we copy this using alt shift arrow down three times one two three but all the images are similar but we just can't change the id here we just say for example for the first one we just use the id one i mean the second one and for the third one you just use 10 and for the last one we just use for example 20. so we got four different images and if these images are specific if you refresh the browser we always get the same images so they are not randoms all right and outside this div with the class of image container i would like to add two buttons like arrow arrow buttons so we can a slide right or left for using for having the arrow where i would like to use the website called font awesome you probably know about it so in the new tab we just search font awesome [Music] and here in the search result the fontawesome.com website you click on icons and here you can you can see a lot of icons as they claim is 7 864 icons so we just search for angle [Music] and the the one we want to use is a double angle so this one actually the right and left one so first we copy the right one so we click on the icon the angle double right and we can see the html tag here which is a which is an i tag with a class of fas and fa for the font awesome the fas is the font awesome solid and we have fa angle double right so we copy this you know we're clicking by clicking out on it we can copy it and we go back to the visual studio code and we paste it just outside the image container so we can we cannot see it yet because we have to uh get the we have to add a link to the font awesome cdn inside the html code at the top so we just in the new tab we search for cdn js [Music] and we click on the first link cdnjs.com and inside the search bar we can search for the font awesome cdn so we just say font awesome and in the first link we click on the first link and we scroll down a little bit and we click here to copy the link tag we go back to the visual studio code and just under the title tag and at the end of the hit tag we paste the link using ctrl v [Music] now we can see the arrow here which is the right one and we just can copy this [Music] tag using alt shift error done and we change the first one to left so now we have two icons the left and right uh for styling this this icon we need to add some class to it so we just for both of them we we use ctrl to select both and we add a class of btn for both of them and we press escape and for the first one the we choose we add prev for the previous uh button and imported [Music] for this one we just say next all right yeah that was it for the html parts section and in the next session we are going to use css to style our project and make this a slider looks look better so see you in the next section all right in the last section we have finished the html part in this section we are going to start styling our project using css first we need to create a css file so here we open the explorer section using ctrl shift e [Music] and here on the left we right click and we click on new file we name the file style.css [Music] and we press enter before styling our project using css we need to add a link to the css file within the html code so we go back to the index.html and just under the link tag for the font awesome we add a link tag we just write link and we select this third auto suggestion the one with the css now we have a link tag with the relationship between the html file and external style sheet here href defines the destination of the link and as both files i mean the index.html and the solid css are located at the same directory we just need to write style.css now we can use css in our project let's close this explorer section by dragging this line and we go to the solid css so let's first like install the container the container tag here in the body section we have a slider container which covers everything let's confine all the images inside that so we can see the styling of the body so before installing the body so we just just say slider container and we just set the width to 500 pixels which is the width of the images and the height to 300 pixels and in order we now we have the container here but we can see other images because the over we have to use overflow hidden to [Music] remove the other images from the container so now we can only see the first image because the other images are outside the container and they are removed by using overflow header so let's style the body now we can see the changes so first we remove the space around the body using margin 0 [Music] and we use display flex to be able to bring the container to the center horizontally so we just use justify content center to bring it to the middle and we can set the height of the page to be a hundred percent of the viewport height i mean the the 100 of the screen size but from here to here now we can bring the items to the middle vertically using align items center all right let's continue the styling of first let's change the background color to white color and let's change the let's continue styling the style slider container just add some border radius so we round the border of the container we set it to be 10 pixels and you can see the borders here let's add some box shadow [Music] to to add some shadow effect to the container so just say box shadow the first value of the box shadow is the position of the horizontal shadow and we set it to be zero next one is the position of the vertical shadow we set it to five four pixels we can see it here and we set the blur radius to eight pixels and we change the rgba yeah i mean we want to add the black color but we want it to have 30 percent opacity so we choose we use rgba function [Music] sorry about that so we open the parenthesis we just write zero zero zero for red green and blue blue and for the alpha value we just say point three which is which means 30 opacity let's use alt c to turn on the volt draft so we can see the code clearly [Music] and yeah that was it for the box shadow [Music] and for the next div which is the image container let's change the image container uh [Music] we just say display to flex we want to bring the images next to each other we cannot see the images yet because the we're using overflow hidden we remove the overflow hidden just temporary now you can see all the images next to each other because we are using display plex but this is our main container the the things we want to do in the javascript is to change the transform property did the translate x prop translate x actually function so we just say we just test it here we just say transform translate x and now the the translate x is zero and we have the image here if we just change it to minus 500 pixel which is the width of the image we see the next image inside our container and if you change it to a thousand go to the third one 1500 goes to the last one we want to do this using javascript so we delete this and we bring back the overflow hidden here so we don't see the other images and let's bring the the buttons that we the arrow icons so we just target the btn class which we were added to both of the bot icons the itex so we add btn for both of them so we style that we just say dot btn and we change the position of it to be absolute so we bring it inside the container so you did you could see it here but we want this uh position to be absolutely related relative to the parent which is the container a slider contest so we should we have to change the position of the slider container to relative so now we could see the if you refresh it you can you can see the icons inside the container so we can bring it up by changing its top position we just saved top 50 so we bring it here and it's outside let's change the color to be white so we can see them better yeah let's change the font size and make make them bigger by setting it to be for example 20 pixels the default is 16 pixels and it's not it we we use the top 50 but it's not in the middle completely because the top 50 percent actually bring the top edge of the icons to the middle if you can see it so in order to bring the middle of the icons to the middle we need to use a transform property translate function translate x function and we set it to be sorry to translate y function and we set it to be minus 50 now we can see the icons exactly in the middle let's change the opacity of these icons to 50 percent so we cannot see them completely and for the left and right so we used pre and next classes so we target them here we just say btn dot let's set first we style the pre one and we just say left we set it to left 10 pixels and for the next one dot next we set it to be in the right side so we just say right 10 pixels so we now we see the icon left in the position of the 10 pixel of the left of the container it's pair its parent and also the right one in the right side 10 pixels far from the edge of the container let's change the opacity to 100 percent when we hover over it and also let's change the cursor to the pointer [Music] so when we hover over the icons we see the pointing hand instead of the normal cursor all right so we we use the hover css pseudoglass to target the the hovering effect and we change the opacity to 100 by just setting it to be one now when we hover over the icons we see them more less clear like a more clear and with less opacity all right that was it for the ht i think that was it for the css part in the next section we are going to start adding functionality to the project using javascript and we're going to add functionality to the icons when we click on the icon for example right one we see the next image and when we click on this we click the previous one and also we want to add some timer to the project so the images automatically changes after for example 200 or 300 sorry to 3 3 000 milliseconds or three seconds so see in the next section all right in the last section we have finished styling our project using css in this section we are going to start adding functionality to our project using javascript first we need to create a javascript file so in the left side we open the explorer section using ctrl shift e [Music] and we right click and we click on new file rename the file index.js and we press enter remove this file by dragging it and bring it to this section to see the browser here and we close this explorer section we don't need them before using javascript in our project we need to add a link to the index.js file within the index.html code so we go back to the index.html and just at the end of the body section [Music] we add a script tag you just write sc [Music] and we click on the second auto suggestion the one with the src as both files i mean the index.html and the index.js are located at the same directory we just need to write index dot js for the url in the src attributes all right now we can start a styling we can start adding functionality using javascript so we go to the javascript file the first element we need to get is the this button element the so in the index.html we see we have two icons one with the class of pre and one is next the one we want to target is the one with the next one we want to add events listener so when we click on it we see the next image so in the index that is we target the next class we just write const we make a constant we name the constant next element and we just write document dot query selector because the we have a class here we want to target the class we need to return this element using query selector and inside a set of parenthesis we just need to add the class name but we dot because it's the css selector of the class is dot so we just write that next we can use alt c to see all the codes and turn on the word wrap so we press alt c and we add a event listener to the next elements we just write next element dot add event listener the add event listener method actually attach an event handler to an element and it has two parameters the first parameter is an event and the event we want to use is click so we just right click in a double quote because we it's it should be an string and the next parameter of an add event listener is a function actually a call function callback function so make an arrow function so this function will be triggered when this event happens so inside this set of curly braces we can write down our statements so first let's index the number of images we just say we make a variable and just say current image we just say current img and we set it to one so the first image would be one and when we click someone click on the link here we want to add one number to this current image so we just add current sorry current image plus plus to increment current image one each time someone clicks on it so after this we need to update the image to make it a function here we call a function here and we create the function down below so we just write function and we name the file function rename the file function update img sorry [Music] yeah so the things we want to do is to just as i mentioned in the last section we're going to use transform translate x to see the next image so we want to target each image and we need to first in inside the as you can see in the style.css in the image container if we add transform translate x for example from minus 500 pixels we get the next image so in order to do this in javascript first delete this one first we need to target this uh container image container which is inside the index.html here so we return this one using a query selector method so we make a constant and we call it image con container element and we use the method document dot query selector and inside the set of parenthesis we just use the image container class name now we got this and we can change the style as we did here using the style method so here we just write image container [Music] and we change the style by just adding dot style [Music] and the method we want to use is uh the method we want to use is transform and we equal it to just say translate x and minus 500 pixels and now if we click here we see the next image but we're just seeing the next one because we just used minus 500 pixels if you want to see the the the third one you just have to add 1000 pixels so just pay attention for the how we style as you can see the javascript syntax for styling is a little bit different from the in the css so in order to have the dynamic uh dynamics pixels to we can go using this current uh sorry current image index to see the next image we can use the backtick instead of the double quote we just say backtick we change this one to backtick and instead of this thousand we added dollar sign open a set of curly braces and inside this we just say current image index but we have to multiply it to 500. but if we click now we see the third image instead of the second image i the reason we see the third image because the current image index is one and we incremented [Music] one and it becomes two and 2 multiplied to 500 thousand in order to fix this one we can just add a parenthesis here and minus this one to 1. so as a default the current image is one so here's zero and we have zero pixels that is the first image and when we press next this one is two two minus one is one and one multiplied to 500 is 500 so we can go next next and but after the last image we see nothing because we are going outside the images so we have to limit this current image index so here at the top we added state condition we just say if the current image is more than the number of images how we get the number of images we have to re target the image image tag actually inside the javascript so here at the top we just say count all the images we just say img imgs elements we just said document dot query selector all and the elements we want to get is the img tag [Music] so this method actually returning all the images and putting them inside this and if you console log this we just say log and we cancel lock this and see it in the console in order to see the console we just need to click on this hamburger and we click on open dev tools and we just need to save and just add a semicolon here [Music] so this is 17 we have an error here yeah we didn't finish this one yet so that's why we are getting an error so we first we just delete this one so don't get the error so now we cancel log the images element we got four elements and the length is 4. so we delete this cancel log and we add the condition again we just say if current image index is more than [Music] images element dot length [Music] which is this one four if this one is more than four just bring it to the beginning just say current image is equal to one [Music] so when we click on this button and we go to the next image and when we go to the last one we go back to the first one let's add some transition to the to the image so when we go to the next one we see some transition so inside install it css in image container we add a transition [Music] on transform property that we use inside the javascript file and we just say do it in 5.4 seconds and an easy and out way now if you go to the next image we see the transition and in the last image we go back to the first image let's do this trick for the this button as well the previous one the previous icon has the class of prev so we target this first inside the javascript so we go up we just say const preview previous element and we just use the query selector method to target the class the tar the class was prev and the css selector is dot for the classes so we just say dot prev and just under this function we added this function for the pre element we just say dot add event listener and the event we want to add is the same as the next one and it's click and we add a function that will be triggered when the event happens here is the opposite of the next instead of in incrementing we should decrement and decrease one number from the current image so we just say current image minus minus and we update the image [Music] so when we go next we can come back using previous one but here if we click in the first image we go we don't go actually anywhere but we have to decrease it so we go to the last image actually so we added else if here and say if the current image is less than one so we just set the current image to the number of images which is the last image which is the images that length so we did the opposite of the next one so we go back we see the last image we go next we see the first image now we want to add a timer so we see this effect like automatically when someone comes to our website we see the next image like every three seconds or so for doing so we just add a time set set timeout method we just say set timeout and the zip timeout actually sets a timer which triggers a function after the timer expires so it has two parameters the first one is a function and the last one is the delay or the timer so we just say three seconds we just say 000 millisecond which is three second and we say that increase the num current image number one and call this image update image function so when the function triggers and we have to actually call the function at the top so we just say update image so when the the when the code reached this line called this function when it finished reading the function it comes to this point and after 3 seconds this this function inside will be triggered and the number of the current image increases the index increases and the function will be triggered again and this loop is going to happen on and on forever as you can see here but the problem is when you press the next or previous button too much this timer is going to call more than one time and we are when we are having more than one timer at a time so in order to fix this we should to reset the timer each time we click on these buttons there is a method called clear set timeout so we can use for resetting the set timeout method we first we need to actually create an a variable called for example timeout and we equal this set timeout to this timeout and each time we click on the buttons for example next or previews after increasing the number we should clear the [Music] timeout method but where which timeout which timeout method the one that has the name timeout so we we set here so we just inside the parenthesis we write timeout and we have to do this one for the previous one as well so we just say clear timeout the timeout variable so now if someone comes to the website see the slides working and we just need to when they press go next previous and the timers is reset so it's not working and not interrupting us and when we finish clicking the timer starts working again also we can now increase the number of images as well so with no problem we just need to copy this image using for example alt shift arrow down and we change the id to for ex id for example this one 200. so just if you can see that automatically it's going to show us five images instead of four images you see the the fifth one and also it works with the button as well so we can easily increase or decrease the number of images and the projects is still going to work because we made it dynamically using the length method because we are getting the number of all images instead of just writing down four here or five yeah that was it for our project i hope you enjoyed and learn new things so see you in the next project welcome back to another project in this project we are going to create a dark mode toggle as you can see from the final version of the project we have a toggle button here and as we switch it on we go to dark mode and if we switch back we go back to the light mode also we see a very beautiful animation a sliding mode we're going to learn keyframe css query to create such beautiful animations also we're going to use javascript to change the background color when we switching on and off also we are going to save these modes inside the local storage of the browser so in the dark mode when we refresh the page we can see still the browser is in dark mode and if we switch it back to light mode and refresh the page we still have the light mode so the user can see always the same mode when they come back to our website later in the next section we're going to start with the html part of our project so see you in the next section all right let's start our project first we open the visual studio code we close the get started tab and in the file menu we click on open folder i would like to create the project in my desktop but you can create it anywhere you like in your computer so here we click on desktop and here we click on the new folder button to create a new folder we name the folder dark mode toggle which is the name of our project we press enter and we click here to select the folder we close the get started tab again and on the left side in the explorer section we right click and we click on new file to create an html file we name the file index dot html and we press enter as you can see now on the right side we have our index.html file we can use an exclamation mark to have an html5 border plate so we write an exclamation mark and we choose the first auto suggestion we can use alt c to turn on the word wrap so we can see the codes clearly as you can see now we have the doctype which tells the browser which version of html the page is written in in our case because we are using html5 we just need to have html here then we have an html tag which covers the head and the body tags the link attribute here sets the language of the page and as we are using english we just write en here then we have the head tag which has three meta tags as well as the title tag the chart set attribute defines the html character encoding and utf-8 is recommended by html5 for all new all web developers because it nearly covers all characters and symbols and the user who is uh seeing our website won't have any problem reading the characters or symbols then we have this meta tag which tells the internet explorer browser to use the most recent rendering engine which is edge this meta tag the viewport meta tag tells the browser on how to resize the page the first part i mean this part tells the browser to set the width of the page to the device's screen so when someone is seeing our website inside a mobile the width of the screen will be the same size of the mobile and will be smaller when the someone is using a computer screen then we have here the initial zoom level of the page which in our case is hundred percent then we have the title tag which sets the title of the page in order to see the browser inside the visual studio code we can use the live preview extension so we right click here and we click on live preview show preview now we have the browser on the right side with the title document we can close this explorer section so we can have more space for coding and seeing the browser let's change the title to be the same as the name of our folder which is dark mode toggle you can see it here as well inside the title bar then in the body section which we we set a input with a type of checkbox we don't need to any name for it the id will be dark mode and we have a class of input as well so we can [Music] style it inside the scss using this class after this we have label for this input and because the id is dark mode so it should be for dark mode [Music] then this label has a class of label as well and inside this label we have a div with the class of circle actually this circle is an empty circle so we're going to design it later using css so when we click on the button we see a circle is moving toward right and vice versa that's it for the html part in this in the next section we're going to start styling our toggle button using css so see you in the next section all right in the last section we have finished the html part of our project we added a input with a class of checkbox as you can see in the browser we added a label and inside the label we had a div with a class of circle in this section we are going to start using css for restyling our project first we need to create a css file so here we open the explorer section using ctrl shift e or you can use view and click on the explorer i use just a shortcut ctrl shift e so on the left side in the explorer section we right click and we click on new file to create a css file we name the file style dot css and we press enter before using css in our project we need to add a link to the css file within the html code so we go back to the index.html and just under the title tag and at the end of the hit tag we add a link tag we just write link and we click on the third auto suggestion the one with the css now we can use css in our project as we have a link tag with the relationship between the html html code and the external install sheet which is install.css and the hrefref hdf attribute defines the destination of the link and as index.html and the installer css are located at the same directory we just need to have install.css without any path so we save the file and we go back to the installed css to start installing our project first we style the this label with a class of label so we can see it and [Music] starting doing something so we just say label because it's a class we need to add a dot here and we open a set of curly braces we just give it a width of 80 pixels and height of 40 pixels we cannot see it yet because the color is white so let's change its background color to light gray and can't see it yet yeah everything looks fine let's check this label and this is label two [Music] yeah let's position this one absolute so because we put it inside this inside body in order to give it to width and height we need to have a absolute positioning so now we can see the label here and let's change the border let's add some border to it to make it round so we add border radius just say half of this 40 pixels so we get a completely round on the corners so we get 20 pixels you can see let's uh in makes this check box invisible by just targeting the here target target in this class of inputs so here we target the class of input and we just say visibility hidden here we choose the second author suggest and let's bring this one to the middle by styling the body section so we just write body we change we remove the margin in the body default margin we just say margin 0 we connect them to the top and we just change the display to flex and then by changing the display to flex we can bring it to the center horizontally using justify content center and we can set the height to be 100 of the viewport height and using a line item center to bring it to the middle horizontally sorry vertically so everything looks fine let's let's do this dip with the class of circle let's uh style it we just say circle we just give it to width of 34 pixels let's change the background color to see it just say red and we give it a height of 34 pixels as well we can see it here and let's make it rounded by using border radius 50 and we set it to top to be three pixels but we should set the position to be absolute now the reason we choose the width and height to be 34 pixels is because we have 40 pixels for the height of the label if we subtract 40 minus 34 we have 6 pixels left and we have 3 pixels at the top and three pixels at the bottom so we we keep the circles exactly in the middle we also need to bring it from the left three pixels so we now have the circle exactly in the middle now we can change the color to white so we have a beautiful toggle now all right now we want to change the color when we click on it first we change the cursor to be pointer so when we hover over the label we see a pointing hand and we say if this lay if this input we have is checked so when it's checked we want to change the color of the label firstly we just say if something happened then change the label to be for example has a background color of salmon color or so when we click on it we see the changing in the color of the cell the next thing is i want to this circle to move to the right side when we click on the label so we need to add an animation to the circle when this one happens so in order to add animation we just need to add a keyframe so we just say keyframe and we name the animation for example uh just a toggle [Music] on for going fro from the left side to the right side just say zero percent and we change the trans form translate x to when when is zero percent we just say zero and we copy this and we change this one when it's 100 percent to be at the end which is the as you can see here we have 80 pixels we have 80 pixels but but this one has 34 pixels and we want this to be 3 pixels in this side as well so we just set 40 pixels here which is enough so we turn on alt c to see all the code and we just set this one for the coming back as well for the off target uh toggle off so when we click back it comes back and this should be opposites this one should be 40 pixels and this one should be zero [Music] so let's add the animation but adding the condition here we just say input checked and the label [Music] inside the label we have a circle so we just say dark all dot circle and this circle should have the animation which is the toggle on when we toggle on and the animation duration is 0.4 second and it should be linear and towards forwards now we click we see that the this one is moving toward the right side the reason we use forward if you delete forward you see when we click it goes to the end and come back to the original place but when we use forwards when we click the circles goes and stays at the end but we want this animation when we click uh on the in this position when we click we want this circle to go back so we just add the animation in the circle this is a slide off sorry the toggle off yeah toggle off 0.4 second and linear and also forward so we have now the cool animation the next things we're going to do is to add javascript so when we click on this mode we see a dark mode in the body section and also we want to save this mode inside the local storage of the browser so when we someone comes to our browser one time and turn on the dark mode each time he comes back to the website see our website in dartmouth so see you in the next all right in the last section we have finished with the styling our project using css we made a cool animation for our toggle bar and in this section we're going to add functionality to our project using javascript we're going to change the background color of the body to the dark mode when we then we toggle on and we change it back to the white or daytime mode when we toggle off also we're gonna save this mode inside the local local storage so when a user comes to our website several times always see the same dark mode in our in our website so first we need to create a javascript file so on the left side in the explorer section we right click and we click on new file to create a javascript file we name the file index dot js we bring this in this window and as you may know before using javascript we need to add a link to the javascript file within the html code so we go back to the index.html and just at the end of the body tag we add a script tag so we write sc and we click on the second auto suggestion the one with the src as both files i mean index.html and index.js are located at the same directory we just need to write index.js for the url now we can use javascript in our project first things we need to bring to our javascript file is this this input so we want to know this input is checked or not so it has a class of input and for returning a element with a class we can use a query selector method so here inside the javascript file we create a constant and we just say input element and we just inside document we add a query selector method and inside a set of parentheses we just write dot input so we get the input we can use alt c to turn on the word wrap so we can see the code clearly if we console.log now the input element we just say input element and we open the console using this hamburger icon and open dev tools pane and inside console we get the input which is check box if we check if this input is in the check mode or not we can just add dot checked and as you can see as default is false if you refresh the page we see that always it's false all right when it in the false mode we want this we want this body to be in the white mode and when it's true we want it to be dark so we add a function here we just say function and update for example body and we just say if the inputs the checked is true so this this is true then we want to change the body's body elements we we haven't imported the body in our javascript yet because the body is only a tag which we can use query selector as well we just say const body element we add a document dot query selector and inside a set of parentheses we just write body all right so we set the body we change the body the background color of the body by using a style method and that just say background and we set it to be if it's checked we want it to be black and if not we want this body element dot the style dot [Music] background to be white all right so now the check is false but if we change this input we just say input dot checked equal to true so and we call this function we just say update body you see the background color of our body became black and if if we change this true to false we get the white color and also we can add an event listener the click at the change event listener to this toggle mode so when we toggle on we we update the body based on the uh checking status so here we added we bring this [Music] toggle the toggle class is this one the label delay yeah sorry the input yeah we already import returned input so we added event listener to the input just the input element dot add event listener the event we want to check is just the input and we gonna trigger a function when the input change from false to true or true to false the only things we need to do is just update the body we call this function here so when we turn on you see we go to the dark mode and when we turn it off we go to the day mode your light mode all right so let's add some transition to the body so we can see this one more beautiful so we just say transition 0.4 seconds so when we turn on we see a transition in the color the next things i would like to do is to add this turn on and turn off mode to the local storage and save this true or false so when we turn on when we when someone comes to our website for the second time based on his previous setting he gets he see our website so we just need to update our we make a function we call it update local storage we just need to save we just use local storage dot set item method and the item we want to save we just call it mode and we need to save this input that check as a string because in this in local search you cannot save the boolea things like true or false so we just use json dot stringify method i don't know what happened a string yes sorry json should be capitalized that is stringify method and we the things we want to stringify is this input input element.checked so here we write input element dot checked [Music] so if inside the web developer tools and applic inside the application and we go to the local storage and we choose our website so when we click on this one so oh we need to call this function too so inside the add event listener before after updating the body we need to update the local storage too so when we click on this button we see that we have a key here with the name of mode and the value is true when we turn it up it becomes it becomes false so when we put it in true and when we refresh the page this one is stay stays true but we have to call it at the top instead of just saying input elements that check false we need to we need to call the local storage so we just say local storage dot get item instead of set item and the item we want to get is mode all right true but this one is in the is is a string we want to change it back to the boolean so we need to use json.parse to return the json from the when first we we use the stringify to to turn it to string now we need to use parse to bring it back so now as you can see the mode is false we can turn it on to true and someone comes to our website again and refresh the page and still see our website in the dark mode as you can see here let's install this button in a better way so instead of using salmon color let's use the white color in the dark mode and let's change the circle the color of circle the background color of circle to [Music] black in the dark mode so now we see a more beautiful button in the dark mode and in the light mode that was it for our project i hope you enjoyed and many learned many things see you in the next project all right welcome to another project in this project we are going to create an auto text effect animation as you can see from the final version of our project we have a typing effect here which shows the careers of the person we're going to create these typing effects using javascript and as you can see the careers change after each other for example the first one is youtuber then we have web developer freelancer and finally we have an instructor an instructor has n instead of having a and we're going to learn the ternary operator to create such a conditional statements so see in the next section for the html part of our project all right let's start our project first we open the visual studio code we close the get started tab and here we click on file and open folder i would like to create the project as usual in my desktop but you can create it anywhere you like in your computer so we click here and we click on new folder button to create a new folder we name the folder auto text effects animation and we press enter and here we click on select folder and we close the get started tab again here now we can create our html file so on the left side in the explorer section we right click and we click on new file we name the file index.html so we write index dot html and we press enter now we have our index.html file here on the right side which is completely empty but we can use an exclamation mark to [Music] create an html5 boilerplate so we write an exclamation mark and we press and choose the first auto suggestion here you can see the html5 boilerplate we can use alt c to turn on the word wrap to see all the code as you can see now we have the doctype which tells the browser what version of html the page is written in and for html5 we just leave it as html then we have a html tag which covers everything with the lang attribute that sets the language of the page which is english in our case then we have the header and the body inside the header we have three meta tags and a title tag the chart set attribute defines the html character encoding and utf-8 contains all the characters and symbols and the users won't have any problem seeing our page and it is recommended by html5 the second make it make a meta tab sorry meta tag is for the internet explorer browser and tells the internet explorer browser to use the most recent rendering engine which is edge the viewport meta tag tells the browser on how to resize the page and here the first part tells the browser to set the width of the page to the device's screen and also we have the initial scale or initial zoom level of the page to be hundred percent then we have the title tag which sets the title of the browser we open the browser here inside the visual studio code using the live preview extension that we have installed so we right click and we click on live preview show preview here on the right side we can see our browser which is completely empty but with the title document let's change the title to be the name of our project which is auto or auto text effects animation we close the explorer section by dragging this line to have more space and we can see all the codes in the body section we just have a container i mean the div with the class of container and inside the this div we just have a h1 that's saying i am a youtuber so later using javascript we're going to add some [Music] auto text effect that will change this youtuber to other carriers like web developers of freelancer so for now we just hard coded the h1 here so we can in the next section we can use css to style our page so see you in the next section for the styling our project alright in the last section we have finished with the html part of our project in this section we're going to start adding some styling to our project using css so first we need to create a css file so in the in the left side we open the explorer section using ctrl shift e or we can open it here in the view menu explorer and here in the left side we right click and we click on new file or just we click here and we name the file style dot css and we press enter before starting our project using css we must include a link to the css file within the html code so we go back to the index.html and just under the title tag here we add a link tag we just write link and we click on the third auto suggestion the one with the css as you can see now we have a link tag with the relationship between the html file and the external style sheet which is a style.css file and as both files the index.html and the style.css are located at the same directory we just need to write the style.css for the url an href attribute defines the destination of the link or the url all right now we can use css in our project we save the and we close the explorer section and we go to install.css to start start styling our project we open the browser and increase the size a little bit more and we start with the body section we remove the margin the default margin of the body which is the space around the body section by using margin 0 as you can see we don't have any margin anymore and we change the display to flex so we can bring the this title to the center horizontally using justify counters content center so we write justify content and we choose center for this property now we can see our text in the center horizontally and for bringing it to the center vertically we just need first to set the height of the body to be 100 percent of the viewport's height which means the hundred percent of the screen size and we set the align items to be center now we can see our text in the center both horizontally and vertically let's change the background color to be for example salmon [Music] color and let's change this the font of this text and if i would like to bring some fonts from google font so we go to the to the desktop we click on google chrome or any browser you would like to use and here we search for google font [Music] and in the search results we click on fonts.google.com here you can see many texts uh fonts you can write here for example i am a youtuber to compare the phones with the text you want to have i i i'm actually decided i have actually decided to have the font permanent marker for our project but you can choose any font you like for your own project so we click here and we click this select this style and here on the right we click here and on the imports and we copy the code in the middle of the style tag so we copy it and we go to the vs code and just at the top before the body we paste the code using ctrl v we can use alt c to turn on the word wrap to see all the code and now we can we can go back to the browser and just under this code we have font family permanent marker and a cursive marker backup so we copy this we go back to the visual studio code and just under this we paste that now we can see the the font has been changed to the permanent marker i think that's it for our css styling in the next section we're going to use javascript to change the this youtuber to other careers and also add some auto text effect that shows typing as well so see you in the next section all right in the last section we have finished installing our project using css in this section we are going to start adding functionality to our project using javascript so first we need to create a javascript file so we open this explorer using ctrl shift e and on the left side we right click and we click on new file we name the file index dot js sometimes the the code files goes to the right side which has the browser you can bring them just by dragging the tab and bring it here so now we can see the browser in real time before using the javascript for our project we must add a link to the javascript file within the html code so we switch to the index.html file and just under this div and at the end of the body tag we just add a script tag we just write sc and we click on this on the second auto suggestion the one with the src now we have a script tag and the src attribute defines the destination of the link as both files i mean the index.html and the index.js are located at the same directory we just need to write here index.js for the url all right now we can use javascript for our project so we go to the index.js we close this explorer section by dragging this line first we need to get the container of the project i mean the div with the class of container because we want to manipulate it inside this div so by for returning active with a class we just need to use query selector methods so we just write here constant and we name the constant container element [Music] and we write document.queryselector and inside a set of parentheses we write the selector for that class which is dot container we can use alt c to turn on the word wrap and we can see the code clearly in that way all right the things we want to do is just manipulate this container we just for example use container.element and we change the inner html for example to an empty string or whatever you want to write and you can see it here so before doing that because we can we want to add some html tag so we add a backtick and we just open the backtick and we go back to the index.html and we cut this h1 tag and we go to index.js and we paste it in the middle of the backtext so we can see the same things we had now as before but we want this youtuber to be dynamic we want to have more careers so we make it an array here so we create a constant and we set the array name to career or careers we just create an array and the first element would be the same one we had youtuber just make it capitalized and the second career would be for example web developer the third one would be freelancer and the last one just say for example instructor all right so in order to see the different careers here we can delete this and instead of this we have some variable and we target this carrier carriers and we just say for example the first element we get youtube the second element we get developer we just need to change the index inside the array 3 we get the instructor all right we set it to 0 so instead of having this hard coded we can create and at variable we just say carrier index and we set it to 0 as default and we just instead of this we just write carrier index all right and so we just need to have a and bring this inside a function so we create a function and we name the function update text and we cut this one and paste it inside this function you can call this function once to have the text and also we need another variable to have the index for the character of the each element because we want to add the typing effects so we just say character index and we set it to zero and [Music] instead of writing carriers carriers and carries index to get the full element we just add some a slice method here a slice method actually returns parts of a string and if you want to get only for example the first character you just write 0 and 1. so you get the first character or you want to get this the first two characters you get just right zero and two so we need to make this number the second number dynamic two and we just use the character index so instead of that we use character index so now the index is zero but we're going to increment it using plus plus and we're going to have a set time out to sorry set timeout to call this function more than one time until after a delay so for the delay we just say 400 milliseconds and we don't need a function because it's just one one line of function we just write down update text is enough so what now you can see that when we refresh the page the youtube starts typing to the end but we don't get the next element yet so we need to add a condition here we just say if this character index reached to the to its end which is the this element length so we just say carriers carriers array which is here and we get the the current index we could the carrier index so inside this we just say carrier index so now and we just say dot length so when the this character index increment incremented and reached to the end we can activate this statement or and we just need to write here increase the carrier index so just say carrier index plus plus so we increase that one time so when we youtube finished it goes to the next one but we need to reset the character index as well so it comes to the first for the next element so we get youtube oh sorry we should set it to zero not increment yeah now we get youtube after that we get we have developer and we have freelancer and finally we have instructor but after instructor stops and the reason we don't get the last letter is the we should put this character index plus plus at the top not after this so we cut this and bring it to the top so now we get all the elements correctly so here the youtuber should we have a we should add a r here so yeah so we have freelancer instructor and after instructor it stops working in order to reset it again we need to reset the character in sorry the carrier index to zero as well so we added condition here we just say when the carrier index reached to its end which is the number of this array so it's carriers dot lengths so in this in this case just set the carrier's index to zero so now we have youtuber web developer freelancer and finally we have but we have a year instead of uh having n for instructor we need to have a n instead of a because we we should say i am an instructor so for in this case we need to change this a heart coded a here so we have i am a instead of a we create a variable and we just say if this [Music] the element which is a carrier carriers and the elements we can get by just saying carrier index if this one the first character of this one then we can use the slice again and we get just the first character we just say if this one is equal to i for instructor so we just say use n [Music] and otherwise just use a so now we have i am in youtuber i am a web developer i am a freelancer and finally we have i am an instructor yeah that was a quick project but it had too many things that you could learn i hope you enjoyed and learned many things [Music] if you have any question please let me know in the q and a section but see you in the next project welcome back to another project in this project we're going to create tabs section as you can see from the final version of the project we have an image on the left side and we have a tab section on the right side each tab has some text and a title and if you change the tab we see that the title and the text has been changed also we have a very beautiful hovering effect for each tab and also when we click on each tab we see a change in the background color of that tab we're going to use javascript to change the tabs and the title at the same time and also we're going to use some css properties and hover css pseudo class to change this beautiful hovering effects so see in the next section for the html part of the project all right let's start creating our project in this section we're going to start using html so let's open the vscope we close the welcome tab we click on view click on explorer and here in the left we click on open folder we choose desktop and we create a new folder we call the folder tabs project we select a folder here we close the welcome tab again and here in the left we create our index.html we right click click on new file and we name the file index.html we can use an exclamation mark to create the boilerplate of our website so we write an exclamation mark we click on the first auto suggestion here we change the title of our project so we write tabs project we save the file using ctrl s we go to the desktop and we click on the folder that we have created and we double click on the index.html as you can see our website is completely blank and we have a tabs project title we go back to the vsco and we continue the html in the body section we created div with the class of section center so we write div dot section center we press enter and we open the div here we create a div with the class of image so we write div dot image we press enter we open the tag we create an image tag here we write img we click on the first auto suggestion and in the source section we have to put the link of the our image let's go to the browser and we search for a background image we click on the images we choose the image that we like for example this one we right click and select copy image link we go back to the vs code and in the source we paste the link in the alt section we just write image we save the file we check the browser we go to our website we refresh the page now we can see the image in our website later we are going to install this image using css but we just leave it for now let's go back to the bs code and we just under this div we create another div with a class of tabs so we write div dot tabs we press enter and we open the tag inside this div we make a button with the class of button so we write button dot button [Music] we press enter and inside this button we write a step one we copied this button two times using alt shift down arrow we change this to step two and this one to a step three we save the file we check the browser we refresh the page if you scroll down you can see our buttons as i mentioned before we're going to style the images and the buttons later in the css we go back to the vsco to add our texts just below this div we add a div with the class of tabs content so we write div dot tabs content we press enter two times to open the div and here we add a div with the class of content so we write div dot content we press enter we open the div here we add h3 and we write step one under this h3 we had a paragraph and we write hundred words of lauren epson if you write lorem for example if you say four you're gonna have four words but if you write down lorem 100 you're going to have 100 words of laurent epsom so we save the file we check the browser we refresh the page now we can see the step 1 and the paragraph let's add two more steps we go back to the vs code and we copy this two times using alt shift down arrow we just changed this one to step two and this one to step three we saved the file we checked the browser we refreshed the page now we have three steps with three paragraphs that was it for our html in the next section we're going to start styling our website using css so see you in the next section all right in the last section we have started creating our website using html in this section we are going to start styling our website using css let's go to the vs code and here in the left we create our css file we right click click on new file and we call the file styles.css we go back to the index.html [Music] and in the top just below the title we create a link tag and we click on the third auto suggestion we just changed this style to styles and we saved the file now we can install our website we go to the styles.css the first thing we are going to style is the body section we just write body we open a set of curly braces and we add a margin 0 and padding 0 to remove the default margin and padding from our website so we write margin 0 padding 0 we save the file we check our browser we refresh the page as you can see now we have removed the default margin from our website let's change the font family background color and the font color in the css we go to the vs code and just below this we write font family we change it to send serif we change the background color before writing down the background color i want to introduce you to a useful website that suggests the best color compliations let's go to our browser and here we search color hunt and we click on the first website colorhunt.com you can find many color compilations in the website for example here you can choose the trendy or popular ones as you can see there are plenty of colors that you can choose i already choose one for our website here i want to use this pink color for background so i copy this we go to our vs code and here i paste the color i just added hash sound here and we save the file we go to our website we refresh the page as you can see here that the background colors our website has been changed to pink and the font family is scent serif as well let's change the font color to gray we go back to the via school and here we write color gray we saved the file we checked the browser refresh the page now we have a lighter color for our fonts let's style the image we go to the vs code and just below this we write img we open a set of curly braces we change the display to block to show the image in the full width and we write the width to be hundred percent [Music] we change the border radius to be 0.5 rem to have a rounded borders we write object fit cover to always have the same ratio for image and we change the height to be 30 rem and we save the file we check the browser we refresh the page now we have a smaller image with rounded border let's start the section center class here this class this is the class that covers both the image buttons and the steps so we go to the cells.css and just below this we write dot section center we open a set of curly braces we change the width to be knight tvw which is a 90 percent of the viewport we save the file we check the browser we refresh the page as you can see the image is only covering 90 percent of the width even we make the website smaller we have the same ratio maximize the website and next we are going to change the margin to bring the image to the center at some max width main width and the padding so let's go back to the vs and just below this we write margin 0 up and down and auto left and right which brings the image to the center we add a max width 1170 pixels min width 340 pixels and padding five rem top end button [Music] and zero left and right we save the file we check the browser we refresh the page now we have the image in the center we have some padding at the top also our steps and buttons are centralized as well we decrease the size of the website as you can see the ratio is always the same we add some merging button to the image we go back to the vs code and here we write margin button to rem we save the file we check the browser we refresh the page now we have some margin at the bottom of the image let's maximize this the next things we are going to install is the tabs class here this class that covers all the buttons we go to the cells.css and just below this we write dot tabs we open a set of curly braces we change the background color we go to the color hound website and we choose this color we copy this we go to the bs code we add a pawn sign and we paste the color we save the file we check the browser we go to our website and we refresh the page you can see the changes here let's add some border radius and change the grid template rows to auto let's go back to the vs code just below this we write border radius 0.5 rem and grid temperature rows to be auto and 1 fr we save the file we check the browser we refresh the page we made a mistake here we have to go to the index.html [Music] and this class of tabs should cover everything including the buttons and the steps so we cut this div and bring it here we save the file we check the browser we refresh the page as you can see the background color of all the buttons and the steps are different now also the border radius is rounded now the other things we need to do in the index.html is to cover all these buttons by another div so we write a div here with the class of btn container so we write btn dash container we press enter two times and we cut all these buttons and we bring them here we save the file we check the browser we refresh the page we shouldn't see any changes but later we're going to use this class btn container to style our buttons let's style the buttons the class that we are going to tap is this button here so we go to the cells.css and just below this the right button we open a set of curly braces and we write padding one rem top and button and zero left and right we remove the border by writing border none we change the font size to be one rem [Music] background color we choose here this color we copy this we go back to the style.css we add a pawn sign and we paste the color we change the cursor to pointer we add a transition to be all 0.3 seconds and linear also we add a letter spacing 0.25 aria we save the file we check the browser we go to our website and we refresh the page we can see the changes in the buttons let's start the btn container we go back to the vs code just below this we write dot btn dash container we open a set of curly braces we change the display to grid and we change the grid template columns to be 1fr 1fr and 1fr we save the file we check the browser we refresh the page as you can see now the buttons are covering all the width the problem is now we remove the border radius here we just want to add the border radius for the first and the last button okay let's go to the vs go to add the borders just below this we target the first button so we write dot button we are the nth child here and we choose the child which is the first one for the first button we want the border top right radius to be 0.5 aria so we write border top left radius to be 0.5 aria we save the file we check the browser we refresh the page now we can see the rounded border let's do this for the step 3 button as well we go back to the cells.css and here we write dot button child we change this one to three we open a set of curly braces and we write border top right radius to be 0.5 ref we save the file we check the browser we refresh the page and we can see the rounded border let's change the background color of the button when we hover over it so we go back to the solves.css and just below this we write dot button we tap to its hover we open a set of curly braces and we change the background color from the color hunt we choose this one we copy this we go back to the salsa css we write a pound sign and we paste color we change the font color to be white we save the file we check the browser we go to our website and we refresh the page as we hover over the buttons we can see that the background color is changed and also the font color is white as well let's add some padding for the tabs content here we go back to the vs code and just below this we write dot tabs dash content which is a class from here this one we open a set of curly braces and we write padding two rem top and button and one a half rem left and right we save the file we check the browser we refresh the page now we can see the padding here let's add a media query so when we have a bigger screen the image and the tabs would be at the same row so we go back to the vs code just in the bottom they add a media query the other add sign media we click on the second auto suggestion instead of this screen we open a set of parenthesis and we write min with 992 pixels this means if the screen is bigger than this size just apply these css so we write here that image we open a set of curly braces we add a margin button zero and for the section center we write here dot section center we open a set of curly braces we write display grid we change the grid template columns to be 1fr 1fr we had a column gaps just 2 aria we save the file we check the browser we refresh the page as you can see now we have the image and the tabs next to each other but if we decrease the size of the screen lower than 992 pixels we have the image and the tabs on the top of each other in the next section we are going to use javascript to show the steps related the one that we click on the button first we are going to hide all the steps and when we click on each button we are going to see the related step we are going to do this using javascript which allows us to remove and add a specific class so see in the next section all right in the last section we have installed our website using css in this section we are going to start using javascript to add functionality to our website first we are going to hide all the steps and then we are going to use javascript to bring this step related to the one that we click here let's go to the vs code and we add a content here dot content we open a set of curly braces and we change the display to none we save the file we check the browser we refresh the page as you can see now we don't have any content in our website but we are going to add a class called live which brings back the content if we add that class to the content so we go back to the via school just below this we write dot content dot live we open a set of curly braces and we change the display to block we save the file we go to the index set html and if we add a live class here we're going to see this step one so we test this first we save the file we go to the browser we refresh the page now you can see the step one we can test this for the step 2 as well we go back to the vs code we delete this live here and we add it live here we save the file we check the browser we refresh the page now we can see the step two let's do the same thing for the button as well we go back to the vs go to the salt.css and just below this we write dot button dot live we open a set of curly braces and we change the background color to be as the same as the tabs one here we copy this we go down and we paste it here we save the file we go to index.html we add the live class here we save the file we check the browser we refresh the page as you can see now the step one has the same background color as here but the problem is if we hover over it the font color would be white we want the font color to be black when the tab has a class of life so we go back to the vs code we go to styles.css we go to the section that we write button hover and we add the nut here we open a set of parentheses and we add the dots live here we save the file we check the browser we refresh the page now if we hover over it the color remains black let's add the functionality using javascript in a way when we click on each button the live class would be added to the related button so we go back to the vs goal and here in the left we create a javascript file we right click click on new file we call the file index.js we go to the index.html just at the end of the body we add a script tag and we click on the second auto suggestion in the source section we write index.js after saving the file we can use the javascript file we go to the index.js first we create a cons here we call the cons tabs we tap to the document that's query selector we open a set of parenthesis and in a double quote we write dot tabs we save the file we just need to add the add event listener to track the clicks on the tabs we just write tabs dot add event listener we open a set of parenthesis and we set the click which means if someone click on this apps and we create a callback function we open a set of parentheses we write a fat arrow and we open a set of curly braces here in the parenthesis we can get the event so you write event here and we console log event.target we save default we check the browser we refresh the page we open the web developer tools using ctrl shift c we go to the console section [Music] and now if we click on any buttons we can see the button tag here if we click here we can see that this button has two classes button and live in order to understand which button we are clicking we need to add some ids to the buttons so let's go back to the vs code we go to index.html [Music] and we add a data id to each button for the first one we write data id equals to a step one we copy this we paste it here and here we just changed a step 1 to step 2 and here to step 3. we save the file we go to the browser now we refresh the page if we click on a step three now we can see the data ids step three as well let's add the data set as well we go to the vs score in index.js instead of only logging the event.target we add the data here dataset dot id we save the file we check the browser we refresh the page now if you click on any buttons for example this one we only get a step 2 or here we get a step 3. by using this track we can easily identify which button is clicked by the user and we can add the class live to that button and the corresponding content let's go back to the index.js we just saved this id in a cons we write cons id equals we copy this we paste it here and we delete the console log and here we write if a id which means if the id exists we open a set of curly braces first we target all the buttons here for example we write down const btns equal document that quarter selector all we open a set of parenthesis and we write dot button which is the class here for all the buttons now we loop through all the buttons here we write down btns dot for each we open a set of parentheses and we write down a callback function we open a set of parenthesis again we write a fat arrow and we open a set of curly braces and here we get each button so we write btn first we remove the live class from all btns we write btn dot class list dot remove we open a set of parenthesis and inside the double quote we write live and then we add the class to the one that the user clicked so we write event dot target dot class list dot add we open a set of parentheses and inside the double quote we write live we save the file we check the browser we refresh the page if we click on step 2 you can see that the background color of the step 2 has been changed to the one that has the live class we can see that in the inspector as well we select each element for example this step 3 and we click on the step three as you can see that live class has been added to the button and if you click on the step one the live class is removed from the step three button the other things we need to do is to show the steps here related to the button so we go back to the vs code we create a const here we call it articles equals document dot query selector all we open a set of parenthesis and inside the double quote we target the dot content which is the class here this one and it's available in all the articles as the same thing we did for the buttons first we have to remove the class live from all articles and then we add to the one that the user clicked we set the first article as a default so we cut this live from here and put it to the first one which allows the user to see the step one as a default we save the file we go to the index.js we look through the articles we write articles dot for each we open a set of parenthesis and we create a callback function we get each article here first we remove the class live from all articles so we write article dot class list dot remove we open a set of parenthesis and inside the double quote we write live we save the file we check the browser we refresh the page as we click on the step two we don't have any articles because the class live has been removed from all articles as the same things we did for the buttons we should add an id to each article so we can identify which article has been selected by the user so we go back to the vs code we go to index.html [Music] and the other id here we call it a step one we do the same things for the others we change this one to two and this one to three we save the file we go to index.js here we create a const we call it element equals document dot get element by id and in a set of parenthesis we write the id which is the id from here for example if the id is step one we choose the article with the id of step one and we put it in the element cost we just need to add here element dot class list dot add and we add the class live we save the file we check the browser we refresh the page as you can see the default button and the article is step one and if you click on the step two the bottom is a step two and the article is a step two as well we tried again we click on step three as you can see now our code is working fine let's inspect the article here here you can see the step 3 if you click on step 1 you can see that the live class is added to the step 1 and is removed from step 3. we try it again we click on step 2 now you can see that the live class is attached to the step 2 and has been removed from step 1 and step three also you can see that our website is completely responsive if you open it the image and the steps are at the same row and if we decrease the size they are at the top of each other that was it for our project i hope you enjoyed and learned many things please let me know your opinion about the project and wait for the updates i'm going to add more projects to this course thanks again and see you next time

Channel: JavaScript King

Views: 781,752

Keywords: html css javascript project, html css javascript website design tutorial, html css javascript website, html css javascript website tutorial, html css javascript projects for beginners, html css javascript project portfolio, html css javascript project website, html css javascript project source code, html css javascript projects, html css javascript projects with source code, html css javascript projects for resume, github html css javascript projects, javascript, html, html css js

Id: EWv2jnhZErc

Length: 673min 45sec (40425 seconds)

Published: Sat Apr 30 2022