Summary
Keywords
Full Transcript
Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-15_css-box-model-with-inline-elements/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp Box Model is BIASED! It behaves differently for Block and Inline Elements. In this video, we'll discuss the scam of span tag along with learning the Box Model Behavior with Inline Elements. We'll see display property in CSS and play around the code to pinch out the issues with inline elements. We'll also learn how to embed a YouTube video and a fully-fledged website inside our site and how "iframe" works. After watching this video, you'll have a clear understanding of inline elements and box model in general. 📖 Chapters 00:00 - Recap 00:44 - Introduction 01:18 - Create a New Project 02:20 - Basic Styling 06:38 - Style Inline element 07:41 - Scam of Span Tag 08:40 - Default Height and Width of Span Tag 09:29 - Behavior of Box Model With Inline vs Block Element 13:30 - Can We Give Height and Width to a Span Tag? 15:07 - Does Padding Work with Inline Element? 15:37 - Understand Padding in CSS on Inline vs Block Element 21:50 - Understand Border in CSS on Inline vs Block Element 23:12 - Understand Margin in CSS on Inline Element 25:00 - Understand Outline in CSS for Inline Element 27:02 - How Display Property Works in CSS? 31:03 - What is "display: inline-block" in CSS? 31:37 - Advantages of Inline-Block Display in CSS 33:36 - Understand Inline-Block Display in Depth 36:35 - Does Box Model Fails for Inline Elements? 36:45 - What are Two Categories of Inline? 37:04 - Understand Replaced vs Non-Replaced Inline Elements in Depth 50:25 - Understand "iframe" Element in CSS 55:11 - How to Embed a Video Using "video" Tag in CSS 59:00 - How to Play an Embedded Video 01:01:35 - How to Embed any Random Website using "iframe" Tag? 01:05:36 - How "display: none" Works? 01:06:35 - Understand "hidden" Attribute and "display: none" 01:08:02 - Quick Summary 01:09:13 - Conclusion 01:10:35 - 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.
