< Back to Challenges

CSS Challenges

This CSS Challenges we will help you in strengthening your core css concepts as well help you learn new concepts.


#1 Getting Started

This is basic challenge to refresh on CSS concepts such as border, flex, transform, box-shadow, linear-gradient, etc.

#2 Hamburger Menu Animation CSS & Javascript

This challenge is focused on learning CSS concepts like keyframes, animation, transition, opacity, etc by building a cool hamburger menu icon animation

#3 CSS Loading Animation

In this challlenge, we wil build a awesome CSS Loader / Loading Animation to learn concepts such as css keyframes, animation, transition, opacity etc.

#4 CSS Tooltip Animation

In this challenge, we will create a tooltip animation using css to learn concepts such as CSS transition, pseudo-elements, opacity, visibility, etc.

#5 CSS Todo list Animation

In this challenge, we will create a tooltip animation using css to learn concepts such as CSS transition, pseudo-elements, opacity, visibility, etc.

#6 Modal Popup using HTML CSS & Javascript

In this challenge, we will create Modal Popup to learn concepts such as CSS animation, cursor, border-radius, keyframes etc.

#7 CSS Glowing Bulb / Light Animation

In this challenge, we will create a CSS Glowing Bulb / Light Animation to learn concepts such as CSS Transition, box-shadow, etc.

#8 Custom Cursor in HTML CSS

In this challenge, we will learn how to create a custom CSS Cursor to learn concepts such as CSS animation, borders, etc, and also you will learn javascript concepts of mouse-move event listeners, etc.

#9 Button Animation using HTML CSS

In this challenge, we will create a cool button animation using CSS to learn CSS concepts such as CSS animation, transition, pseudo-elements, etc.

#10 Awesome text carousel animation using CSS

In this challenge, we will create a awesome text carousel animation to learn to learn CSS concepts such as CSS animation, keyframes, position, text-shadow, transform, etc

#11 CSS Newton's Cradle / Pendulam Animation

In this challenge, we will create the Newton's Cradle / Pendulum Animation to learn CSS concepts such as CSS animation, keyframes, position, pseudo-elements, transform-origin, etc.

#12 CSS Flexbox Accordion

in this challenge, we will create a CSS Flexbox Accordion Animation to learn CSS concepts such as CSS animation, keyframes, flexbox etc

#13 CSS Easter Egg Animation

In this challenge, we will create a CSS Easter Egg Animation to learn CSS concepts such as CSS animation, keyframes, flexbox, advanced border-radius etc

#14 CSS Submit Button Animation

In this challenge, we will create a CSS Submit Button Animation to learn CSS concepts such as CSS animation, position, transform-style, backface-visibility, advanced css selectors, etc.

#15 CSS Pagination Animation

In this challenge, we will create a CSS Pagination Animation to learn CSS concepts such as CSS animation, position, transform, transition, advanced css selectors, etc.

#16 SVG Loading Animation using CSS

In this challenge, we will create a SVG Loading Animation using CSS to learn CSS concepts such as CSS animation, transform, transition, svg animation, etc.

#17 CSS Carousel Animation

In this challenge, we will createa a CSS Carousel Animation to learn CSS concepts such as CSS animation, transform, transition, etc