A complete CSS learning and practice repository containing class-wise exercises, concepts, layouts, responsive designs, animations, transitions, and a final Amazon Clone UI project.
This repository documents my journey of learning and practicing HTML & CSS from the basics to building a complete website interface.
This repository contains all my practical work while learning CSS.
I have organized the practice into different classes, with each class focusing on a specific CSS concept.
- HTML & CSS Basics
- CSS Selectors
- Colors & Backgrounds
- Text & Fonts
- Box Model
- Width & Height
- Margins & Padding
- Borders
- Display Property
- Inline, Block & Inline-Block
- CSS Units
- Position Property
- Background Images
- Flexbox
- Media Queries
- CSS Transitions
- CSS Animations
- Navigation Bar
- Responsive Web Design
- Practical UI Development
CSS-Practice-file/
│
├── class 1/
├── class 2/
├── class 3/
├── class 4/
├── class 5/
├── class 6/
├── class 7/
├── class 8/
├── class 9 navbar/
├── class 10 (inline, block, inline-block)/
├── class 11/
├── class 12 Opacity/
├── class 13/
├── class 14 Units in CSS/
├── class 15 Position/
├── class 16 background image/
├── class 17 Flexbox/
├── class 18 (practice)/
├── class 19 media query/
├── class 20 transitions/
├── class 21/
├── class 22 animation/
│
└── project Amazon Clone/
| Class | Topic |
|---|---|
| 1–3 | CSS Fundamentals |
| 4–6 | CSS Properties & Layout Practice |
| 7–8 | Layout & Styling Practice |
| 9 | Navigation Bar |
| 10 | Inline, Block & Inline-Block |
| 11–13 | CSS Styling & Opacity |
| 14 | CSS Units |
| 15 | Position |
| 16 | Background Images |
| 17 | Flexbox |
| 18 | CSS Practice |
| 19 | Media Queries |
| 20 | Transitions |
| 21 | Advanced CSS Practice |
| 22 | Animations |
| Final Project | Amazon Clone |
As a final practical project, I created an Amazon Clone UI using HTML and CSS.
- Amazon-style navigation bar
- Search bar
- Product sections
- Product cards
- Hero/banner section
- Footer
- Flexbox-based layouts
- CSS styling
- Responsive design concepts
The project helped me apply the CSS concepts learned throughout the course in a real-world interface.
- HTML5
- CSS3
Selectors
Box Model
Display
Position
Flexbox
Units
Backgrounds
Media Queries
Transitions
Animations
Responsive Design
The main goal of this repository is to:
- Build a strong foundation in CSS
- Practice CSS concepts through coding
- Understand website layouts
- Learn responsive design
- Create real-world UI designs
- Improve frontend development skills
- Build projects using HTML & CSS
CSS Basics
↓
CSS Properties
↓
Box Model
↓
Layouts
↓
Flexbox
↓
Responsive Design
↓
Transitions
↓
Animations
↓
Amazon Clone
After completing HTML & CSS, my next focus is to improve my frontend development skills by learning and practicing:
- JavaScript
- DOM Manipulation
- Events
- APIs
- Git & GitHub
- Responsive Projects
- Full-Stack Development
Pushpendra Singh
GitHub: @prepwave
If you find this repository useful, feel free to ⭐ Star the repository.
This repository represents my CSS learning and practice journey from fundamentals to building a real-world Amazon Clone.