CSS Units & Sizes Tutorial for Beginners

In this CSS units and sizes tutorial for beginners, you will learn about the common units of measurement used in CSS including px, rem, em, ch, vw, vh and % for setting sizes in your web pages.

CSS Units & Sizes Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(00:51) Many CSS units to choose from
(01:27) Absolute units - pixels
(02:26) Where NOT to use an absolute value
(03:49) Where you can use an absolute value 
(04:28) Relative units - percent
(07:16) rem units
(09:34) rem vs em units
(10:50) When to use em units
(12:43) ch units
(13:44) Default browser styles
(15:37) CSS Reset 
(16:21) Viewport units - vw and vh
(17:35) When vw units can cause a problem
(19:52) A good use case for vh units

🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course 

⚙ 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/ 

📚 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 

📚 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/ 

#css