The Complete Frontend Development Course | 150 Hours | Zero to Advanced - CSS Box Model Explained in Depth | Part 1 | Frontend Bootcamp Hindi | Ep.13

Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-13_css-box-model-part-1/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp In this video we will learn the basics of CSS Box Model. We'll study width and height in depth and we'll learn the differences between height and width behavior as we use pixels and percentage units. After watching this video you will have a clear understanding of how height and width of a content works! 📖 Chapters 00:00 - Recap: Specificity and Important keyword 00:34 - Introduction to CSS Box Model 00:58 - Create a New Project 02:55 - What is CSS Box Model? 03:55 - Understand Height and Width in CSS 06:33 - Playing Around Height and Width 10:08 - Why Should We NOT Give Absolute Height and Width? 10:56 - Glimpse of Overflow 11:13 - Why Should You Use "max-width" Property? 15:00 - Understand Height in CSS 18:02 - "overflow" Property in CSS 19:55 - Default Value of "overflow" Property in CSS 20:27 - Why Should You Use "min-height" Property? 21:43 - Use CSS Percentage Unit for "width" Property 23:42 - "word-break" Property in CSS 25:07 - Understand Width in Percentage 29:44 - Understand Height in Percentage 36:57 - Height and Width in Pixels 38:35 - Introduction to Padding 39:58 - Conclusion 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