CSS Journey 🚀

Welcome to my CSS Journey — a collection of small, focused web projects I created while learning HTML and CSS. This repo showcases everything from layout experiments to fun animations, organized into self-contained folders. Each project helps me better understand modern web design concepts.

It contains a Navigation Page through which you can launch the `index.html` file of each folder in your browser.

---

📁 Folder Structure

Each folder represents a separate project. Here's what's inside:

🔧 Core Projects

Folder	Description
ball-bounce-animation	A basic animation using CSS @keyframes to simulate a bouncing ball.
color-practice	Practice with CSS color properties, gradients, and background effects.
create-card	A responsive card design with hover effects and image assets.
creating-navbar	Simple, flexible navigation bar layout using Flexbox.
creating-trafficLight	CSS-only traffic light simulation using transitions.
explore-responsive	Basic responsive layout practice using media queries.
flexbox-test	Hands-on experimentation with Flexbox layout techniques.
font-practice	Font styling practice using Google Fonts and custom typography.
layout-practice	Layout building using sections, columns, and reusable components.
learning-variable	Using CSS custom properties (variables) for theme control.
loading-animation	A creative loading animation using CSS transitions.
ultraedit-clone	A UI clone of the UltraEdit homepage — in pure HTML and CSS.
web-page-structure	Learning to structure semantic HTML and stylize layouts.
zindex-hover-magic	An interactive photo stack that changes on hover using z-index tricks.

---

🗂️ Assets

• Assets-For-Css-Journey/
  Contains images used in various sub-projects, neatly categorized:
  • for-create-card/
  • for-layout-practice/
  • for-ultraedit-clone/
  • for-zindex-hover-magic/

---

🚀 How to Run

1. Clone or download the repo.
2. Open any folder.
3. Launch the index.html file in your browser.
4. Explore the CSS styles in the linked style.css or styles.css.

or,

5. Simply Click Here To Preview Through GitHub

---

✨ What I Learned

• CSS selectors and specificity
• Box model, margin, padding, border
• CSS Flexbox and responsive layout
• CSS animations and transitions
• HTML semantic structure
• Real-world layout cloning (UltraEdit clone)

---

📌 Notes

• Each folder contains its own README.md file for quick project-specific notes.
• This repo will keep growing as I learn more and try out new CSS techniques.

---

📄 License

This project is for educational purposes. Feel free to explore, learn, and use the ideas.

---

🙌 Connect

If you want to give feedback or suggestions, feel free to reach out or fork the repo!

---

  Author: Kundan Kumar Jaiswal
  CSS Journey / Learnings