CSS Crash Course

What is CSS (Cascading Style Sheets)?

And how do you use in on a webpage? In this episode we talk about how to use CSS on an HTML page. CSS Specificity Rules that control how those styles are applied, and the general workflow of how to write styles with good naming methodologies such as BEM.

Next, we talk about styling in frameworks like React. And how to debug & modify styles on the go using google chrome/firefox dev inspector tools.

Then, we go back to the basics! What is a CSS Box Model, and what are some properties you should be aware of? From there, we transition into CSS tooling such as Frameworks, CSS Grid, Flexbox, and more! We talk about responsive webdesign, and ways to achieve using media queries and calc() functions.

Lastly, we cover more CSS variables, transformation properties, and pseudoselectors! We discuss other resources we found helpful online when first learning CSS, and additional topics we'll cover in future episodes!

---

Shownotes

• 00:30 - Intro End
• 00:50 - What is CSS and how does it work?
• 02:30 - How do you select HTML elements on the page? (internal stylesheet, external stylesheet, inline-styles)
• 04:35 - Selector types CSS - html elements, custom classes, id elements
• 06:35 - Specificity Rules and the !important flag
• 09:40 - When should I start writing CSS?
• 12:40 - Different naming and styling methodologies - SMACSS, BEM, Sass, Utility
• 15:10 - Styling in React, CSS-in-JS
• 16:25 - Using the chrome/firefox dev inspector tools to inspect CSS
• 17:50 - Box Model - Content Padding Border Margin (Curly Padme Barfed Mechanically)
• 21:00 - Box-sizing: Border-box. Inline strokes vs outline strokes
• 23:00 - History of positioning in CSS and floats
• 25:00 - Bootstrap and CSS Frameworks
• 28:00 - CSS Grid vs Flexbox
• 32:00 - CSS Subgrid
• 32:50 - HTML Tables vs. Flexbox Tables for responsive webdesign
• 35:30 - Responsive CSS Design. Use position:absolute sparingly!
• 37:30 - CSS calc() function
• 38:27 - CSS variables
• 40:40 - Pseudoselectors :before and :after
• 42:40 - Transformation Property CSS
• 44:00 - Sass and compilation process into CSS
• 46:00 - Resources
• 47:30 - Stuff we haven't talked about! SVGs, animations, HTML Canvas, Scss
• 50:40 - CSS Zen Garden - styling the same site with different CSS!
• 52:25 - DESSERT TIME! - Fitness and CalNewport's book on DeepWork!
• 57:01 - Outro Start

Links

• Tailwinds 2.0
• CSS Specificity Rules
• 30 CSS Selectors must memorize
• CSS Box Model
• Chrome Dev Inspector Tools
• Bootstrap
• Flexbox Froggy - video game
• CSS Grid Garden - video game
• CSS Grid
• CSS Variables
• DevTips - youtube tutorials CSS
• CSS Zen Garden
• Cal Newport - Deep Work Book