Level Up Your CSS with These 38 Resources

1. Layoutit Grid

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project. Also you can see the code on CodePen!

2. CSS Grid Generator by Sarah Drasner

3. Grid by Example

4. CSS Grid Garden

Grow your carrot garden while learning about CSS Grid.

5. Mastery Games

Here you can play around with Zombies and practice Flexbox; save an adorable alien species while learning CSS Grid.

6. Grid Malven

Grid Cheatsheet.

7. CSS Tricks — A Complete Guide to Grid

Comprehensive guide to CSS grid by CSS Tricks.

8. Cubic Bezier

Quickly generate and preview cubic-bezier with this tool.

9. CSS Animation

Create your animations with this easy use tool, it’s also supporting GSAP.

10. CSS Animation 101 E-book

11. CSS Diner

Practice your CSS positioning skills with CSS Diner.

12. Flexbox Patterns

Here you can get a lot of tips and patterns while using Flexbox.

13. Flexbox Froggy

14. Flexbox Cheatsheet

15. Devinduct Flexbox

Preview and see the code for Flexbox.

16. CSS Tricks Almanac

17. Keyframes

Dead simple visual tools to help you generate CSS for your projects.

18. CSS Selectors Cheatsheet

This cheatsheet is designed for a quick search on CSS selectors.

19. CSS Font Stack

Get Web Safe Fonts and much more from Dan’s Tools.

20. Clippy by Bennett Feely

Get your clip-paths and also checkout Bennett Feely’s website to see all his tools.

21. Codrops CSS Reference

An extensive CSS reference with all the important properties and info to learn CSS from the basics.

22. CSS Reference

Yet another CSS Reference resource.

23. Frontend Mentor

Frontend Mentor has a lot projects based on HTML and CSS, you can complete challenges and improve your styles by working on real-life projects.

24. The Code Player

Video style walkthroughs showing cool stuff being created from scratch.

25. CSS DB

cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

26. Border Radius Generator

27. Button Creator

28. Best CSS Button Generator

29. Samantha Ming

30. Specificity Calculator

A visual way to understand CSS specificity. Change the selectors or paste in your own.

31. Clean CSS

Compress your CSS.

32. 100 Days CSS Challenge

33. CSS Layout

A collection of popular layouts and patterns made with CSS.

34. Pattern Generator

35. Free Frontend

Free CSS code examples from codepen.io and other resources.

36. Glassmorphism CSS Generator

37. Smol CSS

Minimal snippets for modern CSS layouts and components.

38. Lottie Files

Free animations.


I hope you liked this post, if you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hulya Karakaya

Hulya Karakaya


Frontend Developer that follows the ABCs (Always Be Coding).