📚 Book Inventory

A responsive Book Inventory web application built with HTML5 and CSS3. This project demonstrates the use of semantic HTML tables, CSS Attribute Selectors, and modern styling techniques to create an organized inventory of books.

This project was created as part of the freeCodeCamp Responsive Web Design Certification project.

---

📸 Preview

Book-Inventory/
│
├── index.html
├── styles.css
└── README.md

---

🚀 Features

• 📖 Semantic HTML table structure
• 🎨 Modern gradient UI
• 📱 Responsive horizontal scrolling
• 🟢 Reading status indicators
• ⭐ Interactive book rating system
• 🧩 CSS Attribute Selectors
• ✨ Hover animations
• ♿ Beginner-friendly and accessible layout

---

🛠 Technologies Used

• HTML5
• CSS3

---

📚 Concepts Practiced

HTML

• Semantic HTML
• Tables
• Table Head (thead)
• Table Body (tbody)
• Table Rows (tr)
• Table Headers (th)
• Table Data (td)
• Span Elements
• Responsive Layout

CSS

• Attribute Selectors
• Linear Gradients
• Border Radius
• Hover Effects
• Inline-block Elements
• Pseudo Classes
• Overflow
• Box Model
• Responsive Design

---

🎯 CSS Attribute Selectors Used

This project focuses on CSS Attribute Selectors.

Exact Match

tr[class="read"]

Targets rows whose class is exactly read.

---

Starts With

span[class^="rate"]

Targets every span whose class starts with rate.

Examples:

<span class="rate one"></span>
<span class="rate two"></span>
<span class="rate three"></span>

---

Contains Word

span[class~="one"]

Targets elements whose class list contains the word one.

Example:

<span class="rate one"></span>

---

📋 Book Inventory

Title	Author	Category	Status
The Three Musketeers	Alexandre Dumas	Historical Novel	Read
The Plague	Albert Camus	Philosophical Novel	To Read
The Metamorphosis	Franz Kafka	Novella	Read
Dead Souls	Nikolai Gogol	Picaresque	Read
Lord of the Flies	William Golding	Allegorical Novel	In Progress
Do Androids Dream of Electric Sheep?	Philip K. Dick	Science Fiction	Read

---

💡 What I Learned

Through this project I learned:

• Building semantic HTML tables
• Using CSS Attribute Selectors
• Creating responsive table layouts
• Styling UI components with gradients
• Working with nested span elements
• Applying hover effects
• Organizing structured data
• Writing clean and maintainable HTML & CSS

---

🔮 Future Improvements

• Dark / Light Theme
• Search Books
• Filter by Status
• Sort by Author
• Add JavaScript Interactivity
• Store Books using Local Storage

---

📜 License

This project is created for educational purposes as part of the freeCodeCamp Responsive Web Design certification project.

Feel free to fork and improve it.

---

👨‍💻 Author

Ashish Kumar Yadav

• GitHub: https://github.com/ashishk5x/
• LinkedIn: https://linkedin.com/in/ashishk5x/