CSS Tutorial: em, rem, vh and vw units + Responsive design Explained | Web Development Tutorials #29

Aug 15, 2023

CSS Tutorial: em, rem, vh and vw units + Responsive design Explained | Web Development Tutorials #29

► 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 - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here

Content

0.768 -> Guys in previous videos we have seen

3.003 -> many things but we haven't seen aspect of Responsive design

6.841 -> we have seen flax box

8.843 -> now we'll see what is responsive design, media queries and how simple it is

14.415 -> you will know this

16.25 -> so first of all i want to introduce you to responsive design

20.421 -> what is this responsive design?

23.09 -> Responsive means something that responds that means

26.894 -> A person is responsive if you speak to him and he responds

30.831 -> that means reply to you, gives response

34.001 -> like that a browser and website is responsive when they respond

41.108 -> to different screen width

43.177 -> like assume, you can see a phone here, if i don't do this to the phone

48.549 -> use this website on the tablet which is on the phone

51.786 -> so it will be shown different, we have seen this in many websites

54.855 -> and if i opened that website on let say this big desktop\

59.727 -> so it will be shown differently

61.562 -> so what happened sat old times is whenever someone wants to make a website

66.434 -> so they made for desktop because phones were not many back then

69.97 -> and whenever website of desktop was to be made

73.207 -> what happens there is if you say i will also make mobile website for you

79.013 -> or else i will make that website responsive

81.482 -> so you had to pay extra for that

83.617 -> your client had to mention it separately that we wants a website for phone too

88.889 -> so you said that you will charge more because i create a website for desktop

93.16 -> for phone i will charge separately but in this modern era in which we are living

98.365 -> this thing is straight-forward that you

101.335 -> create responsive website for mobiles, it should work on desktop and tablet too

105.806 -> if it doesn't run then he will raise his voice on you

108.509 -> and thing is not to be mentioned explicitly

113.013 -> so here what will happen

114.882 -> if assume you are making a website which doesn't work on phone properly

119.82 -> and doesn't work on tablet, so your customer will complain

123.691 -> so what happens is endless new resolution device comes, new phone comes

127.995 -> sometimes someone launches, sometimes realme launches, sometimes your xiomi lanches

132.333 -> different different companies launch their new devices

135.636 -> and this makes difficult for web developers, designing different websites

140.274 -> for different phones, then for different tablets, for different screen resolutions

144.411 -> So responsive deign is a way for a web developer

149.016 -> in which their website adapts itself to all the devices and all the resolution

156.123 -> now here i told, in modern era responsive design is necessity not luxury

161.695 -> that means you have to give responsive website

165.399 -> If website is not responsive, so your client will catch your collar

169.336 -> you cannot say to your client that i told you to make only a website

174.108 -> so i made for desktop, No you

176.911 -> have to support desktop, phone and support all the screen layouts

183.384 -> so whenever a name responsive comes everyone just fears, says how can we make responsive website

188.989 -> i know small concepts that too not correctly

192.426 -> and one time i learned all this concepts that i haven't practice much, I'm talking about beginners

198.499 -> they will think this and after that

200.834 -> thinking they will say i can't create for phone so it is not like this

204.538 -> it is very simple to make a website responsive in today's era where we have good techniques like media queries

213.781 -> and along with that many techniques about which we will see now

217.651 -> so what are the techniques which can be used to achieve responsive design

222.856 -> so first of all View port which supports our HTML boiler plate already by default

230.431 -> we have seen this on VS code

232.599 -> and along with that use max weight and max height, if you use max weight so

239.006 -> as you resize your screen, your width and height will resize according to it

244.144 -> along with that CSS has media queries which can be used to

247.614 -> that you can add some special add on in your some elements

252.586 -> whenever screen resizes

254.755 -> so as your screen resizes you can inject different CSS in it

260.327 -> By which your website will be responsive, so that is media queries which we'll see later

265.833 -> so one more way is to use different font units

270.971 -> use units for padding, margin like different things

274.975 -> so how to do this, how this happens, so lets go to our VS code and understand there better

282.349 -> So guys here i came to my Visual Studio code, here i will make a new file

288.589 -> "tut29.html" and along with that putting HTML boiler plate

292.626 -> i will write here, "responsive" or else what i will do

297.731 -> fonts size units

301.135 -> actually this can be used for margin padding also that why i will write size units okay

306.106 -> so what we'll do here, make some HTML

311.245 -> here i will dispose my port

313.547 -> and first of all take you to the browser and say kindly access this playlist if you haven't accessed it

320.754 -> click here and bookmark it, and click here to save the playlist so that

324.958 -> this becomes ours because this is the place where i upload my videos till now

328.762 -> i get many comments that you haven't told from starting whereas i created this playlist that why i have to tell in every video

335.602 -> so i hope i won't have to from now, you will access it on your own

339.473 -> Now what i'll do here, i will make "div.container" okay

343.877 -> that means i made a container, after that what i will do

347.481 -> is create heading here, i'll write "This is a heading"

351.151 -> and i wrote this is a heading, along with that what i'll do

356.657 -> i will put id in it, i will put id

359.993 -> Sorry, here i'll write "id = first" and after that i'll write "id = second, id = third"

367.334 -> okay, so i'll write here id = second and third Second

375.576 -> and third okay

377.277 -> so i wrote id = send, id = third, "This is second heading"

382.416 -> and lets write here "This is third heading" and to this i'll write "This is first heading"

387.688 -> and remove this from here, now i'm clicking while pressing ALT

392.292 -> to use Visual studio code's multi cursor functionality

398.132 -> i did CTRL+S, and as i click on golive so see here This is first heading second heading third heading is made

406.273 -> so first of all i'll put a style tag to h1

410.711 -> and do text align centre to h1, so i have to write like this

417.15 -> i wrote h1, and here i'll write "text-align : center", so with this everything will come to center and

426.46 -> text came to center, now here what i'll do is show to how to use em, rem and all this units

434.935 -> so first of all lets talk about m units, see what m units does is

439.339 -> sets your font size to parent container's relative, like if i right click here and inspect

446.513 -> and show you here, so see here, so it's unit is font size 2 m okay

454.922 -> if i change it's font size, if i make it's font-size : 10m" like this

463.163 -> so what this means is it will take 10 times it's parent size

468.602 -> so here i make container, what happened, i had to write .container

473.807 -> and after writing .container, what i'll do is write font-size and write 10 pixel okay

483.116 -> and here i gave font-size in pixels, so what will be the font-size of first heading

487.921 -> in-fact not making this h1, i will take this only to our first one

495.429 -> so i'll bring it below and by clicking ALT i'll do like this and this will come down

500.834 -> so what i did is changed it's size, i said make its size 10m

506.373 -> now what does this 10m mean

508.408 -> so here see there are styles computed event listeners, if you come to this computed tab

514.247 -> so this will tell how much is computed, so its size is computed 100 pixel

520.454 -> font size 100 pixel is written, so from where this 100 came from, i'll tel

524.324 -> i did 10em, 10em means 10 times of that of parent, it's parent is container whose font size was 10

531.665 -> so this became 10 times of it's container, if i make container small so see it's size will decrease so see

538.071 -> if i did container size 4, so what will be in computed

541.475 -> will be 40 see 40 pixels, so just above the parent in which it is

547.614 -> what will happen to that, if you change your font size so its font size will be the no. of em you added okay

555.355 -> so here i'll reload this and in-fact if i closed it like this

559.793 -> because i don't have to see responsive, so i made its font size very big, so i'll make it 3em instead of 10

567.801 -> if i made this first one 3em, so it will be 3 times it's parent size

572.572 -> and if i increased parent's size so what will happen

575.575 -> Accordingly, the child in which em is set, all those sizes will change so see here by default

582.616 -> user agent style sheet means our chrome browser which we are using set this to 2em

590.924 -> so along with that see it's by default is 2em but i overridden it so 2em won'y be considered because i made it 3em

597.931 -> so 3em will be considered, so this was 10, so 10 * 3 is 30, so in computed see here 30 pixel

605.205 -> Its good, now i will show you, if i gave padding here

609.576 -> and give padding 3em again so you will think how much will be padding

615.715 -> 3 * 10, you will think it will get 30 padding but if i show it's padding to you 3em

622.756 -> and show you computed padding, so see here 90 pixel is coming

627.36 -> but what padding we thought? we thought 10 * 3 will come 30 padding but this doesn't happens

633.834 -> whenever to set the font size here like i set the font size of first

638.205 -> so it will take font size, 3em means 3 times of font size not 3 times of parent

644.244 -> so it will take 3 times of font size, so see here 3 * font size 30

650.083 -> it is 90, 3 * 30 is 90, so here it will take like this, so i hope you understood this em

656.69 -> so em might have caused a confusion in your mind that whenever i'll use padding or margin

662.829 -> so i'll face problem in em, you might be thinking this but

666.233 -> see it's use, when you will use em when you want is whenever parent element is resizing your child element should also resize

678.478 -> now how is resizing done, resizing happens maybe when you remove element from dom

683.583 -> it can happen that using javascript you deleted a node assume

688.455 -> there is website displaying many nodes, you clicked and deleted a node, so all your nodes will take the space and if you want

696.763 -> width to be set, so you use this

699.699 -> but there is a better unit than this which i prefer that is rem

703.703 -> and what does rem do always, your base HTML, runs relative to font-size of this HTML tag

711.111 -> so i'll show you what is this

712.812 -> So in this HTML if i set the font size to, assume 30 pixel, ill make it 25

722.622 -> i did 25 pixel and along with that my 2nd one i'll make it font-size 3 rem

733.133 -> and also make padding 3 rem, so when ill make font-size 3rem, so what will be 25 * 3, it will be 75 and that happened see

743.41 -> here see 75 pixel

745.645 -> and along with that if we talk about padding so it will be 75 only

750.083 -> so what this does, always it resizes itself relative to the font size of your HTML root element

759.092 -> this is our rem unit, so when you have to use rem and when you have to use em?

763.83 -> i will tell you, this thing will be learnt by you automatically as you make websites

770.937 -> you will know by yourself that you need such font size which will depend on their parent, there you will use em

778.678 -> and sometimes you will want that the whole page size should be same relatively

784.017 -> that means if someone increases their browsers default font size

787.954 -> here if i tell you, in your settings you can increase your browsers font size, if someone does that

793.693 -> so your HTML default font size will increase

797.163 -> and if you want to scale it relatively to that so you will use rem

801.735 -> here i'll say one more thing, this rem and em should not be barrier in your HTML and CSS learning because it is not a big deal

811.044 -> so by any chance you didn't understand it so watch the video one more time

816.116 -> and after that if you still don't get it, so i'll say if you are not satisfied so put this on hold

824.09 -> for some time use pixel till you make some websites, then you make 1-2 project sample and then after that

831.598 -> see it, explore it

833.867 -> here i will show you a great article for rem and em, i'll link it in description

839.572 -> you go and see, and i'll tell you it was "comprehensive guide to rem and em"

849.215 -> and see this is the article, so this is a very good article, a bit larger

853.486 -> but i'll say if you are a beginner so don't waste your time in this

857.424 -> but if you want perfection so do read it okay, when what to use is explained very nicely

864.698 -> So this is the URL

866.032 -> if you search this title so you will get this article okay

870.537 -> so i'll close this and take you forward to view port height and view port width that means what is vh and vw? okay

880.113 -> lets see what is vh and vw, if i gave container border to pixel solid red

887.987 -> so what will happen is border will come, very correct border will come, what was big in it

893.026 -> this font size which i set in 2nd and 1st i will comment it out because it made the page very uneven, now see it is looking good

903.002 -> now assume i want to set it's width and height, so how i will i set width and height of container

909.142 -> i'll do like this 23 pixel, i made it small but it's okay and height 344 pixel okay

916.015 -> 23 pixel is very small but it's okay, i can set width and height here

921.187 -> so i set width and height of my h1, i'm sorry set the width and height of my container

928.762 -> so i set the width and height of container, made it 23, lets increase it guys i'll make it

935.535 -> 400, i'll make width 400 and make height 300

940.54 -> now i will tell you a scenario, if your a web developer so you will know it

946.78 -> how many times you tried that your box's height will become equal to your page height

952.385 -> if you have done this, lets make it 900 no lets make it 875

957.757 -> you did 875, you saw below, you said little bit is remaining, we have to increase 875, no problem let's increase it

964.931 -> then you get a scroll bar here, then you said to increase it more

969.202 -> you increased and increased, increased and increased it and sent it below

974.407 -> i'm not saying it is wrong but it is inconvenient

978.878 -> apart from doing this, what you can do is, if you made the height 100vh

984.684 -> i'll comment it out and write here "height : 100vh"

990.19 -> so 100 means it'll take the whole height, take whole height of your view port

996.663 -> so view port means, here you can see it will take it's whole height

1002.101 -> like you saw here, so it took view port height like you can see

1007.473 -> so what view port does is take whole width, you thought it right

1011.145 -> So 100vh means whole, 0vh means, sorry vw means half width, so if i talk about width

1020.119 -> i'll use vw,and if i talk about vh, h for height, w for width okay

1026.859 -> so i did 100vw so it took complete width, took complete width

1031.13 -> i'll inspect by doing right click, after inspecting see here

1035.335 -> if i decrease its height so i can go from 0 to 100 and this viewport width of mine

1041.908 -> or viewport height, whichever i'm resizing, it will change according to that and compute itself, So

1050.216 -> if i talk about it's height, so see here it computed its height 69.184pixel and how it is computed

1057.056 -> it computed like this, first of all saw in which browser it is, what is it's height

1061.194 -> and according to that it multiple this with 100, so what will happen here

1066.466 -> assume you height is 844

1069.035 -> and you gave 100vh, so what it will do is multiply and divide it by 100, so your height will remain the same

1076.776 -> after that assume you did 50vh, so it will multiply by 50 upon 100 that means as you change from 0 to 100

1084.017 -> from 0 to 100%, this is a kind of percentage, in a way, it is percent

1089.489 -> because 100% means complete and 0% means completely 0

1093.66 -> so this means 0 to 100% of view port height

1097.83 -> so view port width means 100% of view port width, so i made it's width 100% of viewport width

1104.103 -> i hope you understand this vh and vw also

1108.041 -> and here i want to tell you a thing that you won't use this viewport width because it works if you use % in your width

1117.05 -> but if you have to set your height equal to viewport then vh will be used

1123.723 -> So guys for now i'll talk this much only, i told you about em, rem, vh and vw

1130.363 -> and i hope you understood it clearly

1133.533 -> So i hope you understood this video, you found out how to change font size, how em works

1141.174 -> how rem works, how vh works, how vw works

1145.578 -> and along with you don't have to focus on when you have to use what at this point because only before some time we have learnt HTML

1153.953 -> and to focus on this thing is not a good thing according to me but again if you want

1160.193 -> you have reached a state where you made more that 50-500 websites

1164.63 -> then i'll tell you to go with it and make yourself master in this rem, em and this units

1172.939 -> please read the article which i showed you

1175.441 -> So that's all in this video for now guys, if you haven't accessed this playlist so do it

1179.445 -> click here to bookmark and click here to save

1182 -> and along with that don't forget to like this video

1184.951 -> That's all in this video for now, Thank you soo much guys for watching this video and I will see you next time [ ♬ ]

1190.623 -> [ ♬ ]

Source: https://www.youtube.com/watch?v=DVjrb52C5Gs