How to build a faster landing Page | Geeks Summer Carnival 2022 | GeeksforGeeks

hello am I audible hello am I audible can you all hear me if yes you can type it in the chat that you can hear he me Hi kaml how are you let's wait for a couple of minutes for people to join and then we can start building our landing page uh if youall can hear me just type yes in the chat if you want to if you want me to increase the volume just let me know I can increase the volume as well I'm so excited for the live session I'm doing it after a very very long time so I hope everything goes well in this live uh class and I hope we build a good landing page a very good design that I have in mind um okay increase the volume it seems just give me a second is it good now is it better now is it better if it's better then let me know you can type it in the chat that it's better or should I increase it more should I increase it more or is it good okay hi Ashish hi sarak great great great okay all good all good great great great great great Let's uh wait for a couple of more minutes for others to join and then we'll start uh in sometime thank you Ashish you I'll just increase the volume for different sections as well so it does not create a problem anywhere okay okay okay okay okay so uh I think we should get started um okay so the topic for the day is uh building a landing page uh we'll try to do it in uh one hour so so uh what is the difference between a landing page and a website so if anyone of you could answer this question if you know what is the difference between a landing page uh and a website so does anyone know the answer to this question difference between landing page and website anything anything anything if you know the difference you can just type yes or if you know what the difference is you can just say it in one line that this basically is a particular difference between a landing page and a full-fledged website so they are two different things they are not uh the same thing okay so let me take it let me answer this uh so the difference between a landing page and a website is a landing page is generally used when uh uh you want to advertise a lot of things like for example in one single page you want to show your services uh you want a call to action button basically where a user can fill a form and submit or user can enter a query or user can enter their email ID or something like that and you want to advertise your hero product or something like that or you want to say about your business that this is your business so that's basically a single landing page like a one page that's a landing page and what is a website it has multiple Pages like for example there will be a page for the about section there will be a page for contact us section there will be a page for testimonial section there will be a page for different products so that is what basically uh a website is okay so that's a difference between a website and basically a landing page so without wasting any time let's dive uh into it and uh I'll show you what exactly we are going to make so we are basically going to make uh this thing okay so this is the landing page that we are going to make over here so if you can see it's a beautiful beautiful landing page so this I have taken it from uh an exercise from code Mentor so we are going to design this today so we are going to make everything from uh scratch uh I'll show you from where to download the images as well so there is a website we'll use that website uh I'll encourage you to use different text like um don't plainly copy what I'm trying to do uh you can change the colors uh instead of writing features team signin you can write something else instead of writing flyo you can write something else so try to write something of your own so uh that's basically double learning so we'll just break it down first what all what all are there in this landing page and then we'll start with the code so if you see over here first basically we have a nav na a nav bar which has a title flyer and then there are these uh links which is features team and sign in after that there is this section which has this all your files uh in one secure location and then on the right hand side there is some image this is one section basically tells what flyo is so it's like you store your files somewhere in an accessible location and then this is your CTA as I was saying a call to action button then there is another section over here uh which basically has some text and then an image on the right and then a card over here also which basically has an image and uh uh the designation and the name so this is the uh second section then there is this third section over here of getting Early Access today so again there is a CT so this is what happens in the landing page you'll see the same CTA multiple times and then there is this footer over here so we going to make this footer also section over here nothing is clickable but I'll show you how to redirect it to some pages as well so instead of Facebook Instagram Twitter if you want to add your GitHub LinkedIn and Twitter you can do that as well okay so Melody core says landing page means user uh interface uh so see specifically landing page does not only mean user interface so user interface is something which a user can use right that can your user interface so even websites everything basically is like a UI whatever you see it's basically a user interface but what separates a landing page from a website is landing page is a single uh page which has all of the CT and all the things and website has multiple Pages as I told there can be a page for testimonial there can be a different page for uh contact us there can be a separate for page for about us and different different things services that they provide but landing page is one single single page so yeah uh do you like this design if yes you can say yes in the chat if no you can say know in the chat or if you want to do something else do you like this design is it good come on say something in the chat either yes or no nice okay okay thank you thank you thank you perv thank you okay so let's start with the code okay so I'm going to use vs code I already have a folder over here by the name is by the name land landing page uh and uh over here I'll first create an index.html and I'll create a style. CSS as well over here style. CSS okay so let's get started with the index.html so we'll create the boiler plate first so the boiler plate basically you can just write HTML colon 5 so you'll get the boiler plate over here uh is it visible or should I increase the size of the screen okay so I'll give a title over here let's say we'll give it a name as uh I'll kick it flyo only flyo and uh or I just give something like home over here so this basically is my my title I can also write let's say flyo Das landing page okay to customize this okay first let's check whether it's working or not everything is working so I'll just give an H1 tag over here and then say uh let's say landing page let's see whether this is working or not so I'll save it and open it with server so I'll right click on it to open with live server so uh if you don't know where these options are so this is an extension called as live server so if you're using vs code you can click over here and uh you can search for extension which says live server so and then you can get uh this one the first one live server launch deploy you can get this extension and install this extension and to use this extension you can see over here at the bottom right there is go life you can click over here or you can write click on this and click on open with live server okay so you can use these extensions so I'll click on open with live server so if I click on open with live server it should open this for me so I can see that uh this basically is the landing page over here okay so I have I know now everything is running properly so let's go back to the code and write the code okay so to make it more customized what I'm going to do is I'm also going to use a meta tag and add uh my name also over here so I can just give it as name is equal to author and the content would be my name which is prakash Sakari okay so the name is author and the content is prakash Sakari so basically uh I'm just making it more customized that this is my website okay now now let's get started with the main thing so we are going to divide as as we said we going to divide the website in different different parts so the first one was the navigation okay or the header so we are going to use semantic HTML we are not going to use div D everywhere so in the body the first thing that I'm going to do is I'm going to write uh I'm going to take header over here okay and then in the header I have two things first I want a title and then I want these different different link size 12 okay so what I'm going to do is in the header first I'm going to do is I'm going to create an H1 okay I'm going to create an H1 and I'll give the title so let's say the title is flyo okay so I'll save this and then what I want is I want the link so let's see whether this is working or not so this this should work so on open with live server so if I go over here so I can see flyer over here okay this is great let's go back to the code and write the code okay so now I want the links so what I'm going to do is I'm going to use a nav tag so over here I'll just write nav and then since I want links okay so what I'm going to use is I I I can use either span or I can use either small or either P but as I told you we are going to use semantic HTML so we are going to use list so first I'll use an un list and in the unordered list I want three things so I can just write Li into three so basically this is using emit so it will give me three basically options over here I can just write home uh let's say about us and let's say oh over here I'm going to write home and uh let's say team and uh let's say sign in or in instead of home let me write features this was it over there okay so I have home I have features and I have all the things now these are just so if I save it and then uh if I go to the live server the browser so I can see it over here that I have the title and then I have list but I don't want a list right I want a list of links I just don't want the link I I want the list so I'll go back to the code and in the list L I'm going to add the anchor tag right so what I'm going to do is I'm going to cut this and then over here I'm going to use an a tag okay and then I'm I'm going to C the HF uh to be let's say home only and uh the target would be blank and over here in I don't want this R also over here I'll write features okay inste I'm going to keep it I want the homepage only I don't want anything else now I'm going to use the same Anor tag everywhere so I'll just copy this and then I'm going to paste it over here and use this thing over here instead of features I'm going to make it home and then over here also instead of sign in I'm going to use this a tag okay and over here I'm just going to put inside the list I'm going to put the a tag and over here instead of uh features I'm going to write sign in okay okay fine now if I save it and then if I go back to the browser so now I can see these basically are nothing but links so if I hover over it so I can see that yeah the page is refreshing so these are nothing basically but these are the links and it's it's opening every time it's opening it on in a new tab it's because of the target blank so let's uh remove that Target blank attribute because that is not actually uh required for now so I'll go back over here and remove the target bank so I'll just select it and use the beautyy of vs code let's clear all of them okay now what next now we have to design the nav bar right so we have to make it more like uh it should look like a Navar right now it's not looking actually like a nav bar it's it basically looks something else so how to do that so to do that we have to style it right so we are going to use the style. CSS okay so for that let me just okay do this okay so what I'm going to do is I'm going to add my CSS so right link all in CSS and so it gives me the name also the name is st. CSS only okay so what I'm going to do is first basically uh I'm going to create some reset CSS so how do you create a reset CSS you use ASX and then I'll make the margin to be zero and padding to be zero okay and uh box sizing basically would be border box okay so what is the meaning of this thing so for all the elements or tags that I'm going to use the margin would be zero and the padding would be zero so uh I don't want the default margin or padding provided by the browser but I want to apply my own margin and my own padding so it won't add on it but whatever margin I provide it will be that margin only okay now after this what I want is I want some uh good font also and some good colors also okay so what I'm going to do is first thing first I'll just set all the things so over here we just come over here and then if you know from where to search fonts you can do it but we I just generally go to Google fonts so search for Google fonts over here and then you can get fonts so when you're using fonts also do study on which fonts should be used like don't use fonts like these these are very cluttered and not professional font should always be clean so you can use Roboto you can use Open Sands you can use uh something like that so yeah so what I'm going to do is I'm basically going to use open SS so I'll teach you how to use it so I'll first remove everything from here I'll click on open sand over here and then I have to select the uh styling and the basically size also of the font so The Styling can be italic or it can be normal and then bold semi bold so what I'm going to do is I'm going to select regular 400 and I'm going to select medium 500 and then I'm going to select bold 700 also okay and then how to import it I have to select this bubble import and then don't select everything from stylist select this thing only the import thing so I've copied this I'll come back to the code and then in the code I'm in the Styles I'll put it in the code in the styles. CSS I will basically add it over here and I'll press alt Z so alt Z will basically wrap everything then I'll again go back to the Google font browser okay and then over here then I have to also select this font family also so I'll select this font family not the entire thing my mouse is not working properly I don't know why so I'll copy this come back to the code and then in the code what are we going to do is in the body I'm going to just paste uh not in all basically I'll create a body over here I create a body and then in the body I'm going to just paste it so I have the font and then I have basically the uh reset CSS Also let's see if this is uh working for now so I have saved it and then if you go back to the browser over here okay so you can see that the text has basically changed the styling of the text has changed because we are using a new font now if you don't like this font then uh you can change the font okay but since I like the font so I use this font a lot let's go back to the code now in the code what I'm going to do is I have to apply a background color to the body so the background color that I'm basically going to use uh see we should never keep the background completely white so plain white uh background is not very good like it's basically a pain to the eyes so rather than using a plain background what I'm going to use is I'm going to write over hsl I have uh so basically it's a shade of it's a shade of white not complete white 240 comma 75% comma 98% so it's basically U saturation and value so you can read about this so if I save it the background color will change okay so if I go back over here so if you can see the background color has changed if you can't see it's okay I'll do I'll inspect this and then we can see it whether the background color has actually changed or not okay so if I see if I click on body over here I click on body so you can see over here there is a background if I if I click over here it's it it has changed if you can see it if I click over here then the background color is applied over here okay great okay let's go back and write the remaining code I think this may this might take more than an hour if it takes more than an hour then please bear with me we'll change some of the other things or I'll give something as assignment for you to do okay so let's uh create some styling for the uh header also so over here I'll just create a class let's say heading okay and uh okay so what I'm going to do is for DOT heading so the first thing that I have to do is I have to have a background color for this also so the background color I'll uh keep it okay we won't have a background color for this they's just have a color so the color will be the text color so the text also since it's Black it should not it should not be completely black but I'll select a version of black so this is 27272 a so these are the colors which I've already done because I've already written the code okay now what I have to do is I have to apply some uh flexing also since in the heading now I have to create the nav on the right hand side so what I'm going to do is I'm going to create some utility class over here so I'll write dlex display Flex this is display flex and then over here I'll write display Flex okay and then I'll apply this deflex to this heading class now why am I doing this why am why am I not writing in the heading because I may have to use it at different places also so if I save it and then go back to the browser so now if you see it comes in line with the with the flyo thingy it comes in line over there okay let's go back to the code and let's write more so I have display Flex now what I want is uh I want basically for let's apply a background color to this and then we can understand how it is working so let's take Aqua so if I save it I'm just doing the background just for understanding purpose okay so you can understand what is happening so if you see now this U Navar basically has this background so what I want is I want the features team and signning to move to the right so how can I move it to the right so to move it to the right it's quite simple what I can do is I can go we can we have to go back to the code and then we'll write over here I have to apply some Flex property so to The Heading what I'm going to do is I'm going to apply a flex property let's say I'll just write uh dot Flex uh prop and then over here I'll use flex so over here I'll write Flex grow one uh strings zero and bases Auto B is Auto okay I'll save this and then now let's create some uh class for this also I'll apply some padding over here for the heading let's apply some padding also so padding top bottom left right will apply two REM and uh let's see how does it look so yes it looks good so the padding also is good let's come back to the code and let's write mode so now I can what I can do is I can apply a class over here also and uh make this also let's say d X so see the beauty of you know reusing the class now if I go back and then if I see over here okay so okay I have to apply this deflex not over here but I have to apply it yeah okay so see applying the deflex won't work over here right this is no there's no use of doing it over here we have to apply some it on basically the list so for the list what I'm going to do is I'm going to cre create a class over here I don't want bullets so what I'll do is I'll create a class called as List non Dash bullets okay and save it and then over here I can basically write list- non Dash bullets and then I can say list style I can just say none okay so I can say list that is none so what I've done is basically I've applied a a class on the list which is List non bullets over here and then in the styling I have written List non as list style to be none so if I go back to the website so now I can see that there are no bullet on the list okay and then what I want is for all the list items so I'll create a class for all the list items also so if if I want to do them together so what I can do is I can use Alt and click everywhere wherever I want and then I can create a class for all of them so I can write class is equal to let's say list item okay class is equal to list item and then over here it's very simple since I want uh them to come on one line together since all of them are coming one after the other it's basically because by default the display is block for every list right so I can write display I'll write it as inline block okay I want it to be inline block because I can add padding and margin also right so then now if I see them okay now if I see now I can see all of them basically are on um one single line so let's apply some U alignment uh to them okay let's apply some alignment so to the header B basically I'm going to apply alignment so that the nav and all of these things come together so what I'm going to do is over here since I wanted Center so what I'll do is I'll write align Dash C which is Center so I'll write align items Center and then um yeah so over here in the dlex I'll use this align C class all right align Das C so if I save it and if I go back over here okay so we can see that all of them are aligned together let's go back to the code now what I want to do is I wanted to move it towards the right so see a lot of you might be thinking we can use justify uh content and center and all of these things but I'll teach you I'll show you a with different things so what I'll do is I'll take a class nav and over here I'll just write do nav and then I can write margin left to be I'll just write Auto so if I write margin left Auto and then save it and then go back over here so see it has moved towards the right so see slowly slowly we are moving towards making our nav bar right so towards we moving towards making our right nav bar so now it has moved towards the right so there's no need to use justify content Center justify content let's say space around space between all the things you can use margin Auto now let's add some padding between the links also and then we'll remove uh the background color so to add padding between the links what I'm going to do is in the list item over here what I can do is I can just write padding and then uh I can just give it as let's say one R left and right to be one R so if I save it and then if you go back so yes yes you can see there is some space between the links also so great okay we are approaching towards our goal now what I want is I don't want the take the underl line which was there for the links so what I can do is I can go to this anchor tag and then in the anchor tag I can create a class for link so I can just give it a name as link so be specific with your uh class name also so that basically would help you uh in writing good CSS so writing good CSS is an art so building any uh landing page or a website is all about writing good CSS if you write good CSS then it's good so I can take it as text decoration to be let's say none okay and then I want to change the color also so the color basically I can uh keep the color as uh let's say this color only the color that I have taken over here which is 27272 so I'll write # 27272 so it's giving me the suggestion so if I save it and then if you go back okay it looks good right it kind of looks good uh let's say if we can hover over it yeah so yes we can so it's basically we can click on it also okay now what I want is we can uh change uh we once once we hover over it so basically the color should change or its opacity should change okay not the color we can change opacity so what I can do is I can again create one more class see see rather than writing link colon hover and all the things so you create a separate class so you can use this class anywhere right if I create cursor and then what I'm going to do is I can write dot cursor colon hover and then basically what I'm going to write I'm going to write uh opacity let's say it would be 85 so I'm just want to reduce the opacity so now if I see it if I go back over here and if I hover my cursor over there so if you can see the opacity is changing okay I don't know whether you can see it let me reduce it more so that that is more visible so let's say I'll keep it 0.5 the opacity to be 0.5 and then if I go back over here and then if I hover yeah so now it's clearly visible right the opacity is changing see if I zoom in and then show you so the opacity is changing so generally whenever you are using hover instead of creating a different color and saying that okay on Hover this color should change you can reduce the opacity by 10 to 20% so that is good enough not reducing the opacity beyond that so reducing the opacity beyond that is not a good practice so I'm reducing it by 15% so 10 to 20% is good enough to reduce the opacity okay Mazer says I am a very huge fan of hover so Everyone likes hover right hover is very important because if you don't put hover on a link then no one will know that okay it's basically a link or on a button so when you hover so something changes then it grabs your attention so that is basically some tricks and ideas of CSS that you grab attention of basically people so that uh you can show them okay this is the link or this is the button so now since we are almost done with our head nav bar so what I can do is we can just remove this uh background color so let's do this let's remove the background color over here remove the background color okay so save it great so if I go back and see okay so it's building now it's looking it's looking good so we are basically achieving what uh we wanted over here so if I show you the landing page that you want okay so this is it and then we have our features team and sign in also so see the padding you can change the padding also in this there is the padding is huge you can add more padding to it also depends on how you want it to look okay okay let's go back to the code so this is done so now what we want is now what we want our next SE uh section so let's have a look at that also what is our next section so the next section is this one okay now how did I make this can anyone give me a wild guess how did I make this what do you think how did I make this what have I used to separate them now these are two different things okay these are not one single thing but these are two different things so what do you think how did I actually come up with this thing how did I make it okay so basically I have made this using grid so I'll inspect you I'll inspect and show it to you so if I right click on it and then uh right click over here and click on this thing so if you can see this is a section and then if you see over here there is this Grid in inspect so if I click over here so you can see the layout over here that there is a grid and it's a two column grid okay so we are going to use grid we're going to create a grid basically a two column grid that we going to create uh and uh then we will add the text and the image to the grid also okay so okay let's do it let's go back to the code so now since my header is done what I'm going to do is I'm going to create basically uh a main tag so see always go by semantic HTML you have an header header then a main and then a footer in the main you can add sections and in sections you can add articles also if you want a side nav use a side don't just simply write main uh div div everywhere okay okay so what I'm going to do is in the main I'll first create one section okay because my main will have multiple sections okay my main is going to basically have uh all of these sections so this is the very first section and and then this is the second section this is the third section so my main will have these three sections so let's go back to the code jumping on and off over here and there so in so this section basically now we can add div over here okay so this section will have basically two things so first one let's say I'll write box one over here and uh then the other basically we have another box so first let's create a grid okay so if we have a grid then we can add anything into the grid so how do I create a grid so for the section what I'll do is I'll create a class and I'll give it a name as let's say uh grid container okay I'm giving it grid container and uh I'll also have some Gap also so over here what I'm going to do is I'm just going to write dot grid Das container if you have a better name right some better names but try to write good class names okay so for the grid container what I'm going to do is uh I'm going to write display grid okay so writing display grid basically will not do anything what we have to do is we have to also create the columns also so what I'm going to do is I'm going to write grid template columns GD template columns and I want two columns so I can write one FR and 1fr also this is how I can do or I can also write repeat I want two columns and the size should be 1fr so 1fr is one fraction it will divide the two divs into same size so the width of both the divs would be same so this is our Rd template column actually now to see this in action what we can do is uh we can basically let's say have a border for uh some both of these divs so what I can do is I can basically create a class over here and let's say have box and then box uh let's say one for this and uh box two for this one okay so this uh basically I'm just creating this to show it to you so in the Box I can create let's say border uh to be one pixel solid uh black black or gray whatever okay this is not required but this I'm just doing it to show it to you okay and then in every box let's say I also have a padding also so it's more visible let's say padding of three R everywhere so if I save it now and U if we go back to our browser okay let me open this link so now if you can see there are two box and if you can see both have the same size right both have the same size and the same B okay now I want to move the Box towards the right so if you see uh in the landing page there is a gap over here so this Gap basically is coming because of the padding that I have applied okay so let me apply the padding also onto the main section so that that in that way basically it will come towards the right okay so let's go back to the code and uh in the main section in the I'll give it a class as class Main and to the main section do main I'm going to apply a padding that I applied to The Heading so padding was two over there so top bottom left right is two so that will come towards the right now there's no need to see it okay so but still I'll show it to you so that you also have a confirmation so it's coming towards the so there are two boxes now see both are having the uh same size okay I want to if I want to gap between them which I actually want so I'll create a gap also between them so what I'm going to do is I'm going to create another class Gap over here and uh or let's say Gap I want it as a gap of 48 64 pixels okay so what I'm going to do is in the CSS I'll write dot Gap do Gap and I'll say Gap to be for remm okay never use pixels as your uh as your units pixels are absolute value and we should not use absolute values basically we should always use relative values like r m percentage uh v w VH even CH Works character so we should use always relative values never absolute values so now if I go back so now you can see that we have a gap between both the boxes Also let's start adding our content in the Box okay so we want an image on the right hand side and some text on the left hand side so so let's do with the left hand side first so this div so what I'm going to do is um okay Ive this box one that I've written over here and then I have to start adding the content so what basically is the content over here so okay cool so I'll create one more div which basically will uh uh have my uh all the details which are there in it so let's let's have a look at it so what is there over here so first I want to have uh this title so we can get it through H2 and then we have this uh text which we can get it through p and then an input and a started button so let's let's write this thing okay okay so in this div what I'm going to do is I'm going to create NH H2 and then oh what was written it says uh all your files all your files in one uh secure location do R accessible okay see now why am I writing this all of these things so this I'm writing just to show you that even if you have a big text then it won't go out of the box it will still be in the Box okay so I have this H2 and then after this H2 I have a P tag so I am basically creating a div and I'm writing all the things in the div okay now why have I created two divs so uh this first uh div basically uh would actually have so this the first div basically will have all the text okay and then there would be one second div which will basically have uh the image that I want in this second D okay and then this div basically will have my Flex or some required classes for these text and these paragraph okay then let's have a paragraph and in the paragraph it's basically a huge paragraph so I'll try to write it as soon as possible flyo stores I won't write everything uh your most important information uh in one secure location I'm not going to write everything but good to have uh text in one secure location uh access them and share them and share it with anyone okay this is what I want I'll save it okay so if I go back to the website to see what is over there so yeah we can see now it is like slowly taking up the pce so now it's coming all your files and then the paragraph also but we have to add some padding over there uh let's add uh the CTA so the CTA that we want over here is the input and the button okay so let's add this also so Onyx says why didn't you use flex box see uh um basically the difference between Flex box is flex boox and grid is see both of them are used to perform uh to create layouts but generally is when you are creating a layout for the website we use grid and then uh inside the Grid or inside a div if you want to uh uh use a layout then you can use basically Flex like for example the flex suppose if you want things adjacent to each other like on side then you can use a flex over there one below the other you can use flex over here but generally for the layout of the website you should use great that is uh more accepted by all the developers you can use flexbox also if you want but most of the developers follow this Norm where they use uh grid for layout and it depends from company to company also but we can use flex and flexbox and do this also good good question Onyx uh okay so Mazer says people say to make responsive website it is easier in framework like bootst or Tailwind is it true see you should uh avoid using Frameworks learn vanilla CSS first okay if you're learning at a good good learning at a good time now like or beginning learn uh vanila CSS try to write everything on vanilla CSS that's that is why the reason I'm doing this thing okay I could have done it using uh uh bootstrap and Tailwind also or any other component Library also but I decided to keep it raw and write it raw so use vanilla CSS you once you learn V CSS bootstrap basically is nothing but an abstraction over it so then you can use bootstrap also but learn to write media queries and everything using uh using your uh own vanilla CSS rather than writing using whatever it's bootstrap Tailwind or any other framework okay uh does that make sense maer okay great so now what we want is now we want uh the input also so for the input what I'm going to do is so after so this div was basically for the text okay this div was was for the text now what I'm going to do is I'm going to inside this div after the P tag okay inside this di after the pag I'm to create one more Di and inside this div uh basically I'm going to create an input and a button so I'll write input okay and then we can give it a placeholder also so I'll a placeholder and say enter your email ID okay and then after the input I want a button also right so I can create uh a button over here and then in the button I can write what do we you want for the button it says get started so let's save it and uh let's see it in action so if I see over here so you can see there is an enter your email ID and get started also so okay it's good but we have to style it so that it looks better okay it's not looking good at all now so first let's uh style the uh button and then we can style the or we can basically uh add some gap between them okay so now what I'm going to do is if I'll go back to the code so first I'll add some gap between them so the reason for me creating this div was so I have all of these three things in the div so what I can do is in the div I can create a class which says uh column Flex okay colum Flex so what I'm going to do is over here in the column flex. call- Flex I can use uh display flex and I can write Flex Direction uh column and then I can apply a gap okay so what I can do is I can take a gap of two REM so I'll just write Gap let's say two REM I'm not using a gap of 4M so I'll write dot Gap Das 2 REM and I'll have a gap between them of two now over here you can use margin and all the things as well but generally I prefer using uh Flex box for all of these things so now if you see there is a gap between all of them but the Gap is way too big so so we can reduce it to 1 Ram or 1.5 RM so let's do it so see all of these CSS is always trial and CSS adjusting the size is always trial and error okay now it looks good with one R it is better okay so you can use margin top right top bottom also but I prefer using Flex because I can reuse the classes everywhere so I just uh want my work to be uh to to get reduced okay okay now what we want is now we want to style the button so let's style the button okay so I'll take a class called as let's say button and then I also create a class called let's say uh button- primary also okay so I want I want two classes now why am I creating these two classes is just because to teach you a very good thing so you can create one single class or button in which you can have the utility of button utility of button means you can basically first make the uh background color let's say transparent okay because we are going to add a background color okay so we make the background color transparent and uh then basically we can make the border to be none okay border none so we do not have any border over there and then we can have a border radius which say let's say 4 pixel because it should not be sharpened that looks bad and then we can have a font size also so the font size let's say I'll keep it as 1.2 RM okay so if I save it now let's just have a look at the button now can you see the button it's good right okay so this is basically how you should have now this one stying of button you can apply it anywhere and then you can add one more class and then with this one more class you can let's the way I've created button primary so I can have dot button uh Dash primary okay button primary and then in the button primary I can add another background class background color and what was the background color that I wanted so yes I forgot to create all the colors so the background color that I want for this basically is where did it go yeah I have the back so hsl it's a blue color shade 224 comma 93% uh comma 58% so this colors I have not created on my own okay to be honest I got it from a challenge so I thought I can use this thing it looks better so if I go back and uh then if I see so I have a background color and then I have this text which is white in color so we'll change the color of the text to White and we'll add some padding also to the button so it looks better okay so button styling is done then so this is how you can style any button okay have like some common things so I I always do a lot of common things okay I don't complicate much of the things most of the things are always common so for white what I'll do is uh let's let me take this thing only this H it's more like a whsh thing so if I save it and then if you go back so yeah it's taking shape now uh let's change uh the let's add some padding so let's say padding okay so for padding uh it see padding should always be in terms of uh if you even if you're using pixels it should be let's say four pixels multiple of four or multiple of 8 pixel never use something like 7 pixel 9 pixel don't use that okay it's basically a standard where your padding should always be multiple of 4 pixels or 8 pixels and the padding on for a button the padding on the left and right should be more than the padding on the top and bottom okay it will make it look more good so for top and bottom we'll keep it as 4 pixel for left and right we'll keep it as 8 pixel okay now you might be wondering I told not to use uh absolute units like pixel and now I am I using absolute unit like pixel because if your size is less than 10 pixels you can use pixels if your size is more than 10 pixels use R okay so if I save it and then if I go back and if you see yeah button looks good [Music] right but if you want to increase the size of the button uh if you want it to be more big then what we can do is we can increase the padding on the left and the right but I don't think it's necessary for now if you want you can change it but make it multiple of uh 68 pixels or multiple of four pixels will do so let's say 12 pixels would be 875 R yeah this is what 12 pixels is so if I go back and if I see okay so now button looks more better we have to do the same thing for the input also also so let's do this for the input so what I'm going to do is for the input I'm going to uh increase the size of the input so I'm going to write a class over here class and um what name should I give to the class let's say I'll give it a name as form input form input and uh we'll make the type we'll change the type also the type uh of this thing should basically be email because we are using email right I want email ID so make the type also email so see changing type basically Google Google will understand that this is basically for email ID and not basically for text or something like that and then in the form input what we can do is in the form input we can basically write uh let's say I'll change the height so I'll change the height of it uh to how many pixels it should match the size of the button right so let's see what is the the size of the button so if I go back over here and if I try to inspect it so we have to see the height of the button so I'll click on the button and the height is 30.4 pixels okay yeah because we'll add the padding also not top bottom so it's 30 so how can I change so instead of changing the height let's change the padding right why are we changing the height so let's change the padding so the padding would be uh let's say left right uh top bottom it would be let's say four pixels only and it's let's let's keep it same let's see s fire okay so if I save it and then if you go back okay it has increased but not uh that much so let's increase it more so I can do that using the padding only Okay so what should be the what should I keep the padding should I keep it one R okay let's see if I keep it one R what happens is it increasing the size not much of a difference right okay uh we can increase it way a little bit and then we can also add some Flex also onto it okay okay so Maser is asking why should we use Ram when things go above 10 pixels so see uh we are you only ask a question about response website right so we basically suppose when you are making a website and then you want to make it responsive website so what is REM and what is M it will REM basically takes its calculation from the font size of the root element okay so whatever is the uh font size of the root El so generally the font size of the root element is 16 pixels so one R is 16 pixels okay so if I write 4 REM then that becomes 64 pixels so when basically I'm creating a responsive website then most of the things basically since it's using Ram most of the things are automatically basically they become responsive then my work for making a responsive website uh decreases okay so that is the only reason for using REM instead of pixels and instead of pixels so to make a responsive website okay let's apply some Flex on this button and uh this um input field okay so what I'm going to do is I'm going to create a class over here and for this div which has input and create a class as let's say CTA over here and then over here I'm just going to create do CTA and uh okay so I already have this Flex right so there's no need to create anything correct that is why I already created these things over here here this display Flex is align C so I'll write over here dlex and align Das C see the work reduces right drastically it reduces so if I go back and then if I see see now it's basically the same size aign Center also what I have to do is I just have to add a gap between them I have a gap also so just I have to add it with them okay so I'll go back to the and then I have a gap of 4 R and I have a gap of two R also so I'll take a gap of two R I have this Gap D2 so I just over here have to write Gap Das TM so the idea is to not repeat the CSS right idea is not to repeat the CSS but to have the same CSS so now if I go back to my uh browser and see it so if you see that yeah this has actually changed there is a gap between the input and the button okay we can add a border radius to the input also so let's do that let's do that also let's add a border radius to the input also so the form input the padding is over here and then let's say a border radius 4 pixels so now see if you're using border radius also again and again like I'm repeating border radius over here and in the button also I'm repeating over here if you're repeating it more than twice or Thrice then you can create a class called as border border radius 4 pixels or radius 4 pixels and use that class everywhere so that's basically the idea of writing clean and good CSS so if you see over here now uh the Border it has a border also so this looks good right so I can enter my email ID which says let's say prash at theate xyz.com something like this okay and then now when I click on when I hover on this button the color also should change right so we did that we already did did the we have a class called as cursor also right so I can do that see we have already made a lot of things there's no need to add many things so if I uh see the cursor class where is it over here see cursor what it will do is it will change the opacity to 85% uh let's make it as pointer also so I'll make it cursor pointer so then it will have a cursor on the button so on the in the button class I'm going to add the cursor class also so if I save it and if I go back so if I see okay if you can see the color is changing great right so we have already done a lot of different things okay okay fine let's change the uh text size also so let's see the text size of this H2 all your files so if you see the text size is a little bigger of both the paragraph tag and all these things and even uh the input field is also a little longer so let's try to do this okay it might take time it might take another half an hour for us to finish this thing is it okay with is it okay with you all okay f i i I thought we'll do it in five in 1 hour but uh it will take time for us to finish it so is it okay for you all okay so let's basically add a class over here a class for this title so I'll give it a name as let's say uh heading or uh I'll give it a name as heading let's say heading text or okay heading info heading info so this is my heading info so I want to change its font size right so I want to change its um font size and I want to change this line height also to make it a little bigger so I don't I want to change it font size okay I'll change it font it's so much confusing so I'll write do heading okay let's check the font size of that thing first okay we'll see the font size like how much is the font size of this H2 so if I go back and inspect over here I see the font size of H2 this is uh 32 pixels and the font size of this p is 16 pixels so okay let's do that so the line height so it has a line height also I think it's it has a line height of uh 3 R something like that and then there is a letter spacing also so let's let's do this okay so let's add a line height so this we have a line height the line height is 3 R and then it has a letter spacing also so we'll take letter spacing and the letter spacing would be 8 pixels okay so if I save it and then if I go back to see okay is there any change over here I think there is some change in basically the letter spacing yeah there is some change in the letter space okay no there there is no change because the class name is different my bad so heading info now now let's see if there is a change okay so if I go back okay now there is a change and the change is very bad so it's it's it's fail have to change the latest spacing I think four pixels was way too much uh so let me keep it 2 pixels so if you keep it 2 pixels then is it good or bad uh 2 pixels is good right yeah two pixels is good all your files in one secure location if two pixels is also way too much then we can uh change it into Point as well let's say instead of 2 pixel I have 1.5 pixel so if I save this this will be the last setting that I'm trying to do okay okay this looks much better all your files in one secure location accessible anywhere okay um the font over here is different I think this font is something else and this font is something else which I'm using over here okay that does not uh matter at all let's do it for the P tag also so for the P tag also I'll be using the same line height not the same line height for pag I think I should use some different line height okay so for ptag we'll just use a letter spacing so I'll write over here class and give it a name as para- info and then I'll write dot para- info and I can give it as a letter spacing of uh let's say the same thing 1.5 pixels please take some water and anything that you want to have because this is going to take a while okay so if you see now this is basically has changed Also let's just increase uh uh the width of the input uh is the line height of the text good all your accessible file and one sec your location I don't think it's good so let's change the line height instead of three REM I'll make it two REM so if I save it okay this is much better now okay so this is good okay let's increase the size of the input so in order to increase the size of the input the width of the input what I'm just going to do is let's write width to be uh let's I'll take it in percentage so let's say take it uh 30% of the width of the viewport so VW is the width of the viewport so if I go over here so if if I can see if you can see over here so it's good now it's so it's way too big so let's change it instead of 30 we can make it uh let's say 25 so 25% of the view so if I save it this is much better now it has a border so let's make uh remove the Border also I'll make the border to be border none so if I save it I think this should make some changes over here okay great so I don't have any border over here so this actually looks good so I can enter a email over here so this looks good or if you want a border you can create a border uh you can border one pixel solid gray gray would be much better uh or hash the same thing 27272 a 7272 a so if I save it I have a border also over here okay so this is getting shaped uh now let's add uh an image so we want the image also so to get the image what we can do is we can visit this website called as undraw and then they have images uh so we I'll take a different image I don't know whether I'll be able to find this image or not what they are doing I don't know so uh I'll just say browse now and then search for any image so let's say we will take this image okay and uh I can change the color of the image also uh to whichever color I want uh I'll just click on download SVG for your product projects so I have an SVG uh I'll just uh save it in a fold save it in the same folder which I'm basically using so I'll copy it uh you also save it in the same folder so you can download any image from there from undraw okay so I'm just saving it in the folder so I'll create a new folder called as assets and uh we will add it in that folder so all the images should be basically in a folder so I've created a new folder called as assets and then I'm going to add it in that folder okay okay great so I have this image and I have this asset folder so over here if you see I have the asset folder and then I have this undraw image also so in this box what I'm going to do is in the second div I'm going to create basically first an image tag inside this and then uh give it a name as class uh uh image and uh the source basically would be assets slash this image okay so if I save it and then if I uh go back over here let me just close this if I save it and if I go back let's see uh if I click on this thing okay so great right if you can see the image has come okay so the image has come over here and if you want to change the size you can change the size of the image right now I don't want to change the size of the uh image I want I think the image is good enough so I'm going to do only one section now I'll you can add another section the same way and add the same thing and just you have to change the styling over there only Okay so great so now this thing is done right I just have to remove the border the rad border radius that I have so I'll remove the Border radius so what I'm going to do is where did I create the Border radius I had basically a class called as box over here somewhere over here um where did it go think yeah this one so this box basically has a three R padding so I'll remove this border for now because I don't need it so if I save it now and then if I go back so yeah if you can see over here so this is how it's looking now right if you want to change the font you can take some other font also uh don't remember the font which I had taken it is open sand only the font that I taken but U yeah I think yeah it's open sand only the phone that I taken maybe uh the font size that I've taken is not that good but so you can take some other font and try some other font also okay so this is done so we have this image and this thing so let's see what is the size of this image so if I click over here um and I can see this image is way too big if you want to change the size it's very simple you just change the width the height will change automatically this 554 pixels now let's say if you want to reduce it uh the size of the image so it's very simple so I've created a class image already for this and then what I'm going to do is over here I'm just going to write do IMG and I'm just going to take the width let's say the width would be 450 pixels okay and if I save it and then if I go back to the browser so if you see the the image has change to 450 pixel so is this good or the previous one was good okay okay so the image size is also reduced so this is taking shape now okay on under if you want some different color images you can do that also okay it's very simple you just go to undraw and then this is the color right if you click over here the color also can change so you can put uh hex code or you can select the color from your also and if you see it's changing in real time so according to your color whatever color you want the different Shades you want you can use that also for undraw so undra is very good and it gives you high quality SVG images so you can use undraw okay good let's come back to the code and uh so it's I it would take a lot of time if I cover everything so uh I won't be covering all the things I'm sorry about that uh because in the landing page so because see this if you if you make this section anyhow this section I was going to give as an homework only it's basically the same thing only for this you just have to create a div and add some P tag and you over here you just use display flex and align Center that's it what you have to do and then an image you can go it from under this you use an H2 and then there are two different paragraph tags over here uh use the same thing the flex container and change the direction to be column and then you can have a gap also okay we can create uh this this thing okay so get early or let's create a fooo okay instead of creating this get Early Access today uh let's create a uh photor now so let's if I click over here if I try to inspect this thing see and uh I try to inspect this thing let's see how I made it okay so here uh it's basically see it's basically the flex box if I click over here it's nothing but Flex box so any uh footer this is a very famous footer you might have seen it on so many websites like flip cart Amazon and U then different different things or different different on different different uh uh websites so and then you might be wondering okay this is so difficult to do but this is very simple okay very very baa kind of things where you just use flex boox and so there are three four different div tags in every div there is there is a list and then on I have apply put all the DI in one container and then the flex box that's it okay and then if you see everything is over align items and then justify content also space between so or I can put a gap also okay so Mazer is saying can you add logo before ending this session so do you want me to add a logo okay so of this this fabicon logo or this this flyo logo I think you're talking about the fabricon logo we can do that also okay so let's Okay Okay so let's let's do the uh footer now okay and then we'll uh end it by adding the logo also okay so footer will not take much time footer will be done quickly okay so in the main tag basically I'll uh outside the main tag I can add a photo so I have a nav I have a main then I have a photo okay so this is how you should use semantic HTML I'll give it this A Class also a class of photo okay class uh let's say photo okay okay so what I'm going to do is in this footer basically I'm going to have uh first I'm going to have uh uh an H1 because I have a name also so what I'm going to do is I have an H1 so the name basically is flyo this is basically the name of it okay and then basically what I'm going to do is I'm going to have a div which basically would be my Flex okay and then inside this div I'm going to have four divs so I'll that div Co and four okay now in all of these divs basically what I want is I want a list and uh I want some these phone numbers also so let's do the phone number thingy okay so uh over here or let's do the list only not the phone number so we'll do this about us and contact and all the things so I have a list so what I'm going to do is I'm going to create a UL okay and then in the UL I'm going to create uh four Li okay so the first li basically is about is about us okay and then uh there is jobs then there is press and then there is this home okay so if I save it and then if I go back to see the footer this footer will be very Bas okay so if I scroll down so see everything is coming over here okay but you don't want it like this so what I'm going to do is we'll come back to the code and in the code okay let's first have all so first start all the UL and all the Allies so now I have another ul and then I have three allies over here uh which basically tells about the contact us and then it's basically the terms and the conditions and then it's the private also okay so if I save it and then if I go back to the browser so you can see okay all of these things are coming one together below one another about us and all the things but we don't want it over here so since we want it as a flex so we'll move it into the flex okay so let's do that also and if time permits then we can add some images also so uh okay let's add the class for the UL also so for what was the class that I created for the UL it was basically class list- non bullet because we do not want any styling on the list and then for the list it was I think it was uh list items right so let me copy this so for list it was not list items so over here I'll just make it as list item okay so I put the list item everywhere over here so I'm just pressing alt and then using the cursor okay oh my God have to write class list Das item copied something else instead of something else and then and then over here in this ql I'm going to add a class which basically is list Dash uh non Dash bullet okay from next time I'll have to take it for at least 2 hours to finish everything okay so if I go back over here okay if I scroll down so yeah it's basically taking some shape so it's about us all of these things are coming uh on different different things but then we don't want it in this way we want it on different lines so first let's apply a flex over here so for this div this will be class uh deflex so both of this will come adjacent to each other so if I save it and then if I save it see it so see okay I didn't show you the code right okay did I no I didn't show you the code so what I did is I basically applied this class display Flex which we have done on these two divs so these two divs will have the display flex and then if I see the if I see the result this is a result okay but we don't want this way we want about us job Express and home to come one below the other so what should we use we should again use flex and flex container right okay and instead of uh home we are basically supposed to write blogs this is not home box so we have to use a flex over here also on this but this should be Flex of column okay so we have created that also call Flex over here so great right so for the UL class or or okay for this one for this div basically I'm going to add a class and basically this would be called Dash Flex if I save it and if I go back over here okay and then for this div also class call Das Flex so if I save it okay if I save it and if I go back okay so it's not applied so any any any anyone can answer this why is it not being applied if I write a class call Flex over here and it has a display flex and flex Direction column but still it's not being applied why so so should we apply it on this Dev or should we apply it on the UL we should apply it on the UL right if I copy this and put it over here and paste it then think it's stuck okay now if you see okay now it's working so we have to basically apply the callx over here not on the DI okay because on the div it won't work right on the div so if you see now the it's starting to take shape now it's coming so we'll basically use this main Flex over here this deflex and apply some content justify content over here also so that align that's C which was a class and we want justify Center also a space between so WR uh uh justify Das C okay so uh over here I'll write dot justify Das C and I make it justify content uh to be let's say Center so if I save it so I think it should come in the somewhere in the center so if you go back so if you see it comes somewhere in the center let me remove this clear this out one okay so if you see it comes somewhere around Center but it does not have like the proper padding and the proper spacing also so we'll add a proper padding and Alignment should not be Center also see the alignment should be Flex start so we'll change the alignment instead of uh Center we'll align dot align instead of C we'll write start so it is start so let align items Flex start and over here instead of align C where is align C I'll make it align s which is align start so if I go back and if I see so you can see it's basically uh align vertically let's add some padding in the footer section because there's no padding over there in the footer and it's making it look very very bad so over here I'm just going to add some padding Sol footer do footer and give it some padding so let's say the padding would not be Auto it would be let's say two whatever we have applied for uh The Heading and the main section so if I go back and if I see over here so now if you can see there is some padding okay so there is some top bottom padding so this this is starting to take shape now okay okay great now what should we do next so I have the foter footer also with me now but the footer has some background color right if we see over here okay if you see over here this footer has some different background color it has big padding also so let's add some different background color to this footer okay so to add some background color to the footer what I'm going to do is in this footer only in this footer class I'm going to take a background color and what is the background color for the footer so the background color for the footer basically is uh hsl and uh then I have a very darker color so this is 243 comma 87 percentage comma 12 percentage okay so this is about hsl so you should read about this thing and the color would color also would have to be changed so the color would be then I can use U hsl and I can use this one okay white color so if I go back to my browser and if I see it so now it's looking good right so I have this thing so I can also create some uh big or I can also make it spaced around or something like that also or if we add a lot of different uh uh let's say if I can add a gap or a gap of 4M so for the gap of 4M what was the class it was just Gap so let's add a gap over here see if I if I add a gap what happens so if I add a gap so yeah there is a good gap between both of them so if you can see there is a good gap between both of them okay you can add a cursor on it so it basically would be would have the H effect also okay if you add the cursor it will also have the how effect okay so the footer is also done for me okay uh what we can do is uh we can add a logo okay so uh so to how do we add a logo so let's say we can uh first download some logo okay so what I can do is uh I'll just download gigs for gigs logo okay gigs for gigs uh SE for geks for gigs in ofg okay this side can't be reached I'm just searching for geks for geks I'm just searching for a logo okay so I'll go on to images uh and then let's say I'll use this use use this one for now so right click on it and open image in new tab I don't want to download the image okay this will have a very us link instead of this let's say this one open image and new tab something which has a smaller link uh this one open image in new tab okay this one has a smaller link so I'll use this link and uh okay so I've copied the image now let's go back and uh let's add uh and uh Alo we can we'll add a favicon first okay so favicon is basically the icon next to your title that is basically the favicon so for favicon what I'm going to do is over here after the uh meta tag I'll basically use a link tag so I'll write link and then if you can see it gives an option of fabric on directly so I'll write over here uh and the HF basically uh uh would be the link URL the URL of the image so if I save it and then if I go back to see if it has actually changed so yes it has basically changed so if you see the link now has the the link has changed now so if I could zoom in okay this would zoom in so if you can see over here the icon has changed okay so it's very simple to change the icon also of any website you just have to use the power of uh you know uh using HTML right there's no need to remember everything so what I did I just did uh use Link in fabricon so I got this thing shortcut icon and then so there's no need to remember all of these things okay remembering tags is not I don't even remember any most of the HML tag right I don't remember how to write a fabcon if vs code didn't uh uh allow to do that to do it I would have used Google to search the syntax of it okay but this is good enough okay so uh now let's add some image as uh uh maer is saying we should have the flyo logo please also but I'll use uh gigs for gigs logo okay so I'll sty style the image also and then we will wrap it up so what I'm going to do is I'll first create a div uh and uh give the div basically in the div I'll add this H1 okay and in this div I'll have an image tag also and image and write the source to be the same logo this logo so U The Source would be this logo itself which I have so I'll copy this because I don't have flya logo you can use anything the important thing is just to understand and learn Okay so I'll just give a class over here since it's the this is going to be the logo so that class is equal to logo over here okay I'm adding class is equal to logo so if I go back to my website to see it so if I see everything is broken now right sub so this gigs for gigs comes it's so big I have to change the size right that's not a big deal so let's change the size so what I'm going to do is in the in the logo I'll change the uh I'll just change the size Sol do logo uh withd basically is uh let's say uh I want it uh uh three R would be 48 pixels right so I'll keep it three R should be the width and the height should also be three R okay and then if I save it and then if I go back now it's a little better right we can have a big bigger size also if you want so let's have a little bigger size U so to have a bigger size what should be the bigger size it should be four RM let's keep it four r four and four and then I'll add a border radius also to make it Circle border radius 50% so if your height and width is not the same then the Border radius won't work on it okay um okay um let's keep the logo the way it is there's no need of Border radius also okay but now the logo will not uh come one so the H1 is coming below the logo right so what we are going to do is we going to use flex box right so we have already done a lot of different we have already created so many classes utility classes and now these are helping us so what I'm going to do is over here just write uh class deflex that's it so if I save it then if I go back and then if I see the website okay so see now it's coming together just have to add a gap and align them s Center done see it's simple okay it's not that difficult because CSS is simple just write align D C and then a gap D2 a gap of two okay this was the cloud I believe Gap 2 was it let's see yeah Gap 2 if 2 is way to big we can reduce the Gap also so it's not a big deal so if I go back and then if I see so yeah so I have this thing also okay so if I want some other logo instead of this thing uh because it's more uh does not look good right let me have some transparent thing but open image and new T even if okay I got this one so but this also have a has a background so this also will not be that better but still let's try save it and then if I go back okay this is way too big right this logo so let's change its size so if I change the size I have to change it to let's say two or three them so or make it the same size as the H1 so if I save it okay now it is much better okay we can increase the size of H1 also and uh the logo you can reduce the height also so if if you want to make it uh uh more uh because now it looks something like this right it looks something like this if you want the logo to be smaller so you can change the height also so let's change the height of the logo instead of uh three R we can make it two RM so if I save it and then if I go back so now you can see okay but the alignment is not there okay let's inspect the page if the alignment is there how did the alignment change so if I uh click on this it's basically the flex and uh okay the alignment is not applied I think I didn't write the class name correctly so that's why the alignment didn't apply so let's apply the alignment uh align that okay the spelling is spelling is incorrect see the problem over here becomes is HTML or CS does not they will never give you any error right they don't give you any error like this is the error or something like this they don't give any error but then if you don't see the output do not be frustrated just check for spelling mistakes so when I started learning HTML CSS a lot of times what used to happen is I used to make a lot of mistakes mistakes like this only where the spelling is incorrect but but and then there was no error so I used to be confused like what is happening am I doing it wrong or right but then I used to see oh spelling mistake okay so now I got it if I do it okay now this is proper line C Ling is correct okay Alli sping is correct but it's not being applied over there uh some reasons heading okay I'm applying it at a wrong place not over spelling is wrong over here okay okay I got it I got it so the spelling is so I had written allian here over here but in the header it is not required right why am I doing it in the header I have to do Alli see over here and the spelling is a i n I wrote it by mistakenly everywhere so it's just see I made the spelling a mistake over here only aing not align I WR aing instead of align my bad my bad don't judge me on my spellings okay I I'm very bad at spellings okay so this is done for now we have uh uh this flya this thing and then uh we have the section see now it's not difficult for you okay I'm leaving it up to you you can make this section also these two sections are also similar so for this section you need a grid it's the same over here for this section also you need a grid this just is H2 and then this is a p and instead of image you want the input and the button so I've taught you how to make a input and a button also you can just try it you can add a background color to this and then it's made right you can then uh use it wherever you want to use it okay fabon also I showed you how to change the size of the icon also I showed it to you okay so most of the things we have done the important things we have covered you can increase the size of the button if you want change images also if you want okay for this about about us you can add a anchor tag in the link also so you can do that also okay so uh yeah that's basically it from uh uh the session I hope you have enjoyed uh the session and you hope you have enjoyed all watching me teach you uh so yes here I come back again uh my name is prakash Sakari I'm a mentor at Geeks for geeks uh do uh check out our courses page which has a lot of different uh uh courses helpful courses we are coming up with a lot of uh courses over here uh in web development there are these live courses and there are some free courses also which you can take and I'm also coming up with a course on JavaScript which will have a lot of projects in it so uh uh I hope you're going to uh like it so yeah uh basically that's it from uh uh the session if you have any questions you can uh put in the questions and I'll be more than glad or happy to uh address those uh questions do you have any questions it was a good session I really liked it uh a lot of people joined we had touched almost 90 and I didn't expect uh this amount of crowd to come to be very honest but uh got a good number of uh crowd good number of people to come learn web development it has a very very good career opportunity and uh a very uh good uh uh like a long career you can have if you're starting at an early age then you can actually have a very very good career by learning uh uh web development okay so uh yeah that's it uh from the side uh so onx says is there going to be another session uh there's um there's not going to be another session but we are coming up with a series on projects so starting from this Friday okay every Friday Saturday we will be having sessions where we'll be making projects so only projects so uh HTML CSS projects HTML CSS JS projects reactjs projects it will be a very very good series where you'll make a lot of projects projects which you can put on your resume uh and that will basically help you a lot uh in so but this won't come on this channel it will come on gigs for gigs web development Channel so do check out the Geeks for geeks uh web development uh Channel U And subscribe to the channel so that you'll have a lot of uh uh you won't miss out on anything because we're doing a lot of uh the a lot on the web development Channel we have started it recently and we're trying to add as many good usable contents like courses on react there's a course on Jango coming up there's a course on SQL coming up there's a course on angular coming up there's a course on project building in react JS coming up there's a workshop that I will take after the 15th or 16th of April which will have reactjs projects uh and we'll teach you reactj from the beginning to making projects like e-commerce filter applications and making a video library something like that so stay tuned And subscribe to our Geeks for geks web development Channel you can search for geeks for geks uh web dev web development you can find the channel and subscribe to it so you won't miss any more series or project projects uh maer says I want to become M developer by the end of this year is it possible yes it is possible why is not possible it takes U at least 6 months for you to become a M Stack developer uh you'll be able to do it start with HTML CSS JS reactjs learn Redux learn Express learn mongod DB that's it you done and make projects making projects is very important so for that you can follow our YouTube channel where we have a lot of projects to come okay so that's it uh I will see you uh soon with another stream and another uh uh exciting thing I hope you liked it show some love by liking the video and thank you for coming and thank you for turning up uh it means a lot uh to me uh all the best to everyone lot lots of love and good wishes to you uh take care bye-bye