Coding_Cohort

# 🚀 Coding Cohort — Web Development Projects **A complete collection of web development projects built during my coding journey.** From HTML basics to full JavaScript DOM projects — all live and deployed!     [](https://laxmanrr.github.io/Coding_Cohort/)

---

📁 Projects

---

1. 🧠 Productivity Dashboard

DOM Project — All-in-one productivity web app

A feature-rich, fully responsive productivity dashboard built with pure HTML, CSS & JavaScript — no frameworks, no libraries. Everything from live weather to a Pomodoro timer, all in one clean interface with 3 switchable themes.

✨ Features:

Feature	Description
⏰ Live Clock & Date	Real-time updating clock with day, date, month, year and AM/PM
🌤️ Live Weather	Current temp, condition, humidity, wind & precipitation for Bhopal via Open-Meteo API
✅ To-Do List	Add tasks with details, mark as ⭐ Important, complete & remove — saved to localStorage
📅 Daily Planner	Hour-by-hour schedule from 6 AM–11 PM, auto-saves every keystroke
💬 Motivation Quotes	Random inspirational quotes on load + refresh button, with offline fallback
⏱️ Pomodoro Timer	25-min work session → 5-min break, with Start / Pause / Reset controls
🎯 Daily Goals	Add goals, tick them off as done, delete — persisted in localStorage
🎨 Theme Switcher	3 beautiful color themes — Teal (default), Dark Charcoal, Warm Rose
📱 Fully Responsive	Works on all devices — mobile (320px), tablet, laptop, desktop

🐛 Bugs Fixed (from original code):

• new date() → new Date() (capital D was missing)
• date.getTarik() → date.getDate() (method didn’t exist)
• date.getyear() → date.getFullYear() (method didn’t exist)
• AM/PM logic was inverted — hours > 12 was wrongly showing “AM”
• Time element was never updated — both lines were setting the date element
• fetchQuote() was defined but never called
• Weather API used "${apikey}" as a plain string, not a variable
• localStorage key mismatch — saving as "dayplanData", reading as "dayPlanData"
• Feature pages not opening — CSS z-index and display conflict fixed
• fullElem pages blocked by nav — fixed with correct top: 80px and z-index: 100

🌐 APIs Used:

API	Purpose	Key Required
Open-Meteo	Live weather for Bhopal	❌ Free, no key
DummyJSON Quotes	Random motivational quotes	❌ Free, no key

💾 localStorage Keys:

Key	Data
currentTask	To-Do tasks array
dayPlanData	Daily planner hour entries
dailyGoals	Goals with done/undone status

📱 Responsive Breakpoints:

Device	Breakpoint	Behavior
Desktop	> 1024px	Full layout, large fonts
Laptop	≤ 1024px	Slightly reduced sizing
Tablet	≤ 768px	Header stacks vertically, 2-col cards
Mobile	≤ 480px	Full single-column layout
Mobile S	≤ 375px	Minimum readable sizes
Landscape	height ≤ 500px	Adjusted for horizontal phones

🗂 File Structure:

Dom_Project_Theme_Changer/
├── index.html      → Full HTML structure, all 6 sections
├── style.css       → All styles + complete responsive CSS
├── script.js       → 9 JS modules, all bugs fixed
└── fav/            → Favicon + custom Aeonik font files

🛠 Tech Stack: HTML5 · CSS3 (Custom Properties, Flexbox) · Vanilla JavaScript (DOM, Fetch API, localStorage, setInterval) · Remix Icons CDN

🔗 Live Demo

📂 Source Code

---

2. 🌐 FYLLA Website

Responsive Modern Website

A dynamic and interactive platform built with modern web technologies, featuring responsive design for all screen sizes and engaging interactive elements.

✨ Features:

• 📱 Fully responsive — desktop & mobile
• 🎨 Modern UI/UX design
• ⚡ Interactive elements for better usability

🛠 Tech: HTML · CSS · JavaScript

🔗 Live Demo

📂 Source Code

---

3. 💻 Web Design & Development Services (9_Web_Developer)

Portfolio / Services Website

A professional website showcasing web design and development services including custom design, development, and SEO strategies.

✨ Features:

• 🎨 Web Design services section
• ⚙️ Web Development services section
• 📈 SEO strategies section
• Clean, professional layout

🛠 Tech: HTML · CSS · JavaScript

🔗 Live Demo

📂 Source Code

---

4. 🛒 Product Showcase Website (7_Product_Showcase_Website)

E-Commerce Style Product Listing

A product showcase website where users can browse a variety of products — from gadgets to apparel — with detailed descriptions and pricing.

✨ Features:

• 🛍️ Product listings with descriptions & prices
• 🖼️ Clean, easy-to-browse layout
• 📦 Great for e-commerce or personal portfolios

🛠 Tech: HTML · CSS

🔗 Live Demo

📂 Source Code

---

5. 📐 Two-Column Flexbox Layout (5_Flex)

Flexbox Practice — Coffee Product Site

A two-column layout website about coffee products, built using CSS Flexbox for a clean and responsive design.

✨ Features:

• 📐 Two-column Flexbox layout
• ☕ Sections: About, Products, Contact
• 📱 Responsive on all screen sizes

🛠 Tech: HTML · CSS · Flexbox

🔗 Live Demo

📂 Source Code

---

6. 🎨 Styled Blog Website with CSS (4_Blog_Web_Site_CSS)

Blog with Full CSS Styling

A sleek and stylish blog website demonstrating clean CSS styling, typography, and a smooth user-friendly design.

✨ Features:

• ✍️ Styled blog posts
• 🖼️ Embedded images with clean layout
• 🧭 Smooth navigation

🛠 Tech: HTML · CSS

🔗 Live Demo

📂 Source Code

---

7. 📩 CSS Contact Us Form (6_Form_in_CSS)

Styled Contact Form

A clean, styled “Contact Us” form with CSS that collects Name, Email, and Message from visitors.

✨ Features:

• 📝 Name, Email & Message fields
• 🎨 Clean CSS styling
• ✅ User-friendly experience

🛠 Tech: HTML · CSS

🔗 Live Demo

📂 Source Code

---

8. 📝 Blog Website (3-2_Blog_Web_Site)

My First Blog — HTML Only

My first blog website built during the early days of my coding journey. Covers personal reflections, lists, and nature — a milestone project!

✨ Features:

• 🗒️ Blog posts with personal content
• 📋 Favorite foods and nature reflections
• 🏗️ Built entirely with HTML

🛠 Tech: HTML

🔗 Live Demo

📂 Source Code

---

9. 📩 Contact Us Form (3-3_Form)

My First HTML Form

A simple and effective Contact Us form — one of my early projects where I learned how HTML forms work.

✨ Features:

• 👤 Name, Email, Phone & Message fields
• 📬 Great starting point for any website

🛠 Tech: HTML

🔗 Live Demo

📂 Source Code

---

10. 🌬️ Tailwind CSS Practice (10_Tailwindcss)

Tailwind CSS Learning Project

Hands-on practice with Tailwind CSS utility classes — building layouts and components with the popular CSS framework.

🛠 Tech: HTML · Tailwind CSS

📂 Source Code

---

11. 📖 Responsive Project (Responsive-Project-3)

Responsive Design Practice

A responsive website project focused on making layouts work beautifully across all screen sizes.

🛠 Tech: HTML · CSS

🔗 Live Demo

📂 Source Code

---

📊 Repository Stats

Language	Usage
CSS / SCSS	64.5%
HTML	27.0%
JavaScript	8.5%

---

🗺️ My Learning Journey

HTML Basics ──► CSS Styling ──► Flexbox ──► Responsive Design
     │
     ▼
Forms & Layouts ──► CSS Frameworks (Tailwind) ──► JavaScript DOM
     │
     ▼
API Integration ──► localStorage ──► Full Projects 🎯

---

👤 Author

Laxman Rathod (Laxmanrr)

“Every expert was once a beginner. Keep building, keep learning!”

---

📄 License

This repository is open source under the MIT License.

---

⭐ **If you find these projects helpful, please give this repo a star!** ⭐