Web Dev Roadmap for Beginners (Free!): [ Ссылка ]

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 ➜ [ Ссылка ]

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
[ Ссылка ]

🔗 All Resources for this CSS Tutorial Series: [ Ссылка ]

📬 Course Updates ➜ [ Ссылка ]

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: [ Ссылка ]
🔗 Visual Studio Code (VS Code): [ Ссылка ]
🔗 Live Server VS Code Extension: [ Ссылка ]
🔗 vscode-icons VS Code Extension: [ Ссылка ]
🔗 Github Themes VS Code Extension: [ Ссылка ]
🔗 W3C CSS Validator: [ Ссылка ]
🔗 Specificity Calculator: [ Ссылка ]

📚 References:
🔗 MDN CSS: [ Ссылка ]
🔗 MDN CSS Basics: [ Ссылка ]
🔗 MDN CSS Selectors: [ Ссылка ]
🔗 MDN - How to Apply Colors to HTML Elements with CSS: [ Ссылка ]
🔗 MDN - CSS Values and Units: [ Ссылка ]
🔗 MDN - The Box Model: [ Ссылка ]

📚 Color Resources:
🔗 Coolors Contrast Checker: [ Ссылка ]
🔗 WebAIM Contrast Checker: [ Ссылка ]
🔗 Coolors Palette Generator: [ Ссылка ]
🔗 HTML Color Codes: [ Ссылка ]

✅ Follow Me:
Github: [ Ссылка ]
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
Blog: [ Ссылка ]
Reddit: [ Ссылка ]

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

свернуть