My 5 favorite front-end cheat-sheets and bookmarks
Tags: css, frontend, beginners
Published: 2019-05-17 18:38:32

---
title: My 5 favorite front-end cheat-sheets and bookmarks
published: true
description: I always have at my fingertips when I'm working
tags: CSS, frontend, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mjxtie4p1pmd9vlkhkbl.png
series: My resources, tools & tips
---

First of all, let me preface this by saying I think it's never a bad idea to go back to basics from time to time.

I'm a firm believer that, no matter how experienced or advanced you are, you should occasionally take some time to revisit the fundamentals of what you do. Don't think of it as taking a step back, think of it more as reinforcing the foundations, to make the house built on them stronger. You tend to find new insights every time you do.⠀

Therefore, even though these posts are mostly aimed at beginners (since I consider myself a beginner as well), maybe some more advanced front-enders will find some of them useful too.

So let's start. Here are **_my favorite cheat-sheets and bookmarks I always have at my fingertips while I'm working_**:


# 1. CSS Grid cheat-sheet
*by Malven Co.*
[grid.malven.co](http://grid.malven.co/)

![CSS Grid cheat-sheet](https://thepracticaldev.s3.amazonaws.com/i/93z017jqxjicgd4gettb.png)

There are many articles and references for Grid, but this one is absolutely my favorite by far. It is a great visual cheat-sheet with all the settings illustrated and shown on a single page so that you can access (and understand) them with a single glance, which is what a cheat-sheet should be!


# 2. CSS Flex cheat-sheet
*by Malven Co.*
[flexbox.malven.co](http://flexbox.malven.co/)

![CSS Flex cheat-sheet](https://thepracticaldev.s3.amazonaws.com/i/gdwj085o01ldln9ygx7m.png)

Same as the previous one, but with Flex.
Yes, I like these so much I gave them 2 slots on my list! :)


# 3. Easing functions
*by [Andrey Sitnik](https://dev.to/iskin) and Ivan Solovev*
[easings.net](https://easings.net/)

![Easing functions](https://thepracticaldev.s3.amazonaws.com/i/m1vflqsg9ibxa8vfrxtg.png)

Linear transitions are so lame, amirite? :)
This one has quite a lot of easing function examples, together with previews for sizes, positions, transparencies and gradients.
Bezier curves included, of course.


# 4. CSS clip-path maker
*by Bennett Feely*
[bennettfeely.com/clippy](https://bennettfeely.com/clippy/)

![CSS clip-path maker](https://thepracticaldev.s3.amazonaws.com/i/w4bimhw3djkt5shhohg2.png)

This one enables you to create & preview clip-paths with just a couple of clicks! It's so easy and intuitive.


# 5. CSS-TRICKS.com
*by a big community of cool people*
[css-tricks.com](https://css-tricks.com/)

![CSS-TRICKS.com](https://thepracticaldev.s3.amazonaws.com/i/4v19aa7018izfn2uauo9.png)

Not exactly a cheat-sheet since I couldn't pick just one feature, the whole website is amazing.
Probably the best CSS resource I've seen so far.


*Do you have other resources that would fit this list? Feel free to leave them in the comments, I'll check them out, and I might also post them in my [Instagram](https://www.instagram.com/vladimir.dev/) story if I like them.*


Have a great week!