Create different animations on a rectangle, like moving it horizontally or vertically, changing the color or opacity. Control the animations properties and keyframes and see how it looks!

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Play around with these properties.

Play with css flexbox by adding new items to a container and editing container or individual items properties.

Play with making a grid of squares bigger or smaller while keeping them in neat rows and columns.

Adjust different color filters for an image with pure css!

Add a list of items to a page and try changing position for individual items and see where will they go.

Experiment with a large list of pseudo classes divided into groups by their purpose.

Visualize an rectangle, circle, image or cube. Try stretching it, rotating it, or moving it around like you're playing with a toy.