css-course
Unofficially sponsored by Lucid (as in, I'm teaching this at work so they're paying me to do it 😁).
I'm teaching this class at work using internal slides. I'm trying to make as much of it open as possible and I'll be putting that stuff here.
Week 1: Intro
- CSS vs HTML: https://www.codingdojo.com/blog/html-vs-css-inforgraphic
- How to apply CSS to HTML: https://codepen.io/electrovir/pen/PooNjXq?editors=1100
- Where to put CSS: https://codepen.io/electrovir/pen/LYYNyRb?editors=1000
- Debugging CSS
- LESS advantages: https://codepen.io/electrovir/pen/RwwRNRw?editors=1100
Week 2: Shadow DOM
- CSS gotcha, misaligned Divs: https://codepen.io/electrovir/pen/mddRWwa?editors=1100
- Specificity: https://codepen.io/electrovir/pen/LYYxyMY?editors=1100
- https://specifishity.com (as in fish, not 💩)
- DIY: https://codepen.io/electrovir/pen/dyGZwmV?editors=1100
- DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
- Only need to read intro info
- Shadow DOM: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
- Only need to "High-level view"
- Web Components: https://codepen.io/electrovir/pen/zYYNdbp
- :host() vs :host-context(): https://codepen.io/electrovir/pen/JjjEgQv?editors=1000
- :host vs :host(): https://codepen.io/electrovir/pen/BaaWjzv?editors=1000
- Selector Combinators: https://codepen.io/electrovir/pen/bGGqpGd?editors=1000
- Lobotomized Owl: https://codepen.io/electrovir/pen/LYPdRyZ?editors=0100
- Original article: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
- Universal selector is not bad: https://www.telerik.com/blogs/css-tip-star-selector-not-that-bad
Week 3
- CSS gotcha, body default styles: https://codepen.io/electrovir/pen/BaadJbx?editors=1100
- Box Model: https://codepen.io/electrovir/pen/NWKJJQa?editors=1100
- Inline vs Block elements: https://codepen.io/electrovir/pen/MWWvmPe?editors=1100
- Centering: https://codepen.io/electrovir/pen/Exxvbop?editors=1000
- Flexbox
- Flexbox basics: https://codepen.io/electrovir/pen/RwwZMVz?editors=1100
- Flexbox centering: https://codepen.io/electrovir/pen/PooKeYb?editors=1100
- Flexbox centering DIY: https://codepen.io/electrovir/pen/LYYzGJp?editors=1100
- Flexbox grow, shrink, basis: https://codepen.io/electrovir/pen/yLLzazq?editors=1100
- Flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox
- Flexbox bugs (mostly IE): https://github.com/philipwalton/flexbugs
- Grid
- Grid basics: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
- Grid everything: https://css-tricks.com/snippets/css/complete-guide-grid/
Week 4
- Indirect width restriction: https://codepen.io/electrovir/pen/LYYQgoG?editors=1100
- Colors and LESS color functions: https://codepen.io/electrovir/pen/gOOvjgv?editors=1100
- Relative sizing: https://codepen.io/electrovir/full/yLLKPJG
- CSS units: https://codepen.io/electrovir/full/PooQdao
- Positioning: https://codepen.io/electrovir/pen/WNNzEbq?editors=1000
- Managing overflow: https://codepen.io/electrovir/pen/NWWYwyO?editors=1100
Week 5
- CSS gotcha, whitespace: https://codepen.io/electrovir/pen/xxxmoxV?editors=1000
- Animations: https://codepen.io/electrovir/pen/bGGOQGm?editors=0100
- Animated hiding / showing: https://codepen.io/electrovir/pen/eYYbxEx
- Dynamically applying CSS: https://codepen.io/electrovir/pen/wvvNPGx?editors=0010
- Media queries: https://codepen.io/electrovir/pen/QWWYaVG?editors=1100
Week 6
- Flexbox Holy Albatross: https://codepen.io/heydon/pen/ebQyYV?editors=1100
- column to row switcher
- original article: https://www.heydonworks.com/article/the-flexbox-holy-albatross
- revised: https://www.heydonworks.com/article/the-flexbox-holy-albatross-reincarnated
- ::after pseudo element: https://codepen.io/electrovir/pen/gOONjNm?editors=0100