CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox
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: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
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
En esta página del sitio puede ver el video en línea CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox de Duración hora minuto segunda en buena calidad , que subió el usuario Dave Gray 19 abril 2022, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 26,543 veces y le gustó 866 a los espectadores. Disfruta viendo!
