Skip to content

README.md

Latest commit

 

History

History
203 lines (159 loc) · 4.24 KB

README.md

File metadata and controls

203 lines (159 loc) · 4.24 KB
Raw

🎨 CSS Practice & Amazon Clone

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.

🚀 About This Repository

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.

📚 Topics Covered

  • 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

📂 Repository Structure

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/

🧠 Learning Progress

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

🛒 Amazon Clone

As a final practical project, I created an Amazon Clone UI using HTML and CSS.

Features

  • 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.

🛠️ Technologies Used

  • HTML5
  • CSS3

CSS Concepts

Selectors
Box Model
Display
Position
Flexbox
Units
Backgrounds
Media Queries
Transitions
Animations
Responsive Design

🎯 Goal

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

📈 Learning Journey

CSS Basics
    ↓
CSS Properties
    ↓
Box Model
    ↓
Layouts
    ↓
Flexbox
    ↓
Responsive Design
    ↓
Transitions
    ↓
Animations
    ↓
Amazon Clone

🔮 What's Next?

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

👨‍💻 Author

Pushpendra Singh

GitHub: @prepwave

⭐ Repository

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.