Last Updated on May 11, 2021 by Neil Murray
General CSS #
My approach to using z-index
Absolute, Relative, Fixed Positioning
CSS Specificity: Things You Should Know
Hacks for dealing with specificity
Why em instead of px?
font-weight:700 or font-weight:bold which one we should follow in css?
CSS selectors ul li a {…} vs ul > li > a {…}
Four methods of adding CSS to HTML
The Current Generation of CSS3 Selectors
CSS Guidelines #
Front-End-Standards / Stylesheets / CSS.md
csswizardry- CSS-Guidelines
Improving Code Readability With CSS Styleguides
Code Guide by @mdo
CSS Techniques #
A Complete Guide to Flexbox
A Complete Guide to CSS Media Queries
HINT.css
Understanding CSS Filter Effects
CSS Tools #
CSScomb – makes your code beautiful
CSS Specificity Graph Generator
CSS Stats
CSS Comments #
CSS Coding Standards – Commenting
WordPress Core CSS Commenting Example
CSS Audit #
CSS Audits: Taking Stock of Your Code
A Quick CSS Audit and General Notes About Design Systems
CSS Chat Summary: 27th February 2020
CSS Flexbox #
A Complete Guide to Flexbox
CSS Flexbox Tutorial for Beginners (With Interactive Examples)
Understanding Flexbox: Everything you need to know
The Ultimate Guide to Flexbox — Learning Through Examples
Solved by Flexbox
The Difference Between Width and Flex-Basis
Learn Flexbox– learn how to use Flexbox with this Flexbox visualization tool
Flexbox CSS generator
Flexbox playground and code generator
Flexbox Froggy – a game for learning CSS flexbox
CSS Grid #
Why CSS Grid is better than Bootstrap for creating layouts
Learn CSS Grid in 5 Minutes
A Complete Guide to Grid
Grid Garden
CSS Grid By Example: Everything you need to learn CSS Grid Layout
CSS calc() #
Mozilla Developer Network (MDN) documentation – calc
WebPlatform Docs
CSS Positioning #
CSS Float Theory: Things You Should Know
CSS Positioning 101
CSS Shapes #
CSS Shapes 101
Clipping and Masking
Compositing and Blending
CSS Filters
Ribbon Badge in Pure CSS Tutorial
CSS Browser Hacks & Prefixes #
Browserhacks – extensive list of browser specific CSS and JavaScript hacks
What are these CSS Hacks anyway? What do they have to do with fixing broken web sites?
Targeting IE10 & IE11 Browsers with CSS
CSS Hacks Targeting Firefox
CSS Browser Prefixes #
Cutting down on vendor prefixes
Pleeease – Vendor Prefixes
prefixMyCSS – Vendor Prefixes [SUPERCEDED]
React CSS Styling #
LEARN #
Courses #
Learn CSS Layout
Learn to Code HTML & CSS
Tutorials #
CSS Beginner Tutorial
Hands-on CSS3
Videos #
Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough
GENERAL #
Developer Tools #
Chrome Dev Tools
Firebug
https://getfirebug.com/wiki/
http://www.evotech.net/blog/2007/06/introduction-to-firebug/
http://www.youtube.com/watch?v=sHbYpl1XFiM
http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
Cross Browser Compatibility #
http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
http://www.vsellis.com/5-css-tips-for-cross-browser-compatibility/