What I understood is: px depends on resolution, vh vw are device specific, vmin and vmax depends on orientation, em is multiplier on current value, rem is a multiplier on current value in respective to the root element, % depends on parent
SIGMA BATCH OP! This just isn't a web dev course to me anymore, it is helping me go through my hard days, when I am low, unclear about what should I do, doubting myself, academically, emotionally, all the relationships that have been perfect today stand at a very edge. I feel so overwhelmed....All that but, every night the one hour I come here to watch a video or two after completing all my work is the only thing I get excited for. It for sure is so so so informative, helpful and comprehensive course. Excellent work harry bhaiya ! I am not sure if it's (web dev) gonna help me some how but right now it you definitely are by motivating me to get out of my bed and work. It has actually helped me fix my routine, be active and engaged in activities throughout my day. I am really moved by how much this playlist is giving me a sense of security, comfort that I actually started commenting, writing, expressing myself like never before.
- You wrote lorem56 because they are next to each other and easy to type 😁 - The computed size will be 24px because the root element has a font size of 12px. - 32px because the parent component has a font size of 16px - vmin in phone will be width, and vmin in computer will be the height #SigmaBatchOP
This is one of the most complex video till now. i thought i understand everything when i was watching the video but when it came to implement it in code i caught myself confused. vw and vh was easy to understand. vmin & vmax took me aback for a bit but when it comes to minh and minw. i forgot what i watched about it. so i had to come back and watch it again. harry bhai is raising the bar like anything.
26:16 miss those line today "apni gao aur tao ki jamin mere nam kardo 😔" By the way, Every ending time when i listen this line my face makes a smile automatically and i got a new hope to do something by do this course. #sigma_batch_op #take_love_harry_vai ❤️
@@swathi_bee4 the land you own and big brother of your father owns , gift the land to me- name the land to sir's account , trust me in Hindi language it sounds really good 😌 , its kinda joke so don't mind
Summery:- Css unit 1) px -pixel (individual dot of display) 2) viewport - relative to screen display vw- viewport width vh- viewport height 3) em- relative to font size of parent container( if 2em = 2*parent element size If parent height = 10px Thn child height = 2*10px = 20px) 4) rem- relative to font size of root element (2rem= 2*size of root element ) 5) vmin - in computer vmin =height In phone vmin= width 6) vmax 7) min height = Min height of the container ( if for any containers min-height = 50px Height= 10 px For this case height of container will 50px) 8) max height ( Max height of container) 9) % - n% of parent element ( if height of a container is 100px , height of child 80% , height of child will be - 80% of 100px = 80px) #sigmabatchOP
i was confused in responsive web dev but i found this playlist when i searched for responsive html css based projects and now here i am watching every single video of the playlsit, so far i found them ver helpful they cleared most of my doubts now here i wam watching this unit specific video which will clear most of the responsive part for me so, just want to thank harry bhai to provide such content for free
I've been in web development for nearly a year now, have also done a few projects, and worked with languages like html and other webdev technologies, but never knew all of this knowledge about units, every time i open your videos i learn something new.
#solution 12:34 The size of the p tag will be 24px as we have given tag a specific size. If we do not write 12px as the font size of root element then tag font size will be 32px because it will take 16px as default. #SigmBatchOP
this makes me so happy Harry Sir... Please I request you continue this web development course... I am from Kashmir I can't able to buy any paid course and neither to go anywhere to learn web development... Bz I am frm poor family... And thanks alot
Harry bhai apke web development course learning ke doran yeh confusion rehta tha projects banate samay but this #sigmawebdevelopment course you demonstrate this topic widely in a single video.Course point of view is 5stars and I think you serves a lot in coding community,unvaluable.Thanks Harry bhai❤
1)px (Pixels): Pixels are an absolute unit of measurement. They provide a fixed size regardless of other factors like text size or screen resolution. For example, 10px means the element is 10 pixels wide or tall. 2)rem (Root em): "rem" stands for "root em." One "rem" is equivalent to the font size of the root element (usually the element). If the root font size is set to 16px, then 1rem is equal to 16px, and 2rem is equal to 32px. It's a relative unit that makes it easy to scale elements based on the root font size. 3)em (Ems): "em" is also a relative unit that's relative to the font size of the parent element. If the parent element's font size is 16px and you set a child element to 2em, it would be 32px (2 times the parent's font size). 4)vh (Viewport Height): "vh" is a relative unit that represents a percentage of the viewport height. For example, 50vh would be 50% of the height of the viewport, so it's responsive to the screen size. 5)vw (Viewport Width): "vw" is similar to "vh" but is relative to the viewport's width. For example, 25vw is 25% of the viewport width. In summary, "px" is an absolute unit, "rem" and "em" are relative units based on font sizes, and "vh" and "vw" are relative units based on the viewport's dimensions. Each of these units has its use case in web design, allowing for both fixed and responsive layouts.
This is the best course I watched around 25 video and I am still watching to complete. I will rate this course 5 out 5 because the quality of the content is great.
Harry bhai literally i was waiting for this topic video as i have learned html, css from your old videos but I am always confused in the size so this video helped me a lot thank u . Best development tutorial by Harry bhai...❤❤❤
Hello harry bhaiya, whatever you do in (Format documents) which will remove the horizontal scroll bar, you can also do the short cut trick (Alt + Z) which will remove the horizontal scroll bar. 🙏🙏🙏
Summary of lecture 22 CSS Sizing Unit 1. Pixels are a common unit and It is 1/96th of an inch. 2. Viewport units (VH and VW) are responsive units that adjust to the size of the Screens. Viewport = the browser window size 3. Using VH instead of pixels can prevent horizontal scroll bars on devices. 4. VW is useful for setting the width of an element equal to the any device width 5. margin: auto can be used to center elements horizontally. 6. em - Relative to the font-size of the element (2em means 2 times the size of the current font) 7. rem - relative to font-size of the root element 8. v min - Relative to 1% of viewport's* smaller dimension 9. vmax - Relative to 1% of viewport's* larger dimension 10. % - Relative to the parent element #SigmaBatchOP
12:36 The units em and rem have the same function but they apply differently. They have the same measurements i.e 1 em/rem = 16px The answer is 24 px. The answer is 36 px.
love you harry bro your obedient pupil from Pakistan , I have learned your web development course now i am in JS series and also see your new videos sigma web development. I am very happy you are the best harry the best tutor the best man in my life who will changed my life. guys this is web development course . there is no course like this in whole RU-vid . Don't miss this course i love you harry bro.What will i say to you no words with me for your thanks .harry is the best harry is the best
Hi Harry! I have started learning Python from your videos and your stuff is quite easy and useful even for very beginners like myself. I have a request for you, I wish you could teach us Ruby language. I don't know if someone has already requested it or not. But it would be awesome if you're gonna do it, thanks.
Unit Description cm centimeters mm millimeters in inches (1in = 96px = 2.54cm) px * pixels (1px = 1/96th of 1in) pt points (1pt = 1/72 of 1in) pc picas (1pc = 12 pt)
NOTES:- class 22: 1. Pixel is the 196th of an inch. 2. vw means viewport width 3. Margin auto will center 4. Margin Auto does not work on inline elements. 5. english phrase:- but a lot is yet to come 6. Default font size is 16 but mera 14 aa raha hai 7. em means default's {n} times or font size of inherited size of parent x {n} 8. HTML is the root element 9. rem same as em but the value is not taken by parent but roor element 10. % unit means {n%} of parent's 11. min-width is the minimum width of the element
12:36 font-size will be 24px because, the original font-size it was about to inherit from the root was 12px. So, since it is now 2em, the font-size will be twice of the font-size of the root (html element) which totals up to 24px. (2 times font-size of root element)
"Code With Harry, your tutorials are like a guiding light in the world of coding! 🌟 Your explanations are crystal clear, and your passion for teaching truly shines through every video. Thank you for making the complex world of coding so accessible and enjoyable. Keep up the fantastic work! 💻🚀"
00:03 Different CSS sizing units and their uses. 02:12 Different units of CSS sizing - px, rem, em, vh, vw, % 06:15 CSS sizing units include px, rem, em, vh, vw, and %. 08:09 CSS sizing units: important units are VH, VW, px, rem, em 12:10 CSS sizing units - px, rem, em, vh, vw, % & more 14:06 Understanding CSS sizing units - px, rem, em, vh, vw, %, vmin, vmax 18:26 Understanding CSS sizing units 20:26 CSS sizing units: px, rem, em, vh, vw, % 24:44 CSS sizing units include px, rem, em, vh, vw, and %.
1. You wrote lorem 56 because 5 and 6 closely placed on the keyboard. Thus, it is easy for you to type lorem 56. 2. According to this question, font size = 2em = 2xparent size element = 2x12= 24 px 3. if font size is 18 px, then 2em = 2x18 = 36 px 4. vmin in phone = width
16:21 vmin will be the width of the screen of your phone because it is minimum, but in case of laptop or desktop screen, vmin will be the height of the screen.
In phone the vmin would be width and in the compute it will be height 12:22 font-size will be 12 x 2 = 24px 13:21 font-size will be 18 x 2 = 36px Sigma Batch Op
#Answers 6:49 kyun ke you are a lazy assassin 12:31 24px kyun ke p ko default size 12px mila tha or em us ka double hota hai 13:19 36px hoga kyun ke parent ka font size 18px hai or p par us ka double lage ga mtlb 36px 16:24 width hogi Sigma Batch OP
agar app rem ko em kar dijeye ga toh bhi aapko 24px hi milega kyun ki uska apna ko font-size nahi hai toh wo root ke font size pe hi dependent hai isliye rem karein ya em dono me usse 24px hi milega
#SigmaBatchOP Harry Bhaiya aapka ye - lets roll the intro - vali joh energy hai ye mujhko haar baar motivate krti hai even college se sham ko aane ke baad thak jate hai pr aapki ye videos me jo energy level hota hai na saach me humlogo tak ye energy ki wave aati hai 😁👍
Harry Sir I'm Vaibhav I'm in class 11th i am studying by your lectures as my hobby following them to become a good programmer and give indian people a biproduct of this study that will help to improve lives Sir One Question Please Answer me Sir I'll Do Btech or BCA+MCA
13:19 Since the font-size of the .container class is set to 18px, as we all know by now that according to cascade algorithm, the specificity of the class selector is greater than that of the element selector, and hence, the font-size = 18px will be applied to the .container class and since the font-size of the p tag which is a descendant of the .container class, is set to 2em, it will be double of the font-size of .container class which will be equal to 2 times 18px = 36px.
SIGMA BATCH OP in the chat guys. let's take some time to appreciate this man. The amount of enthusiasm and knowledge he has in the teaching is appreciable love you harry bhai keep doing such things, help a lot.
12:39 2em = 24 because as we have given 12px to root element which is html the same value will come for the para as well so 12*2 =24 so the answer is 24px #SigmaBatchOP
aapne lorem56 isliye likha ki aap bahot aalsi ho, kyunki 5 aur 6 baju baju me hi hai on keyboard. muje aapka ye aalsi pn bahot pasand hai Harry Devtaa.
Cannot stress how much helpful this course has been so far. I am learning so many things which i didnt know. Thank you Harry Bhaiya for making this course free. Its helping me alot #sigmabatchOP
1-#HarryBhai is Very ALSi. That's why he always uses 34 , 45 , 56 , Means two digits that are very near. 2-When U already given 12 font size to HTML So font size will be inherited and that's why 2rem = 12 * 2 = 24px 3-In this Scenario u have given .container 18px font size so Para will inherit 18px from container rather than HTML so font size this time is 18 * 2 = 36px
12:38 font size 32 hoga kyuki by default element ka size 16 hai and 2m means usme 2 multiply hoga toh 16*2=32 ye hoga font size mera logic galat gya bhaiya
12:05 anyone getting confused between em and rem because I got stuck here for a good amount of time. First, remove the 'comment out' of font-size under .container selector and then change font-size in .container p from em to rem, you will get the result.
2em kar denge to 16*2=32 hoga becoz by default font size 16px hota hai edit :sorry mera galat ho gya hai, chuki hmara root html font size 12 hai to container ka font size v 12 hoga kyuki 12 pura html ka h jise root kahte hain so 12*2=24 font size hoga jaha 2em hai
