30 CSS challenges! 🚀

Hello! I am doing 30 css challenges for practice. These challenges are based on the 30 days CSS challenge from Milena Carecho. My goal is to train some code and learn new skills.

How to start

Clone this project on your computer, navigate to the folder you want, just type start index.html and you can see the challenge result.

Challenge 01 - Layered Icon

Skills:

• Create layers using span tag;
• Hover;
• nth-child();
• 2D and 3D transform property;
• Opacity / Transparency;

Challenge 02 - Animated Loader

Skills:

• Animations;

Challenge 03 - Change font color when div change

Skills:

• Css Overflow;
• Animations;

Challenge 04 - Hover effect

Skills:

• ::hover, ::before, ::after;
• Transitions;

Challenge 05 - Pulse effect

Skills:

• Transformations;
• Animations;

Challenge 06 - Lightning effect

Skills:

• nth-child();
• Animations;

Challenge 07 - Animated preloader

Skills:

• nth-child();
• Animations;

Challenge 08 - Heart Beating

Skills:

• nth-child();
• ::before, ::after;
• Animations;

Challenge 09 - Newton's Pendulum

Skills:

• first-child, last-child;
• Animations;
• ::before, ::after;

Challenge 10 - Change Emoji

Skills:

• Animations;
• ::before;
• Gradient background;

Challenge 11 - Hover Effect

Skills:

• z-index;
• Animations;
• ::before, ::hover
• transitions;

Challenge 12 - Fill hover

Skills:

• transform, transition;
• ::before, ::hover;

Challenge 13 - Moving text effect

Skills:

• animations;
• nth-child();

Challenge 14 - Animated text

Skills:

• background clip;
• animations;

Challenge 15 - Floating text

Skills:

• transform, animation;

Challenge 16 - Wally hover

Skills:

• transform, transition;
• ::before, ::hover;

Challenge 17 - Spongebob spin

Skills:

• animations;

Challenge 18 - Avengers blip

Skills:

• :hover;
• nth-child();
• transform;

Challenge 19 - Particles

Skills:

• Css variables;
• nth-child();
• transform;

Challenge 20 - Hover Effect

Skills:

• ::hover, ::before;
• transform, transition;

Challenge 21 - Mario Jump

Skills:

• nth-child();
• animations;

Challenge 22 - Icon effect

Skills:

• ::before, ::after, ::hover;
• animations;

Challenge 23 - Call attention

Skills:

• ::hover;
• transform;

Challenge 24 - Powerpuff Girls

Skills:

• nth-child();
• animations;

Challenge 25 - Animated Checkbox

Skills:

• ::before;
• animations;

Challenge 26 - Mario boss fight

Skills:

• ::before, ::after;
• animations;

Challenge 27 - Hypno effect

Skills:

• ::before, ::after;
• animations;

Challenge 28 - Changing background

Skills:

• animations;

Challenge 29 - Firework

Skills:

• nth-child();
• ::before, ::after;
• animations;

Challenge 30 - Nevermind

Skills:

• transform;