Challenge Descriptions

1. Button Challenge

In this challenge, you'll be tasked with creating visually appealing buttons using HTML and CSS. Your goal is to make buttons that are intuitive and eye-catching. Additionally, you'll implement animations for hover and active states to enhance user interaction. Refer to the button.png image in the images directory for design inspiration.

👉 Click here to watch the video preview

2. Square Root Challenge

For this challenge, your objective is to design a square root interface using HTML and CSS. Refer to the square-root.png image in the images directory for design inspiration.

3. Skinning Challenge

In the Skinning Challenge, challenge is to design the skin of a person using HTML and CSS. You'll be styling various elements of a web page to create a cohesive and visually appealing representation of human skin. Use HTML and CSS to achieve lifelike textures, colors, and shading. Refer to the skin.png image in the images directory for design inspiration.

4. Tuktuk Challenge

For the Tuktuk challenge, you'll be tasked with styling various elements of a web page to create a cohesive and visually appealing theme. Your goal is to design three motorcycle elements using HTML and CSS. Use your creativity to modify the appearance of components to represent these motorcycles. Refer to the tuktuk.png image in the images directory for design inspiration.

5. Snake Game Template Challenge

For the Snake Game Template challenge, your goal is to design a snake game template using HTML and CSS. You'll be tasked with styling various elements of a web page to create a cohesive and visually appealing theme. Modify the appearance of background and other components to suit the snake game template. Refer to the snake.png image in the images directory for design inspiration.

6. Text Animation Challenge

In the Text Animation challenge, you'll be tasked with creating visually appealing text animations using HTML and CSS. Use your creativity to design engaging and eye-catching effects. Refer to the text-animation.png image in the images directory for design inspiration.

7. Google Challenge

In the Google Animation Neomorphism challenge, your goal is to produce a Google homepage template using HTML and CSS, inspired by Google's neomorphism design style. You'll be tasked with styling various elements of the web page to create a cohesive and visually appealing theme. Modify the appearance of text, buttons, backgrounds, and other components to achieve the neomorphism effect. Refer to the google.png image in the images directory for design inspiration.

8. Ball Animation

In Ball Animation, the goal is to make the ball bounce between the two bars indefinitely.This animation utilizes HTML, CSS to create the bouncing effect. You'll need to implement algorithms for calculating the ball's trajectory and handling collisions with the bars to achieve the desired animation. Refer to the ball.png image in the images directory for design inspiration.

👉 Click here to see the animation

9. Loader

In loader animation, the goal is to make the loader rotate indefinitely. This animation utilizes HTML and CSS to create the rotating effect. Refer to the loader.png image in the images directory for design inspiration.

👉 Click here to see the animation

10. Heart Beat

The goal of the heart beat animation is to replicate the beating of a human heart. For design inspiration, refer to the heart.png image in the images directory.

👉 Click here to see the animation

Instructions

1. Choose a challenge you'd like to work on.
2. Navigate to the respective directory (button-challenge, square-root-challenge, skinning-challenge, tuktuk-challenge, snake-game-template-challenge, text-animation-challenge, or google-challenge).
3. Open the index.html file in your preferred code editor.
4. Modify the HTML and CSS code to complete the challenge objectives.
5. Test your solution in a web browser to ensure it functions as expected.
6. Once you're satisfied with your work, commit your changes and submit a pull request to this repository.

Additional Notes

• Feel free to be creative and add your personal touch to the challenges.
• Don't hesitate to ask questions or seek clarification if needed.
• Have fun coding and improving your HTML/CSS skills!
• Check out the developer's website here to see more of their work!

If you have any questions or need assistance, don't hesitate to reach out. Happy coding! 🚀