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