So, this is the responsive website that we are going to make in this project today completely from scratch without using any framework. By right clicking here, I show you the people by inspecting and by clicking here I also show that this website is also fully responsive. Yes friends, if you guys will do it in this way then look at this, it is being rendered differently in different devices look at this you scroll it so it's coming this way And I will show you people how to make this website now you have to change your logo obviously here. And here I should have bought a better image for it and in this project, we will use a better image here But then again, we've created a fictional website for a food ordering company that might want to deliver food. Here I have put dummy text but what I have done here, I have made it fully responsive And look at how things are getting rendered when we're here to make it responsive So how to make a responsive website that we are going to see in this video without wasting any time I would like to start quickly now so, guise I have some utility files which I will give to you guys here I will give all these files I have taken an image here I have opened this folder in VS code so, let's see the folder hierarchy Which are the folders that I made and which files I have downloaded from the internet this is a background image I have downloaded I have downloaded this background image then this contact.jpg is downloaded then this is my own photo which I will use on the behalf of the logo. You guys take some good photos as logo and along with that within img we have some other images that we want to use. Now what we will do is 1, 2 and 3 we will make some cards and use that in Along with that we will use the logo 1, logo 2, logo 3, logo 4 here on the website of the clients which I just showed you on the website there. So, you must have all these images and if you have a question that where do all these images come from? So let me tell you where this is coming from there is a website you can go to it pixels.com and there is also a website by doing pixabay All these websites give free images along with that, if you do not get any free images even after that then here you can go to the settings. And by going to search settings, sorry going to tools here you can search any image by doing this way labeled for user rights And you will get the image, there are very good images all this you people get here for free if you use it then If you guys run a business etc. and you want to make this website live for a business then there will never be any copyright issues, ok So, this website you use it, use it and the logos on Wikipedia's are mostly royalty free you can use them, okay So here what we are going to do this is our folder, first of all, we will create a file in it index.html, ok which we do as usual And we will quickly set up a boiler plate in it and we do the food delivery Best Online Food Delivery Services in India OnlineMeals.com I've just put a random bit on here taking a name, OnlineMeals.com and naming it MyOnlineMeal.com looks like a little gamble MyOnlineMeal.com And at the same time here we will put some text inside the body that is all the layout of the whole that we will make now But now let's do one thing quickly come live by clicking on Go live and look here I have come live Best Online Services, my title is updated Now what do I have to do here I don't have to take too much tension at the beginning I just want to be a navbar here. So here I will build a nav I will not give it a class, give it a Id navbar, because navbar is only one so, what is the need to give it a class Who do we mark unique, with what we mark we mark HTML tags with Id So, it is unique here because it is navbar so, I have given here id = "navbar", along with that, I have some planning inside navbar. I am doing something in such a way that I will make a div and I will give a Id of a logo in it and here my logo is going to come And there's going to come img src That is, an image tag is about to come whose src is cwh.png you can also do the second logo I should have given it a good name, not a cwh I give a good name I will give it, logo.png and I will give this logo.png name it is known from the name itself that it is a logo And all these things are important to make a website, ok and if it is not able to load then I want to come here by writing MyOnlineMeal.com, ok If for any reason this file is not loaded then will come here by writing MyOnlineMeal.com it will not look good at all, this is the page I haven't done anything yet So slowly see what magic I do in this and how do I convert it into a good website then I will make an unordered list. And what will I do after making unordered list I will put some list items inside it then I will write list item and give li.item class to it And at the same time, I'm going to put the content in it and I'll put (a) and then I'll hit enter here so, something like this will come I want to put anchor tag here So, I'll put anchor tag here like this and multiply it with what will multiply 5 i want 5 like this So, look at what I have written Emmet and magic happens as soon as you hit enter so many of you ask me what I have written So, I would say that after looking back you guys can see what I have written and I have not done any special magic I have written Emmet Abbreviation. And if you search with Emmet, you will get it as the VS code comes built in you will get a lot of information by searching Emmet So, I come back over here and this what I wrote Emmet I write here, Home and I write over here at the same time, About Us And at the same time, here I will write infact, first Services then after that About Us and then Contact Us And if you want to add something else then you can add, ok and with that look here I forgot to write here href So here by using multi cursor functionality I will write this (href = "#") ok don't take much worry right now. And here I messed something up, okay, never mind Now we are good, ok it looks great means it looks good HTML file Right now, this our website is not looking good at all and it will also look good, it is not a matter of taking worry so put the unordered list here, ok So made a navigation bar my plan is something like that I will show the logo and make this ul in its right side, I will make it either flexbox I will not use floats etc. flexbox is a modern technology, I will use it and make flexbox and straighten them, ok And I will remove the underline which is coming due to anchor tag so, these things are looking good in theory, but just apply them. But before applying them I want you guys to include style.css what css is here I am going to put it inside the css folder. And organizing is very important it is important because if you people have a lot of files then it becomes a mess. The whole confusion becomes what we speak I don't want that to become and all the images that are there, I should move inside it. If you want, you can also create a folder inside the images backgrounds and at the same time, in which section are you using according to which logo you are using it Which base images are you always use this you can put in the outer folder so, it is very important to create all that hierarchy But now we will come to the first issue make the website good only after that we will do some work so here the first thing that I am going to do That is CSS Reset And what is this CSS Reset if you guys have access to this playlist then you guys will know what i am talking about Nothing happens much just what we people do here that which is our body, all the elements of the other, there are margin 0 etc. Give it a font, default we can do all that work here with CSS Reset so, if you guys have access to this playlist So, I have told everything in detail, the link of this playlist will come in the description and you must save it by bookmarking it. Back to the website I will not write more resets here in future I have got something in my mind I will add it here. But what's coming to my mind right now is that make the margin 0 for all and at the same time make the padding 0 for all And more than this, nothing is coming in my mind right now, okay so, for now I will let it remain like this and with that what will I do then? Make some variables of CSS and it's optional, it's recommended but it's also optional for now If you are building the first responsive website of your life So, I would say you can skip this but just a hats up Create variables because if your navbar is some height then you would like to save it in the variable And you give margin, padding, all those things accordingly so, I'll make this section here but I probably won't use it, okay But why am I making this section that I have told to you people so, there are custom properties about variables that I told to you people Like I can make the navigation height whatever it is and let's say I give it 59 pixels So, I have just told you here by telling I might not use them in this project. just for this project, ok Now to create the variables here now we come to the navigation bar so, the first thing we do is to make the navigation bar beautiful. And see how I am going to do this work so, I have given the #navbar if i am not wrong and what am I going to do here. This is my navbar I am styling it now so, I will style the navbar First of all, I will make it a flexbox And why am I making flexbox because flexbox makes life a lot easier I can't tell you how good flexbox is Look what happened here as soon as I put flexbox in it I did flexbox display: flex here save it, I did not save it So as soon as I put the flexbox, it came straight in a row, okay And what happens after the comes in row that like the navigation bar, you put flexbox in it after putting the flexbox, itself it becomes straight. And if you don't use Flexbox and you have a little bit of experience in web development So, you will know how much problem it becomes in bringing things in one row So here the display is flexed so, the align-items are also made to be centered so that what happens is that all these items come in the center Look over here I am doing the center of the items but now I will show you by right clicking, inspecting So, you see how much space is taking up here, ok So, what it is it's taking up so much space and it's taking up so much space, okay and my navbar along with it is taking up so much space So, here's what I did flexed the display, and centered the align-items if I wanted to center it all. So, I would center the justified-content I am just telling you for your revision But if I center justify-content then it will come like this but I don't want that right now, ok So, what will I do now the spices inside it, I will also make it flex, ok so here I have made flex the navbar And with this what I will do I write the logo and the image, Logo and Image I break it into 2 pieces one is the logo and the styling of the image And at the same time the styling of the list-items we have, is fine and I add the navigation bar to all of them So that I remember here what I am doing I am doing it only for the navigation bar I have not added anything new. I saved this and after doing this what I am going to do here is the logo of the navigation bar and that's our image First of all, I write here logo and here I will add CSS of logo after that comes after logo, my img which I have kept inside logo That is, the image that is logo, this image I am talking about it, that is, okay I will style it here according to my own. I'll take its height, whatever I need to set I'll set the margin say here I'm setting the margin to 34 pixels, 45 pixels I have entered a completely random number here and will fix it and have entered such a dirty random number that it will ruin our website. But to see how I will set it it is technique there I give the height here as well as 56 pixels I have also taken a random number. I don't know what I'm doing but now look what I'll do I'm here in the logo, okay I had given a little more margin on the Id logo here so, what should I do let's make the margin 10 pixels and set it in the same way And I will reduce it in this way because I do not want it to run much So, i think his should be good now I have done this now it is not necessary that you also do 10 and 34 It doesn't matter yours could be something else it could be 35, it could be 37 or it could be 12 instead of 10 your it could be 27 instead of 34 And you can fix it later of course, there is no such thing let me write it here Simultaneously this is the image here I have given margin to the div I have also given margin to the image, I feel like this And I have given a little more margin so first of all, I make it a single digit I make it 3, I make it 5 yes, that's right now And if I increase it a little, then I am seeing what will happen this is the top and bottom margin keep it less than it is good. Let's start the work with this much whatever the height is, I can increase it and I can also decrease it, I want There is no such thing that you have to use the same value to it I have written 59 here, so you have to write 59 too, you try 62 and see And if there is any problem then solve it with the help of concept and I will replace it whatever it is. So now I'll reload my page although reloading is enabled in my live but still, I'll try it one more time. So, look, right now my navigation bar is visible to me as set I am not able to straighten it But the rest of the things, the items are set, ok Great now I have done this once, now see what I will do I will come inside my CSS I have done the logo, img now it is the turn of the styling of the list so, the styling of the list is going to happen First make the flex of display of ul and what will happen by doing so that the items it is will be straightened it seems to me a lot of convenience I like this a lot, so I write a navbar over here I was saying I like it too much for Because it solves a huge problem when Flexbox was not there it used to be a big problem for web developers. that how to make navigation bar used to do floats and do positions, absolutes, up-down, top-bottom But now flexbox has arrived so you can display directly: flex the row becomes straight and that's a good thing and progress is being made here, ok Now what is li inside it what will we do to the list-item inside it we give it a little style first of all, I whiten its color. But if I whiten the color, what will happen it will not be seen, okay but I want to whiten the color because I want to its background This will darken the background of it for now, I keep the color white on hold, okay let's change the list-style to none As we saw, list-style will become none what will happen by doing this the point-by-points that come from doing this will not come We will see the font-size, how much we have to keep and in the font-size I will tell you to keep it in rem 1.3rem If I put in here I will change it and see it I'll do it and if I reload it then see everything is working fine, ok but I think it needs padding And I will not give padding to it In which i will give padding I will give padding to what is inside it (a) and why I did this, why I did not give padding in it Why did I give padding in (a) so, I gave it because I want to hover if then the element containing (a) should be hovered over You understand my point if I had given here directly, what would have happened so it is (li), it comes in padding, and it comes in (a) So, if anyone goes with an arrow in its padding area then the one that I had made an effect that turns white by hovering, becoming dark it would not come So, to do that I want the whole (a) to be mine that which takes up the whole space inside it it will be clearer if you are not cleared now There is no problem and sometimes it is necessary that you do not try to understand everything it is as much as it is coming. Even if you're catching 90%, that too I'd say a lot, okay so, here's the space I've made for (a) What to do first block its display, by default is inline and why blocked the display because padding has to be given 3 pixels done, 22 pixels done just random numbers again I'll adjust them giving them a border-radius of 20 pixels And what can I give along with that the color will also keep it white but keep it on hold for now and will whiten its color here will do text-decoration: none what will happen with this, the underline will go away look, yes, now it looks like something is made Now here it is being known that something has happened Great, very good and here we have a look at our list-items too. Look at this list-items and look at the (a) inside them Great I'm so happy, I'm so happy because of this thing Now let's see what will happen here which is the hoverstate now I do one more thing here which is the background I want that too, cover it with a strip of black color so how will I do that work you will see what I will do with that. Along with covering it with a strip I will put a background at the bottom then do that works so, what will we do? if you people remember the video of that selector, before and after selector So over there we talked about a ninja technique what was that ninja technique That ninja technique was that if I put something like this in the navbar before And after that I should put content in it I should put some such content, some black, okay I put black content I will give background-color black and what will I do with that along with giving background-color black? What will I give to its position I will give absolute to the position, ok position: absolute and I will also give the height, width of its I give it the height, 100% and at the same time give the width, 100%, ok and what will I do with that I keep it that much for now And save and show you people see what happened here it took such a height and what did it do with taking so much height It's taken its background-color black and the position is its absolute, okay so, what am I going to do here? I will make its z-index: -1 what will happen with that my content will come on top of it, okay and with that what will I do I'll confirm that opacity with the z-index to -1 making it .4 .4 will be fine and I know I need to raise it a bit now I will do that too but what will I do here now which is (a) now I can make their color white, ok And as soon as I whitened this color, look it turned white and here I don't need the color white, okay So, what is it now, we have done a lot of good work here now I will do one more thing here I would say whenever someone hovers over it Then what would you do, make its color black and along with making its color black I would like its background to be white. So, nothing much is rocket science do background-color white, ok And look this, it will be something like this look at this, look at this, look at this Home, Services, About, Contact okay so, what did we do here The height of what I had before is 100% and let's also see why this is happening. So, if I come here now which is my navbar what will I do to the position of the navbar I haven't targeted the navbar directly yet so, I'll write navbar, and relative its position And as soon as I do that reloaded, see everything's set up, okay opacity, etc. Home is here, Services is here, About Us is here, Contact Us is here Everything is going well right now So, we have made all these things now what we have to do now we have to make a section below and what we have to do there by making a section below We have to put a background image so how will we do this, let's see about it so, what will I do here, I will make a section I'm going to give him id about home, okay so, I'll do it here that i'll make section Id = home so, I'm back to my HTML Navigation bar work is over now I'll write section#home and after writing section with id home what i will do inside it i will put content inside it So, I'll give a heading and I'll give the heading a class h-primary and I'll add to it what I want to do so, I'll write down Welcome to MyOnlineMeal, ok what I'll do with that I'll put 2 paragraphs and I'll lorem34 here and I'll cut them down that's all, right. I'll make 2, ok if it more, I'll reduce the text And I'll put a button whose class I'm going to have btn which I'll style right now I've ordered now And it is looking very bad, well, it doesn't matter we will do styling with CSS, now let's do styling And here I saw the navigation bar, list-styling and here I have the navbar I have styled only the navbar I have to move it over there because I want to organize things, okay so, the navigation bar I wrote here In Before I'll put it here and that's all it's part of our navigation Great so far everything is going well, all right Now the navigation bar is done, now what we will do here we will edit the home section, ok so, I wrote Home Section here Saved it I will put its Id home and after entering home, I will write a little CSS in it What CSS should i write in home first what i will do at home i will make it display: flex, make a flexbox and why flexbox I should ask why won't I make it, ok because flexbox is what it is now look what flexbox will do it will straighten it out Don't be afraid, we read flex we read flex-direction: column use that, and it'll come back down And this order now it's messing up, ok we'll fix it now, we'll fix it later, no problem, ok And give padding here I'll give a little padding from the top, 3 pixels and from the bottom, sorry, I'm saying bottom I give 200 pixels from left, right, ok yes, it is okay now, everything will come in so much space then we will center it with flexbox And do the center on both the sides one is center the justify-content and at the same time make the center the align-items, ok And after doing both of these look now all this has come in the center now what we have to do by showing just a little cleverness To set now let's put its background first so that it comes to energy and I use selectors only to apply the background. I have got some habit, ok so, I use only before selectors and see what I will do I will do what I have always done and I will copy from here what I did above I will do the same And here I do it something like this the content will be blank, the position will be absolute Here instead of background-color, here the background will come in the url so here I write the background, and I write the url and the bg will come inside url look we are now inside the CSS folder, okay we have to come out a folder, so the (../) Then from there we have to select (bg), ok height 100%, width 100%, z-index I have set -1 At the same time I would like to put a little more on the opacity for now I will do 89 later if I feel then I will fix it And here now I see how it has come here how its rendering is done so here I have just put (bg1), I set (bg2) I think bg2 is much better So, bg1, not bgbg1 Yes, I think it's better but look here, this image which is there is totally useless So here we will use that same no-repeat what we read, we will use it will use center center/cover And where we had read about all these things in detail read on our web development playlist which is one and only. So, hope that you must have understood all this very well so here we have the opacity which is how much work was done above. I think it got a little dark so, I just close this explorer opacity: .4 What it is Let's fix it later, ok I'll come here later and see but what am I going to do here now? I had set its opacity to .89 Its opacity this is our image what will I do along with it I have made the height 100% Now look here, this is the section, how low is its height what will I do I will increase its height so that it comes to the bottom And how much will I increase its height which is my section of home I set a custom height here I do 400 pixels and if it seems, then I will increase it and look, from 400 pixels it has come completely right, okay Now what do I have to do this is my 1 and this is my paragraphs I have to style them and obviously I have to style the buttons too So, what will we do here now we have done home in the home section and this now what we will do here, Let's not style h1 and will create some utility class And what I did in utility classes I told you that there is a h-primary class which is added here so let's write it And that is the h-primary class I am going to use throughout, ok so what shall I do, this is the h-primary class I will write some CSS inside it And I'll throughout it and I'll font-size how much to 1.8rem or do 2.8rem I'll see how perfect it looks yes, ok, 2.8rem this good Great, ok I'll make the padding 12 pixels and see how it looks, padding 12 pixel is correct 12 pixels of padding in all directions fine it's done now, ok what can I do now? I am showing you here by creating such a utility class because I want to tell you that when I am creating a maintainable code base. So, create a utility class it will be reuse if you create classes like this then you can show the same type of headings in different places By adding just one class it can add a lot of convenience if you're doing something like Now for paragraphs etc. I will suggest that you make this utility class so, you can do that too. But what I will do here now by not doing this, here what I have done Instead of not making utility classes, I'll work here by targeting all of our individual tags. But I want to tell you that if you make utility classes then it is going to help you a lot, okay. So here we are h1 and (p) that i am targeting separately so here I will write h1 of the home And what will I do with the h1 of the home what will I do first of all I would like to whiten the color, okay After that I would like to center the text-align, ok I have centered the text-align and after doing this According to me, yes, the work has been done now I will try to increase it a bit, I will see it by doing 3.8 if it seems that it is too much then I will reduce it And even with the paragraph that is there its color has to be white we will also see what else has to be white. The color turned white at the same time the text-align became center I change the font-size to 1.5rem a bit. And we have seen what is 1.5rem we have seen what is rem what is rem what is relative to HTML what is root element, that is we have seen in detail rem, m pixel, vhbw So, the designing here is looking very good but brings some fonts from google fonts and puts them. So, I have come to google fonts and what will I do here, I will bring font I think some good font, and I put some good font It is seen if it is even better but what will I do here i search a font, it is coming to my mind, Bree Serif Takes it takes one Ballu Bhai also Ballu Bhai Ballu Bhai is also a good font and Ballu Behena is also a good font Ballu Bhaijasn also seems fine to me, but again and a lot of people were laughing a lot of people thought I was joking, when I did it in a video so But Ballu Bhai is indeed a font You go and see it in google fonts it is there, you will find it, ok so here I will use both of these This font-family, Bree Serif and Ballu Bhai then do one thing, ok what work do we do which is this paragraph, here give the Bree Serif and which is the h1, give Bree Serif also there And which is our navigation bar, give Ball Bhai there So, here i will give Ballu Bhai, ok So here I gave Ballu Bhai and now I see how your website is looking So here I have come Ballu Bhai And at the same time, it has come here Bree Serif, ok so let's see how everything is going look both fonts are quite similar and that's why i have taken it, ok Because if you put different types of fonts in your website then that too will not be right so, it is good work is going very well now everything is done right So now what we will do here after doing this we will move forward here on our website and I have added utility classes, p is looking good In utility classes, btn is also a utility class so, let's complete btn also what we have to do first to complete btn It has to be given padding because the buttons that are there by defaults the padding they have is very different So, I will give padding I will give a little less than the top, 6 pixels but I will give a little more than the left, right I will give 20 pixels at the same time I will give the border border: 2px solid white, ok And I will also give the background color I will give the background color brown I will change more later if I feel it Now I have said so much that I will change this, I will change that, but okay now I have to whiten the color too. When I have made this background brown, nice the button looks quite right but it would be fun if the button is visible as well as margin I give a little more than top-bottom I give the same thing from left-right, okay and after doing this Great, yes, everything is looking right now, ok So here I have written the order now but the font which is there, we enlarge it a little make the font-size 1.5 rem Yes, looks great now and I style the button, so it will look and border-radius how much border-radius I look at the border-radius start with 5 pixels, then increase it as it seems right according to me everything worked fine in these 10 pixels So here my work is set paste, save let's see how everything looks so far it looks great let's see how it feels next so, let's move on to see how it feels next here's what I'll do Telling a technique to you people as this text is written, it is not looking as good because it has come to equality Maybe if I reduce this text a little bit then it looks good, look now it looks good it's becoming like a (v) over here So, this thing, which is quite a lot if you do these kinds of things in websites it will be good because if you do this So, the biggest advantage you get is that the look of your website is very good. So, keeping all these things in mind you can increase the first line of the text and reduce the second line a little. You can do all the work but I see a problem with this button the cursor in the button should have been a pointer So, let's go to CSS and I put the pointer to the cursor cursor: pointer, ok I have put the pointer to the cursor and if there is anything else involved in doing this then I will do it later. So now I'll take my arrow on it so, look at it, it looks like this So fast, so good, great, ok now let's move to the next section Which we are going to make is the service and in that we will tell which service we provide. So, let's do one thing here create the next section and give it a class, services, okay and let's do one thing, give it a services container. Or give the services, ok gives the services container because I want to put a h1 inside this services container I will give it a class, h-primary along with that I will also make a center class which centers the text. Repeatedly why should we text-center, text-center no need to write text-align: center again and again, ok write Our Services over here, ok What will I do after writing our services make a div to whom I give id = services and then what will I do, make a div.box And the content inside that, well we don't write Emmet I do div.box*3 I do it, ok or else I do one thing what will I do apart from these two boxes I will make only one box I will write the img and I will put img/1.png in src What is my 1.png I will show you the people 1.png is this image and I have kept 1, 2, and 3 in the same size Just for convenience, ok Here, if their size is correct then the 3 boxes that I am going to make the 3 boxes I am going to make now they will be symmetric, okay. Now I will write h2 here and I will give class to h2 I'll write here h2.h-secondary so, what is h-secondary It is my secondary heading, which I will use And I want to add the center also and i will write here Food Ordering, ok and here I put a paragraph after it write lorem34 in it ctrl + s to save, ok it will not look good obviously, I know And look what has happened here it has leaked here and there never mind I will write CSS here keeping my understanding correct So this is my services container, ok I made the services section here here was ours Ok, I put utility classes in the very end So, I have to do this services section, which is a little higher it doesn't matter let's do the above. And to make a utility class that we promised was the center and it was nothing, no rocket science was only text-align: center And along with the h-primary, I also promised to make h-secondary what will I do in the h-secondary I will reduce the font-size just a little bit How small I'll do that is a later thing but ok for now, ok I'll look at the text secondary for now I make it to 2.8 now but later I will see what I have to do come on, this is also done now the service center is here What's in my services, I have a box in services first of all, there's services Id then there's my box inside it I would like to give border to that box, I would also like to give margin to that box, I also have h2 inside that box Everything is there, there is a lot of things so here I will do it first of all, by just writing this and make 2-3 like this, and start from here I will give margin first say 34 pixels, ok I will display: flex why will I display: flex because whatever is my service, its 3 boxes are coming. So, it's very important to make flexbox and at the same time, I only have that keep display: flex, ok Now the biggest problem is I know what it is the biggest problem is that the image that is inside my box it is being run away. So, first of all it has to be taken under control and before that this is my box let us see what properties are going to come in it. So, what is this box first of all, what will I do in it I will give a border, 2px solid brown and why did I do this because I want to see what this box looks like And I want these 3 my boxes, how are they looking right now, they are looking like this and it has become very strange, a lot of content in these And everything that is there has been destroyed now we have to fix it, ok so, what did I do here? This was our box, I have done this inside it now what will I do here by doing something like this, I will take control of the img of it. Because it's out of control and I'll set the height to 100 pixels And i hope everything will be found inside the page now this time Yes, right now everything is getting inside the page but it has taken a little more width and width it has taken more because Because there are no more boxes, there is only one box. So, let's make another box but before that I have planned to increase its height here a little bit more. So right click on Inspect it and let's enlarge it a bit what it is I think 150 will be good 150 let's see how much it comes yes, 156 OK Well, let's do 156 and 156 is not a magic number you can do 160 too let's do 156 let's do 160 if that's the case. There is nothing that has to be done 156 I have written so 156 is magical no, there is nothing like that, okay Now if we had put text-center class in the paragraph here sorry, center only I have created a class named center only But if the text-center was made it would have been more correct the text-center whatever it is, would have been more correct, okay Now to center it here, what will I do in this box I will do margin : auto but as soon as I do margin: auto I will show you people I did here, I write here, not here margin: auto people say margin: auto is not working at all Let me explain why margin: auto is not working margin: auto will work when display is block first then first to block display, ok and set something of height or width So, look at this will work now So here something is not working, then there is a reason for that, why it is not working and if you are understanding, If you have taken time to watch videos take time to understand things from anywhere then you will surely benefit, okay. You will never have any such problem many people have made it, one has made it that things are not done right in CSS Sometimes something happens, sometimes something happens but it's nothing everything happens according to logic If you have anything that is going against logic then tell me what is going on and I will tell you why it is happening. ok So here this is our services which has gone up and there is a reason for it its reason is that this is my home container its height is only this So, first of all, he will adjust his height and will make his height so that the height that he has comes till here. As far as it comes, this is my background image so, I will do it like this and after growing it look it has come down here So here I just have to match its height and here I'll hardcore it to 633, ok which is home its height is 633 and 633, ok Well, our services are here it looks right to me and because it looks right I'll make 2 more like it so, 3 boxes are here But if we had given padding etc., it would have been righ how does it feel that all three are glued together so, our box class has a little more work in it. What can be done in a box class and first of all, give padding because it will be good if you get space from inside too I gave the padding 34 pixels and here is mine, where is it, there is my box, okay I will give the padding first, and the margin how much margin to give see how much margin you can give here i will give 3 pixels, 6 pixels and also give a border-radius and border-radius 23 works in most of the cases look 23 looks right but for whatever reason you want to change it to 28 so, i don't mind Then the background-color as if I have given red and it looks very bad, I know so, what will I do here? Will give a slight tint to the background-color a slight, very light gray color just to make the boxes shine Do not darken too much it will not look good on the website at all, I am already telling this is ours and after doing this where should I paste it, here Take care not to repeat anything, you guys keep things consistent and look here, a mess has happened I'll tell you what's wrong. This is our section I have increased the height a little too much look I should have made it 628, 628 is good Because this line was coming over here I've made that line disappear, 628 628 Where over here Great so I've done it Here's what I did in the img of the Services box I have put here here's a glitch, what's wrong I had to put its opacity and where is this thing, I am looking where I had blackened the background, where did I go yes, i had to set its opacity and hover, not hover, not this i have to set its opacity it is what it is i had given z-index in it i remember i have set its opacity And what it has done, has covered that whole and also, let's see why it has happened so here it is happening because I have given the position relative to the navbar so, what will happen it will remain in its position, what will happen if I absolute it? absolute So, what will happen that it will go over its parent and I also set the top to 0 here Just to be safe here I also set the top to 0 So, this is the navbar, the position should be relative in it so, by doing this my work will be done and what will happen here, something went wrong Looks like I didn't save it why is this happening I have put navbar 2 times in my CSS so, I have put navbar () 2 times in my CSS Where is it set one has been put here and a navigation bar has been put in line number 13 logo and image So here I have to remove it from here yes, now it is okay now it is right, yes, now it has come to the place now everything is fine Already which is our navbar let me relative its position so that it can sit comfortably by going up here. And the section height that I want to set here I do it like this so that it goes inside something like this So, I'm lowering my height with arrow key as you guys see and here I put it in And I'll show you how I'll do the rest of the work, okay so, this is the section I lowered the height of the home section so that it only takes the height you see Along with that, which is before I will reduce the height of the before in exactly the same proportion. So that my work is done exactly right so, which is the height of section home here I have to put it inside the top right. And along with that, what do I have to do I have to set the height of this before so how much I have set the height of this home I reduce it more let's say I just did this, ok and this is what I've absolute the position in this is the one before in the navbar I also make it 0 pixels in the top and 0 pixels in the left too and what will happen if this is my image it should go right up So here I have put this which was my section I have put it before the navbar but I have not put it before the section Look this is top: 0 and left: 0 it's very important copy it and bring it over here, okay And yes, website is set up now looks set up right now our website looks great everything is fine, section is below And the work, which is almost done now here below, the boxes you have made will change this text in these boxes, will do that too and here it is our services, let's see how it can be done back and forth, up and down So, let's do a little service for the services we have here, okay so, what will you say first of all here I will change the content it is and what will I do with the content my first one is food ordering is right I make the second one something as if I do food catering and at the same time do the bulk ordering of the third one. I'm just changing a word, I'm a very lazy person, I know but what will I do here I will do 1, 2, and 3, it's okay And now these images will change yes, the images are looking great right now and will add a new section after it is done But at the same time, this is our services how can we see how we can do better this is my container of services And here this is my home, reduce the height a little bit so that it's a little like this yes, just fine: 578 pixels So, I want to do these 578 pixels in line number 69 of style.css 578 pixels And after doing this, as you guys are seeing here this website looks like a bang right now, ok So here this is what I have use the h-primary Welcome to MyOnlineMeal and after that this is our services, in this also I have set the h-primary So, i have h-primary: center so, I put our font inside the h-primary, put Bree Serif So, I give the font in the h-primary, I will give the same font in the h-secondary and that should be good and look now everything looks great So, what is h-secondary here its font should be a little smaller how much should I do font-size, 1.8? Or 2.1, or 2.3 I'll do it, okay 2.3 2.3 is good, I'll do 2.3 And 2.3 I changed it to h-secondary 2.3 and at the same time the paragraph which is coming in our services and box Let's fix that a little and what will I do I have already centered the text-align along with the font-size of it And first of all, this what I have added not font-size, I had to add font-family I will add that, okay I have added that yes, it looks a little good now, okay So, i think this should be good that's enough I don't mind it, it will be good for me for now And I can increase the padding etc. but okay: our services are looking good I'll come down the rest now And I start working on whom on our other section which is our sponsor, or the one whom we provide the service And what is going to happen to us it is going to be our client section now here you can write the client section and put the name of your client Or you can put your photo by writing about I put the client so what will I do here I write the client section, ok I will write the client section and it is also necessary to have the id of the client section name now the client section is written so Let's make it in this happiness client-section, okay so, I have created a client section named Id and what should I do inside it? The Id named client-section must have a header first, ok so, what would that heading be? In our section called client-suction I will give our clients and it is necessary to give class in this too. I gave the h-primary, and gave a center and here I will write, Our Clients become a div and give it Id the name of the clients And what will I do inside it I will make a div in which what I am going to do in which I am going to give the class client-item And I make it many but now let's make one and what do I do inside it I'll put logo1.png and i will put our client in alt, ok And how is it looking Horrible will look right now, it will not look so good look Apple logo is there but it is not fun means fun, it is not fun, ok So, what will have to be done here I have to add CSS to the client-section so, this is my client-section, I will add CSS to it I will format document by right clicking so that it is done well so here Id which is my client-section what i will do, i want the box after our client to be flexbox so, i will make flexbox for the clients i have I'll display: flex and I'll do the rest later but for now, the main display: flex is turned on Now I think a little and what can be done inside it so, I can add the background-image in it, ok I'll do it later but what I'll do now, I can center te things so I'll center the justify-content here will center the align-item I do center the align-items And one thing comes in my way when I see it in flexbox first of all, take the center of things, it looks good Now here I set the height in this client-section let us say 344 pixels, ok and check here logo has become center But it's big enough, so let's make it smaller too So, the img that's inside I'll say make the height of it 44 pixels and I'll fix it now, okay I've made 44 a little too small. How much should I do I think 140, 120 I did 124, 124 should be good I copied 124, okay And by adding more such images, I show you people And this is the client-item this is something else to add I've added logo1, logo2, logo3, and logo4. And here how many I have there are only 4 logos now I do only 4, or I will do one thing, I also make it 1 And let's do 3 here I just don't want to repeat it again and again that means I don't want to bring more images from internet again and again I think this is enough, ok so, I wrote here clients now what happened here it would have been better if I had got padding etc. So, this is our client-item class which is a client-item class what will I do in the client-item class I will put padding What else can I put in padding I put some padding 40, 50 I think 34 is always my magic number And I'll tell you why it's my magic number because I'm a very lazy person and 3 and 4 are side by side So, I write the pixel by typing 34 quickly and sometimes it works for me, if I tell this thing right see it worked in this case It is all right, the logo has been set correctly Great now the next target for me is that which is the client-section what should I do in this somehow? Put a selector and give a background image to it so, what will I do I will put a content in it and what will I do with that? after content, position: absolute after Position: absolute I will write background and in background I will give url and in url I will give bg.jpg, first i used bg1 by the way width 100%, and height 100% And I will put the z-index how much do i put the z-index why is it coming like this well, not put a semi-colon here, that's why it is coming like this I put -1 and how much do I put opacity I put .4 I hope everything will be perfect Wow, what's the matter, its height has become a little bigger everything else has become so good so, we will set everything now There is a problem and with this happening, what can we do here now look we wrote services It is written here also the spacing was necessary good, I am very satisfied with this so, with this happening, what do we have to do now? Its height has to be reduced a little, whose Whatever it is before, I should give some height in it I reduce it according to the percentage, in this way even then the work should be done If I do this 54% then it will be right according to me but what do I do for now I do only 54% saved it, great Look, now a good website has been made I will show it by removing it and I removed it, why did it happen I did 54% of its height here and why it happened ok Here I am bringing it down so it is creating problem I should take its height in pixels let's take it I did 100%, so it came down completely so, what should I do, what should I do, what should I do so, what will I do for this What will I do relative to the position of this which is my client-section what will happen by relative to its position So, I'll relative the position of the client-section and let's see what happens with relative it will only take up as much space as it needs, ok So now there has been a problem here that the box, which is there has been moved up now what should I do to set what happened here? I will manually select the height of this this is the selector I have set so, I will come here quickly. The selector I have applied above where I have given the image what I do there, I set the height in pixels, 500 pixels And I increase it a little over 500 pixels and by right clicking here, if I inspect And at the same time, I am seeing how much height has been given to this section I will undock it accordingly, ok Along with undocking, I will crawl it in such a way and this is my before, I increase the height which is here. So, I will increase it to the height and here I will give as much height as it seems, okay and I have given 601 pixels, I will increase it further. 613, ok let's make it a little bigger than 613 and it's good if it is equal so, what did I do here I gave the height of the home here, 578 I also give 578 to it, okay and 578 to home and 578 to this too but above we have this too so here I have to give a little more height So, I have to give it a little more to the one below, so, what should I do I give 610 610 should be good great then I have made it 642 I don't care, 642 So, before this is what I have to do 642 over here, okay so, where is my 642 over here, okay Now we are going to make this website responsive as well So, now there is nothing to worry about I will send it back down to where I brought it and what it is now, it should work perfectly here So here I reloaded it I put in the wrong place, 642 pixels I had to do 642 pixels here and how much was it? 578 And which is there now looks perfect website, okay Welcome to MyOnlineMeal after that something is written here after that our services here So, our clients also came over here so, I put down opacity too I probably gave opacity I'll give 0.3 over here, okay and now it looks perfect I wrote here our services, here these 3 boxes arrived with 3 boxes coming there is a little spacing at the bottom then came our clients And great, very nice, beautiful, ok now what will we do after this we will make our contact form And what will we do after the contact form is created inside that we will do styling, ok then comes in the index And here I am going to write the section and then I will give it Id, contact and after that I will put a h1 in it in which I will give h-primary class I will give center class and write the contact us along with that I will put a div here and what Id will give to this contact box, ok After doing this a form will be created which I will not be processing in the backend at all right now, the tutorial is not being made in the backend here So, what will I do here I'll put div class, form-group and inside it comes 2 things one is labeled, we've seen it already, ok for = id comes, whatever id is here so, i do it name here and along with that, what is happen here I write the name And after typing name let's take an input here, type = text and name = name will take it and then id = name will take it, ok After that, I put a placeholder in it and write it in the placeholder, Enter your name, ok I will see how it came I have saved it, I have done everything why did not come yet after that save And look this little one has come, it is sitting, look Enter your name it's ok we will do this, we will make this too and we will put more things like this here And then let's see how it looks, okay so here I put the background image that I want to put in it first and there is a lot of work, by the way, a lot of work is there So, let's do one thing, quickly come to style.css and write what we do here write here, Contact Section, ok I have written the contact section here And after writing the contact section what will I do here first, I will write for the Id contact then I will write for the id contact before And I give it a relative position I give the content in it I put the selector first I gave the content I gave the content here After giving content, I will give position: absolute after position: absolute, will give width and height 100% After width and height, I will give z-index z-index: -1 then after will give opacity: 0.7 and then background In that I'll give the url and in the url I'll give something like this contact.jpg and here I'll give a no-repeat then I'll give it center center/cover, ok save And yes, now it is looking but its height will have to be increased a bit the contact us is there so, the contact us that I have made what will I do I will give padding in it. I'll put the content, give the padding and that'll do my work and at the same time put a footer at the end, ok So, I want to absolutely complete this thing here now m HTML is complete i will write div.center here So, I will write the div.center inside the footer and what will I do inside it after writing the div. center, I will write the copyright after that The best thing I like about this VS code is that as soon as I write m% here and I write copy here then this is what I see I will write here MyOnlineMeal.com All rights reserved and great That's enough, great so, look it's here, and I'll do some service for it too i.e., I'll write CSS see how I'll do that, ok So, I've done it now, OK now what will we do here I will come back to my style.css We have written a lot about utility classes To write the footer, etc. and what to do with that here we have to style all the input tags that we will have here. First, I deal with the styling of the footer I make the background black along with blacking the background, the color will be white otherwise, it will not be visible ok And take the padding, take 9 pixels from top-bottom, take 20 pixels to bring from left-right to center, right And yes, you can change it, of course if you find it small and want to make it bigger then make it bigger. And you want there will be over text so, I have given it from left-right I have already centered the text But again Contact Us is written here, so let's complete this form. To complete this form, I will press ctrl + d 2-3 times and here I will enter the email as asked for the name what happens more there is also a phone number type = phone comes there, type = email comes here Here enter your email will come here will come enter your phone along with that what else happens and I am going to use text area for the message which is there. So, I'll use text area here for the message and I'll keep them the column the same way So, whoever wants to send a message, they can come here Name, Email, Phone number, Message And now the styling is not so it looks bad but see how I will turn it around now So, this is the contact how will I style the things that have been put inside it first of all, I will style the inputs. So, what shall I say that this is my contact box which contact box is this contact box is this There is a form inside it now I don't want to target the form because I might want to use the for-form in my navigation bar. To submit a search etc. so, I don't want to mess anything up there so, what do I do? I will go to the contact box and say its input and its text area what to do for both of them make the width 100% for both of them, it is too small I will do the padding, how much will I do, .5rem and now I will see how it is feeling and I made it a little bigger So, what will we do to fix this thing we will give a little padding etc. to the contact we have which is our contact box, all right. So, the contact box will also have to be styled here otherwise, it will not work so, I do one thing, first make its display: flex And I'm doing it because, to center and all these things so that I can do it all justify-content: center and align-item also center And I'll give padding I'll give padding bottom only why I'll give bottom, I'll show it now and put my magic number I've 34 pixels Yes, it took a little shape I am not saying that it is very good but yes, it is okay so, I will do one thing which is the form inside my contact box I will style it. I would say that do the width of the form is about 40% and at the same time what can be done I can change the label which is i would like to increase its font-size because it looks too small so, increase its font-size and i will rem the font-size to 1.3rem It should be fine in my opinion Because 1.3rem is all right, yes, great and it has a font-family, I do it Bree Serif where did the label go? Yes, it looks right now look now the fun is going on now this is the placeholder etc. I have to fix it And I have not changed much in input tags also. So let me style it properly so, I have given padding, add a border-radius it will look a little right, 9 pixels Simultaneously what will I do with the font-size I will increase the font-size a little 1.1rem yes, now the look is styled, now looks great Yes, now it seems that something is there, contact form is there great-great-great now I feel good so, this also became our, contact form also And what this entire website is, it is almost complete so, hope you have liked it, you must have understood that how we made a website And here you can put an image if you want but I don't want to go back to that thing our services are done, Client done, contact us done now time has come to make it responsive so, you can also make it responsive And here it is telling me some warnings here you have done the same Id and yes, it is giving the correct warning I had used the same Id so, I'll email here phone here and write a message here and this is the warning, it's gone, ok So, what is there now, here you see that I have made something like this now I increase the text here so that this box becomes a little longer. And why am I doing this I am just doing it like this, so that the content looks a bit fine will add lorem20, I have added lorem23 Oops, what I have done here wrote lorem23 wrote lorem23 here too, okay and the text that was there has grown a bit very nice Now the services that are here, I feel like I have given too much space on this so, the services container section is here You can reduce its height to solve this problem. And I'd like to undock it first and then I'll do it some so right here right now, 550 pixels I will not reduce this much I will make 550 pixels in line number 69 goes to line number 69 of CSS 550 pixels and it is exactly what it is, okay? And if you want, you can give padding etc. here and increase it a little then you can do that work but I am not doing it right now So, I will do one thing, I can give it the margin top to the box so, the margin of the top of the box can be increased a little. So that a little space is created at the bottom i did it 25 did 25 and what is the line number? 107 How much margin did I make by going to line number 107? I forgot how much margin I had I did it 25, ok So, this is the margin of the box that I made 25 yes, that's right now, okay so, here's the margin of the box I made it 25 from the top down too Did I have corrected the margin Oops, I made a mistake here again I had to make this margin 25 So, it's getting over here at night and I'm sleepy so I'm doing all this stuff so probably shouldn't make videos in my sleep do ctrl + g and look at this here I am do ctrl + y I did 550, and that was 109 Ok, so here i had to do 25 Yes, now it's right, now look now it's on the line, ok So here what I did I think I have given a little more margin in (y) so, I will give margin bottom, there is no such thing, okay So, you keep doing this kind of designing don't think at all what you have to do and what not to do. So, give margin-bottom 20 pixels there is no problem in this way you can give margin-bottom 20 pixels like I have given here And according to me it looks perfect right now, ok and with that if you want to increase it this 6 which I have written If you increase it, then these boxes will look like this So, you can do that too that too depends on you It depends what you want, ok so, if I make it 55 pixels then it will look like this So, in line number 107 you can also do 55 pixels so, you have all these options so here I make 55 pixels in line number 107 over here The reason is that for whomever you are making a website, he should like it this is a rule, this is a rule of thumb Whom you are making for, he should like it if he likes what you have made for, and I do not like Then you should not care that why he didn't like it Because if you like the one for whom you are making it then that should be enough for you so, this is the basic structure of our website And now the time has come to make it responsive so, what will we do now we will make it responsive in the next step But I want to do one thing this is the section with services I will put a hr above and below it So, my services section is above the client I'll try putting an hr here and separating it with hr to see how it looks. Not bad, it does not look bad so, i think it is good I can keep it this way there's a line here but if you don't like it, you can remove it, ok So, you can mess with HTML too you can use all the options you have If you want to give a slight tint where you have kept the white background then you can give that too. So, all these things it will depend on you if for some reason you feel that I have made this our services written a bit bigger So, you can also shorten it, ok so, all these things depend on you so now we will make this website responsive in our next step Now what I am going to do to make this website responsible you should look at that thing carefully, it is okay Because this is very important so, here's what I'll do I'll come to my code and I'll add a style sheet to my code And I'll name it phone.css, okay and what is this phone.css you guessed it right here Phone.css will show you how your website will look in phone I teach you how to add this phone.css with media query So, it is very simple first of all, let include it, ok phone.css, css also have to be written here What have I done now here I have just included it But I want it to be included whenever it is my width, which is our maximum width, it should be of some value So, I do one thing, I am here to tell you people about how this work can be done right here in one line so, you can write something like this You write media = screen and and then give the condition here which is your max-width how much should take max-width I will see how much I have to take I will do a right click, go to inspect and after doing it on inspect I will make it responsive and see here it starts to deteriorate From how much it is starting to deteriorate it is starting to deteriorate from about 1100 this, ok so, I am doing one thing, take it 1170 1170 should be good 1170 pixels And here I want to tell you one thing that there are some standards for all these things which you can search on the internet. from how many screens of the media query you would like to trigger what is css for your mobile But I am looking here directly now and doing things according to the requirement, ok So, I have triggered here phone.css just to check if it is working here or not so, what should I do? I will make the background color red so, I will make the background color red. And I would like to see that the red color is getting triggered as soon as I am shortening it look - see the red color is complete I'm making it bigger So far, my website is perfect but after doing this the whole website gets messed up and it seems that what has happened so, we have to fix it First of all, what I would like to do is the navigation-menu I would like this logo to come in the center And at the same time the buttons that it is this, this, this, this, it come down So, let's do that first of all there is a lot of work to be done here, look From where we will start, this is another question Now look here this overflow is coming below what is happening because of this due to this overflow, there is a gap coming here So, it won't overflow, so this gap won't come so let's do one thing here, let's fix it first so this box is ours, .box I start from here but I will do one thing now now first of all I will remove it first I will start from home I want to keep these things systematic over here So, I want to change the height of the home in my phone I want to make it a little smaller Along with that, we might want to change the content of our home along with that, I want to do something with the services. So, let's sort these things out over here so, I might want to do something with navigation here as well. So, the thing that I will do I want to keep all these things set right here I want to keep in order So, I write the navigation over here okay, so what happens with the navigation will be done here then here I write the home section Whatever will be done with the home section will be done here then there is the services section whatever will be done in the service section will be done here. Then there's the client section, whatever will be done in the client section will be done here, ok and what's after the clients Contact us after the clients, and then there's the footer I don't think I need to do anything in the footer and what did I say after the client section After the client section was the contact and after that there was the footer, okay, footer so, whatever we do we will put things in order So that we have to come later then we get this order, we come according to the comment so, the services we have, the box inside it So I do one thing, I write something like this later I will show css by doing beautify don't worry at all Initially, when development happens, everyone creates a little mess and after that we will make things beautiful. Well, this time I have not created so much mess in this css but some people who are enough they even don't do properly then if you guys do this, then don't worry at all As long as your website does not go as long as you can but once you have completed things So, I would like you guys to do things systematically Then it becomes important there so, the services we have here what we people will do first of all, we gave it display: flex, ok This flexbox is ours, this one, this flexbox I have given in this flexbox I would like it to be wrapped like this So how do I do that so, my service is a flexbox if I set its flex-direction: column? I think this will solve the problem so let me just column the flex-direction of the services Great. so, i do the flex-direction: column And this is where my problem was solved more than the beginning, see by column the flex-direction but doing this only will not work. The padding etc., margin etc., which I have taken more also have to be fixed but ok for now, for now everything is good according to my opinion And now what I have to do this is the client's section, I have to fix it a little bit so, what have I done in the clients? I can give it a quick fix first by overflow: hidden so, what will I do here I will write clients and after that I will overflow: hidden And look over here if it overflows it will hidden and what will happen if you do that here only what is coming will be seen And now the website is looking quite right so, if you show you this in different devices then look like this is our website in Galaxy S5 which is not acceptable at all, i know that And it is looking like this in the iPhone and we have to fix it, okay so, let's see how we can fix this thing So here first of all the overflow is coming where is the overflow coming this is the overflow of the images it is not reducing the size of the images at all We have to fix that along with that what we people have to do to fix this navigation then we start with navigation So, I would like this navigation to be fixed first of all what should I do to fix the navigation? And I'll come up to my home section and not to the home section, I'll come to the navigation section here's what I want I would like it to be our flexbox above which I have made parent flexbox here in navigation I would like it to fold, ok And how will that fold be, I will show you look I would like to inspect the element here first and see which flexbox it is. so, this is flexbox my navbar this is a flexbox, i would like the content it has here its which direction, text-direction, flex-direction sorry i will column it And doing flex-direction: column will do my work so, in navbar I have to give flex-direction: column So, here in navbar, I'll give flex-direction: column And I gave this, flex-direction: column so, my problem was solved but at the same time, I would like it when it becomes so small Even then my work is done, ok even then I do not have any problem so, what will I do, I would like to reduce its size a little bit. So how will I reduce the size I will reduce the size which is my paragraph, this one will make it smaller and I will change the height of it. So, look how I do all this work so how to direct this is my problem now and this is my home section So, whatever is home, I will target it I will change some things I will give anything random in height give 280 Along with that, I had given flex to the display that is there but I will column the flex-direction, okay I think I have already set its flex-direction column so that should not be a problem so, I remove its flex-direction: column I only changed its height I have made its height too small and at the same time, I have to change the height of before. So, by changing the height of the home I will change the height of the home-before so here I will do something like this So, it's height also I change a little so, this is the phone.css. I have given 280 heights So, I would like to give the height of what it is, around 400 so that it comes down so, let's see that the case is going on here. So, in before I would like the media-query, which is just fired so, when it gets smaller like this then I want to increase its height a bit like this Ok, so that the services that are there come on the spot so, I have selected the height of this which is 370 pixels, ok so, height of home is 370 pixels so. here i do it 370 What will I do with the same, after doing this I see what class I have given on this heading, etc. I will change the height of the h-primary and I will also change the paragraph which is inside the home so, do both of these works. So, first of all, let's change the paragraph inside the home what i made its font-size its font-size to 13 pixels, ok And i would say you follow rem only so, i am not following rem here right now i have quickly made it 13 pixels Along with that, the utility classes that are here I also write at the end utility here so, I will change our utility classes as well. And what am I going to change here? heading primary so, I am going to change the font-size of the heading primary I made here And how much to change the font-size of the heading primary, I am looking at it I will see how much I have to change I don't have to think too much right now If i do 26 pixels I made it too big so, i think that should be good 26 pixels, just look, it's in place and at the same time what's the problem here that it takes up all the space it's in So, what did I do here I have given padding etc., in which I have given padding I have given padding etc. in Section Id = Home So, this is the padding etc., I have to fix it so, I will reduce the padding which is given in (y), ok And shrinking it as well it will look something like this so maybe I can increase my font-size so, let's give this padding inside home I copied and what padding will I give inside the home I will give some this I have saved it now look at this it looks something like this If we made big it happened like this, if we did small it became like this. and we see different in phones, so yes, it is quite right Looks like this on Pixel 2 looks like this on iPhone and here's an overflow I see and I'll fix that too and see how I fix it what will I do to fix it simply the navigation here is inside it I will say, navbar ul li a That is, the (ul) inside the (li) is the (a) inside it make its font-size 1rem Also, turn the padding up and down to 0 no need then 7 pixels, let's see how it looks now Yep, look it's pretty closely and the chances of overflow are almost over here right now ok, so look here, my work is done if you want, you can give it padding-bottom, okay And I will also tell you how to give it padding bottom. So, this is the flexbox, that is, which is (ul) you can give a padding-bottom to it and how much can you give padding-bottom Whatever you like, give it according to you, padding-bottom if I give it as padding-bottom, 22 pixels is too much Gives only a little light, I do not want to enlarge my navbar so I will give only 8 pixels So, I'll give 8 pixels to the padding-bottom and as of now things are working fine except this one that's overflow is coming And other than that, everything is fine look here I have shortened it so the overflow is coming But for now, it should be done according to me whatever is btn now I would like to fix that btn and how can i fix the btn is a very quick fix the fix of btn and the fix of btn is going to be the padding First of all, the font-size and padding 4 pixels in xy And do 8 pixels and now let's see how it looks you can also fix it by inspecting if you want If you want, for any reason, if you think its bigger but i am feeling absolutely right now this is working for me so, look, we have made it responsive And I've folded the navigation bar so the logo has come in the middle now ours and these are the things it's coming okay So, hope that you have understood this thing and at the same time what we have done what will we do now in below? We can fix this that we have made and this is our our clients so, what will we do to fix it? We will wrap our clients so, what will I do to the clients I will do the overflow: hidden here I don't do, I will do the flex: wrap I made flex: wrap because it's a flexbox and what will it do with the image it contains, i.e., the logo inside it? I'll set their width and height making the width 66 pixels and adding some padding, padding 56 pixels And I'll adjust it too, I know it's not working properly for me but let's see what problem came here Look there is something wrong with its height and width I will inspect it by right clicking yes, there is something wrong with its height and width So, I have given more padding in top-down so what should I do in padding, I will reduce, first of all reduce the padding I have given unnecessary And here's what I'll do along with reducing the padding in the width, I think it's messed up a bit if I do something like this And I shorten the width and remove the padding, for now I have shortened the width if the width is getting smaller then here is the problem So, if I keep it too long then look at it is wrapping but what is the problem coming here That it's parent it is not able to take it So, its parent or so we have to increase its height so here I see that I had set its height. So, I have just removed its height which was set so, this is 128 in the style.css which I had manually set its height I remove it so that it automatically adjusts its height which is height 344, I remove it from the client section And now it will work just fine given that I give it a good padding etc. so, I have given bad padding over here What do I do with the padding? top bottom to 0 I do something like this with left-right I think we can do better than this so, if I inspect it by right clicking, and see the image So, it seems that I have given a little more padding than left-right so, I make it a single digit padding I also reduce it to 2 pixels. And I want to tell you people here that this designing is just all about your technique, your trick, how you are doing things And look, I have dragged it here a bit the quality of the image is bad so how can I deal with it, I will also see So, what is the problem here, I am also looking at this and the height img is 124 pixels somewhere I have given 124 pixels? height of img, height of client img Guess i have to press ctrl+shift+r here it gets hard reset in style.css i have given 152 so, 152 in style.css And I am telling you that you will do this so don't ever think that if you have done such things So, you can't be a perfect and good web developer you will experiment with your things, with your website And finally, you will be able to get something that is perfect like the one you see here my client logos are rendered exactly right. So maybe I didn't even need this padding and if I remove this padding then my logos look better But now look here the problem has come The problem is that it's out now, ok so, what should I do, because it's coming out I'll adjust them later For now, I keep the mobile which is correct the rendering of the phone here is getting it absolutely right. So, if I have just removed the size that I have set here it is not here, it is here in style.css If I set it back on then look at my work has done and look at this, look at this, it's just right here But what will I auto set the height it is, ok then I will auto the height of the client img height of client img is auto because I have changed the width And if I allow the height to remain like that then I will come to the problem now look our website is looking perfect And it seems that I have done something wrong with the logo the logo has disappeared I will see what happens to the logo Here I'll look at what's happened to logo why my logo disappeared here's the logo, and it entered the page and why it happened we will see that too But now come out of responsive mode and when I come to inspect right click here go to responsive mode shortened, shortened, shortened look at this is correct now yes, the website is running fine, no problem Yes, look very right, very nice Services, Bulk ordering, our clients, Contact Us maybe you guys would like to make this contact us a little bigger But it's your choice, it's your choice what to do if you want the phone to have this slightly wide render This is the contact section you can grab it, and you can change it by holding it you can change the width of the form So, you can do something like that which is the contact box and the form inside it I tell you make the width of the form inside the contact box 80% And 80% of the phone won't be look bad at all as far as I think so look at this it will take the whole width like this And look it will take 80% of the width if you enlarge then it will come in the middle, ok you can make it bigger if you want So, all these things depend on you our website is looking like this we see in the phone How the website is rendering in different phones looks this in Galaxy S5 Now this image is creating a little problem for me so, i will fix it now So, the height of it, I have set it to 160 pixels, according to me, I should have taken it according to the width If I had taken it according to the weight then my work would have been right, but, ok what will I do I will fix the scale of it But maybe I reduce its height then it will work for me, ok if I make the width bigger than 34 pixels and remove the height I remove the height, even then my work is being done 149 in its height, a little less And its padding is left-right that too I want to reduce the box's So, this is the box inside my services I want to fix the margin, padding a little bit it looks a bit too much for me. So, I would like to correct the margin, padding of the box which is inside the services so, it will be there, it will not give me any problem. I would like to do this a little and here is the margin-bottom, the color, the border-radius I have no problem with that I would like to reduce the margin left-right a bit because in the phone I do not want it to render like this and this look is working perfectly right now Right now, here I feel that my work is done and look at this a little leakage is still coming, but I think I can do better. If I fix its margins etc. then what will I do in this box here this is the media-query I have done the margins like this I would like it to take up more space like this Because there is already less space in the phone, ok so I will not give margin to it there is a lot of padding I will make 2 pixels and 0, ok Enough, I have placed the margin-bottom well and now all the images fit in the center So, if you look at the rendering in different devices it's going to be perfect, see this Look at how accurate the rendering is. In each of our devices our clients have come this way and it's the Apple logo repeat I know And that's why you might not like it but if you want, remove Apple's logo there is no point in showing it 2-2 times But I did this only because of the lack of images so, where I have given the logo of Apple, 1, 2, 1 have shown it here one more time 1 So, remove you guys, if you people do not like it according to me it will not create any problem 4 our clients are enough And look this our responsive website is ready now one thing which is obvious this form will not work but still, it is important to mention So, the form that is here, it will not work at all for now but how did you like the website, do tell me in the comments Now what it is if you want to make it bigger then do it but in big phones it is going to look perfect So, if you want this thing to take up a little more space then you keep tweaking it And you will keep on tweaking it for the rest of your life even then you will not be satisfied. So, let's see that I am responsive to this and I would like to fire the media-query here Then I would like this which is my content to render in this way and this is happening so, it is 28 in the line number 12 of phone.css. i do 28 in line number 12, i don't want more padding in phone Because space is less in a phone and in spite of that, if you make it smaller then there is a problem, okay. So, look at this, all the devices that are in our Realistic in that they are getting rendered correctly even in smaller devices, they are rendering correctly look at this it is rendering correct in iPhone X also All our phones are rendering properly, the iPad-pro is also rendering correctly view in the iPad as well and the iPad is also rendering well And I am absolutely happy with my website no problem and I hope you will be happy too now here it is 46%, if I make it 150% so, look at this, it will look something like this in iPad And I think it looks great there's not a problem Home, Services now the thing we haven't included here is smooth scrolling so that would have done it too. So, let's also quickly include smooth scrolling here so how will do this, I will tell you see what you have to do to do that To enable smooth scrolling, what will I do here I will write one line, and it will work for me and see how I will do it. So, I give it in utility classes I will put it in my style.css I want it in both, then I give it in CSS reset So, I would say that if there is scrolling in HTML then I would like it to be smooth scrolling then simply you have to add a line\, smooth-behavior: smooth But this scrolling is not happening in our page let me tell then I would like to reach here if any person clicks on the home The section whose id is home, I will do it #home here in href Then here it goes to Services so, I'll make it #Services and at the same time if I come down look at this is the client section So, I will make it client section and instead of about us I had to do clients our clients and here contact so have I made any Id here by name of contact? yes, it is made Now see here how well it will work look like it is scrolled down in services I would like it to be scrolled in the Services section, not in Services So, I have an id by the name Services container look at this, I did it, as soon as I click on Services I think I have made a mistake here. I was taking this here, it is services container and my class is named services container, it is not an id so, I should make it an id here. Why have I made it a class Services container and here I have not done any services container, haven't I? I'll take a look at style.css, otherwise there will be a problem I don't want to break my website at this point so, I haven't done it, great so come on if I'm here, If I click on Services then I will scroll here but there is another problem which I am seeing here that I would like this my navigation to hang That is, its position should be sticky so, let's make its position sticky and according to me, you should not have any problem on it at all. Because we have seen these things in great detail so, I give the position sticky, where did my navbar go? I make the position sticky I made the position sticky and now here I see how it looks yes, this is what I wanted, this is what I wanted This is what I was talking about this is what I wanted I turned its position sticky and it got dark too, and I feel so good now And now the website is showing yes, something is there our clients came down, scrolled down and the contact us would have been better scrolled if there was more space in here too If the clients increase it will come down and the contacts us will scroll Similarly, clients are ours you will go home, you will come back upstairs you will go to services, then you have come here if you go to our clients, then you have come here If you will go in contact us, you have come here and I hope this website has become good and you will like it And tell me what are the other ideas that come to your mind after seeing this website So, if there is something that we can do in-corporate then we will also do that in-corporate So, I hope you will build this website from the beginning and learn a lot from it and my effort was to teach you all this I hope it has come to fruition. Not the best website of this world But there is a website that we have made in this course One of the very best websites of this course So, you must have liked it it will be fun doing this course, doing this project And if you haven't accessed this playlist yet, I would suggest accessing this playlist quickly so that all these videos are there, All the projects that I am talking about You guys should not miss that at all bookmark it here, and save it by clicking here what happens now I make videos like this on this channel from time to time I show what kind in which a small, but very important thing comes to my mind So, I cover them by making videos like this like I made a video Best and fastest way to design beautiful websites what I have told in this You go and see that thing but it is a small thing but it is such a powerful thing, you will also hear and say that this person is right. So, I want you to subscribe to this channel and also click on bell icon. So that you do not miss such videos and I keep bringing such videos for you so that you do not get bored with studies only. I know I upload daily study material daily but that's what the main But to take the motivation that is there or for a little entertainment or because of entertainment, we gets to learn a lot. If i tell you 2-3 things more extras then you are going to get a lot of help so, for now if you like this video then do not forget to like it at all And I will also give you the source code in the description and if you do not get this source code then tell me in the comment. But I will put the source code right away so as soon as you click on the description, you will get it Just like most of the videos So, for now that's all in this video Thankyou so much guys for watching this video And i will see you next time.
