Book Search Website Tutorial | HTML, Tailwind CSS & JavaScript (Full Project with Dark Mode)

🔥 In this step-by-step tutorial, we’ll build a Book Search Website using HTML, Tailwind CSS, and JavaScript – no frameworks required!
Here’s what we’ll create:✅ Search for books using an API✅ Read a preview of any book inside the app✅ Like & save books to your favorites section✅ Filter books by author and rating✅ Add a dark/light mode toggle for a modern UI
This is a beginner-friendly JavaScript project that’s perfect for practicing API integration, responsive UI design with Tailwind, and interactive features. By the end, you’ll have a fully functional book search app that looks clean, responsive, and professional!
📌 What you’ll learn:
* Using JavaScript to fetch and display data from an API
* Tailwind CSS for modern and responsive styling
* Building a like/favorite book section
* Filtering results by author and rating
* Implementing a day/night toggle mode

Code & demo

Code in the style :-
:root {
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-color: #f5f5f5;
--btn-bg: #3c7af6; /* Blue buttons */
--btn-hover: #0041cc; /* Darker blue on hover */
--accent-color: #3fa9f5; /* Light blue for highlights */
--input-bg: #222; /* Dark input bg */
--input-text: #f5f5f5;
}

.light-theme {
--bg-color: #f7f7f7;
--card-bg: #ffffff;
--text-color: #121212;
--btn-bg: #3976ef; /* Keep blue buttons in light theme too */
--btn-hover: #003eaa;
--accent-color: #007bff;
--input-bg: #e0e0e0; /* Light grey search bar */
--input-text: #121212;
}
Source code / demo: https://project-sell-ten.vercel.app

Weather API used: https://www.googleapis.com/books/v1/volumes

Full project files : https://github.com/Fullstack-Vaishnavi

Useful links & resources

TailwindCSS — https://tailwindcss.com

Github Developer Pack 2 lakh of free tools
https://youtu.be/9S_V9qtOJbo?si=hCRmOaRJ8vPvHQ5t
Don't know how to install VS Code watch this https://youtu.be/MVdEsdihyqs?si=k_UXHqK5-caygfY3

👉 Great project for your portfolio and to practice real-world web development skills.

If you found this helpful — please LIKE 👍, SUBSCRIBE 🔔 and leave a comment on what next feature you’d like (e.g., hourly chart, location search, PWA).

Видео Book Search Website Tutorial | HTML, Tailwind CSS & JavaScript (Full Project with Dark Mode) канала Code With Vaish