This repository inspired by 33-js-concepts. It's a guide for CSS developers.
π Thank you Leonardo Maldonado
Feel free to translate this repository into your language. All translations will be listed below.
- English β Δ°lker Demir
- Box Model
- Selectors
- Colors
- Spacing
- Pseudo Elements and Classes
- Border and Outline
- Flexbox
- Grid
- Animations
- Overflow and Scroll Snap
- Text and Typography
- Functions
- Units
- Position
- Box Shadow and Filter
- Background and Images
- Z-index
- Media Queries
- Browser Support
- CSS Architectures
- Mobile First Design
- CSS Preprocessors
- π Box Model β MDN
- π CSS: Box-Model - Kudzanayi Dzvairo
- π Understanding the CSS Box-Model - Elad Shechter
- π CSS Box Model for Beginner: Unlocking the Magic of CSS - Afiur Rahman Fahim
- π Six Questions to Understand the CSS Box Model - Demba Siby
- π A Basic Walkthrough of the CSS Box Model - Anna Fitzgerald
- π CSS: Box-Model - Kudzanayi Dzvairo
- π₯ Learn CSS Box Model In 8 Minutes β Web Dev Simplified
- π₯ CSS Box Model Tutorial for Beginners β Dave Gray
- π₯ HTML & CSS for Beginners Part 12: The CSS Box Model β Kevin Powell
- π₯ CSS Box Model β Coding Shuttle by Anuj Bhaiya
- π₯ Learn CSS - Box model β Go Write Code
- π Selectors β MDN
- π CSS selectors cheatsheet & details - nana Jeon
- π Understanding CSS Selectors - Venky Royals
- π Beginner Concepts: How CSS Selectors Work - Chris Coyier
- π Tutorial: CSS Selectors and Their Specificity - Lara AigmΓΌller
- π How to Use CSS Selectors to Style Your Web Page - Peter Lynch
- π₯ Learn Every CSS Selector In 20 Minutes β Web Dev Simplified
- π₯ HTML & CSS for Beginners Part 16: CSS selectors and Specificity β Kevin Powell
- π₯ CSS Selectors | CSS | Tutorial 12 β Mike Dane
- π₯ CSS SELECTORS MADE EASY - HTML CSS Tutorial for Beginners β LearnCode.academy
- π₯ CSS Tutorial β Selectors, Element, Class and ID (3/13) β ColorCode
- π Colors β MDN
- π A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH - Michelle Barker
- π CSS Hex Colors Demystified - Dave Gash
- π Create your design system, part 3: Colors - Sebastiano Guerriero
- π Colors in CSS - Ahmad Shadeed
- π The Ultimate Guide to CSS Colors (2020 Edition) - Alvaro Montoro
- π₯ HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla β Kevin Powell
- π₯ CSS Colors Tutorial for Beginners β Dave Gray
- π₯ CSS Tutorial β Colors, Hex, RGB, RGBA, Predefined Colors (4/13) β ColorCode
- π₯ #23 CSS Colors - CSS Full Tutorial β Dev Dreamer
- π₯ CSS Colors (HTML and CSS tutorial 36) - Harshit vashisth
- π Padding β MDN
- π Margin β MDN
- π CSS Margin vs. Padding: What's the Difference? - Jamie Juviler
- π CSS padding vs margin: how to decide which to use - Nikiya Palombi
- π CSS margin vs. padding - Edidiong Asikpo
- π CSS Margin vs. Padding - AK Janani
- π Everything You Need To Know About CSS Margins - Rachel Andrew
- π₯ Learn CSS Box Model In 8 Minutes - Web Dev Simplified
- π₯ Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing) - Kevin Powell
- π₯ Margin and Padding Deep Dive: The basics - Kevin Powell
- π₯ How CSS Padding and Margin Works - Steve Griffith
- π₯ CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20 - CodeWithHarry
- π A guide to CSS pseudo-elements - Nwose Lotanna
- π CSS Pseudo-Classes β How the :is Pseudo-Class Works with Examples - Dillion Megida
- π How To Use Links and Buttons with State Pseudo-Classes in CSS - Philip Zastrow
- π How CSS pseudo-classes work, explained with code and lots of diagrams - Nash Vail
- π Helpful Pseudo Classes to Know In CSS - Austin Paley
- π₯ Learn CSS Pseudo Elements In 8 Minutes - Web Dev Simplified
- π₯ CSS Pseudo-classes: in 100 Seconds - Fireship
- π₯ Before and After pseudo elements explained - part one: how they work - Kevin Powell
- π₯ CSS Before and After pseudo elements explained - part two: the content property - Kevin Powell
- π₯ CSS Before and After pseudo elements explained - part three: as design elements - Kevin Powell
- π Border β MDN
- π Outline β MDN
- π CSS Border - Suprabha Supi
- π CSS Border & Outline - Uxcel
- π A Complete Guide to CSS Borders and Outlines - SAMUEL L. GARBETT
- π Outline - Sara Cope
- π A Complete Tutorial to Master Styling Properties of CSS Outline - BitDegree
- π₯ Learn CSS borders in 2 minutes π² - Bro Code
- π₯ #18 - CSS Borders - CSS Full Tutorial - Dev Dreamer
- π₯ CSS Tutorial For Beginners 40 - Borders - The Net Ninja
- π₯ Border Vs Outline Explain || CSS Tutorial: 09 - Code Prime
- π₯ CSS Outline vs Border - differences, advantages, and disadvantages - Kevin Powell
- π Flexbox β MDN
- π The Complete Guide to CSS Flexbox - Jobayer Hossain
- π A Complete Guide to Flexbox - Chris Coyier
- π CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet ποΈ - Joy Shaheb
- π An Interactive Guide to Flexbox - Josh Comeau
- π How to Build CSS-only Smart Layouts with Flexbox - Diego Diaz
- π₯ Flexbox CSS In 20 Minutes - Traversy Media
- π₯ Learn flexbox the easy way - Kevin Powell
- π₯ Learn Flexbox in 15 Minutes - Web Dev Simplified
- π₯ CSS Flexbox Crash Course - freeCodeCamp
- π₯ CSS FlexBox Essentials - DevTips
- π Grid β MDN
- π A Complete Guide to CSS Grid - Chris House
- π How to recreate Mediumβs article layout with CSS Grid - Per Harald Borgen
- π Understanding CSS Grid: Creating A Grid Container - Rachel Andrew
- π How to Create a Perfect CSS Grid on Your Website [Sample Layouts] - Clint Fontanella
- π Learn CSS Grid by Building 5 Layouts in 17 minutes - Thu Nghiem
- π grid-area - Mojtaba Seyedi
- π₯ Learn CSS Grid in 20 Minutes - Web Dev Simplified
- π₯ CSS Grid Layout Crash Course - Traversy Media
- π₯ Learn CSS Grid the easy way - Kevin Powell
- π₯ CSS Grid Crash Course 2022 - Tutorial for Complete Beginners - Codevolution
- π₯ CSS Grid in 45 Minutes! - Wes Bos
- π₯ Why I use grid over flexbox for this common layout - Kevin Powell
- π₯ Build Layouts with CSS Grid - The Net Ninja
- π Transforms β MDN
- π Transitions β MDN
- π The Ultimate Guide to Animations in CSS - Anna Fitzgerald
- π CSS Animations: Introduction & Examples - Alex Ivanovs
- π The Guide To CSS Animation: Principles and Examples - Tom Waterhouse
- π CSS Animations Tutorial: Complete Guide for Beginners - Themeisle
- π A Detailed Guide to CSS Animations and Transitions - Mayank Pratap
- π₯ Learn CSS Animation In 15 Minutes - Web Dev Simplified
- π₯ CSS Animation Tutorial - The Net Ninja
- π₯ #32 CSS Animations - CSS Full Tutorial - Dev Dreamer
- π₯ Animating with CSS Transitions - A look at the transition properties - Kevin Powell
- π₯ CSS3 Animation & Transitions Crash Course - Traversy Media
- π Overflow β MDN
- π Scroll Snap β MDN
- π overflow - Sara Cope
- π The CSS Overflow Property - Chris Coyier
- π CSS Overflow β Visible, Scroll, Auto, or Hidden? The Overflow Property Explained - Ihechikara Vincent Abba
- π CSS Overflow: What It Is & How It Works - Jamie Juviler
- π Practical CSS Scroll Snapping - Max Kohler
- π₯ CSS Overflow Property | Visible | Hidden | Scroll | Auto | Overflow-x | Overflow-y in CSS - 38 - Husain Sir
- π₯ CSS overflow, overflow-x, overflow-y - CSS Building Blocks Series - Lesson 9 - Shane Crouch
- π₯ CSS Scroll Snap - FollowAndrew
- π₯ Pure CSS Snap Scrolling with these New CSS Properties! - DesignCourse
- π₯ How to tell an engaging story with the help of CSS - Kevin Powell
- π Font β MDN
- π CSS Basics for Typography - Elad Shechter
- π Typography for Developers - Taimur Abdaal
- π CSS Typography: The Basics - William Craig
- π CA Complete Guide On CSS Typography And Encoding - Aman Mandal
- π Six tips for better web typography - Robin Rendle
- π₯ CSS Text and Fonts Tutorial for Beginners - Typography - Dave Gray
- π₯ 6 simple typography tips to more professional looking sites - Kevin Powell
- π₯ Text & Font Properties in CSS | Typography | Complete Web Development Course #19 - Coding Shuttle by Anuj Bhaiya
- π₯ 9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial - Dani Krossing
- π₯ #22 CSS Fonts - CSS Full Tutorial - Dev Dreamer
- π Functions β MDN
- π A Complete Guide to CSS Functions - Eric Bailey
- π CSS Functions - The Odin Project
- π CSS Functions β How to Use calc(), max(), min(), and clamp() - Ilenia Magoni
- π Functions - web.dev
- π CSS Functions ( Basic ) - Gokulan Dhakshinamoorthy
- π₯ Using the CSS Numeric Functions - min, max, calc, clamp, and minmax - CSS Full Tutorial - Steve Griffith
- π₯ CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr - Dave Gray
- π₯ min(), max(), and clamp() are CSS magic! - Kevin Powell
- π₯ CSS Functions - F8 Official
- π₯ Learn CSS Calc In 6 Minutes - Web Dev Simplified
- π Units β MDN
- π CSS Units Explained - Jess Mitchell
- π The Lengths of CSS - Chris Coyier
- π Fun with Viewport Units - Miriam Suzanne
- π CSS Units Explained... - Cheralathan
- π CSS: Units Of Measurement (px, em, rem, vw, %, etc.) - Sebastian De Lima
- π₯ Learn CSS Units In 8 Minutes - Web Dev Simplified
- π₯ Are you using the right CSS units? - Kevin Powell
- π₯ Units in CSS | px, vw, vh, %, em, rem - Best Practices - Coding Shuttle by Anuj Bhaiya
- π₯ Learn Every CSS Viewport Unit In 10 Minutes - Web Dev Simplified
- π₯ CSS Tutorial: em, rem, vh and vw units + Responsive design Explained - CodeWithHarry
- π Position β MDN
- π position - Chris Coyier
- π Absolute, Relative, Fixed Positioning: How Do They Differ? - Chris Coyier
- π CSS POSITION PROPERTY - Doganaker
- π The CSS Position Property: Everything You Need to Know - Jamie Juviler
- π Ultimate Guide to CSS Positioning - Adarsh gupta
- π Learn CSS Positioning - Ahmad Shadeed
- π₯ Learn CSS Position In 9 Minutes - Web Dev Simplified
- π₯ CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25 - CodeWithHarry
- π₯ CSS Positioning: Position absolute and relative explained - Kevin Powell
- π₯ CSS Position Property | Complete Web Development Course #21 - Coding Shuttle by Anuj Bhaiya
- π₯ CSS Position Tutorial | Learn CSS For Beginners - developedbyed
- π Box Shadow β MDN
- π Filter β MDN
- π box-shadow - Sara Cope
- π CSS Box Shadow - Chris Coyier
- π Getting Deep Into Shadows - Rob O'Leary
- π CSS Box Shadow - Suprabha Supi
- π filter - Chris Coyier
- π₯ CSS Box-Shadow tutorial: the basics - Kevin Powell
- π₯ Become a CSS Shadow Master! Layered CSS Shadows Tutorial - DesignCourse
- π₯ CSS box-shadows - how to make them look good - Kevin Powell
- π₯ I never thought of using CSS filters like this - Kevin Powell
- π₯ CSS Filters! - DevTips
- π Background β MDN
- π Images β MDN
- π background - Sara Cope
- π Perfect Full Page Background Image - Chris Coyier
- π Responsive Images in CSS - Chris Coyier
- π CSS Responsive Image Tutorial: How to Make Images Responsive with CSS - Cem Eygi
- π The Fastest Way to Set CSS Backgrounds - Mateusz
- π₯ #26 CSS Backgrounds - CSS Full Tutorial - Dev Dreamer
- π₯ Background images with HTML & CSS - Kevin Powell
- π₯ Controlling background-images | CSS Tutorial - Kevin Powell
- π₯ Background-image, size, repeat, position - CSS3 tutorial in hindi - urdu - Class - 04 - Husain Sir
- π₯ CSS Background Images and Responsive Image Properties for Beginners - Dave Gray
- π Z-index β MDN
- π Handling z-index - Chris Coyier
- π z-index - Sara Cope
- π CSS Z-Index Not Working? How to Fix It Using Stack Order - Cem Eygi
- π Z-Index Explained: How to Stack Elements Using CSS - Veronika Ivhed
- π My approach to using z-index - David Gilbertson
- π₯ CSS Z Index Property: What is CSS Z-Index, Stacking Order, and Why Your Z-Index Is Not Working? - Cem Eygi Media
- π₯ Solve your z-index issues | z-index and stacking context explained - Kevin Powell
- π₯ CSS: 4 Reasons Your Z-Index Isn't Working - Coder Coder
- π₯ Z-index CSS Tutorial | Z-index Explained in Hindi / Urdu | CSS 45 - Husain Sir
- π₯ CSS Positioning Tutorial #11 - Z - Index & Stacking Order - The Net Ninja
- π A Complete Guide to CSS Media Queries β AndrΓ©s Galante
- π The New CSS Media Query Range Syntax β Preethi Selvam
- π Responsive Layouts, Fewer Media Queries β Temani Afif
- π A Practical Guide to CSS Media Queries β Alex Ivanovs
- π Media Query CSS Tutorial β Standard Resolutions, CSS Breakpoints, and Target Phone Sizes β Cem Eygi
- π₯ Learn CSS Media Query In 7 Minutes - Web Dev Simplified
- π₯ CSS Tutorial: Media Queries Explained | Web Development Tutorials #30 - CodeWithHarry
- π₯ CSS Media Queries Tutorial for Responsive Design - Adrian Twarog
- π₯ Media Query in CSS [Easiest Way] | How To Write Media Queries FAST - Code Bless You
- π₯ How to write media queries in CSS - Coder Coder
- π App & Browser Testing Made Easy β Neha Vaidya
- π The State of CSS Cross-Browser Development β Ahmad Shadeed
- π Finding Cross Browser Compatibility Issues in HTML and CSS β Deeksha Agarwal
- π A guide to cross-browser testing: installing all the things β David Gilbertson
- π Using Feature Detection to Write CSS with Cross-Browser Support β Schalk Venter
- π A Guide To CSS Support In Browsers β Rachel Andrew
- π₯ How to Support All Browsers with Your CSS - Coding in Public
- π₯ Checking for browser support - Kevin Powell
- π₯ Most Important CSS Reset Rule | One Line To Make CSS Cross Browser Compatible | Learn CSS - WebStylePress
- π₯ Cross Browser Flexbox Support + Autoprefixer!! - Tutorial 13 of 20 πͺ - Wes Bos
- π₯ Dealing with Cross Browser Compatibility - Kevin Powell
- π How to Organize Your CSS with a Modular Architecture (OOCSS, BEM, SMACSS) β Claudio Mendonca
- π CSS Architecture β Philip Walton
- π Building a Scalable CSS Architecture With BEM and Utility Classes β Sebastiano Guerriero
- π Thoughtful CSS Architecture β Nathan Rambeck
- π css architecture for design systems β Brad Frost
- π₯ How to build a great CSS architecture? (with CSS guru Adam Argyle) - Fun Fun Function
- π₯ You Probably Need BEM CSS in Your Life (Tutorial) - DesignCourse
- π₯ Improving CSS Architecture with Cascade Layers, Container Queries, Scope, by Miriam Suzanne - W3C
- π₯ Frontend Essentials Feb 2021: CSS Architecture - BASE Events
- π₯ Foundation CSS Tutorial Series | Ep. 3: CSS Architecture and Best Practices - ZURB
- π How To Write Mobile-first CSS β Zell Wk
- π Responsive Design Guidelines: Why You Should Always Design Mobile-First β Zach Saucier
- π What is Mobile First Design? Why Itβs Important & How To Make It? β Vincent Xia
- π Mobile-first CSS β mrmrs
- π Designing Mobile First β Meng To
- π₯ Are you writing responsive CSS the wrong way? - Kevin Powell
- π₯ Mobile First Web Design Tutorial - Adrian Twarog
- π₯ Turning a design from desktop only to mobile friendly - Kevin Powell
- π₯ Grid CSS Responsive Website Layout - "Mobile First" Design - Traversy Media
- π₯ What is Mobile First CSS Code - iEatWebsites
- π Popular CSS Preprocessors With Examples: Sass, Less & Stylus β Anna Monus
- π The Complete Beginnerβs Guide to CSS Preprocessors β NICOLE ABRAMOWSK
- π What is a CSS Preprocessors & Why Use Them β Alyssa Schaad
- π CSS Preprocessors: What? Why?β¦How?! β Sandy Edwards
- π Learn all about CSS Preprocessors with Examples β Simplilearn
- π₯ Why you should use a CSS Preprocessor! SASS, LESS are Better than CSS - Alessandro Castellani
- π₯ CSS Preprocessors Getting Started | SASS and LESS | Practical Examples - CoderOne
- π₯ #03 - What is CSS Preprocessor - CyberDude Networks Pvt. Ltd.
- π₯ What is a CSS Preprocessor? - Drupalize.Me
- π₯ CSS Basics (Part8) β CSS Preprocessors - DevTips