Let's build a full RESPONSIVE website with LIGHT & DARK MODE using TailwindCSS & JavaScript

Hello friends and welcome back to another video in this one we are going to clone my own website as I mentioned in the previous video which was this YouTube API and we are using tailin CSS for styling and JavaScript for functionality so let's get it started and in my project folder I have just a logo and my notes and in the notes I have the URLs from YouTube API and if you don't know how to get these URLs which is required for fetch API please watch the previous video on YouTube API on how to get these so let's create an index.html file and get the boiler plate I will try to keep this video organized and clean and as quick as possible so let's start with some meta tags meta tags so some comments just to make things organized we will have some links we will have scripts and this is the title So within the body body we will have navigation we will have the main content which will contain the heater section the portfolio section coding gaming about me and footer so that is the structure and I will uh we will go step by step we will go Section by section because actually the main part of my website you know the majority of functionality and work is done on the nav and these are quite easy to do compared to the nav so let's just start with navigation all I want to do to create nav and within that I will make some comments so this will be nav bar and then underneath will will be mobile nav container so the nav bar will be the div and within the div I will have an a tag which would be my logo image so it's a logo and the alt is logo and then underneath that so I will have another div which will contain first the desktop nav items then it will be nav BTN or mobile nav BTN and then theme switcher so for this one I will have another div with a tags in it so and these will be anchor tags so portfolio and then coding gaming about me about me so and this one when I click on the image Let's uh refresh this one when I click on my image it should actually go to to the top of the page this is too big let's give it a width of 100 okay so which be navigation and I will give this ID to the navigation itself so the desktop nav doesn't need a navig uh an ID but what we need here is for the button we will have an actual button with the ID of nav Das opener opener and it just says menu that's it there we go let me zoom in here a bit 150 and for the theme switcher another BTN with the ID of theme switcher and it will contain an SVG and we will bring the svgs when we start with Tailwind because we need to you know style them that's it for the nav bar again it's a div right there right and this is the nav bar and we are still within the nav so the mobile nav container will be another div which will contain two divs one will be the top section that has the text that just says navigation and then another button which will contain an SVG and the ID for this one would be nav Closer Closer underneath I will have another div which would be just these repeating these it's easier to repeat them rather than just to change them by with CSS okay so that's pretty much it for now and uh there's one more thing regarding the navigation or related to navigation is the background blur so if I go to the mobile version of this version of my website like this so you know when we click on this one there is a blow background so that's just a div above the navigation we can put it right above the nav bar for example we will style it later on so right up above the nav or I we say nav backdrop and just create a div with nav Das backdrop so let's format the document let's leave it as it is and bring in Tailwind let's go to the Tailwind website there we go get started and we I already have a video on how to do this as well so I will put this in the description okay after we install tailwind and you can see it's installed we just need to initialize the config file T CSS in it and there we go this will give us the config file which we need to say where are the content of the files which will contain the CSS classes so any any folder any file with the extension of JS and then same root directory index.html that's it and I will come back to this when we want to do the dark and light theme all right now let's start with styling things start with navigation itself up there okay so we want to say class fixed top z inser x z that means left and right zero so leave it at that for now uh I don't want to do anything with this one for now and the image which is this a tag so let's say class block height 10 with 10 uh rounded full and overflow hidden okay so I need to so I forgot oh okay uh before I'm doing all of this I forgot the whole new section on tail so we actually need to create a folder call it CSS and within that we will create a file called it input CSS and copy these directives and put it back in here save it and now in the terminal say nbx Telvin CSS input or - I get that input file we just created and then output it to the same folder let's call it output. CSS and then watch it there we go okay so I'm going to bring this down so we have more space and in the index. HTML under the link I'm just going to link that CSS file we just created there we go now it's working okay so on the nav bar itself the nav bar container I'm going to say padding X6 padding y4 and flex items Center justify between now if we go back to desktop uh this one so this is the desktop we're working on and I'm zoomed in here 125% so you can see it goes all all the way across we can actually I don't want that so on the body itself first of all let's apply some Global classes like Max width should not be more than 1280 pixel and the MX should be Auto which means Center and let's give it a text so a global text color and I'm going to use zinc categor so zinc 900 as my Global text color and the BG of course is white background now this will fix the body if we go here let me refresh this one oh because I have nothing in the body sorry so actually the reason is I have nothing in the body so let's add something under the main just so we have something and I'm just going to say div lurm 500 Words and close it I just want to have something so we can play around there we go and you can see uh this is not working because it's fixed right so in here so we already applying this on the body but we need to also apply it on the nav bar this one not the nav itself there we go it's working and this will be a container so we will cover that let's give the padding top to the main class padding top 20 yeah it will push it down a bit so we can see the navigation okay uh let's go back to the navigation and we are still on the nav bar we are done with the logo we are done desktop initially it should be hidden and when we are on a medium or larger screen we want to set it to flex so medium means 768 pixel or or higher okay so for now let's talk about the button okay class I want to give it a height of 10 as same as my logo padding X6 rounded 3XL and let's give it a shadow of large and Shadow color should be zinc in 900 with the opacity of 5 BG should be zinc 100 and let's give it also a ring of one ring should be zinc 900 F 5% opacity there we go sometimes I need to save two times so it works all right now I want to apply these classes to the same buttons everywhere or it's kind of a card thing actually so I want to apply a custom class here and select the layer components and then apply those classes so let me grab everything except the height and padding because those are specific so cut these and add it here okay so I'm making a mistake here so I forgot to actually give it a name I'm just going to call it card so this is like a CSS so we say Dot card and then apply those classes so there we go save it back here I'm just going to apply card it's the same thing I also want to give it font medium and hover effect so when we hover over it the text should be uh let's say sky 500 so it's kind of a nice blue again save two times all right there we go now we want to apply the almost these same classes to this button down here so I want to say class height 10 with 10 and card okay that would work now uh when we bring the SVG we want to make sure it's centered so we want to say grid Place items center now on the wrapper itself up here so this is the wrapper of those items okay we want to say class Flex items Center and let's give it a gap of six nice okay so I will bring the SVG in a second but let's go to the desktop version which is that one and if I zoom in so we can you can see this so we have to hide this one first we have to hide the menu button mobile menu so MD colon hidden that will go away now on this one we want to say Flex items Center apply the card class again let's give it a gap of 10 I one okay gap of 10 uh padding six and height should be 10 so of course uh let's give it font medium to like the button font medium for all the a tags in there so now we want to give it hover effect so I want to create another custom class here let's call it nav daslink and uh it's just going to be two classes two utility classes apply padding Y2 and un hover text SK Sky 500 that's it so now I can just multi select these by holding alt on my keyboard and say class nav link okay so now we can hover on them so again on the mobile version we don't see it but this is the mobile this is the desktop so now let's do something else I think uh let's bring the svgs so I I have one SVG here and this should be like a sun icon so for the svgs I'm using this website called icon or I icon o I don't know so we just want to search Sun and this one copy the SVG bring it back here to the project and format the document let's delete some of this I don't want this part I don't want with height fi stroke and stroke width I don't want the color and same as the path I don't want those options now we are just getting a circle let's use the class and say fill should be none a stroke should be two stroke color should be zinc 900 and width should be maybe six height should be Auto and save it there we go now let's give it a hover effect and for that if we say hover sorry a stroke Sky 500 so we're saying a stroke should be a sky 500 when the hover over it and it works except if we hover over the button it doesn't it only works on the SVG itself so we want to do that when we hover over the button and we can apply a group utility class to the parent and then instead of hover say group hover there we go so now on the button itself also applies that hover effect so this SVG will be repeated so again let's create my SVG class and apply the classes we have here all of it if we need to change something we can go back and forth save don't forget the semicolon and just here say my- SVG all right so we're good let's talk about the mobile nav container so this container right here so under parent itself I'm just going to apply that card class first so we can see where we working let's give it padding four and this should be fixed as well and inser X should be six which is the six padding on the navboard okay and let's leave it that as that for now on the div which is the second div here we want to say so that's like a top section Flex items Center and justify between and let let's give it padding bottom two margin bottom two and Order bottom and that's one pixel border zinc 900 and 5% opacity that's there it is on the text so the navigation text we want to make sure that's a muted text doesn't mean anything it's just the title text uh zinc maybe 600 think that's cool what else text super duper small padding Y 2 on the button which is an SVG we can just copy these things the SVG not the button itself the SVG and add it here right and change this D attribute because that's the icon so back to Icon noer and if we search for cancel we get this icon copy the SVG back to the project and in my notes I'm just going to paste that so I will grab the D attribute alone and replace it with the SVG that I copied so if I save it now and we get that SVG right there so on the button itself again the hover effect would not work because we need to apply that group effect so on the button I want to say class group and also give it some padding y That's it there we go so that's the top section for the bottom section I want to say class Flex Flex column sorry Flex column and GAP four and also apply the nav link class to all of this so class nav link there we go oh font medium don't forget that so font medium all right now let's start uh talk about the blur effect should that should go behind all of this so let's bring it up uh it's we put it in the navigation so up top right nav backdrop let's give it a class of fixed and oops sorry inset zero that means all around BG zinc 900 with the opacity of 10 let's save it okay so you can see it's kind of let's make it more you know so evidence so we can see it and now let's give it a backdrop blow SM so there we go it blurs the background now we want to make sure this goes behind all of it so we want to give this the Z index of let's say 40 now it goes down so for the nav container which is this one this this one give it a Z50 okay so that's what we want so we want only this part even not even that part actually I want the nav you see here I'm giving it inser X but I should give a top three because I want it I want it to cover that navigation bar or nav bar so I think we're good with navigation and let's check the website uh version okay we need to hide that one of course so this nav container should be hidden MD hidden on the desktop so we don't have it also the backdrop so this is the backdrop we want to make sure MD is hidden uh this is not necessary this is just for precaution because actually when with with JavaScript you would be only uh you would be able to open and close it only with JavaScript so it would be hidden anyway unless unless you use JavaScript but I want to make sure even if something fail this is not going to interfere and it just pops up and ruins everything right so on desktop we see it we don't see it but on mobile we do let's give uh make sure we have the IDS and start with JavaScript so we have the nav backdrop okay we have the navigation itself um we have so we need the nav opener there we go we need the theme switcher which is actually later on for the dark and light mode so on the nav container I don't have an ID so this needs an ID of course so I'm going to say ID Mobile nav container all right let's create a folder and let's call it JS of course within that let's call another file navigation.js and I'm using a different JS file I'm going to use different JS file let's link it first on the top so under the scripts I'm going to say script so Source go to JS navigation JS and make sure you add that the fair attribute so it should be pared in first and let's see so let's grab the items so D elements and let's start with const navigation should be document. query selector navigation I want to repeat this one for the nav backdrop so we have nav backdrop we have nav opener so this should be open opener we have nav closer closer and we have the mobile nav container so mobile nav container we actually need another thing but I will add it later mobile nav container all right so let's make sure we are we grabbed all of this correctly and I start by adding um some classes actually let's go back to HTML so on the nav backdrop right there we want to add opacity zero and invisible okay and let's create class my transition okay so I'm going to copy this one go to the CSS custom classes add that one my transition because I want to apply a transition so it would be nice and smooth apply transition all duration maybe 300 is in and out and that's it so back to the index.html I want to copy these three classes apply it to The Container mobile nav container because initially it should be hidden or invisible not hidden and you know if we use hidden the op the transition would not work all right there it is so back to JS we want to say take that opener sorry nav opener and add event listener to it it's a click event of course and then what's going to happen and the mobile nav container class list should remove some things so what do we want to remove that opacity zero also invisible let's see if this one works and there it is it works so now we have to apply event lessener to the nav closer I'm going to repeat this one and just say nav closer and add it instead of removing it just add it so this will open it this will close it now I'm going to be repeating this a few times so I'm just going to make it into a function so let's make a comment and say mobile nav closer and function same name mobile nav closer I'm not really good at picking names anyway so what it's going to happen it's just going to do this so let's call this instead of doing that okay so now we want to apply the click outside so I'm just again I'm going to copy this and instead of on the nav closer I'm going to add the event listener on the document itself and some we need to check for an something before closing the nav so first we want to check if it's not the mobile nav container itself so mobile nav container. contains I'm sorry we need to pass in the E uh the event so we want to check that the target it's not on the container itself and the Target that we are clicking is not the same as the nav opener so we I did this before again in another video so that's what's going to happen and there we go so click outside will close it click on this one will close it now clicking on these ones will not close it we want to do the same and all we have to do grab those items and then just uh do the same thing again so we know the nav items these ones there are within this container and they are a tags so all we have to do back in navigation so I'm going to copy paste this one and say mobile nav items instead of container and then use quar selector all and then grab the a tags so this will give me all the a tags and down here I can say mobile nav items do for each for each element add an event listener to each element which would be a click event and just again close the nav so again we click on any of these we'll close the nav and so on so but now we want to bring in that you know backdrop when we open so not only the mobile nav container should remove those classes we also want to remove those classes from nav backdrop okay so oh and then if I copy paste this in the closing nav closer and instead of removing add it there we go now this comes in this goes out and everything works fine great right so this is it this is for the nav navigation closing and opening part let's go back to HTML just a very tiny tweak uh if you want to on the nav drop I would add a delay of 75 so that's like a minimum very small DeLay So it would be com in just a millisecond so 75 millisecond later than the menu and it's kind of nice you see okay let's go back to my website uh where is it so you can see here on the whether on the mobile or desktop when I scroll the nav goes away and then when I go up it comes back regardless of where it is so up down down down up it comes back in so let's do that so in the project back to navigation.js I'm going to create a comment here and say hide and show nav based on scroll so first I want to create a variable down here because it's related to this function and call it last scroll top so rest scroll top should be zero at first and then attach window add event listener attach an event listener a scroll event listener So within that event listener I'm going to create a cons that will be scroll top okay so and equals that equals to window so we want to get this scroll y or so the scroll top is equal to scroll y of the window or the document. document element. scroll top now we need to check for something so if statement so we want to say if a scroll top which is that con we just created it is bigger than last scroll top that is zero initially and windows scroll y window scroll Y is greater than let's say 60 or 70 and I will explain why I create a number there and so what we want to do we want to say navigation itself so we created the navigation ation up here right so the whole navigation bar we want to go to the class list and replace that top zero with top 24 minus top 24 which means it go up right so we want to do that else we want to do the opposite so replace the top 20 I'm sorry replace the top minus top 24 with top zero and at the end we just want to say the last scroll top is equal to a scroll top okay so let's format it save it let's see if it works so if I'm scrolling down it's gone after it reaches 70 and then when I go back up it comes in there's no transition so we can again apply on the nav itself just apply that my transition vs doesn't want to help me all right so there we go it goes away and it comes back in let's also give it a background not on the nav itself but on the nav bar right here let's give it it BG zinc 100 see how it looks all right so now we can play around with these things so on the nav if we give some padding on the nav this will push it in so let's say padding four okay so it looks like that and let's apply rounded 3 EXL if you want to these are all preference but I'm just doing it so it looks like that there we go and if we give the background a bit of opacity let's say I don't know 80 uh 60% and then apply that back backdrop blur and it looks like that so there's a blow now so you can play with this number if you want it to be more visible there okay so let's check the website version refresh this one so there's no scroll here I just have to zoom in so now I don't have enough content to scroll but you kind of see it works let's add more contents down here and I'm just going to add another lurm 500 why not there we go so there that's nice right so let me tell you what's going on here about that number so in the navigation JS what am I doing sorry in the navigation JS I'm adding this 70 and because on mobile versions let's go back here you see like this is for example on a mobile right and when you scroll with uh you know with your finger you're scrolling and you scroll to the top like a quick quick action this bounces up and down at least on iPhone I don't know if it's the same on Android and it bounces up and it messes up the menu so menu goes up and down and then disappears uh but if you put it 70 it will come in even before it reaches the top so it will be in you see it's not going anywhere until we reach it that point okay so that's the navigation okay let's just start with the dark and light theme okay so and this one I'm going to close the navigation and I'm going to close my notes I don't need it don't save it let's go to tailwind and just search for dark and you can see here let me zoom in a bit it says here Tav uses prefers color scheme of CSS media feature by default so that means if an hour I want to close the nav here so we can work a bit better I will open it again later so on the nav you can see here on the body I'm sorry if I say dark so this is the directive for saying apply the dark thing right when it's when it's dark what's going to happen I want the background to be zinc 900 okay so that's one and dark text should be zinc 100 because initially we were saying text should be 900 but when it's dark should be 100 and the BG should be dark if I save this bam it happens because my system preference is dark so this picks up from the system system user system preference and the theme color of Windows is black so therefore this is black so and if you go back to Tailwind see they using they use this dark mode media thing in there in the config JS so I'm going to copy this go back to the project open TN config JS and on top of this object I'm going to paste that so by default is like this media so this is the default so even if we don't put it there it's there now if we say class which means manually and I saved it let's wait for rebuild it it goes back to White because now it expects it to be done manually so let's create a file inside the JS folder so new file let's call it ajs just going to theme switcher or themes whichever works for you and let's first of all let's put it up here so script Source again within the JS file and it's themes. Js save it and let's bring up console let's have the console open here if we get any errors okay so I don't need this anymore because we already added up here now let's go back to tailwind and there is a file here spaghetti. JS and there's a if statement that will check for something we can read it by ourselves so if I put paste it here format it I'm not saving my document yet okay I want to show you something so first this one checks for local storage the key theme and the value dark let's go to the local storage so we go to the application tab here and we have the local storage let me make this bigger so you can see there's nothing there's no key value in the local storage so this one says is there a key that says dark in the local storage no so that's false right and then it says or okay now this says is theme in the local storage at all no and this is negating it right so no but is the window matches the you know this is basically saying is the system dark so it matches the preferred color scheme so this is true there is no theme in the local storage because this is negating so this part is true so this part is false this part is true therefore it's true because it's an or condition and because it's true it's adding the class list dark to the document element let's save it there we go again it turned dark and if we look at the element document you can see HTML class dark all right that's what we want now if we go back to the application Tab and under local storage let's manually say theme and we don't even have to add anything because this only looks for dark nothing else so if I save it and refresh it goes back to light and if I say dark again and refresh now it's dark again so that's what that's our premise that's what we want to work on and this if statement is what we want so what I want to do just add a comment up here say set theme based on user preference okay so system preference or something like that now let's uh grab Dom elements and also we want to grab theme switcher icons so we need to change the icon with JavaScript to and I will create two consts here so const Moon icon which would be just a string and then another cons would be sun icon which would be another so we already have the sun in the HTML so in the navigation if we scroll down to the SVG this is the one just going to copy the value yeah that's the one and add it to the Sun for the moon we can go back to that website icon no where and just search for the moon there it is and copy the SVG back to the project notes and add it here just grab that D value so it's all the way to here so cut it add it to the Js file so we have the icons and now let's grab the theme switcher icon uh button const theme theme switcher equals to document. query selector and so we call the theme switcher uh forgot the pound sign sorry now we also need to grab the icon and we know the icon is actually the D attribute of the path so we want to say the same element SVG path right so I'm going to copy paste this one and I want to say theme suture icon is theme switcher SVG path okay so we are grabbing the icon too now first things first thing we want to do we want to set this icon I will by the way we will fix these problems later we want to set the icon to the right icon so when it's light like this it should be a moon icon and when the page loads and if it's dark it should be the Sun so here we are saying add the class dark if this condition is true and we can also say theme switcher icon okay set attribute so which attribute we want to change the D attribute we want to change it to what so in this case it's dark right so we want the sun icon and copy this one add it underneath here just say Moon icon so let's save it refresh this one of course this is light and we have the Sun so let's say we want to set it to dark now and refresh now this should turn to a moon but I'm doing something wrong here so let me see okay so I'm getting the error and I realized in the index.html I forgot that attribute the fair and we can see now how important that is so back to the application so I have the Dark theme it's the sun right so the icon is the Sun and this is set by this one if I delete this one again and refresh this becomes the Moon that means make it dark and Light okay so let's create a attach an event listener to the theme switcher so we want to say theme switcher add event listener and within that basically we want to check for the same thing we want to check if and it's it's better to check for the whole thing and if this is true we want to do the same but backwards because this is a click event not automatically so we want to say if this is true that means the system is not dark right so we want to do this same thing I'm sorry the system is dark so we want to do this one so copy this so remove the dark add the moon icon or I'm sorry at the sun icon no we were right the moon at the Moon icon and then set the local storage theme to light and else so the other way around so I'm going to copy paste that one so add the dark now if that's true add the dark at the sun icon and then set this to dark let's see if we did this correctly if I did this correctly so I'm still getting error to argument sorry I didn't again I did something wrong here okay so again I forgot to type click as the first argument of the event lessener sorry about that so okay anyway let's go to application not memory application and let's delete this one let's say this is the first time to you user is loading the page so refresh it's dark because there's nothing the sun is there click on it it becomes light the moon icon appears and click on it again it goes dark so this is working already so that's what we want if we check the website version refresh and this is the same thing so we're done with the themes or theme switcher as well so all we have to do now play with the classes to apply to fix this dark mode problem so let's close this one and what we want to do here so start from the top so the nav background is too dark for the Dark theme or too light so let's play around with it so it's the nav bar we are saying BG zinc 140 so when it's dark I want to say BG zinc 900 opacity of maybe 10 it's almost invisible but the BL is gone is there so we can say maybe uh let's change this to 600 so you can play around with this one and set 40 I don't want to get too obsessed about it all right we're good now let's bring it back so with the navigation itself we're on there so this is the image right we don't need to do anything with that we have the mobile nav button and this is this is following this card class so if we go to card input. CSS and we go go to the card class we are saying that text should be zinc 900 right so when it's dark we want to say text I'm sorry we don't want to change the text because we are changing the text on the body we just want to say BG zinc let's say 700 there we go so now it's working and again it's the background is not really cool it's not really working for this kind of thing so we need to change again we need to change that around so if I change this to 900 okay that's better I'm going to keep it as it is so quite evident what it is so we want to change that now for the SVG as well we want to say when it's dark the stroke should be zinc 100 there we go so click it's dark it's light it's dark and everything works now the menu everything is good except this navigation so if you go back to index the menu container there it is and there's a navigation so I want to all I want to say dark text zinc 400 maybe all right that's good I'm happy and also the ring uh the border is almost invisible so right now we are saying the Border here zinc 900 all I want to do now instead of this 900 say 100 so copy this one and say dark border zinc 105 all right so let's check out the website on the website it's already cool because we are using that card custom class so we don't need to even check anything all right so that's navigation and what else do we need here I think we are completely done with navigation and dark and light theme so we are mostly done with the whole website and you can see it's cool so let me close the navigation and start with the other sections which are easier much much easier so delete this whole div and start with a section okay okay and within that section first of all Let me give it a padding x to the main padding X6 and with the section I will have an H3 that would have a class of my heading this is a custom class which I will apply and it just says my name for example okay so there we go now let's use this my heading custom class because it will apply to every section heading my heading and apply text for Excel text zinc 700 F bold and let's see how it looks on the dark mode it's too dark so we want to say dark text zinc 300 and end that one okay we're cool back to the HTML so on each section I will have a padding y of 20 or even 24 so I need I want some white space here and there and underneath that H3 I will have an H1 that says web developer and a br tag so kind of a breake line and let's say gamer not much of a gamer anyway all right so this should have some classes too text 6xl 6xl font black and that's it so this one follow because I'm not applying any text color it will follow the body which I'm saying 900 and if it's dark 100 there we go okay so that's it that's with the main uh with this hero section which actually this should be up here my apologies this main have to go all the way after before the footing so so I'm going to copy this add it to portfolio section and delete that part okay so change the heading to portfolio there we go so now underneath I will have cards so div this is the wrapper So within it I will have a card div so this is the card that you know we already know we will it looks like those buttons so let's use an H4 and say this is the title and a P tag with just maybe 15 words okay and an a tag which would be external so we want to say Target blank and you can include the ra attribute to say this is an external link and just say visit for example so let's see how it looks and you can see uh back in our input we are giving the card BG link 900 I want to change this to 800 so right so we can see it here better we can play with the nav to make it less you know same color all right back here uh on the card itself I want to give padding padding y 8 padding X4 there we go on the heading of portfolio margin bottom six the H1 class I want to say text XL font semi bold and margin bottom four nothing on the text but on the Target on the a tag I want to say class ring one let's give it ring two or just one ring one and ring should be zinc 9 100 at first and if it is dark ring should be zinc 100 padding X6 padding y1 rounded large here we go and let's give it block margin top four and width Max so oops not with Max which means Max content there we go that's our visit uh button and actually I want to give it maybe margin top six so it would be the same as the heading you could include an SVG icon next to it just to make it cooler look look better but I want to do here what I want to do just say on Hover text should be Sky 500 and again on Hover ring should be Sky 5002 see if it works okay so the ring doesn't work for me so the ring only works in the light mode as you can see here for the dark I still have to say kind of copy this I don't know why it doesn't work but for some reason it doesn't dark hover ring sky 500 it works now okay so we could copy this and make it into a custom class or kind of a JavaScript you know inject with JavaScript if you have different text you know kind of dynamic ically but there are only two for me so I'm just going to copy the whole thing okay and add it one more time underneath and on the parent I'm going to say grid and grid column two unless it is MD so on the larger screen it should go side by side like this let's give it uh Gap I forgot Gap six there we go that's the portfolio now I'm going to copy this whole thing okay I don't want and go to the coding and add this one here close that section and underneath the heading this should be coding videos and I'm going to add a div with the IDE of coding Dash container so coding videos will go in here okay so there we go I'm going to close this one don't need it anymore and I'm going to do the same here I need to provide IDs for this by the way so this would be not the hero section but the pro uh this should have portfolio because we have anchor tags on these right this should be not on the H3 sorry on this one ID coding and I'm going to copy this for the gaming section and say gaming and gaming and I think just this one gaming all right so that's it so we have to place or placeholder to inject things within that now we could add a spinner as a loader state right in front of the gaming videos or like in front of the title so if I say for example here on the coding videos so let's put this in a div okay and underneath I'm just going to copy one of the svgs I had before so one of these SV I'm going to copy it so let's close this again it's annoying too much things and underneath I'm going to cop paste that and look for a kind of a loader SVG kind of a round thing that can be spinning round and round so you could choose whichever you want I will pick I don't want I want this one so just the one line I don't want the things that have two path I don't know if this one has two path okay this one has two path which is kind of yucky but uh let's see if can find one without two path okay so I I pick this puzzle piece and I bring it here so as you can see it's a puzzle piece and I only picked that one because it has one One D attribute I don't want the ones that have multiple path because I want to keep it simple so on this div which contains those two elements I want to say Flex items Center and just no not justified just Gap six okay so we need to remove this margin bottom on the heading so it would be kind of nice maybe just give it two all right now it looks nice it looks nicely aligned on the desktop as well there we go now we need to spin this one so I'm going to give this a class of loader that's a custom class which we will call uh I actually give it an ID so for now I'm just going to say animate spin all right so you can see it's spinning and it took some time again 11 seconds it it sometimes it just doesn't work all right but it's spinning now but we want to remove this let's give it an ID of loader we want to remove this when the things load when the videos are ready to be shown okay so but for now it's there so this should be hidden at first and when we are loading we will be showing this and then we will hide it so I'm going to copy this section here this SVG section uh for the coding container and add it to this container for the gaming just change this back to game gaming and the rest is same now for the loaders I want to say this should be two different ones so gaming loader because maybe one of them doesn't work and the other one works coding so coding loader and gaming loader let's go to make another you uh JS file let's call it YouTube just call it YouTube yt. JS and let's first in the head let's say script Source inside to JS file yt. JS and it should be the fair again not forget that one all right navigation is closed should be closed now so in the videos for the videos of YouTube all we need to do first bring the URLs so I want to make comment coding videos URL and I will have gaming videos URL and I want to say const coding URL and that would be a string another const that says gaming URL that would be another string and in the notes I already have it from the beginning of the video so copy coding and add it here and again for the gaming copy that one and add it here so now we have the URLs we need another one we need const YouTube prefix for the links and if we go to any YouTube video like this one we have a link right so it's an individual video and and paste it here you see this is the ID of the video which we will include dynamically so let's make a comment it says and say YouTube url prefix okay and that's that now we need to of course use the fetch API to get the data and I'm going to use the fetch directly first and I will turn it into a function so fetch asks for a URL we want to give it the coding and then say then all right then result should be Json so we want the Json result then again sorry uh get the data and this time we want to just log that data and let's open the console here there we go and close this one and we are getting the data from you know YouTube API so I have 12 videos in my coding channel so now we want to inject it inside this wrapper so let's grab those Dum elements so again dumb elements and we want to say const coding video Let's just call it container coding container which would be document. query selector and I don't remember what I called it so portfolio coding so we called it uh coding loader no where's the container coding container grab this one add it here I'm going to do the same for gaming all right so we have the gaming and coding container so let's start with the coding and I want to inject those data in it so what I want to do use a for each Loop and say on the data. items because I know it's in the items for each element or L for short grab the coding container and set the inner HTML to plus equal to now what do we want we need actually uh Dynamic text so we want to use template string and uh I will use an a tab so let me create here in the HTML because it's quite easy I can get the boiler plate and stuff can get auto complete so what I want is an a tag and the H will be dynamic the target would be blank okay the rail should be external and the class should have I want to give it that card class okay with the padding of no I don't want the padding actually I want overflow hidden and block block and I will play around with it later on so within that I will have a image which again would be dynamic and the alt would be thumbnail for example underneath I will have an H4 again would be dynamic class font medium and text large so let's see I want to just cut this one and go back to YouTube and paste it here now instead of these things I'm going to uh bring those elements dynamically so I know it's in the items so each element so I want the hre so we want the URL of the video we know how to get this we already have the YouTube prefix come on SO YouTube prefix plus concatenate what snippet element is snippet resource ID so element. snippet do resource id. video ID so that is for that for the image again use the dollar sign curly brackets and say l. snippet do thumbnails do maxr am I going correctly so thumbnails Max res and URL and I'm just going to copy this whole thing add it here because it's the same for the title all right let's save it see what happens so these are the coding videos that are coming through of course we need to now play around with these numbers so on the Hedge four I'm going to give it padding X is four and padding Y is six see how it looks okay so again it took some time to BU rebuild it I don't know why it's taking so much to build but it's already looking okay I'm happy but back to HTML so on the container so you see this is the container right I'm going to apply some classes so I'm going to say grid and grid column 2 if it is SM or bigger and then if it is MD or bigger then let's say grid column 3 so that means if the screen is higher than 64 640 make it two column if it's higher than 768 then make it three and then stay at that but at first it's just one and let's give it Gap don't forget that Gap thing I always forget it Gap six there we go and I will apply some H effect in a second I want to give margin bottom to the container right here margin bottom six so it will push down that so back to YouTube JS uh let's give this a tag some hover effects and let's say hover ring I think I already let's I think the card card has a ring one and ring 900 y y y so let's see if I say hover ring sky 500 what happens see if it works yep and if we go to light Mode still works all right so what I want to do in here we actually need to do the same for the text so just say hover text Sky 500 now it doesn't work if I hover over this but we know already how to do this we just say group hover and apply the group in here now it took again a lot of time to rebuild so I don't know why it's taking so much time but it's good right now it's working now we're going to do the same thing exactly same exact same thing for the gaming channel but and by the way I'm zoomed in here it should be like this this is the default 100% so we're going to do the same thing for gaming but we want to change this into a function and bring the loader and all of that let's grab the loader first so remember we call this coding loader and gaming loader so in here going to create a const and say gaming no first coding coding loader is document the query selector coding and then the same thing for gaming okay now let's turn this into a function so I want to say get data from YouTube API so this would be a function and let's call it get data and create HTML I don't know what else to call it so let's see what is not uh so I'm going to move this curly brackets to the end here and let's see what are the things that are not repeated so we can accept it as a parameter so the first thing is the URL of course there we go and so I want to change this URL to URL and we need the container so the coding container here is specific so we want to say just container and change this to container now instead of all of this I can just call that function two times why am I clicking on that sorry I want to say get data and create HTML it accepts a URL which we have the coding URL and then the coding container same same thing we want to say gaming URL and gaming container so if I save it go back to website so you can see easier you can see it's already both of them are coming oh sorry forgot to apply these classes so right here these classes to The Container down here okay so and margin bottom six here too sorry about that but it's working the point is it's working and we are getting the videos and the data now let's apply some other options here so I I have a console that logs somewhere I need to delete it there it is so first of all let's uh deal with that spinner thingy so we want to show this spinner and then when the data shows up the remove that spinner we already have the coding loader and gaming loader so in the beginning of this function I'm just going to say uh loader which will accept which will be accepted okay so we want to say loader. class list. remove the hidden oops let's see if it works but when it's loaded it's here so basically here the data is there so we want to add it here okay and now we need to add the loader here so we want to say for this one we want to say coding loader and this one say gaming loader so it will probably there we go you see it was just there and there we go it's gone one more time there you go all right so that works too I was going to put a set timeout if it was too quick but we can see it easily now the other thing we need to address is to have an error message in case things go wrong so right now we are just fetching the data but we're not doing anything with the catch Oops so at the end of the fetch API method down here so right before that last curly bracket we want to say catch the error and this uh call back function we can log that error for ourselves just for the backend developer thing and now we need to grab so we are here right sorry we are here so in the gaming container thing we want to kind of grab the parent what is the parent is this section right and grab the parent and add something to it let's do that so I want to say grab the container we already accepting the container right and check the parent node and set the inner HTML of that parent node plus equal to because we don't want to delete anything it's already in there like delete the title we don't want to delete the title we want to say um for example set and again a dynamic href or a tag so like this a and then close the a like this and say for example say content not available please visit the page and provide the hre dynamically again so we can accept another argument here and call it Channel URL so like that okay so and I'm going to put it down here as an h and we can add the target blank again and this two add it here and we want to make sure that we remove that loader again so I'm just going to copy loader class is ADD after the error so because we know it's an error anyway it's not loading it's an error so now again for these two we will accept a URL let's grab URL for example from my channel if I go to this one and copy and bring it back down here just add it here this one of them is learning the other one is my gaming for example so now let's see if I save it it spins Works everything works fine let's see if I make a mistake here so both of them I'm going to M these URLs now we're getting content not available please visit the YouTube direct page and if I click on it goes to my page so you can also apply some classes to this of course course so on the a tag where we are right now let's grab the class from the section portfolio because we have buttons here these ones so I just want to grab this whole thing copy and then in the YouTube and I don't know if I let's say class there we go let's see how it looks I don't want the max content I just want text Center that's nice let's give it padding padding Y 2 all right now it works so if there is an error this is going to happen if there is no error which means the links are good save it we have a spinner and then comes in the data we're good that's it so and that's another big part which we are done with it now the last almost just a few parts left so I'm going to close everything everything extra extra extra extra close close close About Me section so let's open let's see what we have here portfolio section just a second I want to copy this under the about me let's close that section and this should be about padding y this should be about about me and let's see what I have on my website actually I forgot nothing special I guess just about me some text and icons I think this is just basically you know what to do already so we want to add a P tag lurm uh let's say 50 wordss and underneath of this I want to add a div which would contain some button svgs and I for that I'm going to grab from the nav the theme switcher button so I'm just going to copy it imagine this you were doing this with VJs or something like that that you could make Dynamic uh elements instead of repeating yourself so many times just like this but we don't have it anyway so on the parent I want to say Plex items Center Gap six that's it so button I don't want the ID in fact I don't want a button I want an a tag so this should be a and this should be a and let's say hre uh it goes somewhere it doesn't have to go somewhere any right now if I save it I get the sun right now but uh let's give it margin top of eight and we can bring some icons if you want to we can just but again that's up to you I was going to use this CSS loaders but I used that icon so I'm going to close this one anyway so we can bring the code for example this one copy SVG back to the notes again do this grab the D thing copy again you know already what to do with this one so I don't want to waste your time there we go and you can repeat this and as much as you want some of this just one quick thing some of these uh let's go to game some of these have two path so I want to copy this one just to show you maybe you know this already YouTube we're done close it and text so you see this one has two path so if I copy this a tag right here and paste it underneath so what I want to do actually to I said actually so many times D so there is one D element here cut it and add it here this will only give me the dots you can see here and what I want to do is to copy this path and go back to the notes and grab the other D element which is quite long this one cut it back here and paste it now it works so if there was some elements have two path make sure you do that and you get the right way so let me grab change this one okay keeps going back up there all right the last section is footer and the background we still not done sorry about that so all I want here is just a P tag that says for example your website XYZ and maybe a small tag that shows the copyright thing so if I go back to my website down here I have this uh kind of a text right and nothing important it's just about commercial use but you want to add it down here instead of this icon you can say % for copyright copy and semic colum that's it and again we are down here so all I want to say can say padding Y2 Flex items Center justify between and there we go there we go padding don't forget the padding padding X6 and on the text we can make this quite mute so it's say text zinc 400 okay I'm going to close the console and I'm going to just look around here here some of the things this should be on mobile okay there we go so Mobile Works close open this works so we can now few things here so this you can see when we switch over to sections it's not smooth what we can do in the input we don't need to really do something special just say HTML oh not not as a class the HTML itself and say scroll Behavior should be smooth that will do it so if I go to coding you can see now it's smoothly go up and down so and the image should take us to the top navigation oh it doesn't because the navigation is already top so instead of giving the ID navigation here and or just on the menu let's see so on the nav we are saying when we click on the image if we can find if I can find it it says go to navigation so instead of this I'm just going to say top and give the ID top to the top of my hero section because that would stay there so for example the main the section there we go just want to say top so if I click on the image now I'm going back to the top okay let's bring in the background so you can see I have a background here and if I light and dark and I forgot these separators this is also easy so I'm going to do this these two things so the separator lines and the background for background I'm using CSS background pattern so if we choose dots for example and just play around with these and then this will give us this right here right and we have cross dots that is two so I'm going to choose this one and copy this because I have already what I want so I'm just going to copy this one I put this link in the description again and into the CSS and all the way down there so I'm just going to have a class call it BG pattern and I'm going to paste it so let's format this one so background image is the radial gradient and I I'm going to change this to rgba so I want to say rgba and uh the values this is for the light theme so 15 23 I already picked these values it just works quite nice and 0.1 for opacity and this one should be 1.5 the not too big uh this is actually going to be repeated so I'm just going to repeat this rgba transparent zero pixel I think this is Zer pixel yeah this whole thing I'm going to copy it and add it down here because it's the same all right background size in of 32 I chose 30 30 pixel the back this uh background position 0 0 and then 15 15 instead of 16 again these are you can play and for this color uh I use the if we go back to T CSS colors and we have zinc 100 for example that one I want that one so I can just paste that one in now uh we need to actually apply it in our HTML so above everything so I'm going to go all the way up I'm going to close the head for a second we are still not with the head though and the more I think about it we're not that much done okay so in the body I'm going to create and uh comment and say background and it should be a div that has a class of BG pattern okay and it should be fixed should be inset zero and it should have a minus Z index of 50 so we want to make sure it's behind everything and this is for the light mode and you can see it's already there so for the Dark theme going back to input I'm going to close this one I don't need it anymore so back to the input CSS I'm going to copy this because we need to do it manually and just say BG pattern Das dark and instead of these colors right so the main color should be zinc 900 copy that one add it here and these if we keep it as it is save it and go back to index and we need to apply it here so we say when it's dark BG pattern pattern dark should be applied so okay so if you click it's not really visible so we need to change these values because they are dark anyway so instead of all of this I just want to say down here sorry so we want to change this to 25 255 255 255 which is white there we go so it took some time to load but now it's dark and we have the background and now it's light we have the background so that's with the background we're done let's do the separators so that's also easy so I'm going to call it [Music] separators I don't know if I separators I think it's like this anyway it doesn't matter separators and this we can just do with Tailwind so the width of that div which will apply in sections would be full the height should be just one pixel and I'm going to use a BG gradient to write so from zinc 100 opacity of zero this doesn't matter because it's opacity of zero right from zinc opacity zero why zinc 940 to zinc 100 zero again to zinc 100 Z again and this is for the light mode for the dark we just basically we want to repeat this and just add the dark attribute or things of utility class behind it and say from zinc 100 to Via zinc in 100 because it's dark to that and then I can't see so you see right now it's not going to work for me because I can't see this zero come on all right so now apply this separator class to some divs so right under a portfolio right here all right so if I save it there we go there it is so I'm just going to copy this that's quite easy right uh under coding and under gaming and that's it there there we go that's one separator there's one and there's nothing after above the About Me section all right so you have it all over okay so I think that's it so the last part we're done with the website so this is the website and everything works fine light and dark mode and it I hope it's a nice it looks nice for you guys all I want to do now it's just something behind the background it's nothing really related to this what we have here and that is in the head so I'm going to close the body we want to apply some meta tags so it's good for SEO so we have metod description that will give you the description of your website for example what is this website like coding and gaming videos all right another one that would be useful is keywords this one so metat tag name keyword and then so you apply keyword for example coding and comma separated or gaming and so on so that's it and some other metat tags we can use with open graph so open graph it's this website and it's just uh again about metadata and stuff and if you see if I copy this whole thing just to show you what's going on and you can apply these to your website these will work when you are sharing your website you know sometimes you share your website and there is an icon there's a text on that link that people can see so and these are done with metat tags uh open graph so you see we have the title what is the title of your website so my website and what is the type so this is not necessary because it's just a website you can delete it in fact none of them are necessary it's just good to have them so the URL of your website is the URL of your website clearly so that needs to be done so it will avoid conflicts so that's one then we can apply an image and this image you cannot give it a relative Source you should give it an actual uh URL so you can copy your logo for example to your server and just say like this for example I have a I have my logo copy to my server I can just say J my domain SL logo.png for example okay so that would be the image so those are for the metat tags and the next next or the last thing I'm going to break this by the way so we don't need to watch for Tailwind anymore so I'm going to press contrl C two times and the last thing we want to actually now prepare tailing for optimization for deployment and if we go again to tailin documentation and we have it here uh optimize for production all we have to do is to just say this but we have to actually say where is the input file otherwise our custom classes will not be included so I'm going to close the HTML because we're done with it too actually no not done not quite done so we have this command npx tail wi-hi and- o Watch right so instead of watch you can see here instead of watch we can just say Minify so Das Das Minify there are external tools we can use too but Minify it's actually work with t in CLI so now we have I'm sorry I ruined the whole thing so I didn't change the file let me CH turn this back so one say without Min minifying it I have the output okay it would be the same again so my website is the same but now uh I don't want to watch it I want to say let's call it built so built. CSS sorry about that now the custom classes are there too and now in the index. HTML instead of pointing it out to that output we just want to say build. CSS and you can see I I wrote the name incorrectly so forgot the D but it just to show you it works it's right there and to want to if you want to make sure if you want to just like me and you want to make things perfect you just go back and just put the D in there and press again let it regenerate again there we go so now it's minified and they recommend this because they will uh you know delete all those extra ones that we don't use and it's nice so all you have to do now the last part for your own website all you have to do just make this whole file this whole folder into a zip file and then copy paste it onto your server if it's using cpanel or other servers and that's it that's really it you don't even need this input output you just need the build CSS but you need the other ones so guys this is it this is a full website which is kind of which is clone cloning of my own website I forgot to add fonts forgot forgive me just very quick I'm just going to add the fonts we know how to do it so go to Google fonts add the variations select the variations all right all right seven8 and nine and copy these links sorry and under the links I'm just going to paste it so for this one we can easily just go to input that CSS again because we have the HTML right and in here we can just say font family puppins and sense this is actually coming from Google like this there are other ways to apply it but since we having HTML here so if I say this one and save it we can't see it right now because we are using the minified version so I'm going to regenerate that minified version of our CSS so let's wait for it in here there we go it's already changed so that's it that's the font and this is the website the light mode and the dark mode you have the icons and so on so you get the idea and you can customize this to your need I hope this video has been helpful and I I'm sorry I took so many detours but uh this is it guys thanks for watching I'll see you at the next one bye-bye

Channel: Learn with Jon

Views: 1,248

Keywords: html, css, js, javascript, web development, web design, custom web design, css tricks, learn css, learning, vanilla js, youtube, youtube api, fetch api, website, full stack

Id: rSSS-SKBc_I

Length: 79min 34sec (4774 seconds)

Published: Mon Oct 09 2023