CSS Tutorial

📚 Topics Covered

📂 Repository Structure

css-tutorial/
│
├── 01-Basics/
│   ├── 01-01-what-is-css.css
│   ├── 01-02-basic-css-format.css
│   ├── 01-03-including-css.css
│   ├── 01-04-color-property.css
│   ├── 01-05-background-color.css
│   ├── 01-06-practice.css
│   ├── 01-07-color-systems.css
│   ├── 01-08-hex-codes.css
│   ├── 01-09-practice.css
│   ├── 01-10-text-align.css
│   ├── 01-11-font-weight-text-decoration.css
│   ├── 01-12-line-height-letter-spacing.css
│   ├── 01-13-css-units-pixel.css
│   ├── 01-14-font-family.css
│   └── 01-15-practice.css
│
├── 02-Selectors/
│   ├── 02-01-universal-selector.css
│   ├── 02-02-element-selector.css
│   ├── 02-03-id-selector.css
│   ├── 02-04-class-selector.css
│   ├── 02-05-practice.css
│   ├── 02-06-descendant-selector.css
│   ├── 02-07-sibling-combinator.css
│   ├── 02-08-child-combinator.css
│   ├── 02-09-attribute-selector.css
│   ├── 02-10-practice.css
│   ├── 02-11-pseudo-class.css
│   ├── 02-12-pseudo-element.css
│   ├── 02-13-cascading-specificity.css
│   ├── 02-14-practice.css
│   ├── 02-15-important-in-css.css
│   └── 02-16-inheritance.css
│
├── 03-Box-Model-Units/
│   ├── 03-01-box-model.css
│   ├── 03-02-height-width.css
│   ├── 03-03-border.css
│   ├── 03-04-border-radius.css
│   ├── 03-05-padding.css
│   ├── 03-06-margin.css
│   ├── 03-07-practice.css
│   ├── 03-08-display-property.css
│   ├── 03-09-inline-block.css
│   ├── 03-10-relative-units-percentage.css
│   └── 03-11-em-rem-units.css
│
├── 04-Transitions-Transforms/
│   ├── 04-01-alpha-opacity.css
│   ├── 04-02-transitions.css
│   ├── 04-03-transform-rotate.css
│   ├── 04-04-transform-scale.css
│   ├── 04-05-transform-translate.css
│   ├── 04-06-transform-skew.css
│   ├── 04-07-box-shadow.css
│   ├── 04-08-background-image.css
│   ├── 04-09-card-hover-effect.css
│   ├── 04-10-position-property.css
│   └── 04-11-practice.css
│
├── 05-Flexbox/
│   ├── 05-01-what-is-flexbox.css
│   ├── 05-02-display-flex.css
│   ├── 05-03-flex-direction.css
│   ├── 05-04-justify-content.css
│   ├── 05-05-flex-wrap.css
│   ├── 05-06-align-items.css
│   ├── 05-07-align-content.css
│   ├── 05-08-align-self.css
│   ├── 05-09-flex-sizing.css
│   └── 05-10-flex-shorthand.css
│
├── 06-Grid-Responsive-Design/
│   ├── 06-01-what-is-grid.css
│   ├── 06-02-grid-model.css
│   ├── 06-03-grid-template.css
│   ├── 06-04-grid-template-repeat.css
│   ├── 06-05-grid-gaps.css
│   ├── 06-06-grid-columns.css
│   ├── 06-07-grid-rows.css
│   ├── 06-08-grid-properties.css
│   ├── 06-09-media-queries.css
│   ├── 06-10-media-queries-orientation.css
│   ├── 06-11-z-index.css
│   └── 06-12-pet-adoption-page.css
│
├── assets/
│   └── images/
│       ├── man.jpg
│       ├── woman.jpg
│       ├── cat.jpg
│       └── dog.jpg
│
├── LICENSE
└── README.md

📝 Learning Approach

📌 How You Can Help

🤝 Connect with Me