Summary
Keywords
Full Transcript
Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-16_tired-of-wierd-css-units/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp Ever tried giving height in percentage? Or tried experimenting with border in different CSS units? No issues. In this video, we'll go from zero to advanced and discuss the pixels vs percentage vs viewport height (vh) vs viewport width (vw) in depth. If you already know the basics then jump to the experiment and playing around timestamp. I'm 100% sure you'll learn something unique today. After watching this video, you'll have a better understanding of CSS units. Though it's just a beginning, we'll learn how to learn different things and play around them to draw conclusion (even when you are absolutely wrong ;D) So watch the video and share what you learnt! 📖 Chapters 00:00 - Recap 00:51 - Introduction to CSS Units 01:30 - Create a New Project 01:02 - Basic Styling 03:15 - Issue With Width in pixels 04:12 - How does "max-width" Solves Overflow Issue? 05:59 - Different Units in CSS 07:10 - Understand Width in Percentage 09:42 - How does Width in Percentage Works? 10:01 - Why Height doesn't Work in Percentage? 11:26 - Weird Behavior of Body in CSS! 13:38 - Explaining the Reason of Height NOT Working in Percentage and Making It Work 14:46 - Play Around "html" Selector 16:20 - Experiment with Padding in Width vs Padding in Percentage 18:58 - How Padding Behaves with Percentage Unit? 21:59 - Play Around Padding in Percentage 22:45 - How Margin Behaves with Percentage Unit? 23:37 - Try Border in Percentage! 24:41 - Experiment with "font-size" in Percentage 30:55 - How CSS Percentage Unit Related In Different Scenario? 32:49 - Play Around "font-size" with Percentage Unit vs Pixels Unit 36:54 - Learn to Google Your Problem Right Away 38:12 - When Your Conclusion Went Wrong! xD 42:13 - Quick Summary 43:12 - Get Ready for Viewport Height and Viewport Width 44:45 - What is Viewport Width? 45:19 - Quick Assignment - Pause the Video and Google Viewport Width 45:33 - Understand Viewport Width in Depth 50:16 - How to Fix "box-sizing" in CSS? 51:32 - Understand Viewport Height in Depth 54:16 - What to Use: Viewport Width or Viewport Height? 55:34 - Play Around Padding, Margin, and Border in Viewport Width and Viewport Height 59:07 - Experiment with "font-size" in "vw" 01:03:02 - Next Video Topic 01:04:28 - Conclusion 01:06:04 - Outro If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below. Social Media 🌐 Linkedin: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Telegram: https://t.me/+bq8CBsPL3Wc1MjU1 🌐 Discord: https://discord.gg/dMe9mer9B3 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
