Skip to content
/ CSS-Challenges Public

Welcome to "CSS Challenges"! This repository is designed for developers who want to enhance their CSS skills through a variety of hands-on challenges. Each challenge is tailored to cover specific CSS techniques, from basic styling to advanced layouts, animations, and responsive design.

License

MIT license
10 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

oussemamansouri/CSS-Challenges

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

210 Commits
Challenge 01 How to Add CSS
Challenge 01 How to Add CSS
 
 
Challenge 02 CSS Comments
Challenge 02 CSS Comments
 
 
Challenge 03 CSS Colors
Challenge 03 CSS Colors
 
 
Challenge 04 CSS Background Properties
Challenge 04 CSS Background Properties
 
 
Challenge 05 CSS Borders
Challenge 05 CSS Borders
 
 
Challenge 06 CSS Margins
Challenge 06 CSS Margins
 
 
Challenge 07 CSS Padding
Challenge 07 CSS Padding
 
 
Challenge 08 CSS Height, Width, and Max-width
Challenge 08 CSS Height, Width, and Max-width
 
 
Challenge 09 CSS Outline
Challenge 09 CSS Outline
 
 
Challenge 10 CSS Box Model
Challenge 10 CSS Box Model
 
 
Challenge 11 CSS Text Styling
Challenge 11 CSS Text Styling
 
 
Challenge 12 CSS Fonts
Challenge 12 CSS Fonts
 
 
Challenge 13 CSS Icons
Challenge 13 CSS Icons
 
 
Challenge 14 CSS Combinators
Challenge 14 CSS Combinators
 
 
Challenge 15 CSS Pseudo-classes
Challenge 15 CSS Pseudo-classes
 
 
Challenge 16 CSS Pseudo-elements
Challenge 16 CSS Pseudo-elements
 
 
Challenge 17 CSS Attribute Selectors
Challenge 17 CSS Attribute Selectors
 
 
Challenge 18 CSS Lists
Challenge 18 CSS Lists
 
 
Challenge 19 CSS Table
Challenge 19 CSS Table
 
 
Challenge 20 CSS Layout - The display Property
Challenge 20 CSS Layout - The display Property
 
 
Challenge 21 CSS Layout - The Position Property
Challenge 21 CSS Layout - The Position Property
 
 
Challenge 22 CSS z-index
Challenge 22 CSS z-index
 
 
Challenge 23 CSS Opacity & Transparency
Challenge 23 CSS Opacity & Transparency
 
 
Challenge 24 CSS Overflow
Challenge 24 CSS Overflow
 
 
Challenge 25 CSS Float and Clear
Challenge 25 CSS Float and Clear
 
 
Challenge 26 CSS Flexbox
Challenge 26 CSS Flexbox
 
 
Challenge 27 Responsive Design with CSS Media Queries
Challenge 27 Responsive Design with CSS Media Queries
 
 
Challenge 28 Grid Layout Model
Challenge 28 Grid Layout Model
 
 
Challenge 29 CSS Math Functions & Counters
Challenge 29 CSS Math Functions & Counters
 
 
Challenge 30 Grid Layout & Flexbox Example
Challenge 30 Grid Layout & Flexbox Example
 
 
Images
Images
 
 
.gitattributes
.gitattributes
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 

Repository files navigation

CSS Challenges

Welcome to CSS Challenges – a carefully crafted collection of hands-on tasks designed to boost your CSS proficiency. Whether you're a beginner learning the ropes or an experienced developer refining your skills, this repository provides a practical, challenge-based approach to mastering CSS.

📁 Repository Structure

  • Each challenge includes a detailed problem description in a .md file.
  • Solutions are available in accompanying .html and .css files.
  • Challenges are organized by difficulty, ranging from beginner to advanced levels.

🚀 Getting Started

  1. Browse the challenge list and choose one that matches your skill level.
  2. Read the description carefully and attempt to solve the challenge.
  3. Review the provided solution to compare approaches and techniques.
  4. Experiment and iterate to deepen your understanding.

🎯 What You'll Learn

  • Layout systems like Flexbox and Grid
  • Responsive design principles
  • Animations and transitions
  • Use of CSS variables and custom properties
  • Pseudo-classes and pseudo-elements
  • Advanced selectors and specificity
  • Many more essential CSS concepts

🌟 Start building real skills through real practice — dive into the CSS Challenges now!

About

Welcome to "CSS Challenges"! This repository is designed for developers who want to enhance their CSS skills through a variety of hands-on challenges. Each challenge is tailored to cover specific CSS techniques, from basic styling to advanced layouts, animations, and responsive design.

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

10 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages