A structured collection of my CSS learning journey, including concepts, examples, practice exercises, and implementations created while learning CSS3 and the fundamentals of modern web styling.
- CSS Fundamentals
- CSS Syntax & Formatting
- Including CSS
- Colors & Backgrounds
- Color Systems & Hex Codes
- Text Properties
- Fonts & Typography
- CSS Units
- Selectors
- Combinators
- Attribute Selectors
- Pseudo-classes
- Pseudo-elements
- Cascading & Specificity
!important- Inheritance
- Box Model
- Height & Width
- Borders & Border Radius
- Padding & Margin
- Display Property
- Inline & Block Elements
- Relative Units
em&rem- Opacity
- Transitions
- Transforms
- Box Shadow
- Background Images
- Hover Effects
- Position Property
- Flexbox
- Flex Direction
- Justify Content
- Flex Wrap
- Align Items
- Align Content
- Align Self
- Flex Sizing & Shorthand
- CSS Grid
- Grid Template
- Grid Rows & Columns
- Grid Gaps
- CSS Animations
- Animation Shorthand
- Media Queries
- Responsive Design
z-index
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
This repository contains my implementations and practice code created while learning CSS. The files are organized progressively, starting with basic CSS concepts and moving toward selectors, the box model, transitions, transforms, Flexbox, Grid, animations, and responsive design.
- ⭐ Star this repository if you find it useful!
- 🔗 Share it with your friends and batchmates.
- 🛠️ Contribute by creating a Pull Request if you have more materials to share.
Thank you for visiting! Happy Learning 🚀