CSS
CSS resources
CSS3 Reference by MDN
As with HTML, you don't need to know every CSS property. Use this reference instead.
CSS Tutorial by W3Schools
CSS3 Reference by Codrops
Another excellent CSS reference, this time from Codrops.
CSS Tricks
Excellent articles, guides, and even an almanac, all about front-end development, with a focus on CSS.
The 30 CSS Selectors You Must Memorize
I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.
Tailwindui
Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.
Bootstrap
Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Fonts & icons & svg
Google Fonts
The #1 resource for free and easy-to-use webfonts. Has a huge library of fonts.
SVG REPO
500.000+ Open-licensed SVG Vector and Icons
fontawesome.com
A highly popular icon font, consisting of 1000+ icons spread across countless categories.
fontawesome - cdnjs
cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.
ionic.io
A beautiful and round icon set, very easy to use, and 100% free even for commercial usage.
IcoMoon
Tool to convert icon fonts to SVG icons and sprites. I use it in my advanced CSS course.
iconarhive.com
Over 800,000 free icons / 2,517 iconpacks, without login, without subscription.
Backgrounds & shadows
CSS Gradient
CSS Gradient is a designstripe project that lets you create free gradient backgrounds for your website.
Box Shadows Effects
Text Shadow CSS Generator
This tool allows you to add multiple shadows to your design.
Clippy
A small tool to help you using the new and powerful clip-path property.
SVG background patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
CSS resize Property
The resize property defines if (and how) an element is resizable by the user.
Lorem Ipsum
Colors
Coolors
Create the perfect palette or get inspired by thousands of beautiful color schemes.
Colorhunt Palettes
Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.
Open Color
An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch.
Paletton
A very popular tool which allows you to create color combinations that play well together.
LOL Colors Palettes
Curated color palettes inspiration. Another source for great color palettes.
Tint and Shade Generator
Easily create lighter and darker versions of any base color. Perfect for hovers, borders and gradients.
Animations
CSS Loaders & Spinners
The Biggest Collection of Loading Animations
CSS Loaders & Spinners
This is a collection of with loaders/spinners. There are no image dependencies for this library. It is developed using pure CSS.
loading.io
Animation made easy. With loading.io, making animation becomes so easy that you will probably want to animate everything that can be animated.
CSS animations by Animate.css
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Easing functions
An amazing collection of easing functions bo be used in CSS transitions and animations.
Cubic bezier
Top 50 CSS Buttons (+ animations)
Buttons are not only good for usability, but also an extremely important design element for your website. For this reason, here is a collection of the best CSS buttons!
CSS Transition (CSS Animations Series Part 1)
Animating with CSS Transitions - A look at the transition properties
Animating with CSS Transitions - Using transitions in action
Multi-line underline text-gradient animation
Images, illustrations & videos
Unsplash
My #1 resource for free high-resolution photos. There are more photos here than you can imagine!
Pexels
Another great resource for free stock photos and videos, created by photographers around the world.
unDraw
Hundreds of free and open-source illustrations for your websites, and colors are even customizable.
DrawKit
Hand-drawn vector illustration and icon resources, perfect for your next project.
UI Faces
Avatar photos, perfect for mockups or placeholders. Don't use them for real people.
Coverr
Best resource for beautiful and free videos about every imaginable topic, easily searchable.
Responsive images
In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.
Responsive Images 101, Part 8: CSS Images
When it comes to CSS images, we could always use media queries. So why worry?
`srcset` and `sizes` attributes - images on the web | part one
When lightmode breaks your favicon
CSS Selectors
Flexbox
A Complete Guide to Flexbox
A comprehensive guide to CSS flexbox layout.
Basic concepts of flexbox
The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
Learn CSS Flexbox the easy way
Flexbox Cheatsheet by Darek Kay
Flexbox Cheatsheet by Malven Co.
Controlling ratios of flex items along the main axis
In this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis.
Aligning items in a flex container
Flexbox Tutorial (CSS): Real Layout Examples
Container queries are possible!
Grid
A Complete Guide to CSS Grid
A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Learn CSS Grid the easy way
Flexbox or Grid - How to decide?
Grid Cheatsheet
An Introduction to the `fr` CSS unit
`fr` units in CSS Grid — 2/3 Flexibility
repeat()
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them.
CSS GRID: `auto-fill` & `auto-fit`
The magic of `auto-fit` and `auto-fill` (and the difference between them)
The Difference Between Explicit and Implicit Grids
Grids are flexible enough to adapt to their items: we don’t have to specify each track and we don’t have to place every item manually. This is all handled by the so called explicit and implicit grid.
How the minmax() Function Works
fit-content
The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content.
Build a Mosaic Portfolio Layout with CSS Grid
Custom properties (CSS variables)
Using CSS custom properties (variables)
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
Why we prefer CSS Custom Properties to SASS variables
Some practical examples of how CSS variables can power-up your workflow.
A Complete Guide to Custom Properties
Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as “CSS Variables” but that’s not their real name.
SASS
Learn Sass In 20 Minutes - SASS Crash Course
Style Rules
Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose which elements to style with a selector, and declare properties that affect how those elements look.
Parent Selector
The Sass Ampersand
@if and @else
@mixin and @include
Mixin arguments everything you need to know
How to create and use mixins in SASS
@extend
Other CSS articles
The CSS value of `auto`
Pseudo-elements
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Before and After pseudo elements explained - part one: how they work
CSS Before and After pseudo-elements explained - part two: the content property
CSS Before and After pseudo-elements explained - part three: as design elements
Pseudo-Classes vs Pseudo-Elements. Do you know the difference?
How to use the CSS target pseudo-class
Using media queries
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
CSS for People Who Hate CSS
How Do I Force the Browser to Use the Newest Version of my Stylesheet?
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
How to change overflow y scrollbar styles
::-webkit-scrollbar
The ::-webkit-scrollbar CSS pseudo-element affects the style of an element's scrollbar when it has overflow:scroll; set.
Change the style of an input based on if there is a placeholder
Using the CSS border-image property
Are you using the right CSS units?
Use these instead of vh: svh, dvh, lvh
A new way to do CSS transforms!
Smooth Scrolling with one line of CSS
Stop fighting with CSS positioning
25 lines of CSS is all you need (to start with, anyway)