CSS Box Model Tutorial for Beginners

By Dave Gray on youtube.com

More about this content:

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap In this CSS Box Model tutorial for beginners, you will learn about the different layers of the CSS box model and how they work together. You will also learn about CSS box sizing and how to apply the different layers of the CSS box model. šŸš© Subscribe āžœ https://bit.ly/3nGHmNn šŸš€ This lesson is part of a CSS for Beginners tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit šŸ”— All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course šŸ“¬ Course Updates āžœ https://courses.davegray.codes/ CSS Box Model Tutorial for Beginners (00:00) Intro (00:05) Welcome (00:25) Setup (01:26) Exploring the CSS Box Model (04:53) Default Browser Styles (06:32) CSS Reset (07:23) box-sizing (09:17) Styling elements with the box model (12:28) Margin properties and shorthand (15:36) Padding properties and shorthand (17:00) Border properties and shorthand (20:28) Outline and outline-offset (21:53) Turn a box into a circle āš™ Web Dev Tools: šŸ”— Chrome Browser: https://www.google.com/chrome/ šŸ”— Visual Studio Code (VS Code): https://code.visualstudio.com/ šŸ”— Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer šŸ”— vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons šŸ”— Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme šŸ”— W3C CSS Validator: https://jigsaw.w3.org/css-validator/ šŸ”— Specificity Calculator: https://specificity.keegan.st/ šŸ“š References: šŸ”— MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS šŸ”— MDN CSS Basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics šŸ”— MDN CSS Selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors šŸ”— MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/color šŸ”— MDN - CSS Values and Units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units šŸ”— MDN - The Box Model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model šŸ“š Color Resources: šŸ”— Coolors Contrast Checker: https://coolors.co/contrast-checker/112a46-acc8e5 šŸ”— WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ šŸ”— Coolors Palette Generator: https://coolors.co/ šŸ”— HTML Color Codes: https://htmlcolorcodes.com/ āœ… Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven Was this tutorial about the CSS Box Model for beginners helpful? If so, please share. Let me know your thoughts in the comments. #css #box #model