Skip to content

๐Ÿš€ 25 CSS challenges to level up your skills! Perfect for beginners! Each challenge includes a description, starter code, and helpful hints to guide you along the way! ๐Ÿ’ป๐Ÿ”ฅ

License

Notifications You must be signed in to change notification settings

codeskills-dev/advent-of-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

39 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Advent of CSS๐ŸŽ–๏ธ๐Ÿ’ป

Welcome to "Advent of CSS" a repository with CSS challenges for beginners!

advent-of-css

Overview

This repository contains 25 CSS challenges that are designed to help beginners improve their CSS skills. Each challenge comes with a description, some basic HTML code to get started, and any instructions or hints that the learner might need.

How to Use

To get started, simply download/clone this repository to your local machine and start working on the challenges. You can work through the challenges in order, or jump around to the ones that interest you the most.

Each challenge is contained in its own HTML file, and includes a corresponding solution file. Once you've completed a challenge, you can check your work by comparing your code to the solution file.

Don't forget to give this repo a star โญ๏ธ

List of Challenges

  1. Create a webpage with a background color of your choice.
  2. Add a border around an element on the page.
  3. Change the font of a paragraph to a different font.
  4. Center an element horizontally on the page.
  5. Add padding to an element.
  6. Change the font size of a paragraph.
  7. Change the color of text on the page.
  8. Add a hover effect to a button.
  9. Add a shadow to an element.
  10. Create a navigation bar with links to other pages.
  11. Add a background image to the page.
  12. Add a gradient background to an element.
  13. Create a responsive webpage that adjusts to different screen sizes.
  14. Add a transition effect to an element.
  15. Create a dropdown menu in the navigation bar.
  16. Add a sticky header to the page.
  17. Add a tooltip to an element.
  18. Create a progress bar.
  19. Create a table with rows and columns.
  20. Create a form with input fields and a submit button.
  21. Create a responsive grid layout.
  22. Add a transform effect to an element.
  23. Create a flexbox layout.
  24. Add a filter effect to an image.
  25. Add a parallax effect to the page.

Contributing

If you would like to contribute to this repository, checkout the contributing guidelines and please feel free to submit a pull request. We welcome any and all contributions that can help make this repository better!

Author

This repository was created by Paul Ehikhuemen. You can find more guides for web development at Codeskills blog

License

This repository is licensed under the MIT License. You are free to use, share, and modify this content as long as you give credit to the original author.

About

๐Ÿš€ 25 CSS challenges to level up your skills! Perfect for beginners! Each challenge includes a description, starter code, and helpful hints to guide you along the way! ๐Ÿ’ป๐Ÿ”ฅ

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Languages