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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy