Top 30 CSS Practice Exercises for Intermediate with Solutions

11. Design a progress bar that fills based on a given percentage.

Expected Output:

The progress bar fills to the specified percentage.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the progress bar */ </style> </head> <body> <div class="progress-bar"><div class="fill"></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.

12. Create a responsive layout with two columns on desktop and one column on mobile.

Expected Output:

The boxes appear side by side on large screens and stack vertically on smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the responsive layout */ </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</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.

13. Use CSS Grid to create a layout with a header, sidebar, main content, and footer.

Expected Output:

The sections are arranged in a grid layout.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the grid layout */ </style> </head> <body> <div class="container"> <header>Header</header> <aside>Sidebar</aside> <main>Main Content</main> <footer>Footer</footer> </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. Create a tooltip that appears when hovering over a button.

Expected Output:

A tooltip appears above the button when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the tooltip */ </style> </head> <body> <div class="tooltip"> <button>Hover Me</button> <span class="tooltip-text">Tooltip text</span> </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. Design a button with a gradient background and smooth color transitions.

Expected Output:

The button has a gradient background that transitions smoothly.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the button */ </style> </head> <body> <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.

16. Add an effect to make text appear with a typing animation.

Expected Output:

The text appears one letter at a time, simulating typing.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the typing animation */ </style> </head> <body> <h1 class="typing">Hello, World!</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.

17. Create a modal dialog box with a semi-transparent background.

Expected Output:

A modal appears in the center of the page with a semi-transparent background.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the modal */ </style> </head> <body> <button id="openModal">Open Modal</button> <div class="modal"> <div class="modal-content"> <p>This is a modal!</p> <button id="closeModal">Close</button> </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. Use clip-path to create a hexagonal-shaped image.

Expected Output:

The image is displayed in a hexagonal shape.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to clip the image into a hexagon */ </style> </head> <body> <img src="example.jpg" alt="Hexagon Image" class="hexagon" /> </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 pricing table with three columns and hover effects on each column.

Expected Output:

Each column has a hover effect to highlight it.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the pricing table */ </style> </head> <body> <div class="pricing-table"> <div class="card">Plan A</div> <div class="card">Plan B</div> <div class="card">Plan C</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. Create a loading spinner using only CSS animations.

Expected Output:

The spinner rotates continuously.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the spinner */ </style> </head> <body> <div class="spinner"></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