Top 30 CSS Practice Exercises for Advanced with Solutions

11. Create a text animation where letters rotate individually in a wave-like motion.

Expected Output:

Each letter rotates in sequence to create a wave effect.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the text animation */ </style> </head> <body> <h1 class="wave">Wavy Text</h1> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

12. Build a responsive masonry layout for images using only CSS.

Expected Output:

Images are displayed in a masonry-style grid.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the masonry layout */ </style> </head> <body> <div class="masonry"> <img src="img1.jpg" alt="Image 1" /> <img src="img2.jpg" alt="Image 2" /> <img src="img3.jpg" alt="Image 3" /> <img src="img4.jpg" alt="Image 4" /> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

13. Design a hover effect where a button reveals hidden text below it.

Expected Output:

Hovering over the button reveals the hidden text with a smooth transition.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the hover reveal effect */ </style> </head> <body> <button class="reveal-button">Hover Me</button> <div class="hidden-text">This text is revealed on hover!</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

14. Style an interactive pie chart using only CSS.

Expected Output:

A pie chart with three colored slices.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the pie chart */ </style> </head> <body> <div class="pie"></div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

15. Create a CSS-only dropdown menu with smooth open and close animations.

Expected Output:

The dropdown smoothly opens and closes on hover.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the dropdown menu */ </style> </head> <body> <div class="menu"> <button class="menu-button">Menu</button> <ul class="dropdown"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

16. Design a button that "melts" into the background when clicked.

Expected Output:

Clicking the button makes it shrink and fade into the background.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the melting effect */ </style> </head> <body> <button class="melt-button">Click Me</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

17. Implement a responsive hexagonal grid layout for items.

Expected Output:

Items are displayed in a hexagonal grid that adjusts on smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the hexagonal grid */ </style> </head> <body> <div class="hex-grid"> <div class="hex">1</div> <div class="hex">2</div> <div class="hex">3</div> <div class="hex">4</div> <div class="hex">5</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

18. Create a gradient border animation for a div.

Expected Output:

The div displays an animated gradient border.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the gradient border animation */ </style> </head> <body> <div class="animated-border">Content</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

19. Design a tooltip with an arrow that dynamically changes position based on hover location.

Expected Output:

The tooltip appears above, below, left, or right of the button based on the hover position.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the dynamic tooltip */ </style> </head> <body> <div class="tooltip-container"> <button class="tooltip-button">Hover Me</button> <div class="tooltip">Tooltip Text</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

20. Build a responsive split-screen layout with different scrolling speeds for each section.

Expected Output:

The two sections scroll at different speeds.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the split-screen layout */ </style> </head> <body> <div class="split-screen"> <div class="section slow">Slow Scroll</div> <div class="section fast">Fast Scroll</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

2 of 3