{}
Learn web design and development
Free interactive courses
← Back to CSS
77

Curated CSS resources: documentation, generators and practice

Use this lesson as a practical map of reliable CSS resources so you know where to look for reference, compatibility, experimentation and inspiration without wasting time on noisy search results.

How much do you know about CSS?

📘 Theory

Reliable technical documentation

This should be the first stop when you need to understand how a feature actually behaves.

1

MDN CSS

The main reference for properties, selectors, values and practical guides.

  • https://developer.mozilla.org/en-US/docs/Web/CSS
2

web.dev Learn CSS

A modern, structured path that moves from fundamentals to more advanced CSS topics.

  • https://web.dev/learn/css/
3

CSSWG Drafts

Useful when you want to track newer CSS features closer to the specification level.

  • https://drafts.csswg.org/

Practice and experimentation

CSS gets learned faster when you test ideas and see results immediately.

1

CodePen

Fast prototyping for snippets, layouts and isolated UI experiments.

  • https://codepen.io/
2

Frontend Mentor

Real design challenges for practicing responsive layout and component work.

  • https://www.frontendmentor.io/
3

CSS Battle

A playful way to sharpen visual precision and creative problem solving with CSS.

  • https://cssbattle.dev/

Generators and utilities

Use tools to save time on repetitive tasks without giving up control.

1

CSS Gradient

An editable gradient generator that helps you move faster while still understanding the resulting code.

  • https://cssgradient.io/
2

Can I Use

The go-to compatibility map for checking browser support before adopting a feature in production.

  • https://caniuse.com/
3

Animista

A practical library of CSS animations you can tweak instead of starting from a blank file every time.

  • https://animista.net/

🧪 Learn by doing

Example Demo: which resource to open first A simple decision map for matching a CSS problem to the right kind of resource.
⌄

🏁 Challenges

Challenge Challenge: research checklist Complete a small guide for investigating a CSS feature before using it in a real project.
⌄

🧰 Resources

Useful links

MDN CSS web.dev Learn CSS CSS-Tricks Can I Use CodePen
Test

Check your knowledge with a test about CSS.

Test for CSS
Course resources 78
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 76
Footer component: responsive layout and sticky footer logic

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com