A better way to sharpen
your CSS skills

Improve your CSS skills by implementing real designs. CSSKatas will provide immediate feedback for your solutions.

Demo

Try it out

We've prepared 3 demos for you.
Let's see if you can implement these designs with pure CSS.

(We also provide a Tailwind CSS version of these demos.)

Modify the code below to make the upper button match the design below.

Hint To make a div looks like a button, we need some spaces between the text and the border. Check padding - CSS: Cascading Style Sheets - MDN for how to set paddings with CSS.

Congratulations! You've practiced how to control paddings.

Now we need to adjust background color and text color.

Modify the code below to make the upper button match the design below.

Hint Check background-color - CSS: Cascading Style Sheets - MDN and color - CSS: Cascading Style Sheets - MDN for how to set background color and text color.

Congratulations! You've learned how to set paddings and colors.

In this last demo, we'll learn something more complicated: how to align two buttons.

Modify the code below to make the upper buttons match the design below.

Hint This buttons-container is a flexbox. Check justify-content - CSS: Cascading Style Sheets - MDN for how to control spaces between these two buttons.

Sign up for early access

Drop us your email and we'll send you an early invitaion as soon as CSSKatas is ready.