CSS Box Model Tutorial for Beginners
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:
• CSS Tutorials for Beginners
🔗 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/...
🔗 vscode-icons VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: https://marketplace.visualstudio.com/...
🔗 W3C CSS Validator: https://jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: https://specificity.keegan.st/
📚 References:
🔗 MDN CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: https://developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: https://developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: https://developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: https://developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: https://coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: https://webaim.org/resources/contrast...
🔗 Coolors Palette Generator: https://coolors.co/
🔗 HTML Color Codes: https://htmlcolorcodes.com/
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
Reddit: / 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
On this page of the site you can watch the video online CSS Box Model Tutorial for Beginners with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 01 March 2022, share the link with friends and acquaintances, this video has already been watched 61,270 times on youtube and it was liked by 1.5 thousand viewers. Enjoy your viewing!
