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
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.
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.
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.
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.
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.
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.
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
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
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
- Choose a challenge you'd like to work on.
- Navigate to the respective directory (
button-challenge
,square-root-challenge
,skinning-challenge
,tuktuk-challenge
,snake-game-template-challenge
,text-animation-challenge
, orgoogle-challenge
). - Open the
index.html
file in your preferred code editor. - Modify the HTML and CSS code to complete the challenge objectives.
- Test your solution in a web browser to ensure it functions as expected.
- Once you're satisfied with your work, commit your changes and submit a pull request to this repository.
- 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! 🚀