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…

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