Complete Responsive Blooger Website Using HTML/CSS

everyone welcome back to daily tuition in this tutorial we are going to learn how to build this complete website really from the beginning we're going to use HTML and CSS to build it and make it responsive if you're a beginner and don't know how to start designing your own website then you're at the right place we also going to use a tiny code of JavaScript to make this website interactive we will start with an absolutely intense demo page and end up with a complete website after this tutorial you will be able to make your own website with HTML and CSS with ease you will understand the importance of media query CSS variable flex box pleat layout and more for this build we are using only HTML and CSS for design whole character to create carousel font or some website for icons google fonts for font family and add scrolling animation using animation on store library you can notice this website is absolutely responsive for mobile tablet and any kind of device so let's take a look at what we have inside this tutorial when you open this website you will see this amazing home page with this curved background image on the top you cannot create this navigation menu which is undoubtely absolutely responsive and has navigation links then we have a simple site title with background image and a button just after that when you scroll down we have a beautiful looking cars with auto sliding functionality after every three seconds car will slide automatically you can notice when we scroll down we had applied scrolling animation to the element in this old carousel we have old navigation and this old avocation helped us to navigate to the different cards and just off that when you scroll down you will have this beautiful design on the left side we have blog post and on the right side we have sidebar in the blog post we can add a different blog post with this zoom in to mount effect and on the other hand we have sidebar where we have categories popular post newsletter and popular tax and we're going to add animation on Skol effect to this category section as well at the last right here you can see after this last blog post we have a page nation and at the last we're gonna create this beautiful voter for this website this photo looks amazing with his dark background presented now once I scroll down and reach to the footer so if I'm going to scroll down I'm going to use these button when you click on this button you are going to scroll and the top of this website so this button will smoothly scroll up at the top of your website now this is all about addictive devices what about mobile and tablet let's see if this website is responsive or mobile or tablet devices or not now as you can see this website is completely responsive for mobile in this website we have put every section in a very neat frame so the user will not disturb while using this website if you open this website on tablet it looks amazing on tablet as well all right now let's get started and see how to create this amazing website but before you get started make sure you have a basic understanding of HTML and CSS and you also need an editor to write your code and a browser to execute HTML and CSS which is download and install via score editor and also install browser in your system we're gonna use vs code editor to write code and use Chrome browser to execute it once you complete all the steps let's get started and build this website so before taking your too much time let's get started now let's first create a structure of this project so as you can see here I have open the views code editor I just open the blogger folder inside this way is called editor the block or folder is absolutely right now we're gonna create a structure of this project inside this folder you can name this folder anything but for reference I'm going to name it blogger now if you're a beginner and don't know how to open the folder in via score editor then just click on this file menu and select this open folder and open your empty folder inside this via score editor now once you open your folder make sure the folder is absolutely empty and in this folder we're gonna create a structure of this project so in this empty folder I'm gonna force create a new folder and name that folder assets and in this folder we're gonna have different images which we are going to use throughout this tutorial so I'm going to just copy few images and paste it inside this folder so I'm going to just copy these images and paste it inside my project directory inside this asset folder right here so I'm going to just say here best now we'll just paste all these images inside this asset folder you can see here if I open the video studio code editor you can see inside this asset folder I have this blog post this Instagram folder this popular post now we don't need to take care of this folder because you don't need to touch it just leave it as it is you just talk to that outside of this folder in this root directory of your project just create another folder and name it CSS now in this folder we're going to put all the CSS file which we are going to create throughout this tutorial just after that inside this root directory I'm going to create another folder and name it yes now in this J's folder I'm gonna put all the JavaScript file and just after that I'm gonna create my main file which is index dot HTML so I'm gonna select this new file icon and name my file index dot HTML and as you can see this is a simple index dot HTML file so I'm gonna force create a simple html5 snippet so as you know to create a simple html5 snippet you can press exclamation mark and press tab right so this will create a simple html5 snippet for you and just change this title to blogger right just save the changes now as you can see I just have a simple html5 snippet and in the snippet I'm gonna have a simple talk type HTML and then we have the hair section inside it we're gonna have made a tag the viewport and on the line 6 right here you can see I have the viewport content width is equal to device - wait so this line make this project responsive so make sure you have this line inside the hair section you start that just not that we have the title then the body section of this application and the closing HTML tag now you know how to create a simple html5 snippet let's get started and create a standard CSS file to specify custom styling to this HTML so I'm going to select this CSS folder and inside this folder I'm going to create a new file and name that fire style dot CSS and before we move further I'm gonna link this file to index dot HTML inside these header section so I'm going to create here a command and I'm just say here custom style it always a best practice to create a documentation for every code so I'm going to just create here a command and just say custom style and in the link tag in the HD fat reboot I'm going to just say dot forward slash then select my CSS folder and my style dot CSS file just out that I also want to use JavaScript in this project so I'm going to create JavaScript file inside these J's folder I'm gonna select this folder and create here main dot JS file now we're gonna link this file so before this closing body tag right here I'm going to create a script I and in the source attribute of this script tag I'm going to just say dot forward slash select these J's folder and this main dot J's file now before we move further I'm gonna create here a command and just say here custom JavaScript fine now once we have the project structure ready and we'll just open my finish website in the browser so as you can see this website is looks stunning right now so we'll start from the beginning so we'll start from the top so I'm going to first create this navigation menu and move further so I'm gonna just open my editor and in the body section right here I'm gonna force create documentation so I'm going to create here a command and name a navigation and I'm gonna just have some space here like this and just copy this command paste it down here just indicate this is closing comment and inside this navigation command I'm going to create a nav tag now if you're a beginner and want to create a division tag you will create here a packet then create a division tag like this but if you're using visual studio code editor we just need to say here teve and place that this is going to create a division tag for you now what if you want to specify class to this day you say class and specify the class name to this day like this but in via score to simplify this work we just need to say here at dot and specify your class name so if you want to specify my class to the division tag you can say here my class so you just need to say here dot and specify the class name and when you press tab is going to create a division tag with the class my class you are not limited to specify only this class you can add one or multiple classes at the same time now what if you want to create a different time now let's say you want to create anchor tag I want to specify a class so I'm gonna create here an anchor tag so to create an anchor tag you just need to specify the anchor tag a and specified dot here to create a class and specify the class name so if I just to hear my class and press tab I'm gonna have here an anchor tag with the H wave attribute along with that I'm gonna have my class with the name my class now what if you want to create an anchor tag with ID in that case you just need to create here an anchor tag I'm just busy over here - to create an ID and specify the name of your ID so I'm gonna see here my ID and when you press tab this will create anchor tag with the ID my ID as simple as that and if you want to create a division tag you don't need to specify here Dave and then specify an ID instead you just need to specify here - and specify the name of the ID somebody's here my ID so when you press tab this will create a difficult division tag with the ID my ID you're not limited to create only anchor tags or division that just like the h1 heading tag with the class h1 or you can create a span tag with the class icon or you can create a paragraph with the ID para that's very simple to create any tag in video studio code editor you can see me doing this throughout this tutorial so I'm gonna just get rid of this of Tanks and create here a navigation menu somewhere first created here and now tag somebody just here now and press tab so this will create now tank for us now this is not necessary to create now tag for navigation menu but for the reference you should use now tag while creating a now meaning so I'm going to create here now and to this now I want to specify a class so instead doing this I'm gonna just fit here now don't and specify the class name if I want to specify here now class to this nav tag when I press down I'm gonna have now tag with the class now right now inside this now tag I'm gonna create division tag with the class now menu along with that I want to add two classes to this day so simply under put here down and spit spa here now menu class and I want to add one more class to this day so I'm gonna put dot again and specify flex row when I press tab as you can see I have two classes here first one is now menu and second one is like straw you can add multiple classes if you want inside this Dave I want to create this blogger text so I'm gonna create here a division tag specify a class now Brad and in this Dave I'm gonna create anchor tag with the class text gray and just onto that in the href attribute I'm going to specify an because I don't want to redirect this page anywhere so I'm going to put here hash so when you click on this anchor tag this field will load the whole page just stop that in the text section right here I'm going to specify blogger the name of this website if you want you can choose image and icon or anything else I'm going to choose a simple text here now as you can see you have your basic navigation menu ready but still you don't have the navigation items these social links and as always the hamburger menu so we can do that after a few minutes but just for now just open this file in the live server so just right click here in the index dot HTML file and just select open with live server we already install these live server extension just click on this open with live server this will open this file in the live server you have your blogger text here now if we take a look at this block of text this is not look like as we did in these Finnish website that is because of we did not specify any styling to these classes so we're gonna add styling to this classes inside these style dot CSS file which we already linked to the index dot HTML right here now I just want to add some style to this navigation menu so it looks like the Finnish website so I'm gonna just open the cell door CSS file and just toggle this window on the right side like this now in the standard CSS file first select the HTML then select the body I want to review margin from all the elements someone select margin 0% box-sizing border box so this will include border and padding to the width and height of the element and just talk to that I'm gonna see here or flow thanks Helen now once we have this HTML and body tag I'm gonna create here a command and I want to create here a CSS command and just add some space and just say here now but you can name this navigation menu styling anything but a pro name it now bar just copy this command paste it here and just specify this is closing command so if I want to start this navigation menu I will style it inside this block right inside this coming block I'm going to select the now class and I want to specify background color to this now so I'm gonna say here background and I want to specify white color to this background so I'm gonna just here buy it I'm gonna space it by padding to it so I'm going to specify 0 for the top and bottom padding and to rim for the left and quite padding just stop that I'm gonna specify height which is 0 name and minimum height is going to be 10 viewport height now if you take a look at these two companies you are not going to understand what I want to create here now if you don't know why we use this minimum height and this height then let me explain in the last video we just created a responsive navigation menu where we have these two properties using these two properties we're gonna create a collapsible navigation menu so when we click on the toggle menu I just want to collapse all the navigation items and when I click on the toggle menu again I want to hide all the new items so that is why I use these two properties for that you will understand everything after a few minutes but just for now keep in mind we use high to collapse the navigation menu and we use medium height to specify height to this nap just stop to this me mum I'm gonna say overflow:hidden save the changes I say wait you can see I have a space here so as you can see here I just added a left and white padding to this now now just not that I want to style this blog or text I'm gonna force select the now tag and then specify here now brand class which we specified to the D and then select the anchor tag as you can see if I just specify here on science one points each frame this style will apply to this text right now just after that I just want a space bar some padding to it someone just say padding one BAM to the top and bottom and zero for the left and right this will add some padding and then I want to remove this border so I'm gonna just here text-decoration:none when I save it you can see this boner is gone now the downside of specifying this property here is whenever you specify this anchor tag you need to repeat this property in this vegetable theme I don't want a border to my any anchor tag so what I'm gonna do is I'm going to just back here and create a command and just specify here global classes so in this command I'm gonna put my all global classes so I'm gonna close it like this in this command I'm going to specify all the global classes which are going to specify to the element now in this global classes I'm going to first select my anchor tag and specify takes a decoration none and save it now what I'm going to do is I'm going to remove this property from here so I don't need to repeat this property whenever I use anchor tag in this style sheet now just start that and purchase back to my index dot HTML file and just create these navigation items and these social icons so I'm gonna just open my index dot HTML file and in this file just start with this tail right here I'm going to create another in this day I'm gonna create another list so I'm gonna say here ul and I want to specify a class to this ul tag so I'm going to specify here now my terms and in this year - I'm going to create my Li tag so I'm going to create here at the list and specify now link loss to this Li tag now inside this Li tag I'm going to create anchor tag and the specify text here home so this is my first navigation item I'm going to save it and if I open my website you can see I have this navigation item here now I just want to create my second navigation item so I'm gonna just select this line and just press both shift down gonna press alt shift down this will duplicate these three lines if you're using Windows now in via score editor it's very easy to copy these lines right now it's more and just change these navigation item to category I'm gonna name it category you can specify anything else just talk that I'm going to select these three lines again press both shift down to duplicate this line I'm gonna do the same to create my fourth navigation item now I'm going to name this category - or cry and this is going to be pages so I think here I just got here anchor tag closing anchor tag now I just going to create one more navigation item so I'm going to select these three lines and press all shaved down key so this will eight one more navigation item and I'm gonna name it contact us so as you can see you have your different navigation items but if you increase the size of this minimum height right here if you specify 40 you put height you can see you have your navigation items here just after that I'm going to just say here just stopped with this division tag right here I will create another day and I want to switch my class to this day so I'm gonna just put here dot social and I also want to add one more class so I'm gonna just here dot again and then specify text great having a press tab this will specify social and text grade class to the Steve and it is deep I'm gonna create my social icons so I'm gonna add anchor tag here I don't want to add here a class I'm going to just put anchor tag and press tab and just pitch right here hash because I don't want to redirect this anchor tag anywhere and in the sank of that I'm gonna first add here a Facebook icon as you know I don't have any library to add any icon so just for now I'm not just here yeah for Facebook then I'm gonna copy this line press alt shift down to duplicate these lines and just change this F so I'm gonna just sit here Instagram so I'm gonna say here I change this F to Twitter and just change this F to YouTube I'm gonna get rid of this last anchor tag and let's save it now as you can see here you have your different icons now in this place you're going to have your Facebook Instagram YouTube and Twitter icon now once I have the navigation item and will style this tag with an item to make it responsive so I'm going to just open mine style or CSS file and it is titled of say says I'm going to first stock all this window on the right side like this and in this file I'm going to style this navigation now if you open your index dot H to a file you can see I just specified flicks row class to this dip now I just won't force specify some properties to this flick through a class so I'm group on standard CSS file and in this global section right here inside it I'm going to create a class flakes row and space with some properties so I'm going to specify here display flanks then specify flex direction row I'm gonna save it you can see all my navigation items is at the same row what I'm going to do is just our two that I just want to add some space between these navigation items I want to send to these navigation item links and I want to place these social links on the right side of the screen I'm going to do that using a very simple way so I'm going to screed here before selecting a class and then select now menu and to this now menu I'm going to specify justify content space between so in space by this property and save it you can see I have space between these navigation items your now he should lanes it's in the center of the document and your social links is in the right side of the screen now you can do the same thing if you specify in these two properties today is now menu like this if I save it you can see you have the same result but if you want to reuse these properties you need to define it again so instead of specifying this property to this now menu I'm gonna create a new class which is flex row and specify that property right here so we can use it as many times as we want just onto that I'm gonna save the changes and I just want to specify one more property here which is flex wrap save the changes and let me now let me explain what this property does now let me just erase this pop and just get rid of this property just open the inspector so I'm gonna press control-shift I if you are using Mac then just press command shift on now as you can see here you have your navigation menu if you decrease the size of this navigation menu we have seen you have your awkward result here I don't want this result what I want I want to collapse these social icons down here when the size of this viewport is really minimum so what I'm gonna do is I'm gonna just specify here flex rap rap when I save it you can see if I minimize this viewport you can see my social icons is collapse to the next line this will happen to now links as well right so this is the benefit of this property I'll just start that I'm going to style these now links so I'm going to just open this CSS file and right here I'm going to just say now and I just specify now items right here you can see - the little tag I just pasted by now items so I'm gonna select it now items and I want to just remove this next so I'm gonna say here list Dix pipe now when I save it you can see I don't have this disk here just talk to that I'm gonna say here display flex save the changes and I want to say here margin:0 so when you splits my display flex property this will align all these navigation links in the same goal now what if I use this your tag again in that case you need to repeat this property again so I'm going to just cut this property and in the global section right here I'm gonna create UL tag and I'm gonna specify that property here so we don't need to repeat it again whenever we use here that now just out of that I'm gonna start these navigation links so I'm gonna open the starboard CSS file and down here I'm gonna force you like the now-closed and just out of that I'm gonna select now items and then select now link to this now link I'm going to specify padding 1.6 Ram to the top and bottom and one Ram to the left and right save the changes this will add some padding then I'm going to specify here font size which is 1.1 Ram and position which is ready save the changes and just after that let me just add some styling to the social icons so down here we're just pasted by social icon styling so I'm gonna select now then select the social class and to this social class I'm going to specify padding which is 1.4 M to the top and bottom and specify 0 for the left and right save the changes so this will add padding to these social icons I also want to add some padding to this text as well now to our padding to your brand name I'm going to specify here display:block monospace with that and when I save the changes you can see I have this padding today's now brand now now menus ready now but as you can see this navigation is not look like the finished navigation menu now the time is to add the social icons in the application I listen to add the social icons in the project and replace with the hard-coded text so what I'm going to do is I'm going to open font awesome website so I'm going to just type font awesome calm and from this website you can download more than three 1000 icons so I'm going to just open this bond or some compact size and just click on this download right here so just click on this 3/4 way and just download all the icons from Grecians click on this free for web and download this package I already have this package somebody just open it once you download this package just extract it just need to extract this package someone just right click here and say extract here now the package is extracted now recently to open this folder somewhere just open it now in this folder you just need to take care of two things you need to copy this wave font folder and also you need this altered CSS file or you can use this all dot mean dot CSS file so I'm going to just use this altered CSS file here so I'm going to copy it and paste it inside my project directory in the CSS folder so I'm gonna open my project directory and inside this project directory I'm going to copy these all dot CSS file in these CSS folder right so I'm going to paste it here now once I have this all our CSS file I can use all these pawns in my website but before we move further I just need to copy these wave fonts folder and place it in the root directory of your project so it just need to copy this folder and in this folder you have all your fonts so just need to copy it and paste it inside your project directory in the root folder right here right now if you open your editor you can see in the CSS folder you have your altered CSS file and if the root directory you'll have your wave fonts folder and in this folder you have your different icons right now what you need to do is if you are not familiar with Fonda's on website then let me just explain so to understand how this bond is imported in the website you need to just open the font of some website and click on the documentation from the documentation you will understand how to use this font and how to import that in your website now as you can see in the basic uses you have your attack and inside this attack you need to space by a class of the icon now as you can see here in the documentation this is how you can import this font in your website now as you can see we have a class here with a fast prefix using these predicates we are going to tell the founders own website which font you want to use then you just need to specify the name of your icon now at this point we want to include the camera icon so we use here if a camera now once you include this tag in your wave application you will have your camera icon in your own website so using different classes and different icon name you can import different icons and your website now just open the index.html file instead specifying this hard-coded values here I'm going to just paste my here a Facebook icon so I'm going to search it on the font of some website I'm going to click on these icons so I'm going to search for Facebook so I'm going to search it here Facebook and you can see as a result you didn't get your Facebook icon so I'm going to choose this icon so I'm going to just open this icon now I want to import this icon in my application so I just need to copy this HTML tag from Puu just copied by clicking on this tan like this and just paste it right here alright save the changes when I save it you can see I have my Facebook icon here now as you can see you don't have anything here because you did not link this all dot CSS file to your index file so what we need to do is we need to first include this file in the index you need to link this file to your index file in the head section right here I'm going to create a command and just specify here font awesome icons and link this file using link tags I'm gonna say here link specify the CSS folder and alt our CSS file when I say other changes and open my website you can see I have my Facebook icon here right as simple as that so I'm gonna just copy these itan right from here and instead instead this I I'm gonna paste this attack again and just change these clowns so I'm going to change it to in stock around like this and keep in mind you don't need to remove this prefix because using this prefix wanderson will understand which one you want to include right now just out of that just get rid of these tank attack text paste the icon again and just change it to Twitter so I'm gonna say here Peter just stop and just get rid of this YouTube icon paste the attack again get rid of this class and then just here you do see the changes when you save it you can see you have your Facebook Instagram Twitter and YouTube icon right now your navigation menu is not completely but look similar to the finish navigation menu now what do you want I want to spit it was some font families to this navigation menu which we are going to use throughout this tutorial so we are going to import few font from the google font and specified add to this navigation menu along with that we thought of specified colors to make it more attractive now what I want I want to specify font families to this navigation brand to this now links and to this social icons so instead using my system font because everyone don't have the same part in their system we're going to use we're going to use Google font and include that font in the project so let's see how to do that I'm going to just close this tab and just open a new tab and just say here Google font and from this Google font web side from this font google.com I'm going to just choose my favorite font you are not limited to choose only these fonts so I'm going to just choose here I'm going to first select my firstborn and below so this is my first one so I'm going to click on this select is fawn icon so as you can see I have just selected my first font so I'm going to do that quickly now as you can see I have just selected five pawns for this theme you are not limited to only choose forms you are free to choose any font for this thing that's upon you I'm going to choose these fonts if you ever watch my previous lectures use import statement to import these fonts but instead using the Sirian I'm going to download this font and just put this inside my project directory and then use it so instead using this import statement I'm going to download it so you'll just need to click on this download button right from here so I'm going to just click on this download button and download this zip package now once you download is found this will something look like this and you just need to extract this file so you just need to right-click here and say extract files and just press ok so this will extract all this font and this font folder now what you need to do is which is to copy this folder and place it inside the root directory of your project and as you can see in the root directory of my project in the blogger folder right here I'm going to paste that folder I'm going to paste my porn folder right now if you open your editor you can see you have your pawns folder here and you have your different fonts now what you want to do is you want to use this font in this project to use this font I'm going to create here a new file and call that file fawns lot sizes and in this file you need to create a font phase rule and so to create a pawn phase rule you just need to add phone fence and - this won't phase you need to first specify the font family so I'm gonna say here font family I'm going to specify the name for this phone so I'm going to choose a bell which is the actual name of this bond you have little space for any name to this bond but I'm going to choose the default name for this one and just after that you need to specify the source of this mod so as you know we have this font in this font folder now I'm going to choose this Apple phone this regular font and I'm going to choose this Apple phone so I'm going to specify the source property like this and in the URL I'm going to specify a single code and specify the path of this font now as you can see here you don't have this mods folder right here in the path so instead specifying dot forward slash which is refers to the current directory you need to spit over here double dot and specify forward slash right so this will refers to the root directory so you just need to select your phones and select your font here so I'm going to select my able phone and the PDF file right this one when you specify this font family in the CSS this will specify this bond to the text save the changes and I'm going to just create a comment here just copy this dead man create a command and just paste it like this right now I'm going to just copy this command paste it down here and at this point I'm gonna include my next phone which is and Dawn I'm gonna copy this statement like this paste it down here and I'm gonna change this font family to and tone and change this source attribute so I'm going to change here right here I'm gonna specify font folder the antone font family and then this and don't regular TTF file now just out of that I'm gonna do the same so I'm going to copy the statement so I'm gonna select it and press alt shift down right like this just after that I'm gonna change this font family text in the command so I'm gonna change it to Josephine and change this font family as well Josephine like this and just change these source attribute so I'm gonna select my font folder then select this Josephine folder now right now you can see you have your different font families you can see you have your font bold you have your light phone you have your regular phone now you can choose any font here that's upon you but I'm going to choose this regular font so I'm going to select this regular TTF file right if you want you can change it as well that's about you just out of that I'm gonna copy this lines so I'm gonna press well shift down and change this font family just change this part as well gonna change it to this one I'm gonna do the same I'll shift down and just change this font family and this source attribute now you can see here you have different fonts but I'm gonna choose the regular forms so I'm gonna select this living regular TTF file now this is not necessary to specify only these names you can specify any name what do you like to this font family and you can use that font family using your custom name now just out of that I'm going to change this comment as well and this one as well right sales changes just talk to that you don't need to include this file in your index dot HTML instead just open your style dot CSS file and as you know you just need to import this file in the style dot CSS to include any CSS file in the CSS you have import statement right so I'm going to say here import URL and specify the path of these baan taad CSS file so in the single code I'm going to say dot dot forward slash this will refers to the root directory then select the CSS folder and select your phone's dot CSS file like this right save the changes and now you can use any font from these font families right as simple as that once you have this file I want to specify found family to my navigation band to this navigation band so I'm gonna just open it open this dialog CSS file and right here I'm going to specify font family and I want to specify this font the first one this one to use this font you just need to use this opening so I'm going to use this font family so could open my starter CSS file and just specify here and about like this now save the changes now if I open website you can see the font family is changed now motive this phone family is not included and not applied to this text in that case game to specify a fallback value to this one family so I'm going to specify fallback value here gonna say here cursey right so at the gin Jess and as you can see you have the same result here now just not that what if you want to reuse this value in that case you need to copy it or you need to write it again so I'm going to solve this problem by creating a variable in the CSS reading the CSS variable is very easy using CSS variable you can use the value multiple times and using variables is very useful when you work with x value and the RGB colors now let me just create a variable on the top right here I'm gonna create here a variable so to create a variable in CSS you need to first select the dude selector so I'm going to first select the root and in this root selector I'm going to create team font families so I'm gonna just say here team found families now just out of that now let me explain how you can create variable in the CSS now to create a variable you just need to specify the name of the variable so the variable will always start with the prefix double dash so you need to specify here double dash and specify the name of your variable so I'm going to specify here and name a bill and specify my value here so I'm going to specify my value so I'm gonna just hear a bell in the single quote and then specify my fallback value so I'm gonna say here perceive like this right so now say it rages and instead of using this hard-coded value I'm going to use here a variable so to use this variable you need to call a metal wrap so it is going to say here where and in this method you can call this able variable right so this variable will specify this value to this font-family save the changes now just talk to that now if you are using wheel score you don't have to write this wire method instead you just need to specify here - - and space for the name of your variable and this will suggest the name of your variable this one so when you press ENTER this will automatically create a ver metal and specify the variable inside this method as simple as that say at the edges I'm going to just create few more variables on the top right here then I'm gonna create here and down the second font-family specify default background you then create my third variable I'm gonna create my fourth variable and the last I'm gonna create my last variable so now I can use these values using these variables so you don't need to use these values to specify to the phone family you just need to specify this variable name now just our two that in every web application you use colors because colors makes your application more attractive so in this website we're also going to create a colors but instead hard coding these curves we're gonna specify this color to the variable and use that variable to specify the color property for example so let's say I want to specify a color to this anchor tag I'm gonna say here color and I want to specify white color to this anchor tag I'm gonna say here right right this is very simple but what if the color is in the hex value let's say if the color is in the hex value like this 3 4 9 5 4 now if we take a look at this value then this is very complicated you will not remember this value and what if you want to use this value in that case you'll copy this property and specify to the next element like this right so this will take your too much time to save this problem I'm gonna just get rid of this value and specify to the variable so I'm going to create here a variable so I'm gonna false create here command and specify team colors and here I'm going to create a variable and name that variable text gray and to this variable I'm gonna specify this value so I'm gonna for specify hash and specify this value right now if you want to reuse this color you don't have to specify this value instead just need to say here next great right so now this is very simple to use this hex value co2 changes so this will specify text gray color to the Anchor time right as you can see all my text is change with this gray color now let me just create few more colors here and if you don't know where you can get this x-value then just open the new tab I'm gonna just close this tab and create a new tab open new tab and just search for colors go from this website you can get your different hex values so you just need to click on these will all palettes and choose your favorite color so I'm going to just create few color variable which we are going to use throughout this tutorial so I'm put just quickly create that so I'm going to just create here a new color and I mean text light and specify hex value here just out of that I'm gonna just create one more color somewhere name it PG color and speak to my value and just after that I'm gonna create a variable of white I'm gonna create midnight green color so I'm gonna name it made night now just after that we are also going to use the gradient color in this theme so I'm gonna create here command and specify here gradient color so you will understand here is green in color and here I want to use my gradient color so instead of creating this gradient color I'm going to just open a new tab and get my gradient color from whip gradients from this website you can get your different gradients colors which you wanted to use in your website right so I'm gonna just get my gradient color from this website so I'm going to choose this gradient right this one so I'm gonna just copy this is is so I'm gonna just click here and just paste it right here save the changes and instead using this property I'm gonna get rid of this property and just specify here sky so using this guy variable you can access this gradient color save the changes and just our two that I'm gonna specify all these colors do manage to move elements as simple as that now just art of that I'm gonna change the size of these font somebody just say here font size and I want to specify here one point six room font size so I'm gonna increase the size of these blogger text just are to that I'm going to space of a font family and font size to these now links so I'm gonna just say here do these nav links I'm going to specify pawn family and I'm gonna choose here this font and font size is going to be one point one rep save the changes now I want to just change this font family because it looks similar as you can see I have a different font to this now brand class so I'm going to change it so I'm gonna change it to this one and save the changes so it looks like they finished navigation mini now just art that I want to specify some how effect to the navigation menu so right here so I'm gonna just say here when I hold on this navigation link so I'm gonna copy this selector and paste it down here when I hover on this now link I want to specify a background color so I'm gonna say here background color and called variable midnight this one alright save the changes and when you hold on these now links you can see you have this background color just out of that I want to change the color of this melling's so I'm gonna just paste the selector again like this and when I hold on these now links I want to change the color of the a guitar and specify color white so yeah the changes so you can see this type of result here just after that I'm gonna add some space between these social icons so down here just start this social class I've gotta select now again select the socio and select the iodine and I'm going to speed up adding to the social icons so I'm gonna say padding:0 for the top and bottom 0.2 RAM for the left and right and you can see I have some padding between these social icons now when I hold on these social icons I want to change the color of these icons so I just want to say here now social and select the I tag and when I hold on it I want to change the color of this icon if you ask me why I use here an X value instead using variable and why I choose X rally here because I'm going to use this value only once that is why I use this x value here instead storing this value in the variable so I'm gonna save it now as you can see many hard on this social icon so you can see you have this color now just start that let me just take this navigation menu is responsive or not so I'm going just open the inspector so I'm gonna press control shift I and as you can see this navigation is not responsive so to make this now merchant is massive I'm going to use media query here so I'm going to just create here a command and just specify here a command and just say viewport less than or equal to 750 pixel and just after that I'm going to just close it like this now in this block in this command block I'm gonna just add a media query so I'm going to just a here media and if I want to explain what is media query then I would say using media query you can create a responsive website now for example now if the media query viewport is less than or equal to 750 pixel I want to specify a different property to the HTML element let me give a very simple example to understand what is media query and how you can use it somebody just say here media only screen I'm gonna apply this media to the screen and I'm going just here max width is equal to or less than 1 750 pixel I'm going to specify CSS property to the element if the viewport is less than or equal to 750 pixel so whatever you put inside this block is going to apply to the element if the viewport is less than or equal to 750 pixel I'm gonna just get here and now and as you can see here I just specify white background color to this now so instead white specifying this white background color I'm gonna just say here background black co2 changes open the browser now as you can see if the viewport right here you can see the width of the viewport is less than 750 pixel or equal to 0 and 50 pixel I'm going to specify black blur to the derogation now let me just increase the size now as you can see a the viewport is greater than 750 pixel I'm going to specify the default property which is the default white color to this navigation menu and if the viewport this width is less than 750 or equal to 750 I am going to specify black background color to this navigation menu so if the viewport is less than 750 you can see I have this background color to this navigation mini right as simple as that so using this media query I can specify different properties to these HTML elements some will just get rid of this background property and I'm going to select now menu and here I'm going to say Flex Direction column now just not that just save the changes and just open the viewport and as you can see here if the viewport is greater than 750 pixel I'm not going to have any result here but now if the viewport is less than or equal to 750 pixel I'm going to specify its flex direction to the now menu right now let me just decrease the size of the viewport right so as you can see the division tag is collapsed to the next line now let me just show you what is the before and after effect of this property now if we don't have this property you're going to get this type of result right but if you have this property you're going to get this type of result now just start that I also want to specify flex Direction column to this now items so I'm going to just piece over here a comma and then specify now and just say now items you can see you have this type of result because the height of this navigation menu is 10 viewport height you are not going to see the overflow content now if you increase the height of this navigation you're going to see the rest of the content so if I just increase the height right from here if I increase it to 100 viewport height you can see you have your navigation meaning here right now just out of that what I want when the viewport is less than 750 pixel I want to hide all this content and I want to add here a toggle menu and when I click on the toggle menu I want to display all these navigation items with these social links so to do that I'm gonna fall specify here then we would hide say other changes and this will hide all these overlooked content and just out that as you can see if the viewport is greater than 750 pixels we are going to get your navigation items right you can see your navigation items now just stop that I want to add here a toggle menu so I'm gonna just open my index dot HTML file and down here the start of this day I'm going to create another div to create my toggle icon so I'm going to create here in division tag and space for a class taco collapse and it is tail I'm going to create another day with the class Tonkov icons and inside this day I'm gonna specify a tag with the class class and specify the icon name so I'm gonna say here if a bars I want to add here parse icon so I'm gonna just here bars save the changes so as you can see you have your icon here right now what I'm gonna do is I'm gonna just let me just open this website now as you can see here you have your travel icon here now let me just style it so I'm gonna open the standard CSS file and down here we'll just style it so I'm going to select now then select toggle collapse class and to this class I'm going to first specify position so I'm going to say here position absolute and I want to specify this toggle menu on the right side of the screen so uncle just say here Tom zero and just pizza fine with which is 100% and I'm going to specify cursor:pointer so if it is and to stop that I'm going to display this icon on the right side of the screen so I'm going to just say I'm going to select now then select the proper collapse class and then select toggle icons and to the stall icons I'm going to specify display flex I want to align this toggle on the right side of the screens so I'm couldn't say here just if I can't and I'm going to say flex and say the change is oops I think something is going wrong here and this in the index dot HTML file yeah yeah and just misspell the collapse spelling which is like this collapse so I'm going to just specify here to this icon humble specific padding 1.7 for the top and bottom and 0 for the left and right now at this point you are not going to see this icon because I have just specifying hundred tons in weight to these toggle collapse class if I just specify here 90 90 percent then you can see you have your toggle icon here now I just want to increase the font size the size of this icon so I'm going to just say here so I'm going to select this selector so I'm going to copy it paste it down here and select my eye tag and I want to specify here font size and I'm gonna say 1.4 Ram and I want to specify a color so I'm gonna say here color text gray right save the changes and you can see I just increase the font size of this icon let me just open the inspector and now what I want when the viewport is less than or equal to 750 pixel I want to display only this icon and hide all the rest of the content and when the viewport is greater than 750 pixel I want to hide this icon this dongle icon right and display all these navigation links so what I'm going to do is I'm going to specify here display:none and just select this selector to the media query right down here I'm gonna say now double collapse display initial see it changes and now you're not going to see this toggle icon here but when the viewport is less than or equal to 750 pixel all these navigation links is collapsed to the next line you're not going to see this navigation links and you have your towel menu right here so if I just decrease the size of this viewport and when I have less than 750 pixel or equal to 750 pic so right you're going to get your power mini here now what I want when I click on this double menu I want to display all these navigation items somebody's just open main door J's file and in this file I'm going to use JavaScript but instead using vanilla JavaScript and will use jQuery because I'm going to use the equity for the old Kara zor-el so I'm going to add jQuery in this application to add a jQuery you just need to open the browser and I'm going to just close this tab and just open new tab and search here Jake ready now once you search for the jQuery you just need to select this jQuery calm and once this website is open you just need to download the latest jQuery library so just click on this download jQuery and from here you can get decompressed or the development version of the library so I'm going to just use this compressed version so I'm going to just click on this compressed version so I'm going to click on this download decompress production jQuery dot J query file so I'm going to click on it and as you can see you have this code so just need to copy this code so you just need to select this course so I'm going to select it and press ctrl a to select all this code and just copy this code and just paste it inside the jQuery file so I'm going to create a new file here in this J's folder and named at 5 jQuery dot mean dot J's and in this file I'm gonna put this code so I'm gonna paste it right here save the changes and now just out of that as you can see we have the version three point four point one so I'm going to copy this version and use it right here so I'm gonna rename this file to jQuery version three point four point one you don't need to worry what we have in this file just close this file and in the index dot HTML just link this jQuery before this main Dodgers back so uncle just copy this command paste it here and change it cuts down javascript file to jQuery library in the script tag to the source attribute I'm going to specify to chase holder and select my jQuery three point four point one five save the changes and open the window J's file once we link this jQuery I'm gonna just create here so I'm gonna just call this jQuery object and just to here document dot ready and in the ready function I'm gonna call a function the callback function in this function so when the document is completely ready I'm gonna execute this function in this function what's going to do is I'm going to select navteq so I'm going to create a variable of jQuery so I'm going to call the jQuery object and say now is equal to call the jQuery object again and then just say here dot now so I'm going to select the now element and specify that to the variable and just top of that I'm going to create here one more variable and name it toggle collapse and to this variable I'm gonna specify my total collapse element so I'm gonna see here don't go collapse now make sure this plus is identical to the toggle collapse class to this class right now just start with that I'm going to create on click event to this toggle collapse when I click on this toggle menu I want to increase the height of this navigation menu so what I'm gonna do is I'm gonna just create here a command and I'm gonna force specify click event on toggle menu and I'm gonna say here toggle collapse dot click I'm going to call the click event of this double menu so when I click on this double meaning I want to execute this function and what we have in this function I'm gonna say here I'm going to call now here did now variable dot and then I'm gonna call toggle class method so I'm gonna say here toggle class now using this method you can add and remove what people see is this classes at the same time now just serve that to this method I'm going to specify collapse cross we don't have this class yet so I'm going to create this class in the style or CSS file but for now what we had done here when we click on this toggle menu I'm going to increase the height of this navigation menu so I'm gonna first select this nav tag and using this collapse class I'm gonna increase the height of this now over the standard CSS file and down here I'm going to create that collapse class and specify height and height is going to be something 20 we're save the changes now if I click on this toggle menu alright I'm going to get my navigation item but I just want to increase this value to 30 grab save the changes now you can see I have my toggle venue so when I click on this toggle menu again this will hide these navigation links right so this will happen using these toggle class if you wanted to understand how to create this complete navigation menu I have simply dedicated video for that you can watch this video on the top right corner of the screen from here but for now I'm gonna move on and just after that I'm gonna open the styloid CSS file to this now class I'm going to specify transition to the height property someone answer here hi one second and specify the easing function so I'm gonna say here ease him out say addition Jase and when I click on this toggle menu you're going to get this type of result right now as you can see the navigation menu is ready in the next lecture we are going to learn how to create this main section of this reptile I'm going to add these headings then create these buttons and add a beautiful background image all right I will see you in the next lecture now we know that how to create this responsive navigation menu now the next thing we need to understand is how to create this site title so I'm gonna start with this beautiful background then add this h3 heading tag then add this h1 heading tag and along with that we have here a button and we add an how effect 2 is better so let's see how to do that thrombley just open the index dot HTML file and in this file you can see this is my navigation section I don't want to use it to create main sections this is the best practice to create new tag to create your main site section so I'm going to create here a command and I'm gonna name it main site section you can name it anything but this is just a comment so I'm going to just add some space here like this I'm going to copy this command and paste it down here and specify this is the closing main section now in this command we cannot specify the main time now always use the main tag to put your main content of your website every time when you add a main section of your website put this in the meantime this is the best practice to create main section of your website so I'm going to create here main time I don't want to add any class to this main so I'm going to create here a main tag and now in this main tag I'm going to have a different section of this website so let's say in the first section I have this title and these buttons the site title in the next section I have this Cairo zoo the oval carousel and the third section I have this beautiful blog post so in the fourth section I'm going to specify the site title so I'm going to create here a section so I'm gonna force create a command to indicate this is default sections of the name it site title now in this section I'm gonna just close this command now once I have this main section now in this command I'm going to create section tag and specify class to it I'm going to specify here site title class and in this section I'm gonna simply create a division tag with the class site background this is not necessary to use only these classes if you want you can change it but make sure when you specify CSS you use the same class which is specify to this element in this division time so I'm going to specify each three heading tag to this text and h1 heading back to this text so I'm gonna create h3 heading tag here and specify here tools and travels the start with that I'm going to create h1 heading tag and specify here a text so I'm gonna say amazing place on earth I'm going to specify a demo text here you can specify anything else now just after that as you can see in the finish website you have here a button so to create a button I'm going to use button tag along with that I want to add a class to this button so I'm going to say BTN and to this button I have a text here Explorer I'm gonna say Explorer here save the changes now as you can see if I open my website you can see I have this section here now I want to style this section and make this section like the finish website so I'm going to style this section so I'm going to open my style or CSS file and just toggle this on the right side so you will understand what we are doing now just start that starter this navigation menu I'm going to create the comment here to this command I'm gonna name it mean content right and just close it using a closing comment like this so you understand this is it be closing main section now in this command we will do all the main content styling right now this is our first site title section so I'm going to create a comment here and a name that side tie a copy is coming paste it here and just close it we're gonna specify site title styling inside this block right so I'm gonna just create here I'm gonna fall select the main tag and then select site title so if you open your index dot HTML file you can see you have here a main tag and we have here a class site title now we don't need to select then now because we have this site title inside this main tab now once we select the site title I'm gonna specify some style to it so I'm going to specify here background and the first thing we need to specify is the background image so I'm going to just specify here URL and inside it want to specify here an image so I'm going to specify this imager so I'm going to specify the root path of the application to specify it space 1 double dot forward slash so this refers to the root directory and in the root directory I have acid folder so I'm going to select it and then select the background image I have this background image so I'm going to select this background image here so I'm going to select it and just after that we'll specify background size cover and then specify some height so I'm going to specify height here 1 1 0 viewport height once I save it you can see I have this beautiful background image to my website now just out of that I want to Center this text to do that I'm gonna specify here display property so I'm gonna say display flex and I want to Center this horizontally so I'm gonna say here justify content center when I save these changes you can see I have all my text at the center of this document now just after that I'm gonna select this site background class and to select it I'm gonna force select the main tag and then select site title and then select site background now to this site background I want to first add space to this text from glass specify padding Tom and I want to add here then REM batting to this text so when I save it you can see I have some padding to this text now once I have this padding I'm gonna align this Center so I'm gonna say here is text-align:center and I want to specify color so I'm gonna specify color white I'm going to use here a variable say other changes now as you can see here I have my text here with the white color now I just thought that I'm gonna select my main tag then select the site title class and then select h1 and h3 heading time and I want to specify margin to it so I'm going to specify margin 0.3 REM so this will specify top right left and bottom margin when I save the changes all right so this will specifies 0.3 margin to these h1 and to this h3 text now just out of that I'm gonna select my main tab then select site title and then select BTN class now as you know we have this bit in class to this button so I'm gonna select the b-team class and just spacing on here margin and I want to specify 1.8 Ram margin to this button when I save it you can see I have some margin to it just out of that I'm gonna specify background I'm going to specify background color to it and I want to specify gradient color to this button so I'm gonna say here sky so this is the variable I'm going to specify to this button to specify gradient color when I save the changes I have this gradient color to this button but now as you can see this text and this button is not look like the finish website like this so instead specifying the font family and some space to it I'm going to specify the global classes to this text so we can use it later in this tutorial so I'm gonna just scroll up and open my global section right here in the global section I'm going to add some start now here I'm gonna create global styling to this theme so I'm gonna simply select the h1 heading time and specify font family so I'm gonna say here font family and I'm gonna choose my variable here this one and just talked about I want to specify font size to this text so I'm going to just specify font size which is 2.5 Ram when I save the changes you can see I have the similar result what we have in this finished website just after that I'm gonna select this h3 heading tag so I'm gonna select it and I want to specify here on family either so I'm gonna select this font family and specify font size which is 1.3 Ram so as you can see here I just specify this global styling to the h1 and h3 heading that so whenever you use h3 and h1 heading tag you're going to get this default styling now along with that I also want to spit out some style to h2 heading tag so I'm gonna get the default styling to the h2 heading tag also so I'm going to specify font family save the changes this will not do anything but this is the best practice to specify default styling to your template whenever you create your own CSS now as you can see I need to specify some style to this button as well so in the global section I'm gonna force select button and select the class BTN now whenever I specify this class do my any button I'm going to apply these CSS properties to that button so this is the default styling to this button now in this button class I'm gonna specify border:none border-radius to Ram padding I'm going to specify one Ram for the top and bottom and three dam for the left and right when I save it you can see we have this button here and I want to specify font size 1 RAM and font family is going to be this and the last property I want to change the cursor when I hover on this button so I'm gonna say here cursor:pointer when I save the changes you can see I'm going to just change my cursor when I hover on this button now just after that I want to create Howard effect on this button so I'm not going to do that in this global section instead I'm going to do it in the site title section so I just specify this global styling to my all patterns so whenever I use button with this bit in class I'm going to have this default styling to the button now in the site title section right here I'm gonna create how affect this button so I'm gonna select main tag and select this site title and then select the VT n plus and to this BTN when I hover on it I want to space it for some style so I'm gonna specify here background:transparent then specify border one pixel solid white when I save it and when I run it you can see this type of result now the last thing I need to change this text I'm gonna just say a color and just change it to white right save the changes and as you can see here I have this type of result here now it's very easy to create this site title isn't it now the next section we are going to create this beautiful carousel with this carousel navigation we're also going to add this background image we are going to create these cards with this image these buttons and we're also going to add this beautiful background image so let's see how to do it as you can see I have this beautiful carousel so I can navigate to my different slides and also you can see I have this background image and I have these beautiful 3 cards now walk navigate to my next card I'm gonna click on this navigation link of this carousel like this so I'm going to navigate it to my next carousel so to add this functionality and to create this carousel I'm going to use all carriers in library 2 create this beautiful carousel you just need to add old carousel in this project so I'm going to just open a new tab and search for / carousel now once you search it you can see you have the home page of this ole Cairo zoo just click on it and as you can see here you have your old carousel library now to use this library and make sure your link jQuery to your index dot HTML file because this library is using jQuery to create carousel if you are following along with me we already done that so we don't need to link to jQuery El Cap now as you can see here I have this download button so I'm going to download this library and use it in the project so I'm gonna click on this download button I already downloaded this library so I'm gonna just open it but before I open this library let me just show you the demo of this library so if you just click on this demos you can see you have different carousel sliders you can create different carousels with this library but for now we are going to create a basic responsive slider so I'm going to just create this basic responsive slider and just change these navigation links and remove these dots you can also drag these items if you want so this is the benefit of using this whole carousel now let's open the old carousel zip file you have downloaded so your downloaded file something look like this you just need to now extract it so just need to right-click here and say extract here so once you extract this all Karos a library just open it and you just need to open the Dix folder and in this text folder as you can see here you have the CSS files now you just need to link the OL carriage and CSS file or you can use this minified version as well I'm going to use this bowl carousel dot mean file and also I'm gonna link this oval theme default dot mean file so using this file we are going to specify the default theme to the carousel so I'm going to link these two files so I'm going to just copy these two files I'm going to press ctrl C to copy this file and paste it inside they do it directly inside the CSS folder so as you can see here in the root a few of my project I'm going to just copy and paste that files in the CSS folder right here so I'm gonna just paste it here once I have this old carousel and this theme file I'm gonna just open the old carousel folder and in this folder in the text folder you can see you have the JavaScript files you also need to link this javascript file to interact with your Kara's oh right so I'm going to just copy this whole carousel and paste it inside the root directory inside this J's folder right here and I'm gonna paste it that file here now the next thing you need to link that file to your index dot HTML so we can use it in the project so I'm going to just open my website and let me just expand this window in the index dot HTML file right here on the top before the custom styling right here I'm gonna just link this over Kara's room so I'm gonna false create a command and I'm gonna specify here over lo carousel and I'm gonna link this whole carousel CSS file using the link tag and in the href attribute I'm going to first specify the root area crop of the project then select the CSS folder and then select all will carry the MnDOT CSS file and I'm just talking to that I'm gonna make the overall theme as well I'm going to just called link tag and in the href attribute I'm gonna select CSS folder and then select this oval theme default window a CSS file I'm going to use here minified version of this file if you want you can use the development version as well now just save the changes and now don't forget to link the javascript file of the old carousel because without it you can't interact with your carousel so I'm gonna just copy this command because I'm going to use it down here so just after this jQuery file make sure you need to put this javascript file just out of this jQuery because all carousel will use the jQuery to create carousels so just after this jQuery I'm going to create a command or Karasu and they made something all Kara's little Jess and just after that right here I'm gonna create script tag with a source attribute and in the source I'm gonna first specify the J's folder and then select the spool carousel main dot J's file save the changes and now I can create this beautiful carousel now to create this beautiful carousel I'm gonna just open the main section of this website and in this main section I'm gonna force create a command and name it blog carousel and I'm gonna just close this command now in this command block I'm gonna create my second section so I'm going to create here a section tag and in this section time I'm going to create a division tag with the class block now in this block I'm gonna have a simple container so I'm going to create a th e tag with the class container now in this container I'm going to have oval container the old container will contain all the oval items so we're gonna put all the old items inside this whole container right so I'm gonna just create here a division tag with the class / carousel just off that I also want to add here all carrizal theme so I'm gonna just add here over theme along the tag I also want to add my custom class to this division tag so I'm gonna add here blog post when I press tab I'm gonna have a division tag with three classes so I'm gonna create here the class / carousel so this is a container of different items then I'm gonna specify all theme so this is used to specify default styling to the OL carousel and this is the blog post so this is the custom styling for this division car so I'm going to create this blog post in the style or CSS file now in this tail as I said this is the container of all carousel now I want to create this carousel items so I have here four carriers or items so I'm gonna create a division tag and I want to specify class to this day and I'm gonna name it la content if you want you can specify any class name to this day right as you can see here this is my first carrizal item to create your second carrizal item just duplicate this line right but we are not going to do that because once we complete this dave i'm going to duplicate it so first in this stage I'm gonna add IMG tag with a source attribute and to this source I want to specify my image so I'm gonna select asset folder select the block-post folder and i'm gonna select my first image here so I'm gonna select here post one this image and in the alt attribute my name post one now just out of this image I'm gonna create here a division tag and specify block title in this Dave I'm going to create this title this fashion button and this text in this day I'm going to just create h3 heading tag and specify in some text here so I'm going to just say here London Fashion Week's continued evolution and save the changes and now just after that just after this 83 heading tag I'm going to just create here button and I want to add the default class to this button which is BTN so as you know we already specified default styling to this bit in class and I'm going to specify here a text which is fashion along with that I want to add a custom styling to this button somewhere specify here BTN block just after that just after this button I'm going to add a spawn tag and specify here text two minutes so I'm gonna just open the style of CSS file and just toggle this window on the right side like this and just create a comment here to indicate this is the second section so I'm going to just create here a command long carousel and just close this command so I'm gonna copy it paste it down here now to style this blog section I'm going to first select this block class so I could just open my style dot CSS file and inside it I'm good select the main tag and select the block class now in this block class over the first specify this background image so I'm gonna just specify here background and in the URL I'm gonna specify the image so I'm going to specify the root path so I'm going to just select the asset folder and inside this positive order I'm gonna select this abstract file extract 0.1 PNG file I'm going to specify background-repeat:no-repeat and I just go to that I'm going to specify background position right and I want to add some height and width to this block so I'm going to specify here height hundred if you put height and I'm gonna spits one width which is 100 percent save the changes and save it you can see you have your block section here but here is your content weight the content is gone if you open your index file you know that we have this content inside this block class but where is the content now now just open the standard CSS and just save it again when you save this file you can see you have your content here for just a few seconds now when I save this file alright so as you can see here you have your content only for a few seconds and the content will disappear after a few second this will happen because you specify here in the index dot HTML file you finish like this leave as oval character but you have not called the old carrizal function so we need to first call the old carrizal function and then you are going to get your content here so uncle just open the main door J's file and inside this file right here I'm going to create a command and in this comment I'm gonna say oval Carroll 0 for block and just on to that right here finished ice cold Karasu just need to call the jQuery object and just specify the class name so as you know we specify this container with the class old carousel so I will just copy it and specify this in the single code don't forget if I dot here now once you select your division tag using this class you need to initialize this is the cold carousel so a need to call here over carousel and just specify parentheses I'm gonna save this main dot JS file you can see I have my content here as simple as that now just off that just open this dialog CSS right here so I'm gonna just add some padding to this content so I'm going to just pull select the main tag and then select the block and then select blog post this class this one now once I select this class I'm gonna space if some padding to this class so I'm going to space by padding tall and I want to add here 6rn padding so I'm gonna just say here is six trim so this will specify top padding to this content just are to this blog post I'm going to select the block content to select it just call the main tank select the blog post and then select blog content now I'm going to specify here display flags then specify flex direction column because I want to align all this block content in the new line then I'm going to just specify text-align:center and I want to specify faith 80% somewhere just basic five with eighty percent and just over that I'm gonna just specify here margin I want to add three rim to the top and bottom and to when to the left and right this out of the Hat I just want to add some box shadow to this block and dance I'm going to specify some box shadow to it so I'm gonna specify 0 15 Bitzer 20 pixels and I'm going to specify RGB acre here so I'm gonna choose a simple gray color here light gray and the Alpha is going to be zero point to say three days just after this block and then I'm gonna slick block title so I'm gonna first let me in tag the block content I'm gonna select block title now inside this block title I'm gonna have this title this button and this Montag so I'm going to specify here some padding to it so I'm gonna spit spot padding du rim to the top and bottom and zero for the left and right now just after that I just want to style this button so to Sinek this button I'm going to select the main tab and you select the block content and then BTN block class so I'm going to select it and specify padding point seven to the top and bottom and to rim for the left and right and now just after that I'm going to specify a background and I want to specify gradient background to this to this button so I'm going to specify this sky red in color under and specify some margin so I'm going to specify margin 0.5 where when I save it I have this type of result now just out of that I'm going to just space over some style to the spawn tag and make them a block level content so to make this spawn as a block level content and add this one in the next line I'm going to add here a main tag select the block content and just specify here a spawn now to respond I'm gonna specify display block when I save it I have this pawn in the next line I just specified display block to this one now I just want to specify some font family to this man so I'm gonna do that in the global section so I'm going to do it right here in a global section I'm going to specify spawn time so I'm going to specify font family when I save it I have this font family to my spawn time right now this is your first carousel item I want to make three more now I'm going to create here for carousel items if you want you can create more than that so let's create three more carousels so I'm going to just open the index dot HTML file and inside it you don't need to write any code now instead you just need to copy this division this block contain division time because this is your first care as an item I'm going to just minimize it select it and just press alt shift down when you press it you can see you have your second care is your item I'm going to do the same I'm going to press go to shift it down again to create my fourth carousel item when you expand this you can see here you have your four care as an item now I will just save it and as you can see here you have your three carousel items here now what I want I want to change this image so I'm going to change it so I'm going to change this image to post three dot jpg the third image is going to be post two dot jpg and to the last Carol zero I'm gonna specify post five right you are not limited to only choose these images you are free to choose any image here save the changes and now you can see you have a different images now as you can see I have four carousel items here if you want even create more than that now just after that as you can see here this carousel is not looked like we have here so as you can see here I have this container class which we haven't created yet so I'm going to just create that in the style or CSS file in the global section right here just after this pawn tag I'm going to just create a continuous and specify some margin so I'm going to specify here mono gene zero for the top and bottom and to the left and right I'm gonna specify five viewport width when I save the changes as you can see here I have some space to this car all right and so as you can see I have this gradient on the bottom left corner of this card in my website I have this gradient here I want to align this gradient on the bottom left corner to this card so to do that I'm going to just specify here to this block class in the block carousel I'm going to just specify here background size which is 65% when I save it you can see here I have this gradient here right like this now just after that I want to specify auto scroll after 83 second to this carousel as well as I want to remove these dots so I'm going to do that in the main dot J's file so I'm going to open it and this main dot J's file as you know we initialize this carousel and in this parenthesis I just need to call an object and specify different parameters so I'm going to just specify here first I'll command which is Liu and I'm going to say here true I just want to add here auto play true and after every three-second I want to scroll this light automatically somebody say here on to play timeout after every 3 second so I'm going to specify 3000 here and I said it I don't have to screw this Karasu it will automatically scroll itself right now just out to that I want to remove these dots I'm going to just specify here the odds false when I do that I don't have these dots here and as you can see I have this old navigation on the top so I'm going to just enable it so to enable this navigation you just need to call here now true when you save the changes you can see you have here and now right I hope you see this now because it's really small now as you can see the carousel is automatically scroll after every three seconds and here you have your oval navigation now I just want to change this old navigation to these icons to do that complete is open my index dot HTML file and just after this closing day you start to this oval carers will container close in dear I'm going to just create here another day and specify a clause over navigation to start that in this poll the invitation I'm going to create a span tag with the class over now previous so this is my previous over navigation now in this span tag I'm gonna add this left arrow so I'm gonna just add that using pontus on website so as you know I'm going to add this icon using I tanks so I'm going to add the item here and specify a class fast if a long arrow out left right when I save it you can see I have this icon here now just after that I'm going to just duplicate this line and change this icon to right don't forget to change this class as well and I'm going to name it Oh now next Save Changes now you just need to indicate the old carousel to use these icons instead using this default so to do that using to open the main door J's file and here you just need to specify now text property and to this property you need to specify the navigation links you need to specify that in the array so I'm going to just add a bracket here and in this array I'm gonna force specify my first spawn tag this one so to do that I'm gonna force select this over the navigation and then select this will now do the spawn turn sample just open main door J's file and I'm going to select it using jQuery object because it's very easy to select any tag using jQuery so I'm going to call jQuery object and in this single code I'm going to call over the notification and call over now previous specify comma here and specify the second oval navigation so I'm going to just copy this text like this you specify right here and just change this class save the changes and now you can see you have your custom over navigation now you can navigate through different slides using this oval navigation now just out that this want to specify some style to it so I'm gonna just open the style or CSS file and the style on the right side like and spit up some style to this oval navigation from one just specify that style down here in the block carousel right now to spine this navigation I'm going to just post select this section tag and select the container and just talk that I'm gonna have here oval now class to style this navigation you have access to this over now if you initialize this property now true we already done that so I can use this class for now let me just specify autoplay faults we will enable it once we complete this website but just for now I will just specify here autoplay falls and just after that in the CSS file I'm going to just specify here position to this navigation so I'm gonna say position absolute I want to specify this navigation on the top at the center so I'm gonna specify a position top zero someone just say top zero percent so you can see you have this name here then add its own to specify margin zero to the top and bottom and I'm going to say Auto here to send her this navigation I want to specify vid to this overlap when a space for fit 100% I have this navigation at the center of this document horizontally and I save it I have this navigation right here now I just want to remove this how effect this background color and want to increase the size of this icon so I'm gonna do that quickly someone just first select the oval now then select oval previous and then select my custom oval now previous class to start that I'm going to copy these selectors paste it down here and just change this whole previous to over the next and this became will now next and to this classes I'm going to specify color and I want to specify takes great leur will just specify background:transparent and I want a specific font size going to be to wrap I have this navigation but I still have this hot effect on this navigation so I'm going to just remove it some kind of all select the Oval theme so just need to say here oval theme then select the Oval now and then you want to just select a class you just need to select a class which has over plus somebody just here class astray is equal to over so I'm going to just say here any class which has a class starting with over I want to select it I want to specify the whole effect on it and to this whole effect I want to specify background:transparent and color is going to be text great so the changes you can see you don't have this background color if you want you can change the color when you hover on it as well so if I just change this color I'm gonna say here midnight you can see I have this midnight color to these navigations now I can navigate to my different slides right but still as you can see here I have this border this outline to remove this outline I just need to say here you just need to first select this selector and specify outline:none when you save it you don't have this outline to this navigation right I can navigate to your different slides as simple as that now once we know that how to create this beautiful carousel slider let's move on to the next section and in this section we're going to create this beautiful blog post so I'm going to create this beautiful layout using grid system so let's see how to create this beautiful drop post with your sidebar so I'm gonna just create this blog post and sidebar in the index dot HTML so I'm gonna just open index dot HTML file I'm gonna create a comment here and just name this command site content because all my content goes here I'm gonna just copy this command and paste it down here and just specify this is the closing site content now in this command I'm going to create my new section so I'm gonna start with the section tag and specify a closed container now in this section I'm gonna create here a simple division tag with the class site content so I'm gonna say a site content and in this site content I'm gonna have a different blog post so I'm going to create a div with the class post and in this deal I'm gonna have my different blog post but for now I'm gonna just add here which one heading tag and specify blog posts and just after that I also want to add this sidebar to my layout as you can see here this one so to create this sidebar I'm gonna add here a side tag and I'm gonna specify a class to it sidebar now inside this aside tag I'm going to just add h1 heading type for now and specify sidebar text when I save it and open my website you can see I have here blog post and the sidebar I just want to specified display grilled to this layout and I want to specify 70% width to this blog post and 30% weight to this sidebar so I'm gonna do that in the standard CSS file so I'm going to open the standard CSS and in this style or CSS file I'm gonna create here a command just out of this block carousel I'm going to add and comment here and just specify site content just closed this cannot now in this side can't and I'm gonna post select the site content class so I'm gonna first see like the main tag and then select site content now once I select this site content class this one I'm gonna specify display grade now I just want to specify the site content as a clear column so I'm gonna specify this black reel and then specify here grid template columns and I want to create here two columns so I'm going to specify 70% weight to this blog post and 30% weight to this sidebar so I'm gonna do that here so I'm going to force a here 70% so this will create force column with 70 percent weight right and then I'm gonna split it by 30 percent so this will create my second column in the same row with 30 percent of it when I save it I have my sidebar in the same row now I have 70 percent weight to this blog post and 30 percent weight to my sidebar now just after that I'm going to just create these beautiful blog post and there's blog post section so I'm going to just maximize this window and in the index.html file and we'll just get rid of this h1 heading tag and create my first blog post so I'm going to force create here a division tag with the class post content now in this post content I'm gonna have my first blog post now inside this day I'm going to create another day with a class host image and inside this Steve I'm going to have this beautiful image along with that I'm also going to have these post information and in this post information and have the admin the publish date of this post and then I'm going to display the comments and so to create it I'm gonna force create here at Division tag and inside it I'm going to put IMG tag and to the source attribute I'm going to specify my asset folder then select blog post and then I'm gonna select my first blog image and it the OT attribute I'm gonna say blog what now just after that just out of the Steve I'm gonna just create here another deal and specify a class post info and inside this tier I'm going to just create sponsor and I want to add this user icon so I'm gonna just add that right here so I'm gonna just add attack with the class France if a user and when I press that I'm gonna have the user on my website oops I think that's all go to space bar here user right save the changes now you can see here I have this user icon right now just after that I'm gonna just copy this font that and create another spawn turn down here and just change this user icon to calendar so I'm going to change this user icon to calendar art so I'm gonna say here calendar Earth when I save it I'm gonna have here a calendar icon right and just talked to that I'm going to create a span tag again but at this time I'm not going to add any icon instead I'm gonna put a simple text so I'm going to just put two comments save the changes I'm going to put all these three elements in the same row I want to specify flexwrap property to this container so I'm going to just specify here to this post info I'm going to specify flags row class you know that what we have inside this row class and just after that I'm going to specify it takes three to these icons so instead selecting these icons and specifying style to it I'm gonna just specify here a class text gray and I'm going to specify this glance here as rayul so I'm gonna say here a text grey and save the changes now at this point this class will not do anything but when I open my stand sheet and specify color to it you're gonna have that color to these icons now if you take a look at is spawn tag you're gonna have four simple icons but in the main website we have some text here so to add these tanks I'm gonna force specify here to the first spawn tag I'm going to specify aadmi and here you can see you have your admin now let me just add some space to the bottom so I'm going to just one standard CSS and I'm gonna just specify some space I'm going to specify my main tag and specify margin bottom 5m and as you can see here I have some space right here so you'll see what we're doing right now I want to add some space between this icon and this text so I'm gonna just use a simple non-breaking space here to add non-breaking space you specify an person and say and B as B so this is the non-breaking space I'm gonna add it again because I want to add two spaces here you're okay to specify semicolon at the end of this NB SP the short form of non-breaking space and when you save it you're gonna have a space between your icon and your text now I'm gonna specify some text to this second span tag as well so right here just out of this attack I'm going to specify these spaces like this and I'm going to add here a date somewhere just here January 14 2019 save the changes and as you can see here I have this date here now just out of that as you can see in my finish website I have this title this paragraph and a button to create this beautiful title paragraph unbuttoned I'm going to just open my index dot HTML file and just after this blog post division tank right here I'm going to create another division tag with the class post title and in this division tag I'm gonna create a title for this post so I'm going to put this title in the anchor tag and I'm going to specify here hash and just specify a text here so I'm gonna just specify here why should boys have all the fun it's as the woman over making India and alcohol-loving country don't take this title seriously because this is just ten demodex and then I'm going to add here a paragraph and I want to add in the more text here so I'm not going to write it instead I'm gonna use lorem here using going you can a demo text in your website so I'm going to show you how you just need to drive here in Lorraine and just place it by how many words you want to put in this manner crap so I just wanted 40 votes maybe paragraph so I'm going to split it by 40 and press tab first you can see I have here 40 votes inside this paragraph now I just don't this paragraph I want to add here beating class to this button and some custom class so I'm going to say here post with Ian so you didn't post BTN I will specify different style to this pattern then I'm going to specify here a text to this button so I'm gonna say read more and I want to add some space here so I'm gonna use non-breaking space and then specify here an icon so I'm going to specify I and I want to add here flatout so I'm gonna say here France thing I will and I want to add here right arrow now when I press tab I'm gonna have right arrow just after these with more text save the changes and as you can see here I have this button with read more text and this icon now as you know we already specify styling to this beat in class so that is why I have this default styling to this butter what we need to do is we need to specify style to this blog post and make them attractive like this now if you want to specify style to it you need to open the style or CSS file so I'm gonna open it double this window on the right side and I'm gonna fall specify this takes to create class so I just want to speak about some style today's taste great class so this is a global class so I'm gonna just specified in the standard CSS file in the global section up here and we'll just create here text gray and to this class I'm going to specify a color I'm going to specify text gray variable and save the changes when I save it you can see I had this text quickly to these icons now I just have that I'm going to just back to my side content so here is my side content block and inside it I'm gonna style this beautiful blog post now to style this section I'm gonna first decrease the window size for specifi 100% width to this post content so I'm gonna stay here with 100% and just after that down here I'm gonna fall select the main tag then select the site content and then I want to I want to select the post content and just after this post content I want to select the descendant division tag so to select this I'm gonna use here a greater than operator and the descendant Eve of this post content I want to select these post image and I also want to use here post title I'm going to just select post image and post title class element and I want to specify padding to it I'm going to space by padding 1 Ram to the top and bottom and to ramp for the left and right then I just want to specify position:relative save the changes and this piece over some space between this image and this post title now just after that I'm gonna select this post info so I'm going to select the main tag site title class post content and then I want to select here post image and the last I'm gonna select post info class now to this post info class I just want to specify here background sky which is the gradient color then I'm going to specify padding 1 gram to the top and bottom and 1 gram to the left and right so instead using this I'm gonna just specify 1 Ram here so this will specify top right bottom left padding now as you can see as you specify this brilliant pillar to this post info now what I want I want to specify here absolute position to this post info and want to add this post info right here so I'm gonna specify here position absolute then specify bottom 0% and left is going to be 20 viewport width and I save it I have this post info at the center of this image just after that I'm going to specify border radius to this post info and I'm gonna say here three RAM so when I save it I have this border-radius to this post info now just after that I'm going to select all the division tag inside this post image so I'm gonna just say here main site content and then select the descendant post image and inside this post image I want to select all the design and division tag and I'm going to specify here overflow:hidden just after that I'm gonna select the main tag again then select the site content and then select post content class and I want to select a decent end post image class and start that I want to select this image so to select this image I'm going to use IMG class so as you know we don't have this IMG class to this image so I'm gonna specify that quickly so I'm going to just specify here to this image I'm going to specify a class img' I just save the changes now I'll just talk to that to this image I'm going to specify braid which is 100% and I'm going to just select the post image class again so I'm gonna just stay here main site content then select the post content and then select the descendant post image and to this post image I want to create an hover effect on this image so I'm going to select IMG tag and create an power effect how to create an hover effect you just need to select this image and specify how we factor it and I'm gonna specify here transform scale and I want to increase the size of this image by 1.3 when I save the changes and hold on this image you're going to get this type of result now as you can see here you have this overflow content as well I don't have this post image descended deep inside this post content so I just wanted to correct this selector so I'm going to just specify here post content and inside this post content I have this post image right gonna save it you're going to get this type of reserve so you're not going to see this overflow content here I just want to specify it slowly zoom in and zoom out effect to this image so to do that to this image I'm going to simply specify transition property so I'm going to specify transition on one second is when I say other changes and how we're on this image I'm going to get this beautiful transition now this one and style this post title section so I'm gonna just open the standard CSS file and down here and we'll just style this post title but before I started I want to add some space between this command and this and this day so I'm gonna just hold select the span tag so I'm going to simply say here main tag then select the site content then select the post content class and inside it i have post image class and inside this class i have post info class and i'm gonna select a span tag and to the span tag i'm going to specify margin:0 and 0.5 gram so this will specify left and right padding to this command when i save it you can see here i have some space to this command now just on to that let's style these post title i'm gonna post select the main tag then select the post content and we have here post title class and to this class so i'm going to select the anchor tag like this and specify font family and don so I'm going to use here available oops I just need to close this I don't want to update this which is to the code right now and now I'm going to just specify font size it's going to be one point 5 gram say ok changes this will increase the size of this anchor tag like this and specify the font family now just after that I'm going to select there's bit in class so I'm gonna just select here side content you can select the main tag as well but I'm going to start with the site content class so call your site content post content and post title and inside this post title I'm gonna have post BTN and inside it I want to remove these pata ladies so I'm going to say all the radius 0 and padding is going to be 0.7 Ram to the top and bottom and 1.5 Ram to the left and right then I want to add a background color so I'm gonna say here background Scot save the changes and as you can see here I have this beautiful button here right now I just want to style this paragraph so I'm not gonna specify any styling in this side content instead I'm going to use a global sailing to this paragraph so whenever I use paragraph I'm forced to apply the global side so I'm gonna just open my global styling right here inside this global styling I'm going to select my paragraph and to this paragraph with a specified phone family and I'm going to specify this font and I'm going to specify here color text light so it changes and as you can see here I'm just specify some takes light color to this paragraph and have a font family now as you can see my first post is ready like I have in my finished website now let's move on and create the rest of these posts so what I'm going to do is I'm going to just copy this first post and change the data so I'm going to just group on the index dot HTML file and as you can see here I have here a simple horizontal row somebody just first add this horizontal row here so to create this horizontal row I'm going to just use a char tag so just after this division tag just after my first division tag right here I'm going to just add H our tag so this tag will add this horizontal row when I say B you can see I have my horizontal row but now I just want to remove this margin which we had specified to this post content so I'm going to remove this margin now just stop that I want to create my second post with this beautiful doggy image and I want to add here a similar text and produces over the index dot HTML file and inside it I'm gonna just minimize this post content and just copy it so I'm going to just copy it from this horizontal draw I'm going to select it and just press alt shift it down so this will duplicate this first post so I'm going to minimize it and open my second post and change this image so I'm going to change it to the blog one two blog post to when I save it I have my second blog post here with this dog image and I also want to change this date and this comments so I'm going to just change it to January 16 I have here serving comments see it suggests so as you can see I have my second blog post ready now I'm gonna just create my next blog post so I'm gonna just add this image and as you can see here I have different texture so I'm gonna just copy my second blog post so I'm gonna post minimize the second blog post and just select it and press alt shift down gonna press L shape down I'm gonna have my third blog post here now I'm gonna expand it and just specify here block 3 dot PNG save the changes and as you can see I have my third dog post here right now I'm gonna just change this text and I want to add here this text so I'm gonna copy this text and paste it here now you can see I have this text here I'm also going to change this January 19 and 5 comments languages here January 19 and I have five comment on this post I'm gonna save it and as you can see here I have here January 19 five comment and I have the different next year and just out that I'm gonna create my last post so I'm going to just copy my third post right from here but I'm going to just select it and press old shave down and just minimize my third post and maximize fourth post just onto that I'm going to change this image the block 4 so as you can see I have my fourth post here now I just want to change this date to 21 and I have 12 comments on this post so I'm going to change it to 21 and I have 12 comments on this post when I save it you can see I have my last post with the publish date 21 January and I have to comment on this post now just talked to that at the last post I don't want to add this horizontal row so I'm going to remove it so I'm going to force minimize this fourth post and remove this horizontal row right now as you can see here the blog post is ready now the next thing we need to create I'm going to have here pagination how to create this page edition I'm going to first open my site content class and inside it I'm gonna have my post I'm going to just have here just after my last post I'm gonna create here another div with the class pagination and inside this pagination I'm gonna have my page numbers so I'm gonna first add here anchor tag to this anchor tag I'm going to add an icon so I'm going to just add this icon here so I'm gonna just say here I tack and add an icon class I have this icon right here not just after that I'm gonna just copy these and good tag and duplicate it just change this left to right so as you can see I have this left and right icon down here and now I just want to add my pages so I'm gonna add anchor tag and just specify here first page duplicated space for my second page duplicate it and specify my third page right save the changes as you can see here I have my fourth second and third page now to start with that I just want to style this pagination somewhere open cell door CSS file and inside it I'm gonna style it so in the style of CSS file right here in the site content I'm going to select these pagination so I'm gonna force select e the site content class and inside it I have page initial plans and to this page edition I'm going to specify justify content center but before I specify this property I need to initialize this pagination as a flex container so true so to do that I'm going to just specify here in the index dot HTML file I'm going to specify here blanks row class you start that I'm going to save the changes and open the style of CSS I'm gonna specify here color text gray and margin is going to be for Ram to the top and bottom and 0 for the left and right save the changes and you can see here I have my pagination at the center because I just use here justify content center now just down to that I'm going to select these anchor tags so to select it I would of course select the site content then select the pagination and then select the anchor tag and to design cadet I'm going to specify padding point six frame to the top and bottom point 9 3 m to the left and right then I'm going to specify powder a is to ram and margin is going to be 0 for the top and bottom and point 3 for the left and right just our two that I'm going to specify font-family which is this when I say it changes you can see here at this piece was some margin to this element and have a font family now just out of that I just want to specify this in color today's pages so I'm going to first specify class to it so to this page is I'm going to specify class pages and I'm gonna copy this class and specify to my second page and specify to my third page oops I think I forgot Dec here like this save the changes and just talk that over the standard CSS file and I'm gonna post select the site content then select the pagination and I'm gonna select the page grass and to this page class I want to specify background color text grey and color is going to be white when I save the changes I'm gonna have here a simple background color to my pages oh I think I pop or something page yeah here pages I just need to change here page two pages so that it is as you can see I have a background color to my pages right now as you can see my first grade column is ready now let's move to the next column and in this column I'm gonna have this simple sidebar and in this sidebar I'm gonna force create this category then I'm going to create this popular post and then I'm going to have here newsletter and the popular tags now let's see how to create this beautiful sidebar so I'm just open our website and as you know I have a clear column here for the sidebar and I will just open my index dot HTML file and inside it I have my sidebar section so instead using this h1 heading tag I'm gonna create first this category section so to create this category section I'm going to force out the division tag with the class category and to this category I'm going to first create h2 heading tag with the class category I'll just talk to this h2 heading tag I'm gonna have your back with the class category list and inside this yuletide I'm going to create my el ataque and specify a class items and instead is a letter I'm gonna have my anchor tag I'm gonna first piece for my category so the first category is software so I'm gonna say here software and save the changes now when I save it you can see I have this category now I'm going to create my second third fourth and fifth category now I just want to create this number so I'm gonna just open my index dot HTML file and just start with this anchor tag I'm going to create a span tag and specify here and number so I'm going to first specify 0.5 save the changes and now as you can see I have this number here now uncle just create here category items so I'm gonna just copy this Li tag and just duplicate it so I'm going to press alt shift down so this will duplicate this Li tag and I'm gonna create my second category which is technology then I'm gonna change this number to and the third category is going to be lifestyle and the fourth is going to be shopping and the last I'm gonna create here he's the food so I'm gonna sit here food I also want to change this number so I'm gonna change it here 7 I'm gonna change it to 1 and change this part 8 see this is yes and now you can see I have my categories now I just want to specify some style to this category and make this category attractive so I'm gonna just open my style or CSS file and just double this window on the left side just stop there just stop to this side content and this main content right here I'm gonna create a comment and I'm gonna specify here sidebar like this just copy this command paste it down here and just close it and I'm good to specify styling to my sidebar inside this command now to select the sidebar I'm going to use side content class because inside the side content I have these sidebar class so I'm going to select the sidebar some currency here sidebar and once I select it I'm gonna select category list so I'm gonna just here category list so I'm gonna select this class here this one which are specified to this year on that inside to this category list and what specify found family and specify a foreign family to this category list just talk to that I'm gonna select site content again select the sidebar category list and just down to that I want to select the list items so I'm gonna say here list items so I'm going to selecting these list items right to this list item I want to specify background sky the gradient color then specify padding 0.4 m to the top and bottom and 1vm to the left and right margin 0.8 rim for the top and bottom and 0 for the left and Y then just all do that I'm going to specify a border radius 3 damn and weight is going to be 70% you start with that I just want to specify display flex and I just want to specify some space between this number and this text so I'm gonna use here justify content space bit fee and I save it you can see I have some space between this number and this takes now at the last I want to specify black color to this text so I'm gonna just select here the list item so I'm gonna select this selector touched it down here and select the anchor tag and I want to specify color to it from one so here color black when I say if they should use I have this black color to this text right now as you can see a catechist section is ready now let's move to the next section and in this section I'm gonna have this beautiful blog post I'm gonna have my different blog post here with my different image so to create this blog post I'm going to just add here in my index dot HTML file right here just after this category I'm going to create my popular blog post so now to create this popular blog post I'm going to just create here just after this category I'm just create here a division tan with the class popular post and inside the save I'm gonna have here h2 heading tag and specify a class popular post say 30 days and if you open your website you can see you have your popular post and you start that I wanna forget here my first popular post so to created I'm gonna just add here a division tag with the class post content now to create this post I'm not gonna waste your time to creating this post so instead creating this post I'm gonna just copy my post content class this one will just copy this post content and use it and my sidebar somebody this puppet is post and just specify that inside is popular post division time so I'll just paste that right here right so I'm going to have my first post here when I save the changes and open my website I'm gonna have my first post now what I want I want to change the style of this post so I'm put your emo this paragraph and this button from this post so I'm going to just here just remove this paragraph and it's better and I want to change this text as well and I'm going to change it to new data recording system to better analyze road accident save the changes and as you can see I have here a simple blog post but now I just wanted to change this post info as well admin spot that from this post info and save it and I save it I have this type of result but still I want to update this post so to update it I'm going to open this dialog CSS file and just place it for some style to it so I'm going to stock of this window on the left side and specify some style to this popular post now what I want I just want to fall select the post content class and change padding I just want to remove this padding and specify phone trim padding so I'm going to just select here side content then select the sidebar class then select the popular post and just sort of that I'm gonna select post content class and to this post content I want to specify padding 1 Ram to the top and bottom and 0 or the left and right and just sort that I'm going to select site content then select the sidebar and I want to select be your post h2 heading tag and I want to specify padding top 8 Ram so I'm going to space for some padding to this popular post so I'm going to just specify here padding top 8 Ram and I save it as you can see I have some padding to the popular post now just after that I'm going to select post info class this one so I'm going to select it using side content then select sidebar then select the popular post and then select post info and to this post info I want to specify padding which is 0.4 Ram to the top and bottom and 0.1 to the left and right then I'm going to specify bottom 0 Ram but left to REM disturb that I want to speak for here about the radius zero ma'am background is going to be white now as you can see all these classes is not actually applying to this post info does all this problem I'm gonna override the default properties when you order the default property you just need to call important keyword here just after every property like this when you do that you have styling to your blog post I will just decrease this font size so I'm gonna first select the site content then select this sidebar and then select this popular post I'm gonna copy it paste it here and when I have deport me to post I'm gonna select post title and select the anchor tag and I'm gonna specify font size to it one we're gonna save the changes I have my popular post here alright now the last thing I just wanted to update this left property and make it 1.5 mm and I just want to update this image so I'm going to just open index dot HTM file and just update this image so I'm gonna say here I'm gonna just remove this block 1 and select popular post folder and select my first block 1 save the changes when I save it I have different image here right now just not to that I'm going to create my second third my fourth our 5th popular post so to create this popular post I'm going to just copy this post content and how to create my second popular post I'm going to just select the first popular post and press hold shift down so this will duplicate this first popular post and I will just change this image and I'm gonna say here I'm block to jpg and just save the changes now as you can see if I'm open my website I have my second popular post right now I can just copy the second popular post and duplicate it and just specify here just change this image to three save the changes then select the third one duplicate it and just change the image I'm gonna change it to block 4 I'm gonna copy the popular content tag again paste it down here and just change this image and I'm gonna change it to log 5 see the changes and I save it as you can see I have my five popular post here right as simple as that a popular post section is now completed now let's move to the next section and in this section as you can see I have a simple newsletter now to create this newsletter section I'm going to just add here just after this closing popular post tag right here I'm gonna just create another div with the class news later and inside this division tag I'm gonna add h2 heading tag and want to specify text news letter so edition J's and as you can see in my website I have the newsletter text here and just out that just out to this h2 heading tag I'm going to add division tag with the class form element you can name this class anything and I'm gonna name it form element and inside this division tag I'm gonna have input tags so I'm gonna add here input type text and I want to add here class which is input element and upon to specify placeholder to this input tag and I'm going to name it email when I save the changes I have here an input tag with a placeholder email now just out of this input tag I'm going to just create here a button with a class BTN and form BTN so as you know I already have styling to this beat in class and I'm gonna specify custom styling using this form BTN class and I won't specify here subscribe right now once you create this bTW and subscribe button don't forget to subscribe the channel so just press the trade subscribe button just down the video now once you subscribe to this channel let's move on and save the changes and as you can see I have this button here with a default styling now I'm gonna just PC for some styles to this newsletter section so I'm gonna just open my standard CSS and go this window on the left side now inside the sidebar I'm gonna just specify some styling to this newsletter section now to start this new to intersection I'm going to first select site content then select the side bar and then select Neal's newsreader class and I'm going to just specify padding top to it somewhere just say here padding top 3 Ram and save the changes so this will add some padding to this newsletter like this just after that I'm gonna select I'm gonna just copy this selector paste it down here and I want to select form element E sometimes a here form element and once you selected I'm gonna specify padding 0.5 Ram and to wrap when I save the changes I have padding to this palm elementa I'm going to just select here input element I'm gonna select this input tire to select it I'm going to just copy this selector paste it down here and then select input element and I want to specify here with 80% height is going to be 1.9 Ram and padding is going to be point 3 Ram to the top and bottom and point 5 Ram to the left and right and I say the changes this will specify some style to this input element along with that I want to specify font family to this input tag and specify font size 1 rep sailor changes and you can see here just have this input element here and just after that I'm gonna just style this button so I'm going to just paste the selected again and just specify font BTN class and to this class I'm going to specify border-radius put a remote departed radius from this button and then specify padding 0.8 to the top and bottom and to make this button responsive I'm going to use here 32% left and right padding right save the changes now as you can see here I have 32% left and right padding to this button at 0.8 VAM top and bottom padding I'm going to specify margin to it so I'm going to say here margin one room to the top and bottom and zero for the left and right and the background is going to be the gradient color so I'm going to specify gradient color to the background of this button the newsletter section is completed now let's move on and create this popular tag section to create this popular tag section I'm going to just back to my index dot HTML file and just create that popular tag section just after this newsletter so I will just minimize it and down here I'm going to create my popular tag section now it's very simple to create these popular tags so just after this newsletter section I'm going to just create here a division tag with the class popular tags and inside this deal I'm gonna have h2 heading tag with the text popular tax save the changes and as you can see I have here a text popular tags and just out to that just out of this h2 heading tag I'm going to create here a division tag with the class tags and in this day I'm gonna have a spawn tag and to this pond I want to specify a class tag and specify here a text so I'm gonna space over here software so this is my first time then I'm gonna duplicate the spawn tax so I'm gonna press alt shift it down to duplicate these lines and just change the tax I'm going to change it to technology change the software to travel change this back to illustration change the software to design change the software die to lifestyle and this became love and the last is going to be they project so the change is and as you can see you have this type of result now just out of that I'm gonna specify flex row to the span tag so I'm gonna specify this class flex row and just after that I want to style this Montague so I'm gonna open standard CSS inside it right here I'm gonna style this popular tags now before I specify any style to this popular tag I'm gonna add some top padding to this newsletter so I'm gonna just specify here to this newsletter I'm going to specify padding top tan RAM and just out of that so to style these popular tags I'm going to just create here I'm gonna force select the site content class and then select the sidebar and I'm gonna select the popular tanks and I won't add padding top to these popular tags so I'm going to specify padding top to the top and bottom I'm going to specify for RAM and 0 for the left and right Save Changes so this will add some top and bottom padding to these popular tags oops I think I've missed something here yeah here the spelling I think the popular tags I misspell this class here I used to do this type of mistake so I'm going to just solve this problem and the style of CSS so as you can see I have some space here right just art that I just want to increase the space to hi Prem now just after that I'm gonna just select this popular tags again so I'm going to just copy the selector press it down here and I want to learn I want to select tags and select the tag class inside this tag class I'm going to specify a background image I'm going to specify back down sky so I'm gonna specify this background gradient color to this tax right and just after that I'm gonna specify here padding point four to the top and bottom and one for the left and right co2 changes as you can see here I have my tags and I'm gonna specify here border radius three damn and I want to add margin to these tags so I'm going to specify margin 0.4 m2 top and bottom and point six Ram to the left and right so if the changes you have your popular tags here right as simple as that I'll just specify the gradient color to the background of these tags then specifies our margin and just specify border radius property if you want you can increase this height as well and now you can see your sidebar is now ready all right now the sidebar is completely ready now now as you can see the 80% work is done at the next thing I'm gonna add here a simple footer so in the next lecture we'll understand how to create this beautiful footer as well as we can understand how to create this button to scroll up to your website so when you click on this button this will scroll up to the top now in the next lecture we will see how to do it now since we started this tutorial we've been working on different sections we have created this beautiful navigation then work on the site title where we have this beautiful button this background image and then we started creating this beautiful oval carosone in this carousel we have these amazing cards which can navigate and then we worked on this beautiful blog post with the title paragraph and created this amazing sidebar in the sidebar we have categories popular post then we have the newsletter and the popular tags and the last I have this and the pagination now this is not the end of this website to compute this website we are going to create footer for this website if I open my finish website you can see here I have this beautiful footer for this website which you can use anywhere in your any website so I'm going to just create this beautiful footer so I'm going to just start with a simple index dot HTML file now if you take a look at this main time so here we completed the main section of this website and we are moving to create the footer of this website so we are not going to put the footer inside this main content so instead I'm going to create a new tag here so I'm going to create a new command and specify footer I'm gonna copy this command paste it down here and just close this command to indicate this is the closing footer now everything related to footer goes inside this command create this footer I'm going to use footer tag now this is the best practice to use footer tag when you creating your footer and I'm gonna specify a class to it and name it footer so this will create a footer tag with the class footer and inside it I'm gonna create a container class and inside this save I'm gonna have four sections so as you can see here in this footer I have this about a section newsletter section Instagram section and follow section so I'm going to create these four sections in this container so I'm gonna force create about us so I'm going to create a division tag with the class about us newsletter section so I'm gonna say here newsletter and I'm going to create another deep with the class Instagram if you are not following me on Instagram the link is in the description you can follow me on Instagram and ask me any question about this tutorial just after that I'm gonna have my fourth section which is follow so I'm going to name it follow and before I Save Changes I'm gonna specify here some text so I'm gonna false create h2 heading tag here and say about us and for this newsletter section I'm gonna create h2 heading tag for now and say news later then I'm gonna add text here in the instant up section and say here Instagram and the last I'm going to specify to this follow section it's still heading tag and specify follow us say addition Jess and now as you can see here we have here four sections now I want to specify some style to these sections so I'm going to just open my style or CSS file and toggle this window on the right side so you can see what we are doing as you know he completed the main section so we are not working in the main section now so I'm going to create another comment here and name this command footer and I'm gonna just close this command and I'm gonna put all my styling of the footer inside this command I'm going first select the footer so in the footer section right here put a facility put a tag and select footer class and I'm gonna specify height to this footer 100% then specify background and I'm gonna call here PG color variable when I save the changes I'm gonna have black background to this footer now just talk to that I'm gonna specify position:relative just after that I want to select the container so I'm gonna say here footer and select the footer class and I'm going to select container and to this container I'm going to specify display green I'm gonna initialize this container as a 3d container and inside this red container we know that I have four sections so I'm going to create here four columns to create four columns I'm going to use create template columns using this property I'm going to create four sections in the same row I'm going to specify equal width to my every column I'm going to specify here 25% I'm gonna specify 25% for the first column 25% for the again 25% for the third and 25% father forth so if you calculate these numbers we are going to get your 100% rate but to simplify this work you can also specify here instead specifying this 25% you can just hear one Fr it means it takes the equal width of the viewport from can just change this 25% to one fr so now all this column has a crew fit but now you can simplify this sentence as well so I'm going just get rid of the sentence and call repeat matter I want to space for my first parameter some policy here for so I want to create four columns so I'm going to specify my fullest parameter for because I want to create four columns if you wanted to create two columns you can specify two here but for now I want to create four columns so I'm going to specify for here and now the next parameter you want to specify to this repeat method is the width of the column I want to specify equal feet to my all columns so I'm going to specify one fr now when you save the changes as you can see you have here four columns with equal bit now this is actually very simple to create four columns you start with this container I'm going to just select photo again then select the footer' class I then select the container and I want to select all the descendant D so I'm gonna say here Dave and specify lakes grow one flex basis zero and padding three them to the top and bottom and point nine to the left and right so the changes and as you can see you have some space to your footer right using this flex crow property we are going to specify how much the item will grow relative to the rest of the flexible items inside the same container so that is why our use here flex crow one as you can see we also use here like spaces this property used to specify initial width of the flexible items so we use this property for that and as you know which is specified the top and bottom and left and right padding to the footer now I'm just out of that I'm going to just maximize this window and just create my about us sections and then move on now let's create this about a section here we have this h2 heading tag and the paragraph so I'm going to just basic I here is two heading tag I have this h2 heading tag somewhere it should specify here about us so I'm going to specify here tanks about us then create a paragraph and specify demo text here so I'm going to say now I am 20 so this will put 20 demo text in these paragraph save the changes and if you open your website you can see you have here anchor tag with the demo text now I just want to change the color of these h2 heading tag so I'm gonna open these style dot CSS and right here I'm going to specify footer then select the footer tag and specify container and then I'm going to select this about us and then I'm gonna select h2 heading tag and I want to specify a color white so I'm going to select this variable when I save the changes you can see I have my about of section ready now I'll just stop that I'm going to just create my next use data section so I'm going to just open the index dot HTML file and in the newsletter section I'm going to create this text but then I'm going to create this input tag and this button so to create it I'm going to just open my index dot HTML file and here in this newsletter section I'm going to first add a paragraph and specify text stay up date with our latest I just talked to this paragraph I'm going to have form elemental so I'm going to create a division tag with the class form element and inside it I'm going to create input tag and specify here placeholder email and just after this input tag philippi gate span tag and inside the span tag and have this icon so I'm gonna just specify here icon and specify class to it so once I have this icon and we'll just save the changes and you can see here I have this input tag with this icon so I'm going to style it some would open this standard CSS and double the window on the right side and just style this newsletter just after place about a section now to style this section I'm gonna first select the footer tab then select the footer laws and then select newsletter section once I select the newsletter section I'm going to select the form element class and specify background black and and I go to initialize this element as inline-block so I'm going to say here display:inline-block save the changes and just after that once I initialize it as an inline block so I'm gonna select footer select the footer class then select the newsletter section and then select form element and select the input time and to this input tab I'm going to force pitch by padding and the padding is going to be 0.5 gram and 0.7 R and save the changes this will add some top and bottom and left and right padding to these input time just after that I want to remove this border and make this into tag transparent so I'm gonna specify border none' so I'm going to remove the border and specify background transparent always specify color white to the text and font family is going to be Joseph's just talk to that I want to specify font size when Ram and save the changes now as you can see I just remove the border specify transfer and color and just change the font family and specify font size to it and the last I am going to specify with 74% to make this input tack responsive I'm going to use percentage unit here now I just wanted to create this better so I'm going to just add this button so as you know we just created this button using a span tag so I'm gonna first select footer and select the full class and then select gives later select the form element and then select spawn time now to this contact I'm going to specify background sky which is the gradient variable and I'm going to specify padding to it point five Ram to the top and bottom and point seven to the left and right save those changes you can see you have your pattern right if you want you can change the cursor as well so if I just specify here cursor:pointer you're gonna have here cursor:pointer now I just sort of that I will just change this color of this newsletter so uncle just specify white color to this new editor so instead selecting this newsletter and specifying white color I'm going to just remove this about us selector and just select footer container and select all the h2 heading tag inside this container you can see here I have white color to my all h2 heading tags now the next thing we are going to create is the instruction section so I'm going to just open the index dot HTML file and in this file let's move on and create this Instagram section in this Instagram section as you can see I have few images here so I'm going to just create here a division - just out of this h2 heading tag and specify a class flex row we already specify this class in the global section so we don't need to specify any style to this class again in this division tag I'm going to create image tag and want to specify my different image so I'm going to first select the asset folder then select the Instagram folder and I'm going to first select here the third image and in the old attribute I'm gonna say install one just duplicate this line so I'm gonna press alt shift down change this alt attribute to you start to and this became install three I just wanted to change this image as well and I'm gonna choose your term card for and this third image became third card five so it is inches and if you open your website you can see you have your Instagram section I'm gonna just duplicate this division tag so I'm going to select it and just press hold shift down so this will duplicate this division tag and I'm gonna change these images so I'm going to select your thumb card six change this image as well I'm going to change it to Chrome card seven and this became term card eight I also want to change this alt attribute and pecan four five and six I save the changes as you can see I have my Instagram section right now I just wanted to specify some style to these images so it looks like this so to specify some style I'm gonna open these dialer CSS and toggle the window on the left side now inside this photo section right here I'm gonna style place Instagram section so in this style your chases file I'm gonna fall select the photo tag then select the footer' class and then select Instagram section and just off that I'm gonna select image and just out of that I'm going to select the division tab and select all my images so I'm gonna say Here I am G and to this images I'm gonna forced specify display:inline-block then specify width which is going to be 25% and height is going to be 50% then I'm gonna specify margin 0.3 to the top and bottom and point program to the left and right when I say the jinja's you can see my Instagram section is ready right now let's go on and create this beautiful follower section to create this follow section I need to open my index dot HTML file inside it you can see I have here a follower section so inside this follower section I'm gonna force create a paragraph and physical here attacks let us be social and just out of that I'm going to create here a division tag and inside it I'm gonna have my different icons so I'm going to force create here attack and specify 5f a Facebook so I'm going to add here Facebook icon I'm gonna duplicate it and just change this icon so I'm gonna post that Facebook then add Twitter just talk to that right here I'm gonna add Instagram at the last right here I'm gonna add YouTube save the changes and once you open your website now I just want to specify some color to it so you'll see this icon so I'm gonna just open the style or CSS and inside it and the footer section I'm gonna fall select the footer tag then select the footer class and then select follow section and inside it I have a division tag inside this division time I'm gonna select the eye attack and to this I tag I'm going to specify color white I want to specify some padding so I'm gonna say here padding:0 for the top top and bottom and 0.4 Ram or the left hand right on a save those changes you can see here I have just changed the color of this icon and have some padding now as you can see the navigation is almost completed now the last thing we need to create this corporate section and this beautiful button so let me just explain what is the benefit of this button now if you scroll down and you reach at the footer and you want to scroll up at the top Justin to click on this button when you click on it you can see you are automatically scroll up at the top of your website right I'm going to add this button at the bottom in the footer section but first I'm going to create copyright section so in the index dot HTML I'm going to just create this corporate section just after this division tanks and the food is closing footer tag I'm going to create a division tag with the class rights and along with that I also want to add here flex real class now inside this day I'm gonna have it for heading tag and I'm going to specify class to it which is texts great using this class I'm gonna change the color of this text and inside this h4 heading level element I'm gonna add text here so I'm gonna just copy this text and paste it inside this h4 heading time now I'm gonna just get it off this degradation Channel text right from here and put that in the anchor tag so I'm going to create anchor tag here and in the HTF attribute I'm going to just specify my youtube channel link so I'm gonna say here www.youtube.com specify my channel link daily douching and just after that I just wanted to say here target blank so I want to open this link in the new tab so I'm going to just say here target blank and inside this anchor tag number to specify data tution Channel and just after this daily tuition right here I'm gonna add anchor tag with the class fan if a YouTube so as you know here I have this YouTube icon alright so when I open website you can see I have here a text with this YouTube icon now to serve that I just want to style this copyright section so I'm going to open the standard CSS and right here inside T stand or CSS file just before this closing footer I'm gonna first select the footer tag then select the footer class and then select rights and to this rights I'm going to specify justify content center and font family is going to be Josephine when I say Regent is as you can see I have my copyright text at the center of this document and just change my font family and I want to change the color of this link so I'm gonna first select the footer time then select the footer class it's like the rights and then select H for heading time and select the anchor tag and just change the color and make them fight somewhere specify here white save the changes and now you can see here I just changed the color these linked now as you can see your footer is now completely ready but now we only need to create this beautiful button here how to create this button and we'll just simply open my index dot HTML file inside it I'm gonna create this button now to create this button I'm going to just create here just after this division tag right here I'm going to create another day with the class move up and in this day I'm going to specify spawn tag and add an icon so I'm going to add a tag with the class pass it a arrow Circle up and just talk to that I'm going to increase the size of this icon so I'm going to use a p2 x class so we have this class in the font awesome website so I'm going to specify this class here and save the changes now if you open your website you can see you have this icon right here you're not going to see it because the color of this icon and the background color is same but when I specify style to it you are going to say it so I'm going to just open the standard CSS and toggle this window on the left side and in this footer section I'm going to specify style to it so here I'm going to first select the footer then select the footer class and I'm going to select move up class and to this class I'm going to specify position absolute then specify right six percent top is going to be 50 percent when I save the changes I have this button over here now when I specify color to it you will see a pattern so I'm going to specify color to it so I'm going to first select the footer select the footer class then select the move up class and then select the span tag and to the span tag I'm going to specify color late night save the changes and when I save it you can see here I have this button right now I want to create how will effect on this button so I'm going to select this span tag again so I'm going to just copy this selector paste it down here and just create how the effect on it and what to change this color of this icon so I'm going to specify color why JZ cursor as well do pointer when I say other Jin you can see here you can see I'm going to change the color of this icon when I have it on it now the last thing we need to add functionality to this icon so when I click on this icon I want to scroll up at the top right like this so in the finish website when I click on this icon I'm going to scroll up at the top to add this functionality I'm going to just open our mint or J's file and inside it I want to add some code now in this main dot J's file I'm going to false create here a command and just say click to scroll top and I'm gonna call here jQuery object and it's a single code I'm gonna call up class to select the move up element lanceolate this contact to select this icon just out of that I want to call here click event to this icon so I'm gonna just in here click and in the parenthesis I'm gonna call the handler function so I'm going to say here function and just specify the body of this function now when I click on this button I want to scroll at the top of this document sometimes just select this document the simple way to select this document is using the jQuery object just call it and in the single code select HTML and the body and to this body I'm going to call animate method and I'm going to space by property scroll top and I'm going to initialize this property 0 and just after that I'm going to specify the duration for this animation so I'm going to specify here comma to specify the second parameter and specify one second here this one semicolon to end of the statement save the changes and that's done and now when I click on this button I'm going to scroll at the top right you can change this duration as well if I specify here 3 second it takes three seconds to scroll up when I click on this button this will take trees again to scroll up high I'm going to specify here once again and now you can see your website is completely ready isn't it wait you have been successfully created your own website with just HTML and CSS but wait this is not the end of this tutorial we need to make sure this website is responsive for any device if this website is not responsive then it is worthless so I'm going to make this website responsive so little first check is this website responsive or not so I'm going to open the inspect to cellular press control-shift eye and open the inspector and just click on this mobile icon right click on it I have my viewport and I just want to decrease this viewport to the mobile version so when it just click on this 320 pixel viewport so now as you can see this website is not responsive so we need to make this website responsive for any device to make this website responsive I'm gonna open the standard CSS file and add some style to it now as you know you can see here this website not this website is not responsive now I just want to make this website responsive so the very first thing I'm gonna make this website responsive now the very first thing you need to first make over the carriage it responsive so I'm going to first make this whole carriage a responsive and then move to the next section so I'm going to just make this whole carrier responsive so it's very easy to make this responsive so I'm going to just open the main door J's file and inside it to this old carousel I have a property called responsive I'm going to use that property to make this whole carousel responsive so I'm gonna just add here a property responsive and to this property and we'll specify an object now I'm not going to specify here an object instead I'm going to create an object and specify that variable name right here so I'm going to create responsive object so I'm going to specify that object here and just create this variable at the top right here so at the top I'm going to create a constant variable responsive and to this variable I'm gonna initialize my different red points so as you can see here at 320 pixel or you can say at the breakpoint 320 I want only one carrier item so I'm going just here at breakpoint 320i only warned when I tell somebody say here items one save the changes and now if you open the website you can see you have only one casual item right now let's increase the size of these viewport and now what I want when you put is equal to 560 pixel I want to add here to gather items so I'm going to specify here comma and then just say if the viewport is equal to 560 pixel I want two items so I'm gonna say here items do when I save the changes you can see I have here two items right now just stop that I'm gonna increase the viewport and just start with that II the viewport is equal to 960 and now if the viewport is equal to 960 I have here much space to work with so I'm gonna just busy for here three carries all items so we just say here comma and then specify if the viewport is 960 pixel I want to specify items 3 save the changes and now you can see you have three items here right I'm gonna increase it you have your three items if you want you can specify further breakpoint as well now we know that how to create this responsive or carousel now it's actually very easy to create your own responsive over carousel now what if the viewport is less than 320 you can see this type of result to solve this problem I'm going to just create here just before this 320 I'm going to specify 0 and if the viewport is 0 I'm going to just specify here items 1 don't forget to specify : here and just save the changes when you serve it you can see you have only one item here right so this carousel is now on any device right now let's move to the next section so I'm going to just open my mobile view and as you can see here this section is not responsive so we need to make this section responsive so let's see how to do it now at the last here is the difficult part comes in most of the beginners don't know how to make their website responsive to make your website responsive we just need to know few things now when we started this tutorial I had created a simple responsive navigation menu you know that how to create it but now did he notice we use their media query using media query you can create any website responsive there is only way to create your website responsive is using media query so let me show you what is the benefit of media query we know that we use media query to specify different style to the element depending on the viewport as you can see here I have a media query out to maximum width 750 pixel the will put is equal to 750 pixel or less than that I am going to apply these properties to the element we already familiar with it but now I want to make this website responsive so this media query helped us a lot so what I'm going to do is I'm going to first create here a command and create a media query for 1 1 3 0 pixel for this viewport right now at this viewport you can see everything is fine but the footer and is post info behave differently when I decrease the viewport you can see in this footer behave differently so as you can see here this post info is also behave differently so what I'm going to do is I'm going to just open 1 1 3 0 pixel and to this pixel so I'm gonna just copy this command paste it here paste it here as well just specify this is the closing media query of 1 1 3 0 bit so 1 1 3 0 now inside it I'm going to add media only screen and I'm gonna say here max wave 1 1 3 0 big so so when the viewport is equal to 1 1 3 0 pixel or less than that I want to change some properties of this post info class so I'm going to first select it so we have this post info class in the site content class so I'm going to select the side content then select the post content and inside this post content I'm going to have post image and just after that i have our post info class now to this posting for class I'm going to just specify left to Ram then I'm going to specify bottom 1.2 m border radius zero percent and to override the default properties I'm going to use here important keyboard save the changes and when you open your website you can see you have your post info at the left side of this image when you increase the size of this viewport right you have your post info at the center of this image and when the viewport is less than 1 1 3 0 you have your post info at the left side of this image now just after that I just want to you know this post info from this popular post when the viewport is equal to 1 1 3 0 or less than that so I'm going to just specify here go for still a side content then select the side bar and then select popular post and the last I'm gonna select post info and to this post info I'm going to specify display:none to apply this property and override the default property I'm gonna specify here important give up share changes as you can see I don't have these post info to this popular post now just after that down here I want to create here two rows with two columns instead creating this post row with 4 columns so when the viewport is equal to 1 1 3 0 pixel or less than that I'm going to have here 2 columns it two different roles so I'm gonna force select the footer tag then select the footer and then select the container and to this container I wouldn't just specify grade template columns and I'm gonna call here repeat method and I won't here two columns of equal width so I'm gonna just here two columns of 1fr save the changes and now you can see here I have here two columns right now just after that I'm going to just decrease this viewport width and when I reach 750 pixel I want to create a new media query so as you can see here if you take a look at this website it's not completely responsive so I want to specify some style when the viewport is equal to 750 pixel now if the ripple is less than or equal to 750 pixel I want to change this layout and I were to specify hundred percent weight to this main content and hundred percent width to this category section to the sidebar so I'm gonna do that in this media query so as you know we already have this media query with 750 pixel so down here I'm going to specify a if the viewport is less than or equal to 750 pixels I'm gonna select the main tab and select site content and to this site content for specifying grade temperate columns 100% when I save the changes you can see I have 100% width to these blocks right and I have my sidebar just after this pagination right here and the sidebar is also have 100% width now just after that let me just change the footer now here what I want I don't want to add here two rows with two different columns instead I'm going to add here one row with one column to do that I'm going to just first select in these 750 pixel breakpoint I'm going to go select the footer then select the footer class and select the dinner into this container I'm gonna say Creed template columns repeat 1fr so so as you can see here I just want to do create or do one condom with hundred percent with Save Changes and now if you open your footer you have here four columns right now just talk to that let me just change this viewport width and a I'm going to say here if the viewport is equal to five twenty pixel so I'm going just here 520 pizza now when the viewport is equal to five twenty pixel or less than that I just wanted to change the height of this carousel so I'm going to just open my in CSS file and down here I'm going to first copy this command paste it down here and if the viewport is less than or equal to five 20 pixel I'm gonna copy this closing comment as well paste it down here change this pixel 520 and in this command inside it I'm going to create a media query so I'm gonna just here media only screen and max width is going to be 520 pixel or less than that I'm going to just select main tag and I want to select block class so I'm going to select this block loss of this whole carousel and right here I just add some space between these post and this whole carosone so I'm going to change the height of this block somewhere just a hair height 125 viewport height further changes and as you can see I have some space between this blog post and this carousel and just after that I want to remove this posting form because if the viewport is less than or equal to 520 pixel you're going to create this off result to the prop post so I'm gonna specify display:none to it so in this 520 pixel I'm gonna first select site content then select the post content class and inside it I have post image class and then select post info class display property is going to be none save the changes as you can see I don't have this post info to this blog post so you don't need to worry about anything now just sort that let me just check my website and now you can see everything is fine now I just want to remove this padding from these footers I'm going to first select the footer then select the footer class and then select container I'm going to select all the disincentive so I'm gonna stay here padding and I'm going to say here padding 1 Ram to the top and bottom and 0.94 m to the left and right and to apply this property and override it default I'm going to use important cue say this is yes and if I open my footer you can see I have different padding here now the last thing I just want to space it for some padding to this copyright section from purchase and here footer I'm going to select the rights I want to add padding to it so I'm gonna have here padding:0 for the top and bottom and 1.4 for the left and right so ethics is Jess and as you can see here I have padding to this copyright text I'm going to specify here text-align:center and save it I have my text at the center of this document now if you scroll up and check your website you can see your website is now completely responsive for any device now let me just open this smallest device someone just open the mobile of the viewport 320 nan the last thing I want to align this toggle menu to align this toggle menu in this 520 pixel media query I'm gonna fall select the now back and select toggle collapse class and as you know we specify bit property to this toggle collapse class so I'm going to change it so I'm going to specify with 80% and overwrite the default property using important keyword save the changes and I save it as you can see I have my toggle meaning here right if you take a look at your website now it's completely responsive now your website is responsive for any device now let me just check this website is responsive for tablet or not so if I just open the tablet view you can see website is responsive for tablet as well and you can also use these move top button when you click on it this will automatically move your cursor on the top it is very simple to make your website responsive for any device in the next lecture we will understand how to specify this beautiful animation to your website this loading animation in scroll you can see you have this cold animation so in the next lecture we will see how to add this cool animation to your website now as you know we've been working on this website since survival and we successfully completed our first HTML and responsive website with ease now the last thing we are going to specify to this website is animation now I just want to add this beautiful scrolling animation to this website when we scroll down you're going to get this type of animation to your website now if you don't want to add any animation you can leave your website as it is but I want to add this animation to make the website interactive and attractive so I'm going to just add this animation in my website so to add it I'm going to just open a new tab and search for a or s it means I want to search for animation on scroll library I'm going to search for it on Google and as you can see here I have my animate on school library here so I'm going to click on it and once I have this library I'm going to just scroll down to get my animation so as you can see here to add this animation I just need to add this data attribute to your element it doesn't matter which element you are choosing you just need to add this data attribute to that element and then the element will behave like this animation so you can add different animation and when you scroll down you can see you have terms of animation here now I'm going to use some of them in my website so I'm gonna first download this library and copy and paste few files in my project so I'm gonna just download this library from this download button so when I click on this download button I'm going to get a sip file of this library I already downloaded it so I'm not going to download it again so I'm gonna just open the file now as you can see I have this animation on scroll library file right here so I'm gonna just extract it something just right click here and say extract here so once I have this file in the folder I'm gonna just open this folder and in this folder you just need to open the text folder and just use these two files to add animation to your element so this is your CSS file and this is your JavaScript file so I'm gonna just copy both these files at the same time I'm gonna press ctrl C to copy this file and paste it inside my project directory inside the CSS folder so as you can see here I am in my root directory of my project and inside it I'm gonna select my CSS folder and open it and paste both these files in this folder and I just want to change the path of these J's file and copy and paste this file inside the JavaScript folder so I'm going to cut it right from here piss that inside this JavaScript folder so I'm gonna just include this file in the HTML so I can use this data attribute to add animation to my element so I'm going to just open my index dot HTML file and at the top I'm gonna use first add here just after this all Kara I'm going to create a comment here and just specify animation on school library and inside the head section I'm going to add link tag and to the href attribute I'm going to specify the CSS folder and specify an omission on school CSS file here just off of that I'm going to just copy this command and down here just before it is custom JavaScript file and we'll just put that command and change these animation on school jazz library and here I'm going to add a script tag with the source attribute to add a JavaScript file then locate the JavaScript folder and add the animation on school JS file here right now once we have both this file you just save the document and now you can add any animation to your image to movement so I'm going to start from the main section of this website and so we'll start with this main site title section and to this section I'm going to add this beautiful side of animation so when you scroll down you're going to get this type of fade up animation to your title so I'm going to add this Vale of animation to the site title so I'm going to first select this division tag site background division time and to this division tag I'm going to specify attribute data a or s so I just want to add here this pair up animation so I'm going to just add here fed-up just save the changes and execute your application now I'm going to execute it where is your site content gone this has happened because you did not initialize the animation in the main dot J's file so before you specify any animation to your any element you need to first create an instance of animation on school library so I just need to first open main door J's file and down here I'm going to just create an instance of animation on scroll so I'm going to just say here an omission on school instance and here to create an instance I just need to call animation on scroll and column method in it and then specify parenthesis save the changes and when I save the changes you can see you have your title section and when you reload the browser you're going to care this beautiful animation to your site title section I'm going to just back to my index dot HTML file and I want to execute this animation after 10 millisecond so I'm going to do that as well using a data attribute call data animation on school delay so using this attribute you can specify the delay of the animation so I'm going to specify here 100 so I'm going to specify after one millisecond I vote this animation and I say the changes I have one millisecond delay to this animation let's move on and I want to add some animation to these cars as well so I'm going to just open this car section and I want to add this animation to these cars so I'm going to just select this block content and add this animation here so I'm gonna add here data attribute with animation on school and I want to add weight right animation to it along with that I also want to add animation delay so I'm gonna say here data animation on school today 200 so I'm going to specify 2 millisecond delay to this animation I'm going to just copy the statement I'm going to just copy this data attribute and specie by that to my next block content and just change this animation to fade in and I'm gonna specify this animation to my third block content and I'm gonna change this animation to fade left just after that for the fourth clock content I'm gonna copy and paste that animation again I just leave this animation as it is save the changes and when you execute your application you can see you have this type of animation when you scroll down you have this beautiful admission to your oval carousel right now let's move on and add this animation to your blog post so I'm gonna just open the index.html file and down here you have your blog post so I'm gonna just specify that animation to this block content now to add animation to your post content I'm going to just specify here just after this class I'm going to just paste my data attribute here and I want to change this animation to zooming so I'm gonna say here is zooming you can get this animation from this animation on school website and I'm going to specify that to my second post content as well I'm gonna specify that to my third post content as well save the changes and a scroll down you're going to get this zooming effect to the post content now let's add some animation to these categories so I'm gonna just open my sidebar and you can see here I have different categories in this category section um can specify this animation to this list item so I'm going to just specify here data attribute and I just want to change this animation and specify here Fred left and I want to specify a delay one millisecond I'm going to just copy this data attribute and specify that to the second list item and just change this delay to two millisecond copy and paste that right here as well change the delay to three millisecond specify this data attribute to the fourth list item and change this delay to four millisecond and so specify this data attribute to your fifth list item and change this delay to five millisecond when I say other changes and you'll own my website you can see I have this beautiful animation to these categories right now I just want to add animation to this blog post so I'm going to just minimize it by animation to this post content now to this post content I'm going to specify the data attribute and I just want to specify here flip up animation so I'm going see here flip up I'm going to specify here delay to milliseconds and we'll just copy these did I attribute and space by that to my second post content change this delay to three millisecond specify that to your third post content change this millisecond to one millisecond specify this animation to your fourth post content and just change this millisecond and the last I'm going to specify that to my fifth post content and just change this delay say changes and we'll scroll down you can see you have this beautiful animation we are post content now now I just want to add this animation to this newsletter section so I'm going to just add here to this newsletter so I'm going to adhere to this newsletter the data attribute change this animation to fed-up specify data delay three millisecond just onto that I'm going to specify this animation to its popular tags I'm not going to add this animation to this popular tag division tag instead I'm gonna specify this animation to these spawn tags so I'm gonna just specify this data attribute to this post spawn tag and I want to specify flip-up animation to this pawn time and I want to specify delay one millisecond I'm going to copy this data table paste it down here to my second span tag I just change this delay to two milliseconds I'm going to change this delay to three milliseconds to the fourth span tag but it changed this delay to four millisecond to the fifth spawn time I'm gonna change this data to five millisecond and I'm gonna change here six millisecond I'm gonna change this delay to seven millisecond and specify here delay to eight milliseconds Save Changes now you can see you can see this type of itself you'll have this beautiful flip up effect to your popular tags you start that I want to add this animation to by footer as well so to add this animation to the footer I'm going to just open the photo tank and right here I'm going to just piss about this animation to this division tag do this about a thousand time so I'm going to specify this data attribute to this division tag and change this animation to fade right and I'm going to change this delay to millisecond just copy this data attribute specified to this newsletter section someone specify the data attribute to is division tab and just out that put a space over this data attribute to this Instagram section so I'm going to space this data attribute right here and change this way right to fade left and I'm going to use the same animation to this follow section as well so I'm going to paste this data attribute here as well and specify here fade left say origin J's now you can see you have this beautiful animation to your footer [Music] right now winds go down you have your animation congratulations you have successfully created your first responsive website now you're able to create your own website design with HTML and CSS don't forget to share your love by pressing like and subscribe button like the video if you find anything useful in this tutorial so that is all for now I will see you in the next amazing video [Music] [Music] [Music]

Channel: Daily Tuition

Views: 1,099,654

Rating: 4.9411983 out of 5

Keywords: Complete Responsive Blooger Website Using HTML/CSS, responsive blog website using html and css, responsive website design with html, responsive website, blog website with html and css, responsive website template, html and css tutorial for beginners, responsive website design for beginners, how to create website with html and css, how to make responsive html and css website, responsive html website, template, css, html, design, tutorial, html5, css3, how to, make, create

Id: CrSC1ZA9j0M

Length: 210min 36sec (12636 seconds)

Published: Tue Sep 24 2019