Code-Yatra
🧳 Code Yatra
Yatra means journey in Hindi — and this is a journey through frontend development, one project at a time.
A growing collection of frontend mini-projects organized by difficulty level — built with pure HTML, CSS, and JavaScript. Each project is live-hosted via GitHub Pages so you can see it in action instantly.
🔗 Live Site
🌐 cat-codes-cc.github.io/Code-Yatra
📁 Project Structure
Code-Yatra/
├── Easy Level/
│ ├── Color Palette/
│ ├── ID Card/
│ └── Restaurant Menu/
├── Medium Level/
│ ├── Friend Profile Card/
│ ├── Music-Player/
│ ├── Photo Gallery/
│ └── Portfolio Landing Page/
├── Hard Level/
│ ├── Calculator/
│ ├── Digital Clock/
│ ├── Portfolio_Dark_Light_Mode/
│ ├── Stone_Paper_Scissors/
│ └── To_Do_List App/
└── Expert Level/
└── Weather App/
🟢 Easy Level
Beginner-friendly projects focused on layout, styling fundamentals, and basic DOM structure.
| # | Project | Source Code | Live Demo |
|---|---|---|---|
| 01 | 🎨 Color Palette | Source Code | Live Demo |
| 02 | 🪪 ID Card | Source Code | Live Demo |
| 03 | 🍽️ Restaurant Menu | Source Code | Live Demo |
Project Descriptions
🎨 Color Palette
A visual color palette display page. Showcases a curated set of colors with their hex codes — great practice for CSS layout, flexbox, and styling fundamentals.
🪪 ID Card
A styled digital ID card component. Demonstrates how to structure and style a card layout using HTML and CSS with attention to spacing, typography, and visual hierarchy.
🍽️ Restaurant Menu
A clean and readable restaurant menu page. Practices organizing content into categories, using lists effectively, and applying consistent typographic styling.
🟡 Medium Level
Intermediate projects involving interactivity, JavaScript logic, and more complex UI patterns.
| # | Project | Source Code | Live Demo |
|---|---|---|---|
| 04 | 👤 Friend Profile Card | Source Code | Live Demo |
| 05 | 🎵 Music Player | Source Code | Live Demo |
| 06 | 🖼️ Photo Gallery | Source Code | Live Demo |
| 07 | 🚀 Portfolio Landing Page | Source Code | Live Demo |
Project Descriptions
👤 Friend Profile Card
An interactive profile card component with hover effects and smooth transitions. Practices CSS animations, card design patterns, and DOM structure.
🎵 Music Player
A functional music player UI with play/pause controls, a track progress bar, and album art display. Practices JavaScript event handling, the Web Audio API, and building custom UI controls.
🖼️ Photo Gallery
A responsive photo gallery with a lightbox/modal view. Practices CSS Grid, JavaScript DOM manipulation, and handling click events to create an interactive browsing experience.
🚀 Portfolio Landing Page
A complete personal portfolio landing page with sections for hero, about, projects, and contact. Practices full-page layout, responsive design, smooth scrolling, and navigation.
🔴 Hard Level
Advanced projects involving JavaScript logic, state management, APIs, and polished UI/UX.
| # | Project | Source Code | Live Demo |
|---|---|---|---|
| 08 | 🧮 Calculator | Source Code | Live Demo |
| 09 | 🕐 Digital Clock | Source Code | Live Demo |
| 10 | 🌗 Portfolio Dark/Light Mode | Source Code | Live Demo |
| 11 | ✂️ Stone Paper Scissors | Source Code | Live Demo |
| 12 | ✅ To-Do List App | Source Code | Live Demo |
Project Descriptions
🧮 Calculator
A fully functional calculator with support for basic arithmetic operations. Practices JavaScript logic, event handling, and building interactive UI components from scratch.
🕐 Digital Clock
A live digital clock that displays the current time updated every second. Practices the JavaScript Date object, setInterval, and real-time DOM updates.
🌗 Portfolio Dark/Light Mode
A portfolio page with a toggleable dark/light mode theme. Practices CSS custom properties (variables), theme switching with JavaScript, and localStorage for persisting user preference.
✂️ Stone Paper Scissors
A playable Stone Paper Scissors game against the computer with score tracking. Practices JavaScript game logic, random number generation, conditional statements, and DOM manipulation.
✅ To-Do List App
A complete to-do list app with add, complete, and delete functionality. Practices CRUD operations in the DOM, localStorage for data persistence, and dynamic list rendering.
🟣 Expert Level
Expert projects involving third-party APIs, asynchronous JavaScript, and real-world app features.
| # | Project | Source Code | Live Demo |
|---|---|---|---|
| 13 | 🌦️ Weather App | Source Code | 🔒 Requires API Key |
Project Descriptions
🌦️ Weather App
A real-time weather app that fetches live weather data for any city using a third-party weather API. Practices fetch, async/await, API integration, JSON parsing, error handling, and dynamic DOM updates based on API responses.
⚠️ Note: Live demo requires a personal API key from openweathermap.org. To run locally, replace
YOUR_API_KEYinscript.jswith your own free key.
🛠️ Tech Stack
🚀 How to Run Locally
# Clone the repository
git clone https://github.com/Cat-Codes-CC/Code-Yatra.git
# Navigate into any project folder
cd "Code-Yatra/Easy Level/Color Palette"
# Open index.html in your browser
open index.html
No build tools, no dependencies — just open index.html in your browser and go!
📌 How Live Links Work
All projects are hosted for free using GitHub Pages. The live link pattern is:
https://cat-codes-cc.github.io/Code-Yatra/<Level>/<Project Name>/index.html
🤝 Contributing
This is a personal learning repo, but suggestions and feedback are always welcome! Feel free to open an issue.
📄 License
This project is open source and available under the MIT License.
👾 About the Creator
This repository is created and maintained by Cat Codes — a channel dedicated to learning frontend development through fun, beginner-friendly mini-projects.
If you find this helpful, consider giving the repo a ⭐ and subscribing on YouTube — it really helps! 🙌
Made with ❤️ by Cat Codes