**Creating a Grid Layout with CSS**

To begin, we need to set up our grid layout by dividing the entire screen into three columns. This can be achieved using the `grid-template-columns` property. We start by setting the width of each column to 100%, and then divide it by 3 using the `divided by` operator to create three equal-sized columns.

Next, we need to set up our rows. We want the rows to behave like a column on mobile devices, but behave like a row on desktop devices. To achieve this, we can use the `flex-direction` property on the rows. However, since we are working with grid layout, we need to change the behavior of our boxes (or columns) instead.

We create three boxes by dividing the screen into three equal-sized rows and columns using the `grid-template-rows` and `grid-template-columns` properties respectively. To position the text at the center of each box, we use the `place-items` property with the value `center`. We also add a gap between the rows using the `gap` property.

To create a gap between our boxes (or columns), we target the rows individually and set the gap to 30 pixels. We then target the boxes themselves and set the gap to 30 pixels as well.

Finally, we want to give some margin around our entire container. To achieve this, we use the `margin` property on the container element. However, since we are working with a grid layout, we need to make sure that the margin is applied correctly. In this case, we set the margin to 30 pixels.

**Responsive Design**

To create a responsive design for our layout, we can use media queries. We start by targeting the mobile devices and setting the maximum width to 650 pixels. This will ensure that our layout adapts to different screen sizes on mobile devices.

However, since we are working with a grid layout, we need to make sure that our rows behave like columns on mobile devices and vice versa. To achieve this, we target the rows individually using the `class` selector and set the `flex-direction` property to `column`. We also remove the unnecessary line of code from earlier.

Next, we target all the boxes (or columns) and set their width to 100%. This will ensure that our layout adapts to different screen sizes on desktop devices.

**Testing Our Layout**

To test our layout, we can resize the window or use the F12 developer tools to inspect our layout at different screen sizes. We find that our layout behaves as expected, with the rows behaving like columns on mobile devices and vice versa.

In this tutorial, we have successfully created a grid layout with CSS. We learned how to divide the screen into equal-sized columns and rows, position text at the center of each box, create gaps between rows and columns, and adapt our layout to different screen sizes using media queries.

"WEBVTTKind: captionsLanguage: enunderstanding css media queries is essential if you're going to create responsive websites joy does an excellent job explaining how they work in this comprehensive course hey guys joy here in this video we're gonna learn css media queries and we're gonna also build three practical projects so let's go okay the first question is what are css media queries and why should you even care if you want to make responsive websites like this you can see that this is the desktop version and this is the mobile version for the same website you might be in situations where you have to design four different version of the same website one for the tablet one for the desktop one for the laptop and another one for the mobile version so these are all possible using css media queries and you should definitely learn it so we're building this website on project two on the third project we're gonna be building this so this is the mobile version and this is the desktop version and we're gonna build this on the first project you can see that when we drag the window over here you can see that our numbers i mean the width of our window changes live like this and also the color of the background changes depending on the breakpoints we have defined on our media queries don't worry we're going to discuss that also so at the bottom we can see that we have define our breakpoints over here and depending on that our colors will change so we're going to learn first of all little bit and then write little bit of code so little bit of learning little bit of doing by the way i have an entire article on css media queries through illustrations i beautifully explain each and every aspect of css media queries so that you can either revise or learn media 4 is very easily quickly and efficiently if you're new to the channel feel free to subscribe because i post videos based on practical wave projects so that you can level up your coding skills if that's so interesting hit the subscribe button and join my gang and without further ado let's get started all right boys and girls before coding first of all we need to set up our environment to do that come to the window over here right click create a new folder okay and then name it anything you wish i'm gonna name it project one project one like this and then i'm gonna open it on vs code right click and you're gonna get this option of open with vs code if you don't get it what you're gonna do is you're gonna open a vs code then you're gonna click this file option over here and then open folder okay so come to the desktop and then you can see the project one over here select folder and now we can see that it has opened our folder over here click this plus sign and write index.html okay and then for this project we're gonna use sas not css because it is more powerful and it has more options than regular css even if you're a beginner start learning sas along with css because it's going to be very handy and it's going to save you a lot of time so click this icon again and write style dot s-c-s-s okay and then we're gonna create for another file named main.js main.js the main purpose of creating this javascript file is that um if you come back over here you can see that this is loading live okay so if i resize the window you can see the value live for this we're gonna use javascript so don't worry about it it's very little javascript on project two we're gonna learn how we can make responsive images along with our responsive website so for that you need to download some images the images are on my github repository the link of the github repository is given in the description down below so once you click on the link you're gonna copy the link from here control c and then if you scroll down you're gonna find these steps or you can follow along with me you click on down get you go there and you paste the link that you copied earlier over here and you click this download option and it's gonna create the folder why are we doing this that's because github doesn't have a direct download link let me show you if i go back you can see that we don't have a download option over here all right so now you're going to drag this outside it is actually a zip file so media query project is the name of the folder over here it contains uh five images okay so once that's done you're gonna rename the folder and name it to uh images wait if you rename if you click on here or you can also click f2 to rename the file i mean folder so you're gonna write images like this and now what you can do is you can either drag this inside or you open vs code over here and then you drag the images folder over here to copy it so now you're gonna click copy folder like this and now your project folder should look like this okay and now you write this sign and then hit tab this is emmet if emma doesn't work for you search google why emmett is not working on vs code you're gonna find appropriate solutions now what you're gonna do is you're gonna link the sas and the javascript file inside the html follow me link you hit tab okay and then you write style dot sas like this so we are linking this sas file inside our html and in order to link the main.js come below the body over here at the middle over here okay so you write script ah there is the option and over here you write main.js like this ctrl s and we are done change the document to media query practice and inside over here you write dot container p a i n e r tab container tab and then inside over here we're gonna create a div with the class name text like this dot text tab and over here you write hello screen ctrl s and then below the container not inside the container below the container you're gonna create a d with the id size like this follow me hashtag size tab so this is an id and don't forget that this is not inside over here not inside the container it is outside the container over here okay so this will carry the width of our window let me show you again if you come back to this pane over here you can see that this is actually showing us live okay and this is our id inside our html which is uh this one we're gonna style this and then give it some function inside the javascript so control s we are done with our html and now come to the sas part oh you also need to download some extensions so if you can't see this activity bar over here what you're gonna do you click this view and you click appearance and you're gonna get this activity bar okay and if you can't see actually if you can't see the blue ribbon over here you come to view and then appearance and then you hit that status bar okay so this is called status bar and this is called activity bar so you come over to extensions and you hit you write live says not live says sorry sass compiler okay and you're gonna get this over here uh not this sorry live says compiler you're gonna install live sas compiler okay and the next thing that you're gonna install is live server or this one you're going to install this one once you have installed the extensions come back to our sas file and we also need to remove the default styles of our browser in order to do that you hit start curly braces and you set margin padding to zero pixels each to do that m0px tap p0px tap and set the box size into border box to do that both side tap okay bobo our tab which is borderbox emmett does all the shortcuts for us now we're gonna set the font family inside the body as sans serif okay s a and s save like this we're gonna set the font size to 35 pixels like this f size tab 35 pixels all right we're done styling our default styles you hit save and then what you're gonna do you can see this small option over here which is watch sas you're gonna click this okay so once you have clicked on it you're gonna get two files generated over here which is style.css and style.css why is that that's because the browser can't run our sas file directly needs to convert from sas to css and then we can see it on our browser that's why it is generating us this file over here and you can see that this is all css converted css from sas to css so now you're going to come back to our index.html and from here you're going to remove the s and convert it to css from sas control s don't forget to save okay and now you're gonna run this on our browser in order to do that you can either get an option over here which is open live server or if you can't see the option over here like myself you're gonna what you're gonna do is right click over here and you can see this option open with live server click on it and now it is running on live server on our browser congratulations okay so now let's come back to our vs code the next thing that we're going to do is come to main.js and we also need to now come back to the main.js file and over here we're going to write some very little bit of javascript so that we can actually run this on our project which is this one which is which will show us the life value of our width of our screen so you have to do that follow along with me so first of all you write window don't worry i'm going to explain little by little what each line means so window dot on resize equal to screen okay and then write window dot on load equal to screen okay and then we're gonna create a function over here function named screen okay and inside over here you're gonna write my width equal to window dot inner width over here okay okay now let me explain the javascript what i have written so let's start with the window thing over here this entire vs code is a window okay this entire google chrome is a window so now on resize and on reload let me explain to you so if you come back to our browser over here i mean the project one if you resize it like this and now you can see that value changes so it is happening live so the function over here on load is working on resize what is happening if you stretch it like this on resize is working so it is loading live so which is um this one on load and my width equal to windows inner width is working to show us the length from here to here i mean the width so that's how this thing is working and now we also need to display it on our browser so let me come back to our project so we want to display it over here okay in order to do that um we're gonna write we need to target our id over here which is this one okay in order to target that exact thing what you're gonna write is document dot get element by id that's because it is an id if it was a class then we would have written get element by class name don't worry about this i'm gonna create an entire video on this topic in the future so you're gonna write quotes and then size over here because the name was size and then dot inner html like this so the main purpose of inner html is to insert text inside our div with the class name of size over here okay and now we're gonna write equal to and now we're gonna write some text okay with colon okay and then you're gonna hit plus sign let me save it and show you what is happening i remove the plus and just colon okay and now back to the browser we can't see anything because we made a mistake over here that's why we can't see anything you write screen ctrl s and now we can see our text over here all right and now what we're gonna write is we want it um we want the width to be shown over here in order to do that um what you're going to write is you hit plus sign over here and you write the name of this variable okay so you write my width like this ctrl s and now we can see the value over here so this is the pixel value um you come back to vs code and you write another small word plus and then quotes pixels px control s and now it is displaying successfully now let's bring it at the middle at the center over here okay so come back to vs code um let me remove this because we don't need the activity bar and we also don't need this bar from here the status bar all right and we're also done with the main.js file we don't need it so you can minimize it okay and if you want to minimize this as well you hit ctrl b if you hit ctrl b again then this panel will come back okay so ctrl b and now on the sas file you target the container text and the size hashtag size so dot container container curly braces like this you target the text dot text like this and you target the size hashtag size like this all right so now we want the hello text to be at the very center in order to do that first of all we need to define the size i mean the height of our container if you don't you find the height what happens is let me show you let's define some border around our container okay border of let's say 4px solid red okay ctrl s minimize this and now we can see that the container is just this portion of our browser but we want it to be at the maximum otherwise we can't work properly so in order to do that come back to vs code you set the height over here to 100 vh which is the whole screen height control s and now we can see that the container has stretched from here to here and now we can work with our project successfully back to vs code you remove the border from here ctrl s and you can see the text has our width has come to the very bottom over here we want it to be at the very center and this one over here as well so come back to vs code you can center the hello text in two ways you can either use the display grid or you can also use the display flex let me show both of them okay first write d flex okay tap if you write justify content to center then it is going to work on the x-axis okay let me show you so you can see that the hello screen has moved to the center of the x-axis this is the x-axis and this is the y-axis all right so now back to vs code if you want to keep it at the center along the y-axis what you have to write is align con align items center ctrl s minimize this and let's see you can see that this is at the very center and if you want to use the grid what you have to write is d grid tab display grid and place items in the shorthand of both the x and y axis so place content center like this and you comment this from here ctrl s minimize it and you can see that it's still working and now we need to place this text at the very center over here at the bottom of hello screen back to the back to vs code um you come at the bottom over here you write first of all position absolute post apps tap position absolute and then top 50 or not 50 um 60 like this left 50 percent like this and let's see what is giving us the result um you can see that it is over here but we want it to be at the very center but it is not working why is that let me explain to you on the x-axis i have defined 50 percent so from here to here it is 50 but actually this is the center okay it should have worked from here to here but it is working from here to here so in order to fix that you have to write the transform property transform and then translate x which is the x-axis you can also work with the y-axis but not for this tutorial i'm gonna make an entire video on the transform property so make sure to subscribe so that you can get an update about this okay so translate x minus 50 okay ctrl s and now we can see that our problem has been solved over here back to over here you also set the font size to 35 pixels font size 35 pixels like this ctrl s and we are done come back to the container over here and you give it a color of bgc tap um set it to white for now uh if i come back to my blog over here i have defined a lot of colors um wait so these are the colors over here i'm gonna copy it from here don't write right now i'm gonna give you a moment so control uh copy from here come back to our vs code on the sas at the very top okay over here i'm going to paste it over here now pause the video take a moment to write these lines of code over here and don't forget to write the dollar sign otherwise it is not going to work so these are called variables so i'm storing our color hex values over here and then we're gonna use it all along inside our project every time if you need to change something you don't have to go through and read the entire document what you have to do is you just change over here and then the entire document will be changed that's why sas is more powerful than regular css and it saves us a lot of time we're gonna also define our breakpoints inside variables and then we're gonna use it to define our media queries i'm gonna show that to you don't worry about this and yeah i got these colors from this website over here which is coolers dot co let me show you if you visit the website you can find tons of colors over here you can choose any color you want for your projects link of this website will be given in the description down below so that you can go and check it out okay now back to vs code on the container you remove this let me show you a sample of how these variables work so it was hashtag fff which defined the white color and if you want to bring this color one over here i don't know what is the name but let's say this is purple because i'm seeing purple over here so if you want to bring that purple color over here what you have to write is dollar sign color 1 ctrl s and now you can see that the color 1 which is the purple color has been applied over here oh come back to the vs code and on the hashtag size you change the color to red so that we can better see what we are trying to do ctrl s and now we can see that we have achieved our desired result okay now we're done with our setup let's start the tutorial let's say that i'm your friend and you don't even recognize me in this case what i have to do is i have to tell my name to you my name is joy in the same way we have to tell the browser that we are defining a media query that's why we write the term at the red media to tell the browser that recognize this this is a media query and then we write conditions over here like screen and then max width let's set it to let's say 768 pixels and we also write the min width over here let's say it was let's say 768 pixels like this so this media query at the right media query is a declaration telling the browser that we are starting a media query from here and these are our conditions the screen which is the media type and max width mean with these are our conditions don't worry about this i'm going to explain in details about each and every condition over here okay and then inside this curly braces we're gonna define our styles over here okay your styles are here so once the browser recognizes our media query and then if our styles i mean if our conditions are met then all the styles that we have defined here will be applied on our browser as simple as that and you might have seen these operators the coma and the and operator let me explain this to you right now let's say you have gone to a restaurant and you have ordered two things burger and a pizza so write this burger and pizza okay let's say that your friend has ordered burger pizza and coca-cola like this burger you write coma okay pizza and cooka sorry hookah hold on like this so let's see what is happening burger and pizza two different commands okay it is separated by what a and and these three things you see these are separated by a comma and the end in the same way these are our commands okay so if you have if you have uh let's say that just two commands so what we're gonna write is the and operator over here okay but if you have three or more then you're gonna use the comma and the end operator like this so let's say you have three commands so control v which is the main weight you're gonna write and over here and you're not gonna write n you're gonna write comma over here and then it's gonna work so let's remove them i hope you understood the operators coma and the and operator now let's discuss about the media type in total you have four options all print screen and speech don't worry about all of these values because you're gonna use the screen option to make responsive website for electronic devices even if you don't declare the media type it's gonna set it to all this one automatically so skim through this chart over here i hope you understood the media type over here you can write either screen or or you can keep it blank and it's gonna automatically define it to all now let's discuss about the max width function what this does is it creates us a border okay so when we are inside that border it's gonna work but if we go outside that border it's not gonna work so see this illustration over here you can see that the styles are applied inside this 500 pixels but if we go outside the border of 500 pixels it is not gonna apply the styles it's gonna be blank white let me show you a demo about this so over here you write brackets max width let's say to um 500 pixels over here okay ctrl s you come back to our results screen over here you can see that this is a purple color and let's say that um we're gonna set it to bgc tab okay let's set it to uh the hashtag sorry not hashtag dollar sign color one like this okay ctrl s and you come back to our container over here so you remove this from here and you write uh hashtag fff which defines the white color okay now minimize this and you hit f12 f12 and now if we resize the window oh that's because you also need to write the name of the selector in order to do that uh what you're going to do is you remove this over here and you're gonna write the selector the container selector okay dot co and e i n e r over here curly braces and then you divide if and then you define it over here like this ctrl s and now it's gonna work okay now minimize this so this you can see that we have set our boundary to 500 pixels as long as we're inside the 500 pixels the color will be applied but if we go outside then it's not gonna get applied so you can see that we are at 787 pixels and the color is not getting applied if you resize the window like this you can see the color is getting applied which means that we're inside the border it is 447 pixels but if we go outside the border um wait let me resize this this is 499 pixels and it is the color purple if you resize it it is 579 pixels and it is white the color is not getting applied i hope you understood the max width function let's talk about the main width function so this is the same thing inside the border it is not going to work if you go outside the border then it's gonna work let me show you a demo and then you're gonna get clear about this okay now come back to vs code and from here you write min with okay let me give a practical demo let's say that i am over here i live in bangladesh and we don't have starbucks so outside my border let's say this is america okay so america has starbucks so inside the border here i am if i go outside the border which is if i go to america then i'm gonna get starbucks but if i stay inside the border then i'm not gonna get in starbucks in the same way inside the mean width our styles will not get applied but if we get outside the border our styles will get applied okay so now on the vs code we just change the mean width from max width you come back to the result screen over here did we save it no we didn't save it this is very crucial you need to save your code otherwise it's not going to work control s come back to the browser and now we are actually outside the border which was our border 500 pixels okay so now you resize the window like this um so we are inside the border and our styles are not getting applied but if you resize the window let's say uh 480 489 pixels this is inside the border okay outside the board inside the border outside the border i hope you understood the mean with function and now we're gonna write the code itself to be honest there is no such thing as a standard media query breakpoints because of various screen sizes on the market for this tutorial i'm gonna use the official bootstrap five breakpoint chart if you click this link over here then you can see the various standard um screen break points defined by bootstrap five so if you scroll down you can see all the values over here and we're gonna define all of these breakpoints inside variables so that we can easily manage our code so if you scroll down you're gonna find all of these values over here so i'm gonna copy them ctrl c and at the very top okay i'm gonna paste it over here review now pause the video and write these values over here and also don't forget to write the dollar sign at first otherwise it's not going to work so this is the breakpoint for the mobile version this is the break from the this is the breakpoint for the tablet laptop and the desktop version 576 pixels and so on now how we're gonna use this is if you come back to the media query at the very bottom you can see that this is 500 pixels okay so this is writing directly instead of writing directly over here we write the variable okay dollar sign mobile b-i-l-e like this and automatically the 576 pixels which is this one this value is 576 pixels is applied over here okay now the cool feature of writing like this is that if you need to change something let's say you need to change the media query you have to go through all these lines of code you have to read all of them which is a very big headache so if you write like this using variables throw says if we need to change something you don't have to go through all of the files all of the lines of code you just need to change it over here how simple is that that's why you should use sas even if you're a beginner all right then let's complete our project one and let's move to project two okay so in order to complete this uh not mean with we're gonna write max with okay and then we're gonna set the color which is uh i have to originate on the comment so color one is for the mobile version color two for the tablet and so on so in order to do that uh this is actually perfect and then we're gonna write at the red media for the tablet max width dollar sign tablet like this and over here you're gonna write container and curly braces bgc tab and define dollar sign color to over here okay a very quick tip if you want to define media queries first you're gonna write the biggest screen at the first and then smallest screen at the bottom it's a descending order so the largest will be at the first and descending decending and the smallest will be at the bottom if you don't do this then it's not gonna work let me show you a demo okay so you come back to the browser um over here so the color one which was purple color it is not working look look the color is not even changing but if you write it in the reverse order let me show you so this is the mobile smallest one first largest one later but if you write in the reverse order ctrl x and you paste it over here ctrl v ctrl s and then minimize it and now it's working look resized it this is purple color look um look it's 567 pixels if you resize it then it's gonna change the color over here and on the 768 i guess yes 768 mark then it's gonna change the color back to white which is the default color we defined it over here on the container which is this one and let's define our desktop and laptop as well first smaller screen first okay not screen max with sorry with dollar sign laptop like this and over here we're gonna write dot com day near curly braces then bgc bgc tab dollar sign color free ctrl s okay the then copy this paste it over here you just change the value from here to desktop okay and then the color will be color number four ctrl s and we're done with our project one let's go and test it so you resize the window you can see the color is changing perfectly okay so this is desktop version this is the laptop version tablet mobile i hope you understood project one let's move on to project two so we're gonna be building this for project two let's start minimize this come back to our vs code control b okay now what we're gonna do we're gonna remove some code from here okay so remove these variables we don't need them anymore okay so over here we can keep it you need to change the font size from here okay and don't delete this uh it's not working that's because uh we also need to change this media queries from here that's because we don't need them so in total we have four media queries from the project one delete them and don't remove the size from here otherwise we can't see our width of our screen live okay minimize this just don't remove it and remove all of the code from here and then ctrl s back to index dot html don't remove the size from here okay you just remove this text from here ctrl s all right so we are pretty much done back to the design now on the project you can see that we have the logo over here and the menu items over here let's consider this header okay and the content over here the image and this text over here is the main and this this one which contains the social media links will be our footer header main and the footer okay so in order to create them come back to vs code and inside the container we're gonna create three classes with the class names of i mean we're gonna create three divs with the class names header main footer so dot header tab dot main tab okay oh sorry and dot footer control sorry tab so we have header main and footer okay so inside over here we're gonna write the logo and menu items for this project i'm gonna use the bam naming system even if you don't understand that don't worry just follow along in in the future video i will show you how you can use the bam naming system now write dot header dash dash logo tab and now over here we're gonna write the logo which is uh mia ruma okay you write mia rumor over here and now we're gonna write the menu items in order to do that dot header that's there's menu okay tap hit enter and over here you write dot header dash dash menu hyphen star three okay now it's gonna create us three divs so over here you write one then two three okay you write over here home on a serial okay portfolio and over here we're gonna write contacts all right so we are actually done with our header section we can minimize it ctrl s let's go and see what we have created so far uh we don't need this and we have created all of this right now don't worry about them we're gonna style them now we're gonna write the main section okay so over here now inside the main section we're going to create two divs image and text so image will be over here on the left side and the text will be on the here right side so in order to do that write dot main dash dash star 2 tap so we're gonna put the image over here and the text will be over here txt okay so we're gonna clip it so we're gonna keep this blank because we're gonna use the background property background image property to insert the image over here all right and inside the main text what we're gonna write is main dash dash text hyphen star um how many how many texts do we have let's see one two three and four so in order to write this four we're gonna create four divs inside over here four tap okay one two three four so first one was hello and the hand wave we're gonna um go to google and write hand wave hand with emoji like this you copy this icon from here ctrl c paste it over here ctrl v and over here we're gonna write um mia ruma and we're gonna write span tag over here in order to convert the text to red color okay so s p a n span and it's gonna create that automatically we have to just cut it from here and paste it over here ctrl f and i'm a designer was the text i guess let me check uh it is a a designer from tokyo japan a b e s i g n e r f r o m and over here we're gonna write tokyo japan let's see what we have created so far so these are the unstyled text over here we're gonna style them don't worry and now we also have to write something inside the footer and first write dot f double o t e r we have four social media icons dash dash dribble d-r-i-b-b-l-e was dribble first let me actually check um no sorry instagram is first instagram twitter okay so insta is first instagram tap okay and then over here we're gonna use the image tag to insert the image and dot footer in order to create the remaining divs automatically you hit star three tab okay instagram twitter what was next i forgot um dribble and behance so d r i b b b three b's okay don't forget that d r i b b b l e three b's okay and behind say the hands okay so inside this tags we're gonna create the image tag okay img tab so keep it blank for now we're not gonna insert anything img tap okay img tap and img tap ctrl s let's see what we have created so far it looks quite ugly but don't worry we're gonna style them okay so we're actually done with the html come to style.css and we're gonna target the classes over here okay so right dot container over here and the header dot header dot main and then dot footer over here okay so let's first style our header okay ctrl s but before everything else you need to set the height otherwise it's not going to work i have shown this to you on the first project okay so 800 vh con uh hundred vh tab so ctrl s and now let's go back first things first we're gonna use the display flex property okay now back to our project on the header section uh let me actually show this to you live by live i mean that let me write over here let me show you over here okay so you hit ctrl b there's an extension named text pins d e s k p i n s so if you click over here you can see the window is vanishing over here so i'm clicking here i'm clicking here the window is vanished so what text pin does is let me show that to you um here is a text pin let me enable it okay so i'm enabling this pin inside this vs code and now let's click outside you can see that the window is not vanishing it is staying and on its place permanently okay so now i'm gonna keep it over here and i'm gonna show this to you live over here what is happening behind the scenes okay so now inside the header we're gonna write d flex okay ctrl s and now you can see that this menu items were here and now it has shifted over here the default value of flex direction is row so write it anyways even though there will be no uh changes flex direction row ctrl s and now we can see no changes because that's the default value anyways and now what we're going to do is we want the menu and the logo to be stretched from the very left to the very right so in order to do that inside the header you're going to write justify content let me bring the vs code over here so that you can actually see what i'm doing justify content it will be a space between ctrl s and now you can see that the logo is over here and our menu items are over here okay and now we also want our menu items to behave like a row instead of behaving like a column in order to do that if you can recall the head if you can recall the menu items are inside the header which was that so come over here uh let me maximize it to show you how to write the selector for the logo and the menu items to do that and dash dash logo okay curly braces so this one is actually equivalent to writing dot header dash dash logo i mean look so this end is actually getting extended from here to here so this is actually a shorthand i mean shortcut that's why sas is much better than regular css let's remove this in the same way we're going to target the menu and dash dash menu like this ctrl s and now we're going to style this okay in order to do that i mean in order to target that what you have to do is you have to come to end dash dash menu you write d flex tab and flex direction say to row which is the default value anyways ctrl s and now we can see that this is style like this and let's change the font size as well for the logo and the menu items in order to do that you come to the logo and you write f size tab okay for vw we're gonna use the vw units okay we reload control f and for the menu we're gonna write 2.5 vw f size tab 2.5 2.5 vw control s and we're gonna use some gaps between our menu items in order to do that come over here you write gap 15 pixels you can change the value as you like perfect it looks quite good now what you're gonna do is you're gonna divide the screen between the rows what i mean by that is you come back to vs code and over here on the header section you write h 10 percent okay ctrl s and then you're gonna create border so in order to create the border we're creating a border over here that's because we want to see exactly what we are doing and where the code is getting applied so right border 2px solid red control s resize this and now we can see that this is our header section it is taking 10 percent of the entire screen and we can see that how things are working over here you can see that this menu items are not at the exact center over here so in order to do that you come to back to vs code and and header menu not here sorry on the header section you have to write align items center so you write um sorry align items oh sorry center over here like this ctrl s and now you can see that and now you can see that the items has moved from the top to the center if i uh uncomment this then you can see the difference okay let me uncomment this ctrl s and now see the difference okay let me uncomment this again ctrl s and now we can see that it has moved to the center again we're gonna do the same thing for the main and the footer as well so height we're gonna define it a percent 80 percentage like this ctrl s and for the footer section height of 10 percent okay control s so 10 80 percent 10 percent in total 100 and let's define the borders as well so that we can see what we are doing border 2px solid black like this and for this section border 2px solid green like this ctrl s and let's see what we have done so far so this is the main and this is the footer section over here we're gonna have our social media icons okay now let's tell them first let's insert the image so in order to do that come back to vs code and let me just resize this so that you can also see the code and the result so what you're gonna do is you're gonna click the small icon over here and minimize everything okay and now everything will be on its position okay so inside the main first of all we're gonna target the image and then target the text in order to target them you write and dash dash image curly braces and then and dash dash text so this one is targeting text and this is targeting the image okay curly braces ctrl s and inside over here you're going to write bgi you hit tab okay so inside over here um let me maximize this and you hit ctrl b and inside the images folder so we're gonna use this image this is the portrait of this young woman this one over here is love the lady so um you come over here in order to target that exact image you write dot slash select this folder images folder and then in order to target that lovely lady you're gonna write portrait.png or select this from here and now it has all right let's see and now we can see nothing that's because we need to set either the width or the height depending on the orientation so in order to do that um come back to vs code first of all you need to know the orientation how we want it we want the image to be here and the text to be here okay so display flex will be the flex direction will be row row okay so in order to do that um come to the main and over here you write d flex okay tap and flex direction would be row like this ctrl s and now we're gonna divide i mean distribute the width 50 percent for the image 54 50 percent for the text in order to do that this is the image okay you're gonna write with fifty percent over here okay let's maximize this w fifty percent tap and then width will be fifty percent over here okay tap ctrl s resize this and now we can see the image over here it looks ugly but if you want to work around here what we can do is um we have to set the background size to contain bg s tab to contain ctrl s and now it looks better but it is getting repeated in order to stop the repetition you're gonna write bgr tab which is background repeat set it to no repeat bgr tab now repeat ctrl s and now we can see that the image is not getting repeated and over here you can see this there is no gap okay it looks quite ugly if you want to give some margin over here resize this come over here you set it to this is the zero pixels for the top bottom if you write five pixels over here then five pixels of padding i mean margin is getting applied here here so first top bottom zero pixels left right five pixels okay control s minimize this let's see what happens on our browser and you can see that five pixels is getting applied over here all right it looks quite good let's actually remove the border from the header because we're done with our header um in order to do that onto the header and just remove them goodbye ctrl s let's go back and it looks good by the way whatever you have written so far is 100 responsive till 4k display do you want to see a demo let me show you f12 hit f12 and you go to till 4k you can see that even in 4k it looks good why is that that's because we have used the vw unit which is view port width viewport width that's why you can see that even on the 4k display it looks quite good and look and look i have refined no units for this text over here not even over here do you even remember the font size of our width it was just 35 pixels and this is the default value and this is 4vh this is 2.5 vh now the background size with the value contain which is uh let me show you this line over here i'm sorry let me actually find out this this line over here the background size contain itself is highly responsive so even if you resize the window you can see the image is getting adjusted according to the screen size you can see that it is shrinking at the same time if you stretch the window it's gonna enlarge it itself so that it can fit the window well you can see that it is working like that and our fonts are also responsive it is working according to that if you resize the window the fonts will get smaller and if you resize it again then it's gonna get bigger which is highly responsive even on the 4k display can you imagine that okay now um come back to vs code and let's work with our uh we're actually done with this section the image and we're gonna work with um the mobile version at the very last and first of all we need to change the text okay now you close the developer tools and you come to um we can we can actually remove the border from here as well ctrl s and on the text which is inside this main you create border so that we can see what we are trying to do okay border we're going to set it to red color okay 2px solid red like this ctrl s and now we have the border over here so that we can actually see where our text are going okay now let's come back to vs code and we want our text to be at the very center in order to do that you can either use the grid or you can use flexbox so we're gonna use the grid because i showed you both beforehand okay you can use anything you want so inside the text you write d grid okay and place oh let's actually use the flex okay because a lot of you don't know how to use the display grid so justify content center okay align items sorry center like this control s and now we can see that uh the thing is actually behaving like a row but we want it to behave like a column in order to do that we're gonna write uh flex direction which was the default value it was row we want to write it column ctrl s and now it looks quite good i mean it looks much better than before and now we're gonna give responsive font sizes to each of this text over here okay so let's come back to vs code and if you can recall on our html um let's go to the main section so the so the text actually looks so so the text have these classes okay in order to target those classes um you come to the and sorry the dot main section and come to the text over here and at the bottom of this you write and hyphen one it is targeting our hello text over here okay let me actually resize this so curly braces you're gonna write it over here and you're gonna set the font size to 10vh sorry vw not vh vw viewport with ctrl f and now we have a very big hello text over here in order to target the remaining three lines over here what you have to write is and hyphen two coma and hyphen 3 comma and hyphen 4 curly braces and we're going to set the phone size to 5 vh f size tab 5 v sorry not vh vw okay vw control s and now it looks quite good um yeah it looks good and i actually forgot to write something inside the text i mean inside the image over here which is the background position bgp tap let me resize it what we have to write is left and center don't worry i'm going to explain that to you okay you write left center okay ctrl s and let me actually remove all the guides from here and just put guide on our image in order to do that you come to the image okay you write border 2px solid red okay and remove the red color from the text ctrl s and you minimize this and you can see that our image let me actually remove the black color guide as well which is over here uncomment i mean comment this minimize and you can see that we have some gap over here okay that's because we're dealing with portrait images we're not dealing with landscape images okay if you hit f12 me actually show you if i resize the window you can see that our image is at the exact center to the left paint to the left center but if you uh remove that line which you're thinking that this is unnecessary line of code uh let me resize this uh drag it over here at the top so that you can see um let me comment this line of code ctrl s and you can see that image is moving from here to the very top over here and if you uh uncomment this ctrl s and you can see that image is getting over here but if you write bottom it has in total four options top right bottom left the first value sorry let me maximize this the first value works on the x-axis and the right value works on the y-axis i have an entire video on background properties link will be given in the description down below go and check it out if you want to make responsive images for your responsive website i hope that you understood the background position property now let's work with our footer section okay you cross this developer options you remove the guides from here okay in order to remove the red colored guide we can see it is here control x control s at the bottom at the footer section you bring the guides over here okay control s if you come back to the browser we can see the guides over here up to this point we don't need the width over here so we can safely remove that um in order to remove this you just come come to the index.html we don't need to remove anything except you just comment this line of code okay ctrl s you come back to the browser and everything is gone and if you want to bring it back you just uncomment this line of code over here and it's gonna come back okay so far so good let's insert the images over here so in order to insert the images control p okay the images are over here so in order to locate them inside our image tags what you have to do is you write dot slash images okay slash the first one is instagram so instagram is over here click this similarly what you have to write dot slash images slash this is twitter okay you write twitter sign dot png over here and this is dribble similarly follow along with me images tab sorry uh enter this is drippable here is our triple and i will be hanse dot slash images p hands control s control b and let's see what happens oh you can see that this is extremely big that's because this is 512 pixels each icon so we need to uh we can see that this is behaving like a column okay like this but we want it to behave like a row so in order to do that come back to vs code um it is actually the footer section okay so you minimize this like this uh minimize and inside the footer section um in order to target all of them you write d grid okay tap the default value is flexed the default value of flex direction is row right anyways direction row control s minimize this and we actually can't see any difference because it is extremely big so let's actually reduce the size okay in order to do that you follow along with me you write square brackets class equal to sorry a power sign equal to double quotes you write footer f double o t e r dash dash what it's gonna what it is gonna do is it's gonna target all our classes which contains our images okay and curly braces over here and you write the image tag img curly braces and you're gonna set width to 5.3 vw which is the responsive size ctrl s minimize this uh let's see oh it is actually not working why is that let's go and check it out oh sorry i wrote the wrong thing not great it's gonna be flex sorry sorry uh let's go and check it out uh minimize this ah it's working perfectly fine okay the next thing that we're gonna do is it is actually not at the center okay in order to do i mean in order to place it at the center just like the header one which i explained to you on the header section so what you have to do is um resize this come over oh sorry let's come over here on the footer you write align item center okay align items center like this ctrl s and it's gonna be at the center on the y axis okay and we're gonna place some gap between our icons in order to do that we're gonna write gap of 20 pixels okay like this ctrl s and we can see that we have some gaps between our icons over here and we're gonna place them on the right side in order to do that we're gonna write justified content right or sorry we're gonna write justify content flex end flex and ctrl s and now we can see that it is over here but we want this to be over here not over here in order to do that we're gonna set some margin of 10 pixel margin right right with me m right tap okay margin right set it to 10 not pixels sorry it's percentage 10 percentage control s and let me minimize it and you can see that it looks quite good i'm gonna remove the guide from here okay in order to remove the guide you know the drill we just remove this from here let's minimize this and you can see that our website is done it looks quite beautiful if you hit f12 let's resize it even on the 4k display it looks quite good let me show you you come to 4k you can see that uh you focus over here it is written 4k it looks quite good and let's resize this using this guides over here this is laptop large okay it looks good and let's go to laptop of 1024 pixels it looks good as well let's go to the tablet version it looks uh quite uh little shrunk if you resize the window that at at some point it will look quite ugly i oh i actually forgot to remove the bottom from here that's why it looks quite ugly come to the main and image so left bottom change it to center control s okay it looks quite good right now it is loading oh yes it's over here it resize the window at one point you can see that the text looks quite horrible that's because it is very small and it is hard to read that's why we're gonna create a custom media query for the mobile version so in order to do that um we just keep it over here as it is and we also need to change the design for the mobile version okay so if you come to our uh sigma file over here you can see that we don't have any menu items we don't have any menu item options for our mobile version just the logo over here no hello text just the text of our miya rooma a designer from japan and our social media icons pretty simple so in order to implement that um first of all you come to our vs code at the very bottom okay let me maximize this at the very bottom over here we're going to create a media query so and media we're going to set the max width to 650 pixels okay max width of 650 pixels the curly braces over here and now we can target the header along with its logo and text i mean the menu items in order to do that dot header curly braces in order to target the logo and dash dash logo over here earlier basis and in order to drag in the menu items dash dash menu okay so over here you're gonna write display none and it's gonna remove the menu items on the mobile version so d non tap control s if you resize the window so you look it over here okay it's 320 pixels okay if you resize it uh you can see that there is no menu items over here but if it goes above 650 pixels then we can see our menu items it is 646 pixels over here you can watch it you can see the menu items has reappeared okay and if you go and we can see everything and now it is gone okay now we want the logo to be at the very center in order to do that come back over here inside the media query inside the dot header selector you write justify content center and it's gonna um center it to at the very center over here now come back to vs code we also need to change the logo font size in order to do that you write f size tab change it to 40 pixels ctrl s let's go back and we can see our logo is 40 pixels and it looks quite good but it's not responsive if we even shrink it that's because it's gonna look very ugly if we use the vw unit in a future video i'm gonna explain to you all the possible css units and what it does so make sure to subscribe to the channel so that you can get an update about the video now let's bring the image over here and it will be circular so in order to do that come back to vs code let's minimize this the header section and over here you're gonna target the dot main section okay curly braces and in order to target the image you write and dash dash image curly braces to target the text you write and dash dash text over here then curly braces control s and we're not gonna see any changes because we didn't even do anything okay resize the window bring this back and um let me keep it over here so that we can see actually what happens first of all uh we need to change the orientation it is currently on the row but we want it to behave like a column so in order to do that um come over here on the main section you write flex direction column flex direction column like this ctrl s and then let's see what happens we cannot see the image okay so in order to bring back the image you come to this section and you write width set it to 200 pixels 200 pixels and set the height to 200 pixels as well ctrl s let's see what happens um here is our image by but we want it to be at the very center in order to do that i'm back to vs code you're gonna write over here okay justify content center okay and then align items center okay i'm not gonna save it let me actually resize it so that you can see what happens if i save it after writing those code so let me uh keep it over here wait a second uh let me control f and you can see the image and the text has appeared on the very center over here now let's resize our social media icons in order to do that come back to vs code um come at the very bottom okay minimize this this is not done okay we're gonna come back here and style it okay so at the bottom right dot footer like this and in order to target all the images you write square bracket plus power sign equal to double quotes footer dash dash okay then curly braces will be over here and now you're gonna write image and then we're gonna set the width to 45 pixels okay and set the height to 45 pixels as well px tab ctrl s now let's go back and see what happens um perfect but it looks quite ugly that's because of of the 10 pixels of i mean the 10 percent margin over here okay in order to remove the margin what you can do is come to the footer section over here and set the justify content to center that's because previously it was on the uh left side okay and set the margin to zero pixels okay now it's gonna work let's go back and it looks uh beautiful now let's resize our text and make the image circular so come back to vs code uh you minimize this this is done the header section is done as well okay come to the main section and over here you're gonna write border radius hundred percent okay percent ctrl s and uh we can see that we have a little bit of distortion over here in order to fix that what you have to do is um you write bg step and set from content to hundred percent like this ctrl s let's see our changes now it's perfectly fine okay we're done with our images come back to our vs code or we also forgot to write the background position it should be on the center bgp tap center as well center like this and it will be perfect um let me see ah yeah it's good let's resize our text over here first of all we're gonna set the width to hundred percent previously it was fifty percent w hundred percent tap okay ctrl s and we're gonna remove the hello text in order to do that and hyphen one curly braces d not tap like this and it's gonna remove our hello text from there let me let us see okay you previously we had the hello text now it is gone come back to vs code now target the remaining three other text in order to do that write and two comma and hyphen three comma and hyphen four okay curly braces like this and we're gonna set the font size to 30 pixels f size tab 30 pixels ctrl s now let's see our result it looks beautiful this is the mobile version if you resize it it's going to give us the tablet version over here let's go to the 4k it looks quite beautiful for the 4k version you can also customize the gaps as you like it is completely up to you if you resize the window then it looks beautiful and it resizes when we resize the window perfectly fine this is the 4k view this is the large laptop view this is the laptop view of 1024 pixels the tablet view you can click this guides over here and it's gonna show us the result accordingly and then the mobile view this is the large if you resize it then it looks quite good as well i hope you understood the second project now let's start the third and last project on the third project we're gonna be building this layout over here so get your vs code ready now come back to vs code and remove everything we don't need anything we ctrl s delete ctrl s okay and on the index what we are going to do is we are going to remove the container from here because there is a lot of code and you write container again dot container tab okay after removing everything inside the previous container okay container and now what we're gonna do is we're gonna create three rows why is that if you go back to our design um not here sorry uh this one if you come back to our design we're gonna create three roles right now because we have row one row two row three that's why so come back to vs code uh maximize this you can write first of all dot row one okay in order to write it quickly you write star three tap okay so we have uh row one two three okay and now inside the rows we're gonna create three boxes okay in order to do that write dot vox hyphen star three tab okay we write one two three and inside here you write a b and c over here all right similarly on the row two and row three we're gonna create boxes and then inside there we're gonna create letters okay dot box hyphen star three tap four five six d a f over here and on the last row dot box hyphen star three tab seven eight nine g h i okay ctrl s let's go back to our browser and see what we have created so far and it looks quite horrible but don't worry don't panic we're gonna style them now come to our browse vs code come over here you write star first of all remove all the default browser settings okay m0px tap p0px tab both side tab bobo tab okay body say to ff tap sense i actually did a mistake deleting the previous styles of our css we should we should have not deleted everything my apologies my bad and now for the font size we're going to set it to 55 pixels so that you can actually see what is happening f size tab 55 pixels control s let's go back to the browser and see what is happening there we go we have it now what you're gonna do is we're gonna individually target container row and box in order to do that you write dot container curly braces dot row curly braces oh no not this one sorry you write square bracket plus power sign equal to double quotes you write row hyphen okay curly braces and it's gonna target all our rows in order to target all the boxes curly braces sorry it's square bracket class power sign equal to box hyphen curly braces okay now the very first thing we're to position our letters from being in a column shape to a row shape in order to do that maximize this later the letters are inside the box and the box are inside the row okay so inside the row here so what you're going to write is d flex not this one sorry d flex tab display flex set the flex direction to row like this and the rows are inside the column okay sorry the rows are inside the container and inside the container the rows should behave like a column in order to do that d flex tab flex direction set it to column like this ctrl s let's go back ah it looks quite good and now we want to create boxes around our letters so first things first what we're gonna do is we are going to set the height of our container in order to do that we write height 100 vh control s and now in order to create the boxes we have to set the color first so bgc tap c4 c4 okay ctrl s and now let's see what we have created so far oh it looks quite terrible over here but don't worry and what we're gonna do is we're gonna set the width of this individual boxes and the height so in order to do that you're gonna write width so first of all bracket and right hundred percent and in total how many boxes do we have we have three boxes so divide the entire screen with divided by three for one column i mean for one row okay then save it let's go back to the browser and see what we have created this is the result so far and let's create some border so that we can see what is happening so border two pixels solid black like this ctrl s and we also need to set the height as well so height will be in the similar calculation 100 divided by 3 that's because we have three boxes three rows three by three columns i mean three by three grid layout ctrl s and let's go back to the browser and it looks quite terrible why is that oh i made a mistake over here it's not percentage value it's gonna be viewport height or vh so write vh over here and let's see what is happening oh it looks perfect in order to position the text at the very center what you have to write is come over to the box at the bottom you write d great or you can also use the flexbox model as well but i'm going to use the grid place items right center control s let's see what we have done ah it looks perfect as well now we're gonna create some gap between the rows okay this is row one row two and this is row three okay between the rows is gonna be 30 pixels gap in order to do that you write gap uh 30 pixels over here control s let's see what we have created we have gap between rows okay but we also need gap between our columns okay i mean our boxes in order to do that come here uh to the box not to the box but inside the row uh you write cap 30 pixels okay ctrl s let's see what we have created ah it looks quite good but if you want to give some margin around our uh entire container what we can do is you come to at the very top over here you can write five pixels of margin just resize it and looks you can change the value as how much you like but for this i'm going to set it to 5 pixels okay but let's actually set it to a little bit more let's do 30 pixels and let's see what happens it looks quite horrible oh my god let's set it to 10 pixels and let's see it looks good not quite bad not quite good it looks optimum no worries and now if we set and now if we click f12 we can see that it looks quite ugly if we resize it we want to make a desktop version for this layout so let's set our standards to um 650 pixels okay on 650 pixels we're going to create this layer over here the mobile layer so in order to do that um come back to vs code over here at the very bottom okay over here you're gonna write at the red media and set the max width to 650 pixels like this curly braces and first things first let's understand the theory okay the rows are behaving like a column okay which is the behavior we want on a mobile version but the boxes are behaving like a column but we want the boxes to behave like a row like this so we need to change the behavior of our boxes i mean the rows okay in order to do that um come to our media query over here and you target the rows okay class power sign equal to double quotes row hyphen okay so your bases and you set the flex direction to column like this okay ctrl s and let's see what happens resize it ah it looks quite good it is actually not behaving as expected so in order to change it come back to our vs code you remove this line of code from here we don't need it okay keep it keep the container inside the media query blank and come at the very bottom over here you write called square bracket class power sign equal to double quotes and you target the box i mean all the boxes and we're gonna set the width to 100 percent previously it was 33.33 let me show you if you scroll up uh above the media query it was the box over here the width and height was 33.33 sorry point three three percentages each now we're gonna set it to maximum which is 100 percent over here okay so ctrl s resize the window let's see what happens ah it looks quite good as well uh let me resize the window okay it is behaving as expected i actually mistakenly uncommented the margin from here let me just bring it back besides the window it looks quite good and you can see the results so this is the mobile version so we have successfully completed our third project so we're done with the tutorial if you like the video give a like share with a friend and feel free to subscribe till then take care and i'll see you in the next video bye byeunderstanding css media queries is essential if you're going to create responsive websites joy does an excellent job explaining how they work in this comprehensive course hey guys joy here in this video we're gonna learn css media queries and we're gonna also build three practical projects so let's go okay the first question is what are css media queries and why should you even care if you want to make responsive websites like this you can see that this is the desktop version and this is the mobile version for the same website you might be in situations where you have to design four different version of the same website one for the tablet one for the desktop one for the laptop and another one for the mobile version so these are all possible using css media queries and you should definitely learn it so we're building this website on project two on the third project we're gonna be building this so this is the mobile version and this is the desktop version and we're gonna build this on the first project you can see that when we drag the window over here you can see that our numbers i mean the width of our window changes live like this and also the color of the background changes depending on the breakpoints we have defined on our media queries don't worry we're going to discuss that also so at the bottom we can see that we have define our breakpoints over here and depending on that our colors will change so we're going to learn first of all little bit and then write little bit of code so little bit of learning little bit of doing by the way i have an entire article on css media queries through illustrations i beautifully explain each and every aspect of css media queries so that you can either revise or learn media 4 is very easily quickly and efficiently if you're new to the channel feel free to subscribe because i post videos based on practical wave projects so that you can level up your coding skills if that's so interesting hit the subscribe button and join my gang and without further ado let's get started all right boys and girls before coding first of all we need to set up our environment to do that come to the window over here right click create a new folder okay and then name it anything you wish i'm gonna name it project one project one like this and then i'm gonna open it on vs code right click and you're gonna get this option of open with vs code if you don't get it what you're gonna do is you're gonna open a vs code then you're gonna click this file option over here and then open folder okay so come to the desktop and then you can see the project one over here select folder and now we can see that it has opened our folder over here click this plus sign and write index.html okay and then for this project we're gonna use sas not css because it is more powerful and it has more options than regular css even if you're a beginner start learning sas along with css because it's going to be very handy and it's going to save you a lot of time so click this icon again and write style dot s-c-s-s okay and then we're gonna create for another file named main.js main.js the main purpose of creating this javascript file is that um if you come back over here you can see that this is loading live okay so if i resize the window you can see the value live for this we're gonna use javascript so don't worry about it it's very little javascript on project two we're gonna learn how we can make responsive images along with our responsive website so for that you need to download some images the images are on my github repository the link of the github repository is given in the description down below so once you click on the link you're gonna copy the link from here control c and then if you scroll down you're gonna find these steps or you can follow along with me you click on down get you go there and you paste the link that you copied earlier over here and you click this download option and it's gonna create the folder why are we doing this that's because github doesn't have a direct download link let me show you if i go back you can see that we don't have a download option over here all right so now you're going to drag this outside it is actually a zip file so media query project is the name of the folder over here it contains uh five images okay so once that's done you're gonna rename the folder and name it to uh images wait if you rename if you click on here or you can also click f2 to rename the file i mean folder so you're gonna write images like this and now what you can do is you can either drag this inside or you open vs code over here and then you drag the images folder over here to copy it so now you're gonna click copy folder like this and now your project folder should look like this okay and now you write this sign and then hit tab this is emmet if emma doesn't work for you search google why emmett is not working on vs code you're gonna find appropriate solutions now what you're gonna do is you're gonna link the sas and the javascript file inside the html follow me link you hit tab okay and then you write style dot sas like this so we are linking this sas file inside our html and in order to link the main.js come below the body over here at the middle over here okay so you write script ah there is the option and over here you write main.js like this ctrl s and we are done change the document to media query practice and inside over here you write dot container p a i n e r tab container tab and then inside over here we're gonna create a div with the class name text like this dot text tab and over here you write hello screen ctrl s and then below the container not inside the container below the container you're gonna create a d with the id size like this follow me hashtag size tab so this is an id and don't forget that this is not inside over here not inside the container it is outside the container over here okay so this will carry the width of our window let me show you again if you come back to this pane over here you can see that this is actually showing us live okay and this is our id inside our html which is uh this one we're gonna style this and then give it some function inside the javascript so control s we are done with our html and now come to the sas part oh you also need to download some extensions so if you can't see this activity bar over here what you're gonna do you click this view and you click appearance and you're gonna get this activity bar okay and if you can't see actually if you can't see the blue ribbon over here you come to view and then appearance and then you hit that status bar okay so this is called status bar and this is called activity bar so you come over to extensions and you hit you write live says not live says sorry sass compiler okay and you're gonna get this over here uh not this sorry live says compiler you're gonna install live sas compiler okay and the next thing that you're gonna install is live server or this one you're going to install this one once you have installed the extensions come back to our sas file and we also need to remove the default styles of our browser in order to do that you hit start curly braces and you set margin padding to zero pixels each to do that m0px tap p0px tap and set the box size into border box to do that both side tap okay bobo our tab which is borderbox emmett does all the shortcuts for us now we're gonna set the font family inside the body as sans serif okay s a and s save like this we're gonna set the font size to 35 pixels like this f size tab 35 pixels all right we're done styling our default styles you hit save and then what you're gonna do you can see this small option over here which is watch sas you're gonna click this okay so once you have clicked on it you're gonna get two files generated over here which is style.css and style.css why is that that's because the browser can't run our sas file directly needs to convert from sas to css and then we can see it on our browser that's why it is generating us this file over here and you can see that this is all css converted css from sas to css so now you're going to come back to our index.html and from here you're going to remove the s and convert it to css from sas control s don't forget to save okay and now you're gonna run this on our browser in order to do that you can either get an option over here which is open live server or if you can't see the option over here like myself you're gonna what you're gonna do is right click over here and you can see this option open with live server click on it and now it is running on live server on our browser congratulations okay so now let's come back to our vs code the next thing that we're going to do is come to main.js and we also need to now come back to the main.js file and over here we're going to write some very little bit of javascript so that we can actually run this on our project which is this one which is which will show us the life value of our width of our screen so you have to do that follow along with me so first of all you write window don't worry i'm going to explain little by little what each line means so window dot on resize equal to screen okay and then write window dot on load equal to screen okay and then we're gonna create a function over here function named screen okay and inside over here you're gonna write my width equal to window dot inner width over here okay okay now let me explain the javascript what i have written so let's start with the window thing over here this entire vs code is a window okay this entire google chrome is a window so now on resize and on reload let me explain to you so if you come back to our browser over here i mean the project one if you resize it like this and now you can see that value changes so it is happening live so the function over here on load is working on resize what is happening if you stretch it like this on resize is working so it is loading live so which is um this one on load and my width equal to windows inner width is working to show us the length from here to here i mean the width so that's how this thing is working and now we also need to display it on our browser so let me come back to our project so we want to display it over here okay in order to do that um we're gonna write we need to target our id over here which is this one okay in order to target that exact thing what you're gonna write is document dot get element by id that's because it is an id if it was a class then we would have written get element by class name don't worry about this i'm gonna create an entire video on this topic in the future so you're gonna write quotes and then size over here because the name was size and then dot inner html like this so the main purpose of inner html is to insert text inside our div with the class name of size over here okay and now we're gonna write equal to and now we're gonna write some text okay with colon okay and then you're gonna hit plus sign let me save it and show you what is happening i remove the plus and just colon okay and now back to the browser we can't see anything because we made a mistake over here that's why we can't see anything you write screen ctrl s and now we can see our text over here all right and now what we're gonna write is we want it um we want the width to be shown over here in order to do that um what you're going to write is you hit plus sign over here and you write the name of this variable okay so you write my width like this ctrl s and now we can see the value over here so this is the pixel value um you come back to vs code and you write another small word plus and then quotes pixels px control s and now it is displaying successfully now let's bring it at the middle at the center over here okay so come back to vs code um let me remove this because we don't need the activity bar and we also don't need this bar from here the status bar all right and we're also done with the main.js file we don't need it so you can minimize it okay and if you want to minimize this as well you hit ctrl b if you hit ctrl b again then this panel will come back okay so ctrl b and now on the sas file you target the container text and the size hashtag size so dot container container curly braces like this you target the text dot text like this and you target the size hashtag size like this all right so now we want the hello text to be at the very center in order to do that first of all we need to define the size i mean the height of our container if you don't you find the height what happens is let me show you let's define some border around our container okay border of let's say 4px solid red okay ctrl s minimize this and now we can see that the container is just this portion of our browser but we want it to be at the maximum otherwise we can't work properly so in order to do that come back to vs code you set the height over here to 100 vh which is the whole screen height control s and now we can see that the container has stretched from here to here and now we can work with our project successfully back to vs code you remove the border from here ctrl s and you can see the text has our width has come to the very bottom over here we want it to be at the very center and this one over here as well so come back to vs code you can center the hello text in two ways you can either use the display grid or you can also use the display flex let me show both of them okay first write d flex okay tap if you write justify content to center then it is going to work on the x-axis okay let me show you so you can see that the hello screen has moved to the center of the x-axis this is the x-axis and this is the y-axis all right so now back to vs code if you want to keep it at the center along the y-axis what you have to write is align con align items center ctrl s minimize this and let's see you can see that this is at the very center and if you want to use the grid what you have to write is d grid tab display grid and place items in the shorthand of both the x and y axis so place content center like this and you comment this from here ctrl s minimize it and you can see that it's still working and now we need to place this text at the very center over here at the bottom of hello screen back to the back to vs code um you come at the bottom over here you write first of all position absolute post apps tap position absolute and then top 50 or not 50 um 60 like this left 50 percent like this and let's see what is giving us the result um you can see that it is over here but we want it to be at the very center but it is not working why is that let me explain to you on the x-axis i have defined 50 percent so from here to here it is 50 but actually this is the center okay it should have worked from here to here but it is working from here to here so in order to fix that you have to write the transform property transform and then translate x which is the x-axis you can also work with the y-axis but not for this tutorial i'm gonna make an entire video on the transform property so make sure to subscribe so that you can get an update about this okay so translate x minus 50 okay ctrl s and now we can see that our problem has been solved over here back to over here you also set the font size to 35 pixels font size 35 pixels like this ctrl s and we are done come back to the container over here and you give it a color of bgc tap um set it to white for now uh if i come back to my blog over here i have defined a lot of colors um wait so these are the colors over here i'm gonna copy it from here don't write right now i'm gonna give you a moment so control uh copy from here come back to our vs code on the sas at the very top okay over here i'm going to paste it over here now pause the video take a moment to write these lines of code over here and don't forget to write the dollar sign otherwise it is not going to work so these are called variables so i'm storing our color hex values over here and then we're gonna use it all along inside our project every time if you need to change something you don't have to go through and read the entire document what you have to do is you just change over here and then the entire document will be changed that's why sas is more powerful than regular css and it saves us a lot of time we're gonna also define our breakpoints inside variables and then we're gonna use it to define our media queries i'm gonna show that to you don't worry about this and yeah i got these colors from this website over here which is coolers dot co let me show you if you visit the website you can find tons of colors over here you can choose any color you want for your projects link of this website will be given in the description down below so that you can go and check it out okay now back to vs code on the container you remove this let me show you a sample of how these variables work so it was hashtag fff which defined the white color and if you want to bring this color one over here i don't know what is the name but let's say this is purple because i'm seeing purple over here so if you want to bring that purple color over here what you have to write is dollar sign color 1 ctrl s and now you can see that the color 1 which is the purple color has been applied over here oh come back to the vs code and on the hashtag size you change the color to red so that we can better see what we are trying to do ctrl s and now we can see that we have achieved our desired result okay now we're done with our setup let's start the tutorial let's say that i'm your friend and you don't even recognize me in this case what i have to do is i have to tell my name to you my name is joy in the same way we have to tell the browser that we are defining a media query that's why we write the term at the red media to tell the browser that recognize this this is a media query and then we write conditions over here like screen and then max width let's set it to let's say 768 pixels and we also write the min width over here let's say it was let's say 768 pixels like this so this media query at the right media query is a declaration telling the browser that we are starting a media query from here and these are our conditions the screen which is the media type and max width mean with these are our conditions don't worry about this i'm going to explain in details about each and every condition over here okay and then inside this curly braces we're gonna define our styles over here okay your styles are here so once the browser recognizes our media query and then if our styles i mean if our conditions are met then all the styles that we have defined here will be applied on our browser as simple as that and you might have seen these operators the coma and the and operator let me explain this to you right now let's say you have gone to a restaurant and you have ordered two things burger and a pizza so write this burger and pizza okay let's say that your friend has ordered burger pizza and coca-cola like this burger you write coma okay pizza and cooka sorry hookah hold on like this so let's see what is happening burger and pizza two different commands okay it is separated by what a and and these three things you see these are separated by a comma and the end in the same way these are our commands okay so if you have if you have uh let's say that just two commands so what we're gonna write is the and operator over here okay but if you have three or more then you're gonna use the comma and the end operator like this so let's say you have three commands so control v which is the main weight you're gonna write and over here and you're not gonna write n you're gonna write comma over here and then it's gonna work so let's remove them i hope you understood the operators coma and the and operator now let's discuss about the media type in total you have four options all print screen and speech don't worry about all of these values because you're gonna use the screen option to make responsive website for electronic devices even if you don't declare the media type it's gonna set it to all this one automatically so skim through this chart over here i hope you understood the media type over here you can write either screen or or you can keep it blank and it's gonna automatically define it to all now let's discuss about the max width function what this does is it creates us a border okay so when we are inside that border it's gonna work but if we go outside that border it's not gonna work so see this illustration over here you can see that the styles are applied inside this 500 pixels but if we go outside the border of 500 pixels it is not gonna apply the styles it's gonna be blank white let me show you a demo about this so over here you write brackets max width let's say to um 500 pixels over here okay ctrl s you come back to our results screen over here you can see that this is a purple color and let's say that um we're gonna set it to bgc tab okay let's set it to uh the hashtag sorry not hashtag dollar sign color one like this okay ctrl s and you come back to our container over here so you remove this from here and you write uh hashtag fff which defines the white color okay now minimize this and you hit f12 f12 and now if we resize the window oh that's because you also need to write the name of the selector in order to do that uh what you're going to do is you remove this over here and you're gonna write the selector the container selector okay dot co and e i n e r over here curly braces and then you divide if and then you define it over here like this ctrl s and now it's gonna work okay now minimize this so this you can see that we have set our boundary to 500 pixels as long as we're inside the 500 pixels the color will be applied but if we go outside then it's not gonna get applied so you can see that we are at 787 pixels and the color is not getting applied if you resize the window like this you can see the color is getting applied which means that we're inside the border it is 447 pixels but if we go outside the border um wait let me resize this this is 499 pixels and it is the color purple if you resize it it is 579 pixels and it is white the color is not getting applied i hope you understood the max width function let's talk about the main width function so this is the same thing inside the border it is not going to work if you go outside the border then it's gonna work let me show you a demo and then you're gonna get clear about this okay now come back to vs code and from here you write min with okay let me give a practical demo let's say that i am over here i live in bangladesh and we don't have starbucks so outside my border let's say this is america okay so america has starbucks so inside the border here i am if i go outside the border which is if i go to america then i'm gonna get starbucks but if i stay inside the border then i'm not gonna get in starbucks in the same way inside the mean width our styles will not get applied but if we get outside the border our styles will get applied okay so now on the vs code we just change the mean width from max width you come back to the result screen over here did we save it no we didn't save it this is very crucial you need to save your code otherwise it's not going to work control s come back to the browser and now we are actually outside the border which was our border 500 pixels okay so now you resize the window like this um so we are inside the border and our styles are not getting applied but if you resize the window let's say uh 480 489 pixels this is inside the border okay outside the board inside the border outside the border i hope you understood the mean with function and now we're gonna write the code itself to be honest there is no such thing as a standard media query breakpoints because of various screen sizes on the market for this tutorial i'm gonna use the official bootstrap five breakpoint chart if you click this link over here then you can see the various standard um screen break points defined by bootstrap five so if you scroll down you can see all the values over here and we're gonna define all of these breakpoints inside variables so that we can easily manage our code so if you scroll down you're gonna find all of these values over here so i'm gonna copy them ctrl c and at the very top okay i'm gonna paste it over here review now pause the video and write these values over here and also don't forget to write the dollar sign at first otherwise it's not going to work so this is the breakpoint for the mobile version this is the break from the this is the breakpoint for the tablet laptop and the desktop version 576 pixels and so on now how we're gonna use this is if you come back to the media query at the very bottom you can see that this is 500 pixels okay so this is writing directly instead of writing directly over here we write the variable okay dollar sign mobile b-i-l-e like this and automatically the 576 pixels which is this one this value is 576 pixels is applied over here okay now the cool feature of writing like this is that if you need to change something let's say you need to change the media query you have to go through all these lines of code you have to read all of them which is a very big headache so if you write like this using variables throw says if we need to change something you don't have to go through all of the files all of the lines of code you just need to change it over here how simple is that that's why you should use sas even if you're a beginner all right then let's complete our project one and let's move to project two okay so in order to complete this uh not mean with we're gonna write max with okay and then we're gonna set the color which is uh i have to originate on the comment so color one is for the mobile version color two for the tablet and so on so in order to do that uh this is actually perfect and then we're gonna write at the red media for the tablet max width dollar sign tablet like this and over here you're gonna write container and curly braces bgc tab and define dollar sign color to over here okay a very quick tip if you want to define media queries first you're gonna write the biggest screen at the first and then smallest screen at the bottom it's a descending order so the largest will be at the first and descending decending and the smallest will be at the bottom if you don't do this then it's not gonna work let me show you a demo okay so you come back to the browser um over here so the color one which was purple color it is not working look look the color is not even changing but if you write it in the reverse order let me show you so this is the mobile smallest one first largest one later but if you write in the reverse order ctrl x and you paste it over here ctrl v ctrl s and then minimize it and now it's working look resized it this is purple color look um look it's 567 pixels if you resize it then it's gonna change the color over here and on the 768 i guess yes 768 mark then it's gonna change the color back to white which is the default color we defined it over here on the container which is this one and let's define our desktop and laptop as well first smaller screen first okay not screen max with sorry with dollar sign laptop like this and over here we're gonna write dot com day near curly braces then bgc bgc tab dollar sign color free ctrl s okay the then copy this paste it over here you just change the value from here to desktop okay and then the color will be color number four ctrl s and we're done with our project one let's go and test it so you resize the window you can see the color is changing perfectly okay so this is desktop version this is the laptop version tablet mobile i hope you understood project one let's move on to project two so we're gonna be building this for project two let's start minimize this come back to our vs code control b okay now what we're gonna do we're gonna remove some code from here okay so remove these variables we don't need them anymore okay so over here we can keep it you need to change the font size from here okay and don't delete this uh it's not working that's because uh we also need to change this media queries from here that's because we don't need them so in total we have four media queries from the project one delete them and don't remove the size from here otherwise we can't see our width of our screen live okay minimize this just don't remove it and remove all of the code from here and then ctrl s back to index dot html don't remove the size from here okay you just remove this text from here ctrl s all right so we are pretty much done back to the design now on the project you can see that we have the logo over here and the menu items over here let's consider this header okay and the content over here the image and this text over here is the main and this this one which contains the social media links will be our footer header main and the footer okay so in order to create them come back to vs code and inside the container we're gonna create three classes with the class names of i mean we're gonna create three divs with the class names header main footer so dot header tab dot main tab okay oh sorry and dot footer control sorry tab so we have header main and footer okay so inside over here we're gonna write the logo and menu items for this project i'm gonna use the bam naming system even if you don't understand that don't worry just follow along in in the future video i will show you how you can use the bam naming system now write dot header dash dash logo tab and now over here we're gonna write the logo which is uh mia ruma okay you write mia rumor over here and now we're gonna write the menu items in order to do that dot header that's there's menu okay tap hit enter and over here you write dot header dash dash menu hyphen star three okay now it's gonna create us three divs so over here you write one then two three okay you write over here home on a serial okay portfolio and over here we're gonna write contacts all right so we are actually done with our header section we can minimize it ctrl s let's go and see what we have created so far uh we don't need this and we have created all of this right now don't worry about them we're gonna style them now we're gonna write the main section okay so over here now inside the main section we're going to create two divs image and text so image will be over here on the left side and the text will be on the here right side so in order to do that write dot main dash dash star 2 tap so we're gonna put the image over here and the text will be over here txt okay so we're gonna clip it so we're gonna keep this blank because we're gonna use the background property background image property to insert the image over here all right and inside the main text what we're gonna write is main dash dash text hyphen star um how many how many texts do we have let's see one two three and four so in order to write this four we're gonna create four divs inside over here four tap okay one two three four so first one was hello and the hand wave we're gonna um go to google and write hand wave hand with emoji like this you copy this icon from here ctrl c paste it over here ctrl v and over here we're gonna write um mia ruma and we're gonna write span tag over here in order to convert the text to red color okay so s p a n span and it's gonna create that automatically we have to just cut it from here and paste it over here ctrl f and i'm a designer was the text i guess let me check uh it is a a designer from tokyo japan a b e s i g n e r f r o m and over here we're gonna write tokyo japan let's see what we have created so far so these are the unstyled text over here we're gonna style them don't worry and now we also have to write something inside the footer and first write dot f double o t e r we have four social media icons dash dash dribble d-r-i-b-b-l-e was dribble first let me actually check um no sorry instagram is first instagram twitter okay so insta is first instagram tap okay and then over here we're gonna use the image tag to insert the image and dot footer in order to create the remaining divs automatically you hit star three tab okay instagram twitter what was next i forgot um dribble and behance so d r i b b b three b's okay don't forget that d r i b b b l e three b's okay and behind say the hands okay so inside this tags we're gonna create the image tag okay img tab so keep it blank for now we're not gonna insert anything img tap okay img tap and img tap ctrl s let's see what we have created so far it looks quite ugly but don't worry we're gonna style them okay so we're actually done with the html come to style.css and we're gonna target the classes over here okay so right dot container over here and the header dot header dot main and then dot footer over here okay so let's first style our header okay ctrl s but before everything else you need to set the height otherwise it's not going to work i have shown this to you on the first project okay so 800 vh con uh hundred vh tab so ctrl s and now let's go back first things first we're gonna use the display flex property okay now back to our project on the header section uh let me actually show this to you live by live i mean that let me write over here let me show you over here okay so you hit ctrl b there's an extension named text pins d e s k p i n s so if you click over here you can see the window is vanishing over here so i'm clicking here i'm clicking here the window is vanished so what text pin does is let me show that to you um here is a text pin let me enable it okay so i'm enabling this pin inside this vs code and now let's click outside you can see that the window is not vanishing it is staying and on its place permanently okay so now i'm gonna keep it over here and i'm gonna show this to you live over here what is happening behind the scenes okay so now inside the header we're gonna write d flex okay ctrl s and now you can see that this menu items were here and now it has shifted over here the default value of flex direction is row so write it anyways even though there will be no uh changes flex direction row ctrl s and now we can see no changes because that's the default value anyways and now what we're going to do is we want the menu and the logo to be stretched from the very left to the very right so in order to do that inside the header you're going to write justify content let me bring the vs code over here so that you can actually see what i'm doing justify content it will be a space between ctrl s and now you can see that the logo is over here and our menu items are over here okay and now we also want our menu items to behave like a row instead of behaving like a column in order to do that if you can recall the head if you can recall the menu items are inside the header which was that so come over here uh let me maximize it to show you how to write the selector for the logo and the menu items to do that and dash dash logo okay curly braces so this one is actually equivalent to writing dot header dash dash logo i mean look so this end is actually getting extended from here to here so this is actually a shorthand i mean shortcut that's why sas is much better than regular css let's remove this in the same way we're going to target the menu and dash dash menu like this ctrl s and now we're going to style this okay in order to do that i mean in order to target that what you have to do is you have to come to end dash dash menu you write d flex tab and flex direction say to row which is the default value anyways ctrl s and now we can see that this is style like this and let's change the font size as well for the logo and the menu items in order to do that you come to the logo and you write f size tab okay for vw we're gonna use the vw units okay we reload control f and for the menu we're gonna write 2.5 vw f size tab 2.5 2.5 vw control s and we're gonna use some gaps between our menu items in order to do that come over here you write gap 15 pixels you can change the value as you like perfect it looks quite good now what you're gonna do is you're gonna divide the screen between the rows what i mean by that is you come back to vs code and over here on the header section you write h 10 percent okay ctrl s and then you're gonna create border so in order to create the border we're creating a border over here that's because we want to see exactly what we are doing and where the code is getting applied so right border 2px solid red control s resize this and now we can see that this is our header section it is taking 10 percent of the entire screen and we can see that how things are working over here you can see that this menu items are not at the exact center over here so in order to do that you come to back to vs code and and header menu not here sorry on the header section you have to write align items center so you write um sorry align items oh sorry center over here like this ctrl s and now you can see that and now you can see that the items has moved from the top to the center if i uh uncomment this then you can see the difference okay let me uncomment this ctrl s and now see the difference okay let me uncomment this again ctrl s and now we can see that it has moved to the center again we're gonna do the same thing for the main and the footer as well so height we're gonna define it a percent 80 percentage like this ctrl s and for the footer section height of 10 percent okay control s so 10 80 percent 10 percent in total 100 and let's define the borders as well so that we can see what we are doing border 2px solid black like this and for this section border 2px solid green like this ctrl s and let's see what we have done so far so this is the main and this is the footer section over here we're gonna have our social media icons okay now let's tell them first let's insert the image so in order to do that come back to vs code and let me just resize this so that you can also see the code and the result so what you're gonna do is you're gonna click the small icon over here and minimize everything okay and now everything will be on its position okay so inside the main first of all we're gonna target the image and then target the text in order to target them you write and dash dash image curly braces and then and dash dash text so this one is targeting text and this is targeting the image okay curly braces ctrl s and inside over here you're going to write bgi you hit tab okay so inside over here um let me maximize this and you hit ctrl b and inside the images folder so we're gonna use this image this is the portrait of this young woman this one over here is love the lady so um you come over here in order to target that exact image you write dot slash select this folder images folder and then in order to target that lovely lady you're gonna write portrait.png or select this from here and now it has all right let's see and now we can see nothing that's because we need to set either the width or the height depending on the orientation so in order to do that um come back to vs code first of all you need to know the orientation how we want it we want the image to be here and the text to be here okay so display flex will be the flex direction will be row row okay so in order to do that um come to the main and over here you write d flex okay tap and flex direction would be row like this ctrl s and now we're gonna divide i mean distribute the width 50 percent for the image 54 50 percent for the text in order to do that this is the image okay you're gonna write with fifty percent over here okay let's maximize this w fifty percent tap and then width will be fifty percent over here okay tap ctrl s resize this and now we can see the image over here it looks ugly but if you want to work around here what we can do is um we have to set the background size to contain bg s tab to contain ctrl s and now it looks better but it is getting repeated in order to stop the repetition you're gonna write bgr tab which is background repeat set it to no repeat bgr tab now repeat ctrl s and now we can see that the image is not getting repeated and over here you can see this there is no gap okay it looks quite ugly if you want to give some margin over here resize this come over here you set it to this is the zero pixels for the top bottom if you write five pixels over here then five pixels of padding i mean margin is getting applied here here so first top bottom zero pixels left right five pixels okay control s minimize this let's see what happens on our browser and you can see that five pixels is getting applied over here all right it looks quite good let's actually remove the border from the header because we're done with our header um in order to do that onto the header and just remove them goodbye ctrl s let's go back and it looks good by the way whatever you have written so far is 100 responsive till 4k display do you want to see a demo let me show you f12 hit f12 and you go to till 4k you can see that even in 4k it looks good why is that that's because we have used the vw unit which is view port width viewport width that's why you can see that even on the 4k display it looks quite good and look and look i have refined no units for this text over here not even over here do you even remember the font size of our width it was just 35 pixels and this is the default value and this is 4vh this is 2.5 vh now the background size with the value contain which is uh let me show you this line over here i'm sorry let me actually find out this this line over here the background size contain itself is highly responsive so even if you resize the window you can see the image is getting adjusted according to the screen size you can see that it is shrinking at the same time if you stretch the window it's gonna enlarge it itself so that it can fit the window well you can see that it is working like that and our fonts are also responsive it is working according to that if you resize the window the fonts will get smaller and if you resize it again then it's gonna get bigger which is highly responsive even on the 4k display can you imagine that okay now um come back to vs code and let's work with our uh we're actually done with this section the image and we're gonna work with um the mobile version at the very last and first of all we need to change the text okay now you close the developer tools and you come to um we can we can actually remove the border from here as well ctrl s and on the text which is inside this main you create border so that we can see what we are trying to do okay border we're going to set it to red color okay 2px solid red like this ctrl s and now we have the border over here so that we can actually see where our text are going okay now let's come back to vs code and we want our text to be at the very center in order to do that you can either use the grid or you can use flexbox so we're gonna use the grid because i showed you both beforehand okay you can use anything you want so inside the text you write d grid okay and place oh let's actually use the flex okay because a lot of you don't know how to use the display grid so justify content center okay align items sorry center like this control s and now we can see that uh the thing is actually behaving like a row but we want it to behave like a column in order to do that we're gonna write uh flex direction which was the default value it was row we want to write it column ctrl s and now it looks quite good i mean it looks much better than before and now we're gonna give responsive font sizes to each of this text over here okay so let's come back to vs code and if you can recall on our html um let's go to the main section so the so the text actually looks so so the text have these classes okay in order to target those classes um you come to the and sorry the dot main section and come to the text over here and at the bottom of this you write and hyphen one it is targeting our hello text over here okay let me actually resize this so curly braces you're gonna write it over here and you're gonna set the font size to 10vh sorry vw not vh vw viewport with ctrl f and now we have a very big hello text over here in order to target the remaining three lines over here what you have to write is and hyphen two coma and hyphen 3 comma and hyphen 4 curly braces and we're going to set the phone size to 5 vh f size tab 5 v sorry not vh vw okay vw control s and now it looks quite good um yeah it looks good and i actually forgot to write something inside the text i mean inside the image over here which is the background position bgp tap let me resize it what we have to write is left and center don't worry i'm going to explain that to you okay you write left center okay ctrl s and let me actually remove all the guides from here and just put guide on our image in order to do that you come to the image okay you write border 2px solid red okay and remove the red color from the text ctrl s and you minimize this and you can see that our image let me actually remove the black color guide as well which is over here uncomment i mean comment this minimize and you can see that we have some gap over here okay that's because we're dealing with portrait images we're not dealing with landscape images okay if you hit f12 me actually show you if i resize the window you can see that our image is at the exact center to the left paint to the left center but if you uh remove that line which you're thinking that this is unnecessary line of code uh let me resize this uh drag it over here at the top so that you can see um let me comment this line of code ctrl s and you can see that image is moving from here to the very top over here and if you uh uncomment this ctrl s and you can see that image is getting over here but if you write bottom it has in total four options top right bottom left the first value sorry let me maximize this the first value works on the x-axis and the right value works on the y-axis i have an entire video on background properties link will be given in the description down below go and check it out if you want to make responsive images for your responsive website i hope that you understood the background position property now let's work with our footer section okay you cross this developer options you remove the guides from here okay in order to remove the red colored guide we can see it is here control x control s at the bottom at the footer section you bring the guides over here okay control s if you come back to the browser we can see the guides over here up to this point we don't need the width over here so we can safely remove that um in order to remove this you just come come to the index.html we don't need to remove anything except you just comment this line of code okay ctrl s you come back to the browser and everything is gone and if you want to bring it back you just uncomment this line of code over here and it's gonna come back okay so far so good let's insert the images over here so in order to insert the images control p okay the images are over here so in order to locate them inside our image tags what you have to do is you write dot slash images okay slash the first one is instagram so instagram is over here click this similarly what you have to write dot slash images slash this is twitter okay you write twitter sign dot png over here and this is dribble similarly follow along with me images tab sorry uh enter this is drippable here is our triple and i will be hanse dot slash images p hands control s control b and let's see what happens oh you can see that this is extremely big that's because this is 512 pixels each icon so we need to uh we can see that this is behaving like a column okay like this but we want it to behave like a row so in order to do that come back to vs code um it is actually the footer section okay so you minimize this like this uh minimize and inside the footer section um in order to target all of them you write d grid okay tap the default value is flexed the default value of flex direction is row right anyways direction row control s minimize this and we actually can't see any difference because it is extremely big so let's actually reduce the size okay in order to do that you follow along with me you write square brackets class equal to sorry a power sign equal to double quotes you write footer f double o t e r dash dash what it's gonna what it is gonna do is it's gonna target all our classes which contains our images okay and curly braces over here and you write the image tag img curly braces and you're gonna set width to 5.3 vw which is the responsive size ctrl s minimize this uh let's see oh it is actually not working why is that let's go and check it out oh sorry i wrote the wrong thing not great it's gonna be flex sorry sorry uh let's go and check it out uh minimize this ah it's working perfectly fine okay the next thing that we're gonna do is it is actually not at the center okay in order to do i mean in order to place it at the center just like the header one which i explained to you on the header section so what you have to do is um resize this come over oh sorry let's come over here on the footer you write align item center okay align items center like this ctrl s and it's gonna be at the center on the y axis okay and we're gonna place some gap between our icons in order to do that we're gonna write gap of 20 pixels okay like this ctrl s and we can see that we have some gaps between our icons over here and we're gonna place them on the right side in order to do that we're gonna write justified content right or sorry we're gonna write justify content flex end flex and ctrl s and now we can see that it is over here but we want this to be over here not over here in order to do that we're gonna set some margin of 10 pixel margin right right with me m right tap okay margin right set it to 10 not pixels sorry it's percentage 10 percentage control s and let me minimize it and you can see that it looks quite good i'm gonna remove the guide from here okay in order to remove the guide you know the drill we just remove this from here let's minimize this and you can see that our website is done it looks quite beautiful if you hit f12 let's resize it even on the 4k display it looks quite good let me show you you come to 4k you can see that uh you focus over here it is written 4k it looks quite good and let's resize this using this guides over here this is laptop large okay it looks good and let's go to laptop of 1024 pixels it looks good as well let's go to the tablet version it looks uh quite uh little shrunk if you resize the window that at at some point it will look quite ugly i oh i actually forgot to remove the bottom from here that's why it looks quite ugly come to the main and image so left bottom change it to center control s okay it looks quite good right now it is loading oh yes it's over here it resize the window at one point you can see that the text looks quite horrible that's because it is very small and it is hard to read that's why we're gonna create a custom media query for the mobile version so in order to do that um we just keep it over here as it is and we also need to change the design for the mobile version okay so if you come to our uh sigma file over here you can see that we don't have any menu items we don't have any menu item options for our mobile version just the logo over here no hello text just the text of our miya rooma a designer from japan and our social media icons pretty simple so in order to implement that um first of all you come to our vs code at the very bottom okay let me maximize this at the very bottom over here we're going to create a media query so and media we're going to set the max width to 650 pixels okay max width of 650 pixels the curly braces over here and now we can target the header along with its logo and text i mean the menu items in order to do that dot header curly braces in order to target the logo and dash dash logo over here earlier basis and in order to drag in the menu items dash dash menu okay so over here you're gonna write display none and it's gonna remove the menu items on the mobile version so d non tap control s if you resize the window so you look it over here okay it's 320 pixels okay if you resize it uh you can see that there is no menu items over here but if it goes above 650 pixels then we can see our menu items it is 646 pixels over here you can watch it you can see the menu items has reappeared okay and if you go and we can see everything and now it is gone okay now we want the logo to be at the very center in order to do that come back over here inside the media query inside the dot header selector you write justify content center and it's gonna um center it to at the very center over here now come back to vs code we also need to change the logo font size in order to do that you write f size tab change it to 40 pixels ctrl s let's go back and we can see our logo is 40 pixels and it looks quite good but it's not responsive if we even shrink it that's because it's gonna look very ugly if we use the vw unit in a future video i'm gonna explain to you all the possible css units and what it does so make sure to subscribe to the channel so that you can get an update about the video now let's bring the image over here and it will be circular so in order to do that come back to vs code let's minimize this the header section and over here you're gonna target the dot main section okay curly braces and in order to target the image you write and dash dash image curly braces to target the text you write and dash dash text over here then curly braces control s and we're not gonna see any changes because we didn't even do anything okay resize the window bring this back and um let me keep it over here so that we can see actually what happens first of all uh we need to change the orientation it is currently on the row but we want it to behave like a column so in order to do that um come over here on the main section you write flex direction column flex direction column like this ctrl s and then let's see what happens we cannot see the image okay so in order to bring back the image you come to this section and you write width set it to 200 pixels 200 pixels and set the height to 200 pixels as well ctrl s let's see what happens um here is our image by but we want it to be at the very center in order to do that i'm back to vs code you're gonna write over here okay justify content center okay and then align items center okay i'm not gonna save it let me actually resize it so that you can see what happens if i save it after writing those code so let me uh keep it over here wait a second uh let me control f and you can see the image and the text has appeared on the very center over here now let's resize our social media icons in order to do that come back to vs code um come at the very bottom okay minimize this this is not done okay we're gonna come back here and style it okay so at the bottom right dot footer like this and in order to target all the images you write square bracket plus power sign equal to double quotes footer dash dash okay then curly braces will be over here and now you're gonna write image and then we're gonna set the width to 45 pixels okay and set the height to 45 pixels as well px tab ctrl s now let's go back and see what happens um perfect but it looks quite ugly that's because of of the 10 pixels of i mean the 10 percent margin over here okay in order to remove the margin what you can do is come to the footer section over here and set the justify content to center that's because previously it was on the uh left side okay and set the margin to zero pixels okay now it's gonna work let's go back and it looks uh beautiful now let's resize our text and make the image circular so come back to vs code uh you minimize this this is done the header section is done as well okay come to the main section and over here you're gonna write border radius hundred percent okay percent ctrl s and uh we can see that we have a little bit of distortion over here in order to fix that what you have to do is um you write bg step and set from content to hundred percent like this ctrl s let's see our changes now it's perfectly fine okay we're done with our images come back to our vs code or we also forgot to write the background position it should be on the center bgp tap center as well center like this and it will be perfect um let me see ah yeah it's good let's resize our text over here first of all we're gonna set the width to hundred percent previously it was fifty percent w hundred percent tap okay ctrl s and we're gonna remove the hello text in order to do that and hyphen one curly braces d not tap like this and it's gonna remove our hello text from there let me let us see okay you previously we had the hello text now it is gone come back to vs code now target the remaining three other text in order to do that write and two comma and hyphen three comma and hyphen four okay curly braces like this and we're gonna set the font size to 30 pixels f size tab 30 pixels ctrl s now let's see our result it looks beautiful this is the mobile version if you resize it it's going to give us the tablet version over here let's go to the 4k it looks quite beautiful for the 4k version you can also customize the gaps as you like it is completely up to you if you resize the window then it looks beautiful and it resizes when we resize the window perfectly fine this is the 4k view this is the large laptop view this is the laptop view of 1024 pixels the tablet view you can click this guides over here and it's gonna show us the result accordingly and then the mobile view this is the large if you resize it then it looks quite good as well i hope you understood the second project now let's start the third and last project on the third project we're gonna be building this layout over here so get your vs code ready now come back to vs code and remove everything we don't need anything we ctrl s delete ctrl s okay and on the index what we are going to do is we are going to remove the container from here because there is a lot of code and you write container again dot container tab okay after removing everything inside the previous container okay container and now what we're gonna do is we're gonna create three rows why is that if you go back to our design um not here sorry uh this one if you come back to our design we're gonna create three roles right now because we have row one row two row three that's why so come back to vs code uh maximize this you can write first of all dot row one okay in order to write it quickly you write star three tap okay so we have uh row one two three okay and now inside the rows we're gonna create three boxes okay in order to do that write dot vox hyphen star three tab okay we write one two three and inside here you write a b and c over here all right similarly on the row two and row three we're gonna create boxes and then inside there we're gonna create letters okay dot box hyphen star three tap four five six d a f over here and on the last row dot box hyphen star three tab seven eight nine g h i okay ctrl s let's go back to our browser and see what we have created so far and it looks quite horrible but don't worry don't panic we're gonna style them now come to our browse vs code come over here you write star first of all remove all the default browser settings okay m0px tap p0px tab both side tab bobo tab okay body say to ff tap sense i actually did a mistake deleting the previous styles of our css we should we should have not deleted everything my apologies my bad and now for the font size we're going to set it to 55 pixels so that you can actually see what is happening f size tab 55 pixels control s let's go back to the browser and see what is happening there we go we have it now what you're gonna do is we're gonna individually target container row and box in order to do that you write dot container curly braces dot row curly braces oh no not this one sorry you write square bracket plus power sign equal to double quotes you write row hyphen okay curly braces and it's gonna target all our rows in order to target all the boxes curly braces sorry it's square bracket class power sign equal to box hyphen curly braces okay now the very first thing we're to position our letters from being in a column shape to a row shape in order to do that maximize this later the letters are inside the box and the box are inside the row okay so inside the row here so what you're going to write is d flex not this one sorry d flex tab display flex set the flex direction to row like this and the rows are inside the column okay sorry the rows are inside the container and inside the container the rows should behave like a column in order to do that d flex tab flex direction set it to column like this ctrl s let's go back ah it looks quite good and now we want to create boxes around our letters so first things first what we're gonna do is we are going to set the height of our container in order to do that we write height 100 vh control s and now in order to create the boxes we have to set the color first so bgc tap c4 c4 okay ctrl s and now let's see what we have created so far oh it looks quite terrible over here but don't worry and what we're gonna do is we're gonna set the width of this individual boxes and the height so in order to do that you're gonna write width so first of all bracket and right hundred percent and in total how many boxes do we have we have three boxes so divide the entire screen with divided by three for one column i mean for one row okay then save it let's go back to the browser and see what we have created this is the result so far and let's create some border so that we can see what is happening so border two pixels solid black like this ctrl s and we also need to set the height as well so height will be in the similar calculation 100 divided by 3 that's because we have three boxes three rows three by three columns i mean three by three grid layout ctrl s and let's go back to the browser and it looks quite terrible why is that oh i made a mistake over here it's not percentage value it's gonna be viewport height or vh so write vh over here and let's see what is happening oh it looks perfect in order to position the text at the very center what you have to write is come over to the box at the bottom you write d great or you can also use the flexbox model as well but i'm going to use the grid place items right center control s let's see what we have done ah it looks perfect as well now we're gonna create some gap between the rows okay this is row one row two and this is row three okay between the rows is gonna be 30 pixels gap in order to do that you write gap uh 30 pixels over here control s let's see what we have created we have gap between rows okay but we also need gap between our columns okay i mean our boxes in order to do that come here uh to the box not to the box but inside the row uh you write cap 30 pixels okay ctrl s let's see what we have created ah it looks quite good but if you want to give some margin around our uh entire container what we can do is you come to at the very top over here you can write five pixels of margin just resize it and looks you can change the value as how much you like but for this i'm going to set it to 5 pixels okay but let's actually set it to a little bit more let's do 30 pixels and let's see what happens it looks quite horrible oh my god let's set it to 10 pixels and let's see it looks good not quite bad not quite good it looks optimum no worries and now if we set and now if we click f12 we can see that it looks quite ugly if we resize it we want to make a desktop version for this layout so let's set our standards to um 650 pixels okay on 650 pixels we're going to create this layer over here the mobile layer so in order to do that um come back to vs code over here at the very bottom okay over here you're gonna write at the red media and set the max width to 650 pixels like this curly braces and first things first let's understand the theory okay the rows are behaving like a column okay which is the behavior we want on a mobile version but the boxes are behaving like a column but we want the boxes to behave like a row like this so we need to change the behavior of our boxes i mean the rows okay in order to do that um come to our media query over here and you target the rows okay class power sign equal to double quotes row hyphen okay so your bases and you set the flex direction to column like this okay ctrl s and let's see what happens resize it ah it looks quite good it is actually not behaving as expected so in order to change it come back to our vs code you remove this line of code from here we don't need it okay keep it keep the container inside the media query blank and come at the very bottom over here you write called square bracket class power sign equal to double quotes and you target the box i mean all the boxes and we're gonna set the width to 100 percent previously it was 33.33 let me show you if you scroll up uh above the media query it was the box over here the width and height was 33.33 sorry point three three percentages each now we're gonna set it to maximum which is 100 percent over here okay so ctrl s resize the window let's see what happens ah it looks quite good as well uh let me resize the window okay it is behaving as expected i actually mistakenly uncommented the margin from here let me just bring it back besides the window it looks quite good and you can see the results so this is the mobile version so we have successfully completed our third project so we're done with the tutorial if you like the video give a like share with a friend and feel free to subscribe till then take care and i'll see you in the next video bye bye\n"