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:
https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

? 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/items?itemName=ritwickdey.LiveServer
? vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
? Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
? 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/docs/Web/CSS
? MDN CSS Basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
? MDN CSS Selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
? MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/color
? MDN - CSS Values and Units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
? MDN - The Box Model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
? MDN - Styling Lists: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists
? MDN - Display Property: https://developer.mozilla.org/en-US/docs/Web/CSS/display
? MDN - Floats: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
? MDN - Columns: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
? MDN - Margin Collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
? MDN - White-Space: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

? Typography Resources:
? MDN: Fundamental Text and Font Styling - https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
? CSSFontStack.com: Websafe Fonts - https://www.cssfontstack.com/
? MDN: Styling Links - https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

? Color Resources:
? Coolors Contrast Checker: https://coolors.co/contrast-checker/112a46-acc8e5
? WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
? Coolors Palette Generator: https://coolors.co/
? HTML Color Codes: https://htmlcolorcodes.com/

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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