🎨 CSS — From Fundamentals to Advanced

A structured CSS learning journey covering core styling, layouts, responsive design, positioning, Flexbox, transforms, animations, and hands-on practice.

📊 Quick Repository Stats

📁 Levels	📝 Total Files	🧩 Practice Sets	🚀 Capstone Projects
4	52+	6	1

---

🧭 Table of Contents

• 📖 About This Repository
• 🗺️ CSS Learning Roadmap
• 📚 Level 1 — CSS Fundamentals
• 🎨 Level 2 — Backgrounds & Positioning
• 📐 Level 3 — Layout & Responsive Design
• ✨ Level 4 — Transforms & Animations
• 🧩 Practice Sets
• 🚀 Project Showcase
• 📁 Repository Structure
• ▶️ How to Run
• 🧠 Learning Approach
• 📈 Skills Covered
• 🔮 Future Roadmap
• 🎯 Learning Progression
• 💡 Why This Repository Exists
• 🧑‍💻 Author

---

📖 About This Repository

This repository documents a practical, hands-on journey through Cascading Style Sheets (CSS) — progressing systematically from core styling fundamentals to modern responsive layouts and interactive animations.

🌟 Key Highlights

• 🟢 Progressive Difficulty: Step-by-step curriculum starting with element displays up to keyframe animations.
• 🧩 Practice-Driven: Every core concept is accompanied by dedicated practice sets (Practice Sets 3–8).
• 📱 Modern Layout Techniques: In-depth exploration of Flexbox, Media Queries, and Mobile-First responsive design.
• 🚀 Real-World Capstone: Hands-on integration of all learned concepts into a complete CSS project.

---

🗺️ CSS Learning Roadmap

🟢 LEVEL 1 — CSS Fundamentals
      └── Display • Padding • Opacity • Core Selectors
            ↓
🟡 LEVEL 2 — Backgrounds & Positioning
      └── Background Gradients • Stacking Context (z-index) • Absolute/Relative Positioning
            ↓
🔵 LEVEL 3 — Layout & Responsive Design
      └── Flexbox Layouts • Breakpoints • Media Queries • Flexible Containers
            ↓
🟣 LEVEL 4 — Transforms & Animations
      └── 2D/3D Transforms • Translate • Scale • Keyframe Animations
            ↓
🚀 CAPSTONE PROJECT
      └── Complete CSS Web Project combining all concepts

---

📚 Level 1 — CSS Fundamentals

Location: Level-1/

The foundation of the learning journey. Covers core CSS syntax, display behaviors, element spacing, and opacity.

📌 Topic	📂 Location	🎯 Focus
Alpha / Opacity	Level-1/alpha.html	Transparency, RGBA color values, and layer visibility
Display Property	Level-1/display.html	Block vs. Inline vs. Inline-block element layouts
Padding & Spacing	Level-1/padding.html	Internal box-model spacing and padding boundaries
Basic Styling	Level-1/style.css	Core CSS properties, colors, fonts, and selectors
Practice Set 3	Level-1/practics set -3/	Hands-on exercises for selectors and basic styling
Practice Set 4	Level-1/practics set -4/	Intermediate layout and display practice exercises

---

🎨 Level 2 — Backgrounds & Positioning

Location: Level-2/

Building upon basic styling by introducing visual enhancements, background control, and precision element positioning.

📌 Topic	📂 Location	🎯 Focus
Backgrounds	Level-2/background.html	Background colors, images, gradients, and sizing
Positioning	Level-2/position.html	Static, Relative, Absolute, and Fixed positioning
z-index	Level-2/z-index.html	Stacking context and 3D layer hierarchy management
Practice Set 5	Level-2/practics set -5/	Applied positioning and background layout challenges

---

📐 Level 3 — Layout & Responsive Design

Location: Level-3/

Modern frontend layout techniques enabling web pages to fluidly adapt across desktop, tablet, and mobile displays.

📌 Topic	📂 Location	🎯 Focus
Flexbox Layout	Level-3/flexbox.html	1D flexible containers, main/cross axes, alignment
Media Queries	Level-3/media-query.html	Screen breakpoints and conditional responsive CSS
Responsive Design	Level-3/responsive.html	Fluid typography, relative units (%, rem, vw)
Practice Set 6	Level-3/practics set -6/	Responsive layout building exercises
Practice Set 7	Level-3/practics set -7/	Complex Flexbox layout challenges

---

✨ Level 4 — Transforms & Animations

Location: Level-4/

Adding dynamic motion, interactive hover effects, keyframes, and transformations to bring user interfaces to life.

Transform  ──>  Translate  ──>  Scale  ──>  Keyframe Animation  ──>  Practice Set 8

📌 Topic	📂 Location	🎯 Focus
CSS Transforms	Level-4/transform.html	2D/3D matrix, rotation, and skew transformations
Translate	Level-4/translate.html	Smooth element relocation along X, Y, and Z axes
Scale	Level-4/scale.html	Interactive element scaling, zooming, and transitions
Keyframe Animations	Level-4/animation.html	@keyframes, animation timing, delays, and iteration
Practice Set 8	Level-4/practics set -8/	Creative animation and transformation challenges

---

🧩 Practice Sets

Dedicated exercise modules designed to reinforce theoretical learning with real code practice:

🧩 Practice Set	📂 Repository Path	🎯 Core Learning Objective
Practice Set 3	Level-1/practics set -3/	Core CSS properties, text formatting, basic color rules
Practice Set 4	Level-1/practics set -4/	Box model manipulation, padding, margin, display block/inline
Practice Set 5	Level-2/practics set -5/	Card positioning, overlays, z-index layering, background images
Practice Set 6	Level-3/practics set -6/	Responsive media query breakpoints & adaptive navigation
Practice Set 7	Level-3/practics set -7/	Flexbox alignment, direction, wrap, and space distribution
Practice Set 8	Level-4/practics set -8/	Hover animations, scale transitions, keyframe movement

---

🚀 Project Showcase

Location: project/

The capstone project combines concepts from all four levels into a functional, styled web page.

🚀 Project	🛠️ Tech Stack	📂 Directory Link
CSS Practice Project	HTML5 + Custom CSS3	project/

🛠️ Features Implemented

• 🎯 Semantic HTML5 markup structure (index.html)
• 🎨 Custom CSS Design using modular styling rules (style.css)
• 📦 Flexbox Layout Architecture for header, main content, and footer
• 📱 Responsive Design across mobile, tablet, and desktop viewports
• ✨ Interactive States featuring smooth CSS hover and transition effects

---

📁 Repository Structure

CSS/
├── 🟢 Level-1/                      # CSS Fundamentals
│   ├── 📄 alpha.html
│   ├── 📄 display.html
│   ├── 📄 padding.html
│   ├── 🎨 style.css
│   ├── 📂 practics set -3/
│   └── 📂 practics set -4/
│
├── 🟡 Level-2/                      # Backgrounds & Positioning
│   ├── 📄 background.html
│   ├── 📄 position.html
│   ├── 📄 z-index.html
│   ├── 🎨 style.css
│   └── 📂 practics set -5/
│
├── 🔵 Level-3/                      # Layout & Responsive Design
│   ├── 📄 flexbox.html
│   ├── 📄 media-query.html
│   ├── 📄 responsive.html
│   ├── 🎨 style.css
│   ├── 📂 practics set -6/
│   └── 📂 practics set -7/
│
├── 🟣 Level-4/                      # Transforms & Animations
│   ├── 📄 animation.html
│   ├── 📄 scale.html
│   ├── 📄 transform.html
│   ├── 📄 translate.html
│   ├── 🎨 style.css
│   └── 📂 practics set -8/
│
├── 🚀 project/                      # Capstone Project
│   ├── 📄 index.html
│   └── 🎨 style.css
│
└── 📖 README.md                     # Documentation

---

▶️ How to Run

Because this repository uses native HTML5 and CSS3, no build steps, Node packages, or external dependencies are required.

Option 1 — Direct Browser (Simplest)

1. Navigate to any folder (e.g., Level-1/).
2. Double-click any .html file (e.g., display.html).
3. The page will immediately open in your default browser.

Option 2 — VS Code Live Server (Recommended)

1. Open this repository folder in Visual Studio Code.
2. Install the Live Server extension (ritwickdey.LiveServer) if not already installed.
3. Right-click any .html file and select "Open with Live Server".
4. Enjoy hot-reloading as you edit and experiment with CSS properties!

Option 3 — Python Local Server

Run a local HTTP web server using Python from your terminal:

python3 -m http.server 8000

Then navigate to http://localhost:8000 in your web browser.

---

🧠 Learning Approach

This repository adheres to a practical, iteration-focused learning framework:

Learn Concept  ──>  Write Code  ──>  Practice Set  ──>  Experiment  ──>  Build Project

1. 📚 Learn: Study fundamental property specifications and mechanics.
2. 💻 Code: Hands-on implementation of standalone concepts.
3. 🧩 Practice: Solve targeted problem sets in Practice Sets 3–8.
4. 🔬 Experiment: Modify values, test edge cases, and inspect layout behavior in browser DevTools.
5. 🚀 Build: Synthesize knowledge by creating complete project UIs.

---

📈 Skills Covered

• CSS Fundamentals: Selectors, specificity, box model, cascade rules
• Display Types: Block, inline, inline-block, display none
• Spacing & Sizing: Margins, padding, width/height, box-sizing
• Colors & Transparency: Hex, RGB/RGBA, alpha channel opacity
• Background Styling: Colors, background images, gradients, cover/contain
• Element Positioning: Static, relative, absolute, fixed, sticky
• Layering & Depth: z-index, stacking contexts, overlay creation
• Flexbox Layout: Containers, flex directions, justify-content, align-items, flex-wrap
• Responsive Design: Viewport meta tags, media query breakpoints, fluid dimensions
• CSS Transforms: 2D/3D translate, scale, rotate, skew
• CSS Animations: Keyframe definitions, animation-duration, timing functions
• Practical Problem Solving: Solved 6 dedicated practice problem sets
• Project Integration: Multi-component webpage styling and architecture

---

🔮 Future Roadmap

Note: The following topics are planned for future learning expansion and advanced CSS study.

• ⬜ CSS Grid Layout: 2D grid systems, grid template areas, implicit/explicit grids
• ⬜ CSS Custom Properties: Native CSS variables (var(--primary-color)) & dynamic themes
• ⬜ Advanced Selectors: Pseudo-classes (:has(), :is(), :where(), :nth-child())
• ⬜ Modern CSS Functions: Fluid sizing with clamp(), min(), max(), and math operations
• ⬜ Web Accessibility (a11y): Focus states, high-contrast modes, reduced-motion queries
• ⬜ Modern CSS Architecture: Modular methodologies (BEM, ITCSS, Utility-First)
• ⬜ Advanced UI Animations: View transitions, scroll-driven animations, 3D CSS transforms

---

🎯 Learning Progression

CSS Basics
   ↓
Spacing & Display
   ↓
Backgrounds & Opacity
   ↓
Positioning & z-index
   ↓
Flexbox Architecture
   ↓
Responsive Design & Media Queries
   ↓
2D/3D Transforms
   ↓
Keyframe Animations
   ↓
Practice Sets (3–8)
   ↓
Capstone CSS Project

---

💡 Why This Repository Exists

"The best way to master CSS is to write code, break layouts, fix specificity bugs, and build real projects step by step."

This repository documents a dedicated journey of mastering CSS from first principles. By combining isolated topic files with practical practice sets and a real project, it serves as a personal knowledge base and structured reference guide for modern frontend styling.

---

🧑‍💻 Author

Built and maintained with passion as part of a continuous frontend development learning journey.

---

⭐ If you find this repository helpful for your learning, consider giving it a star! ⭐

Happy Coding! 🚀