30 CSS Basic Exercises for Advanced with Solutions

Master advanced CSS skills with our comprehensive list of top 30 exercises. Dive into coding challenges that improve your understanding and proficiency in CSS, setting a solid foundation for professional-level challenges. Start your journey to CSS mastery today!

Learning Objectives:

Exercise Instructions:

Start with the first exercise and attempt to solve it before checking the hint or solution.
Ensure you understand the logic behind each solution, as this will help you in more complex problems.
Use these exercises to reinforce your learning and identify areas that may require further study.

1. Create a responsive grid layout where items rearrange based on screen size using only CSS.

Expected Output:

The items rearrange into a grid layout of two columns on larger screens and one column on smaller screens.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the responsive grid layout */ </style> </head> <body> <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</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. Build a multi-layer parallax effect with at least three background layers.

Expected Output:

The background images scroll at different speeds, creating a parallax effect.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the parallax effect */ </style> </head> <body> <section class="parallax"></section> <div class="content">Content goes here...</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.

3. Design a card with a hover flip effect and custom 3D rotation angles.

Expected Output:

The card flips with a 3D effect when hovered.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the hover flip effect */ </style> </head> <body> <div class="card"> <div class="front">Front</div> <div class="back">Back</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.

4. Create a CSS-only carousel with sliding images.

Expected Output:

The images slide automatically from left to right in a loop.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the sliding carousel */ </style> </head> <body> <div class="carousel"> <div class="slide"><img src="img1.jpg" alt="Image 1" /></div> <div class="slide"><img src="img2.jpg" alt="Image 2" /></div> <div class="slide"><img src="img3.jpg" alt="Image 3" /></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.

5. Style a progress bar that shows progress in real-time using animations.

Expected Output:

The progress bar animates to show progress from 0% to 100%.

Code In Css

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

6. Build a star rating system with interactive hover effects for selecting a rating.

Expected Output:

Hovering over the stars highlights them up to the hovered star.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the star rating system */ </style> </head> <body> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</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.

7. Design a circular progress indicator with animation that fills based on a percentage.

Expected Output:

The circular progress indicator animates to show the given percentage.

Code In Css

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

8. Implement a CSS-only hamburger menu that toggles on click.

Expected Output:

Clicking the hamburger icon toggles the menu.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the CSS-only hamburger menu */ </style> </head> <body> <div class="hamburger-menu"> <input type="checkbox" id="toggle" /> <label for="toggle">☰ Menu</label> <div class="menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </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.

9. Create a CSS timeline layout for events.

Expected Output:

Events are displayed in a vertical timeline with connecting lines.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the timeline */ </style> </head> <body> <div class="timeline"> <div class="event">Event 1</div> <div class="event">Event 2</div> <div class="event">Event 3</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.

10. Build a CSS clock face with moving hour, minute, and second hands.

Expected Output:

The clock hands move to indicate the current time.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the clock */ </style> </head> <body> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></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.

1 of 3