Summary
Keywords
Full Transcript
Starter Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-14_css-box-model-part-2/starter-code Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-14_css-box-model-part-2/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp Ever wondered about the height and width of a content area in a box model? How does padding, border, and margin work exactly? Don't you think our life would be a lot easier if there wasn't anything like box-model! But hey, in this video, we dive deep to find out how box model works for block-level elements. We'll have two quick assignments. Additionally, you'll learn border-radius and outline property in CSS and understand the difference between border and outline property. After watching this video, you'll have a clear understanding of CSS Box Model and you'll be a step closer on pro CSS journey! 📖 Chapters 00:00 - Recap 00:34 - Introduction 00:46 - Open the Previous Project 01:02 - What is "padding" in CSS? 03:09 - Understand Padding in CSS in depth 05:33 - What is "border" in CSS? 07:19 - Understand Border in CSS in depth 10:30 - What is the Problem with "box-sizing" in CSS? 14:55 - Understand "box-sizing" in CSS 22:58 - What is Universal Selector in CSS? 23:43 - More on "box-sizing" in CSS 24:13 - How to Decide the Width and Height of Content Area? 24:49 - What is "margin" in CSS? 30:30 - Understand Margin in CSS 35:56 - Understand "border-radius" in CSS 39:00 - Quick Assignment 1 - Give "border-radius" To Any Random Photo Inside a Circle 40:00 - Solution 1 44:38 - Use Color Picker 45:20 - Can We Give a Negative Value To Margin? 48:50 - Quick Assignment 2 - Google "linear-gradient" Property in CSS 50:18 - What is "outline" Property in CSS? 54:00 - Conclusion 54:19 - Next Video 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.
