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
In questa pagina del sito puoi guardare il video online CSS Columns Tutorial for Beginners | Multicolumns without Grid or Flexbox della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Dave Gray 19 aprile 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 26,543 volte e gli è piaciuto 866 spettatori. Buona visione!
