CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox

Dave Gray
Dave Gray
17.4 هزار بار بازدید - 2 سال پیش - Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to create CSS columns in this tutorial for beginners. Multicolumns are possible in CSS without using CSS grid or flexbox. In this tutorial, we'll apply columns to multiple HTML paragraphs.

🚩 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 Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox

(00:00) Intro
(00:05) Welcome
(00:26) Setup
(01:01) Creating starting elements
(02:10) Adding columns to a container element
(03:37) Setting a column width
(05:00) columns shorthand
(05:27) column-rule
(06:39) column-gap
(07:05) Top margins and margin collapsing
(09:40) Adding a header to the columns
(11:07) break-inside
(11:43) break-before
(12:54) column-span
(18:16) Revisiting specificity
(20:12) Controlling line breaks with white-space

⚙ 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/
🔗 HTML Special Characters and Entities: https://unicode-table.com

📚 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...
🔗 MDN - Styling Lists: https://developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: https://developer.mozilla.org/en-US/d...
🔗 MDN - Floats: https://developer.mozilla.org/en-US/d...
🔗 MDN - Columns: https://developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: https://developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: https://developer.mozilla.org/en-US/d...

📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - https://developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - https://www.cssfontstack.com/
🔗 MDN: Styling Links - 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: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven

Was this tutorial about the CSS Columns for Beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #columns #multicolumns
2 سال پیش در تاریخ 1401/01/30 منتشر شده است.
17,435 بـار بازدید شده
... بیشتر