Using Media Queries with CSS Grid | Web Development Tutorials #45
Using Media Queries with CSS Grid | Web Development Tutorials #45
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here
Content
0.167 -> If you remember,
1.381 -> I told you about media queries
3.955 -> and here in the grid also we can use media queries
7.855 -> So, without wasting any time
9.494 -> I will create a file called tut45.html
13.077 -> and put the boiler plate inside it
15.206 -> and I will write it here CSS Grid + Media Queries
21.735 -> In the project that I got you made
23.7 -> I told you that this is the media queries
26.642 -> if I go to the website
30.128 -> And here I go to the web development series
32.531 -> so, I showed you here by making this fully responsive website
36.837 -> Inside that, in the source code that I had given to you
38.917 -> I told you by putting media queries inside the link
41.168 -> that is, my link tag
45.624 -> But here I told you media queries separately
53.313 -> and here I showed you how you can use media queries.
57.427 -> You can also write multiple media queries
59.394 -> and what will I do now
61.392 -> using exactly this code, see what I do, ok
65.209 -> So, I will copy this code right from here
67.601 -> you can type it, I have copied it
70.487 -> because I am a little lazy man, what should I do?
73.83 -> And here what i will do
74.978 -> which i will click on Go live
75.914 -> and i will come live with the help of my live server
78.4 -> so, i have inspect
81.059 -> i will be responsive to this website
82.936 -> I'll shorten it as soon as something goes wrong
84.633 -> let's see what I did
86.388 -> ok, so here I have different boxes
88.875 -> that I have given the background color etc.
92.025 -> So, I will do one thing over here
93.087 -> I will give background color to body everywhere, ok
98.32 -> so, I will give background color to body here
100.98 -> And you don't have to, ok
103.721 -> why am I doing this
105.124 -> because when you use media queries
108.369 -> then your biggest concern is It is whether it is working or not
112.488 -> Media query is also firing or not
114.722 -> so, what do we do to check this thing
117.36 -> we give different colors to the body.
119.675 -> So, as we change our width
122.397 -> what will happen to our body
124.195 -> the background of our body will change, ok
127.802 -> So, if any color is left
130.856 -> then keep it green
132.352 -> and see it here
134.211 -> now it is red, it is blue, it is yellow, it is green, ok
137.575 -> So as the width is changing,
138.618 -> the colors are getting changed
140.113 -> So, I would like to render my website differently
142.043 -> in different devices, ok
144.904 -> So, first of all, let me make that website
146.784 -> first of all, I want to put div.container
150.658 -> inside the container as if I want to put a navbar, ok
154.408 -> So, I'll put the navbar
155.939 -> Oops
156.676 -> navbar
158.795 -> what's it
159.416 -> OK, I'll put the nav
161.031 -> and I'm going to put the navigation bar in here as if
163.918 -> Home About Contact, ok
168.251 -> Then let's say I want to have a layout at the bottom here
172.041 -> I want to put here
173.676 -> the aside, okay
174.926 -> inside the aside I'll put a heading tag, let's say
178.591 -> And what I would do inside that heading tag
181.26 -> I would like to put inside that heading tag
183.392 -> More about us, ok
187.291 -> and on top of the aside, I make a section here.
191.974 -> After which what will I put
193.661 -> I will put a heading tag
195.274 -> and do one thing
196.289 -> I make it h2
197.827 -> there will be a small heading
199.13 -> I will write it here Learn CSS in hindi
204.594 -> let's say a vlog, ok
206.841 -> what i will do now
207.461 -> i will give display to the container of grid
213.371 -> i gave the display: grid to the container
215.508 -> The container has become my grid, ok
217.725 -> and with that I did the properties of all the grids over here
223.303 -> suppose I want to use here is grid-gap
227.994 -> grid-gap: 1rem I've done it
230.392 -> So, no surprises
232.017 -> Here I do one thing in such a way
234.225 -> I give it a styling, in which I will become a class, styling
239.717 -> in the name of st
240.463 -> or else I do a work
241.612 -> I create a class called border-now
246.593 -> and in which i will put border: 2px solid black
251.972 -> I will give padding 23 pixels
255.14 -> and at the same time what should I give, background color?
259.248 -> I give the background color wheat
262.71 -> and see here its background color is not coming yet
265.406 -> because I have not even added class
267.02 -> So, let's keep the class name is bdr
269.313 -> if you keep it a little short, then it will be correct
271.048 -> so here I want to do its class = "bdr"
276.672 -> and that the class = "bdr" i have written
279.519 -> I want to copy this everywhere
280.851 -> so, I keep it here
283.146 -> class ="bdr", in section also class = "bdr"
285.883 -> along with that class = "bdr" also in nav, ok
289.545 -> so, look at this, something like this has come here
291.116 -> Learn CSS in hindi
293.562 -> Where I put it here
294.936 -> I made an aside here, one aside here
297.498 -> so, I made a mistake here
298.902 -> I'll fix the layout a little
300.321 -> Format document
302.333 -> There is nav, aside
304.311 -> and how many aside i have made
307.093 -> infact, what should i do here
309.264 -> should have just added class in the section
311.259 -> So, I did something wrong here at the time of copy-pasting
313.558 -> you don't, okay
315.245 -> class = container
316.858 -> also add a class i nav, that's it
319.175 -> and this is what I have to do
320.504 -> these 3 boxes are kind of have made
323.472 -> Now look what I will do, how I style it
326.809 -> so, it is written display: grid
328.628 -> I told this here in tut43 this is a repeat auto-fit story
332.538 -> I'm going to give it, okay
335.269 -> I'll give it something like this
336.917 -> Or do one thing, put this layout thing on it, ok
340.36 -> what was the template-areas thing
343.216 -> So, the template-areas thing that was here
344.73 -> I will say that again
346.425 -> There is navbar, section
348.448 -> aside is also there, and footer also
350.099 -> I will put the footer here
351.681 -> so, I will also put the footer here.
354.232 -> and here Copyright codewithharry 2020, ok
361.843 -> And what will I do here
363.196 -> I copy all these things here
366.737 -> I have set the grid here
368.963 -> so here I put it inside my CSS
372.849 -> Saved, and see this it looks something like this
375.443 -> and this one i didn't add class in footer that one
378.048 -> So here also I add this class inside the footer
380.971 -> So as soon as I add this
382.348 -> it has become a layout as it is, okay
385.058 -> and to fix the layout,
386.073 -> the padding-top is reduced a little bit
388.15 -> and i know that here is no need to do this
391.468 -> But again,
392.617 -> A little bit realistic, a little bit so I want to be like this, okay
395.756 -> I made it something like that, okay
397.932 -> And I'm going to put a lot of content inside it
399.422 -> This is my navbar
401.674 -> I think there is something wrong with the navbar here
404.46 -> in the navbar I have
406.021 -> Ok, so I haven't given them the Id navbar here
408.416 -> so, I have them
409.438 -> I do one thing here; I select them from their tags
411.915 -> nav
413.012 -> and i select it from section and select it from aside, ok
417.341 -> And now whatever work will be done
418.805 -> so, look, it has become a kind of website layout, okay
421.598 -> now what I want to do here
423.171 -> Now I want to do that as soon as I reduce its width
425.571 -> now look if I reduce its width then it looks right to me till here
428.449 -> That is, as soon as the yellow one comes
430.1 -> More about us may come under Learn CSS in hindi
433.548 -> then it will be good
434.235 -> so, where the background color is yellow
436.938 -> I would like what should I do there
439.721 -> I will change this thing
441.064 -> the container here which is made this grid-template-areas
445.317 -> i would like to change it
446.54 -> where my background color is being yellow
449.29 -> And
450.099 -> Oops, I messed up here
451.42 -> body has to give the background color yellow
453.199 -> and here I have to
454.478 -> Display: grid is there
455.447 -> grid-gap is also available
456.727 -> I have to change the template-areas
458.569 -> and I would like it to be whatever the template-areas is
462.766 -> section section section
464.827 -> I'll do something like this, section
467.426 -> and put aside all over here
471.902 -> So as soon as I did this
473.218 -> look at this, here it has become my website
475 -> and I will make it bigger, so look at this it has become like this
476.865 -> And obviously this green color background
478.139 -> I have applied is just for viewing.
481.183 -> And I do these many times
482.252 -> and some of you few people asked me why you do,
486.113 -> why do you spoil the website
487.438 -> So, I will tell
488.091 -> look if I put a green background
490.061 -> then I am getting to know
490.82 -> that even one of my media is getting full fire
492.918 -> here another is getting fire
494.732 -> And I also know that I can watch over here too
496.128 -> but remain so comfortable
497.643 -> And at the end I can remove all the background, borders,
499.175 -> all these things easily
501.381 -> so, anytime you are developing the website
502.848 -> then I will tell you to take all these things with you, ok
505.983 -> And here I am urging to do something
508.582 -> and I will tell you what it is
510.848 -> The problem is
511.482 -> that I want to center the text-align inside the footer
514.532 -> I know if it does happen without doing this
516.528 -> but okay: I'm enjoying watching it a little
519.044 -> So now it's become like a layout, look here like this
522.337 -> and look at this this way it's one on top of the other
525.831 -> But look blue as soon as it happened
527.569 -> it has come back like this, okay
529.043 -> so, I would like where the background color is turning blue
536.398 -> There I'd like the story to change a little bit and, ok
540.439 -> How will I change the story
542.011 -> I do format document it
543.883 -> where my background color is turning blue
546.313 -> What will I do while changing the story there
549.257 -> blue is happening here my background
551.472 -> I have the navbar here
553.22 -> the home etc. inside it
554.783 -> I would also like them to come in the same line vertically
557.191 -> I can do that too
557.996 -> so, look here as soon as I did this
560.306 -> in blue is exactly coming in the same way
561.862 -> but I want something else on this size too
564.499 -> Like I want, for some reason
566.652 -> I don't want to show More about us in small phones,
569.638 -> in small devices
570.766 -> so, I can do it something like this
572.565 -> I would say don't show the aside, okay
575.538 -> keep it like this
576.848 -> and as soon as I did this
578.232 -> the More about us came down
579.689 -> so how would I solve this problem
581.772 -> I'll do it here
582.654 -> or I'll leave the grid as it is
584.464 -> and rewrite it here. that which is aside
587.593 -> make its display: null, ok
590.562 -> So, this media query got fired like this
591.691 -> so, look here, then aside has come
593.525 -> here the header will be there
595 -> then look here, the phone came back from
597.119 -> Maybe I want to show back,
598.956 -> what it is more about us in the phone
601.478 -> For any reason
602.258 -> I know what I am saying may not be realistic
605.453 -> But with media queries, you can do just about anything
608.091 -> that is to say
609.367 -> Suppose I have written home about us and all these things.
612.085 -> Now I write all these things as if I make them span-span
617.334 -> Ok
618.479 -> I have written Home
621.056 -> and after that i write About
626.409 -> Services
629.029 -> and Contact
631.084 -> So, it is coming from now on
632.053 -> see this, it started coming like this, it started coming like this
634.452 -> so, I want it to come down in its own line
637.829 -> So, what can I do
639.066 -> which is span
640.848 -> I will first of all do this thing here
643.308 -> I'll say what do I do with this span
646.771 -> I do Its display: block, ok
648.37 -> so, i will do its display: block
649.974 -> so, what will it do, it will go down and down, ok
651.637 -> So maybe I want to block its display
653.996 -> what should I do as soon as I have this happening here?
658.463 -> I will block the display of the span
663.514 -> And you target it with Id or classes, don't do that, okay
666.415 -> so, look at it as soon as it happens
668.168 -> have I done something wrong here?
669.539 -> Yep, look as soon as it's yellow
671.104 -> then I'll put display: block here, and text-align: center
678.155 -> So, look this has just become completely responsive
679.679 -> so, shorten it if it's coming like this
682.126 -> and whatever this thing is
683.498 -> it's a spam thing
684.719 -> I will add this in blue background also ok
688.69 -> I will add in blue background also
689.861 -> and I will add in red background also
691.941 -> So, what is here, I can do this thing like this, okay
695.473 -> and these values that I have given
696.692 -> According to that, you see
697.526 -> this website has become very responsive
699.889 -> look at this I have brought it here, so it looks like this
702.596 -> Then after that I brought here so it is like this
704.769 -> then I wanted more about us to disappear
706.512 -> so, I made it disappear
708.01 -> And I will also make aside disappear in red background
711.053 -> then aside also disappear from red background
713.75 -> then everything can be done with media queries, ok
716.971 -> Now a problem is coming here
718.656 -> that this one which is on my aside
721.14 -> it is creating problem here
722.395 -> so, what can you do to solve this thing
725.035 -> Where you have made this aside missing
728.049 -> if you are getting gap or any problem in the grid
731.126 -> So that thing first of all you see why this is happening
734.277 -> And after that you can solve it according to that
736.11 -> as if this gap is coming, I want to solve it suppose
739.058 -> then how will I solve it
740.266 -> So, first of all I have not put template-areas
742.175 -> inside the red one which is my background, so I will put that
746.021 -> And now whatever it is, my problem has been solved
748.162 -> so, any problem that comes, has a reason
750.388 -> and you can always solve it.
752.383 -> But with grid I wanted to show media query
755.194 -> that I have shown you here
756.992 -> now that Learn CSS in hindi that i have written
759.167 -> maybe I want to add a paragraph after this
761.472 -> So maybe I would like to add a paragraph here
764.144 -> I have wrote the lorem34 lesser
766.21 -> Suppose I will do the lorem122
769.035 -> what have I done
770.347 -> lorem122
771.903 -> And look here, a lot of text has come
773.485 -> as if this is my article and I have written the article
775.737 -> and I want it to look like this in the phone
778.291 -> Look, it looks so right
779.374 -> so now we have made a responsive website
782.152 -> so now its limit is limitless, how far can you take it
785.491 -> This is your talent
786.847 -> how I have given you all these weapons
789.252 -> like media queries, flexbox, animations, selectors
793.525 -> It's all weapons
794.275 -> now how you use these weapons is up to you
797.281 -> and I'm telling you, I want to give you trust
799.927 -> I want to give confidence that you can create any website
803.267 -> any website
804.599 -> now you mean any website when you see
806.647 -> Earlier I used to look at websites like
808.923 -> it looks great
810.291 -> well, it still looks but I used to see how it must have been made
813.584 -> But now I look at the website like this
815.704 -> I see, ok navbar
817.311 -> ok flexbox
818.633 -> ok in this they did tis in Flexbox
821.082 -> They may have justified it
823.531 -> so that all the items come side-by-side.
825.153 -> After this, padding has been given here,
826.866 -> margin is given, then here they have set its max-height
832.356 -> here they have given buttons.
833.351 -> Whatever they've done
834.591 -> there might be a grid here
836.065 -> so, I see it this way, maybe there's a grid here.
838.216 -> In which 1, 2, 3 they have made these columns,
841.918 -> made 2 rows, and span them
844.691 -> then I see that if it was in the center
846.523 -> then maybe it would have been better for them.
847.85 -> So, I start seeing all those things from that point of view
850.8 -> then you also look at the website with the same view
853.272 -> and make a good website
854.35 -> And show me in the comments
855.509 -> which website you have created, with the help of this course
859.072 -> I have helped you a little bit in learning this thing.
862.981 -> Show me, it would be great to hear
864.672 -> so, if you haven't liked this video yet, then kindly like this video
868.274 -> Also, if you haven't accessed this playlist,
870.842 -> click here to bookmark it and click here to save it.
875.051 -> Along with that,
875.754 -> I would like to tell you
877.326 -> that if you want to make websites
880.933 -> if you want to make good websites
882.399 -> then you should see the projects.
883.938 -> And create your individual project after that
886.38 -> so that you do not have any problem
888.241 -> and the source code which is there
889.553 -> I am going to give it in all the description.
891.399 -> As I uploaded the video today
892.538 -> it may take me a while to upload the source code
894.841 -> but by tomorrow you will get the source code.
896.881 -> Immediately you try to type the source code yourself
899.46 -> by the way, I put the source code very quickly nowadays.
902.112 -> If someone tells me in the comment
903.418 -> that the source code has not been entered
904.431 -> I have made a mistake
906.036 -> then immediately I will give the source code
907.439 -> So, i hope these videos must have been helpful
909.459 -> you will definitely like this video
911.461 -> Thankyou so much guys for watching this video
913.556 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=mu0qTVIkkAs