🚀 LearnBuildJS

Learn JavaScript by Building Real Projects

LearnBuildJS ek structured learning journey hai jisme aap JavaScript concepts seekhte ho aur unhe real-world projects ke through apply karte ho.
Iska goal hai: Theory kam, practice zyada 💡

---

📌 Why LearnBuildJS?

JavaScript sirf syntax ya theory nahi hai — ye build karne se aata hai.
LearnBuildJS aapko help karta hai:

• JavaScript ko step-by-step samajhne me
• Concepts ko projects ke through apply karne me
• Beginner se confident JS developer banne me

---

🛣️ Learning Paths

Aap apne style ke according koi ek path choose kar sakte ho 👇

🔹 Path 1: Learn First → Build Later

Pehle concepts samjho, phir projects banao

• JS Basics
• Logic Building
• Mini Projects
• Final Practice Projects

🔹 Path 2: Learn While Building (Recommended ⭐)

Project banate-bante hi concepts seekho

• Concept → Instant Implementation
• Real-world thinking develop hoti hai
• Best for hands-on learners

---

📚 Course Structure

🔰 Fundamentals

• JavaScript Introduction
• Values, Variables & Data Types
• Operators & Expressions
• Console & Debugging

🔁 Control Flow

• Conditions (if, else, switch)
• Loops (for, while, do-while)

🧠 Functions & Logic

• Functions & Scope
• Arrow Functions
• Problem Solving with JS

📦 Data Handling

• Arrays & Array Methods
• Objects & Object Operations

🛠️ DOM & Events

• DOM Manipulation
• Event Handling
• Form Handling

---

🧩 Projects You Will Build

Real projects jo aap apne portfolio me add kar sakte ho 👇

• ✅ Counter App
• ✅ Calculator
• ✅ To-Do List
• ✅ Quiz App
• ✅ Weather App
• ✅ Mini Games
• ✅ Final JavaScript Project

---

🎯 Who Is This For?

• 🧑‍🎓 Beginners learning JavaScript
• 💻 Students & freshers
• 🔁 HTML/CSS ke baad JS start karne wale
• 🚀 Portfolio build karna chahne wale

---

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript (ES6+)

No frameworks. No shortcuts. Pure JavaScript.

---

🌐 LearnBuildJS

Learn JavaScript by Building Real Projects

LearnBuildJS is a modern learning platform where you
Learn → Practice → Build → Track Progress — all in one place.

---

🚀 Website Flow

learnbuildjs-website/
│
├── index.html                 # Landing Page
├── about.html                 # About LearnBuildJS
├── roadmap.html               # 3–5 Month Learning Roadmap
├── notes.html                 # Notes listing page
├── projects.html              # Projects listing page
├── dsa.html                   # DSA overview page
├── contribute.html            # Contribution guide
│
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   ├── roadmap.css
│   │   └── notes.css
│   ├── js/
│   │   ├── main.js
│   │   ├── roadmap.js
│   │   └── projects.js
│   ├── images/
│   └── icons/
│
├── notes/
│   ├── javascript/
│   │   ├── intro.md
│   │   ├── variables.md
│   │   ├── operators.md
│   │   ├── conditions-loops.md
│   │   ├── functions.md
│   │   ├── arrays.md
│   │   ├── objects.md
│   │   └── scope-hoisting.md
│   │
│   ├── advanced-javascript/
│   │   ├── closures.md
│   │   ├── promises.md
│   │   ├── async-await.md
│   │   ├── event-loop.md
│   │   ├── call-apply-bind.md
│   │   └── prototype.md
│   │
│   ├── dom/
│   │   ├── dom-intro.md
│   │   ├── selectors.md
│   │   ├── events.md
│   │   └── dom-projects.md
│   │
│   ├── react/
│   │   ├── react-intro.md
│   │   ├── components.md
│   │   ├── props-state.md
│   │   ├── hooks.md
│   │   ├── routing.md
│   │   └── project-structure.md
│   │
│   ├── backend-basics/
│   │   ├── node-intro.md
│   │   ├── express.md
│   │   ├── api.md
│   │   └── auth.md
│   │
│   └── tools/
│       ├── git-github.md
│       ├── vscode.md
│       └── deployment.md
│
├── dsa/
│   ├── basics/
│   │   ├── time-complexity.md
│   │   ├── space-complexity.md
│   │   └── recursion-basics.md
│   │
│   ├── arrays/
│   │   ├── array-basics.md
│   │   ├── sliding-window.md
│   │   ├── prefix-sum.md
│   │   └── practice.md
│   │
│   ├── strings/
│   │   ├── string-basics.md
│   │   ├── two-pointer.md
│   │   └── practice.md
│   │
│   ├── linked-list/
│   │   ├── singly.md
│   │   ├── doubly.md
│   │   └── problems.md
│   │
│   ├── stack-queue/
│   │   ├── stack.md
│   │   ├── queue.md
│   │   └── problems.md
│   │
│   ├── trees/
│   │   ├── binary-tree.md
│   │   ├── bst.md
│   │   └── traversal.md
│   │
│   ├── graphs/
│   │   ├── graph-basics.md
│   │   ├── bfs-dfs.md
│   │   └── problems.md
│   │
│   └── problems/
│       ├── easy/
│       ├── medium/
│       └── hard/
│
├── projects/
│   ├── month-1-foundation/
│   │   ├── project-1-task-tracker/
│   │   │   ├── README.md
│   │   │   ├── index.html
│   │   │   ├── style.css
│   │   │   └── script.js
│   │   └── mini-challenges/
│   │
│   ├── month-2-intermediate/
│   │   ├── project-2-collab-notes-app/
│   │   │   ├── README.md
│   │   │   ├── frontend/
│   │   │   └── backend/
│   │   └── features/
│   │
│   └── month-3-advanced/
│       ├── project-3-learnbuildjs-platform/
│       │   ├── README.md
│       │   ├── client/
│       │   ├── server/
│       │   └── database/
│       └── deployment/
│
└── README.md

🌱 LearnBuildJS – Learning Path

📅 Learning Philosophy

🚀 Day 1–15: Basics + confidence
🛠️ Day 16–45: Real-world JS + Projects
🔥 Day 46–90: Advanced JS + DSA + Placement
🌟 After 90 Days: Open Source + Portfolio + Intern-ready

LearnBuildJS/
│
├── README.md
├── CONTRIBUTING.md
├── ROADMAP.md
├── CODE_OF_CONDUCT.md
│
├── website/
│   └── learnbuildjs-website/
│
├── notes/
│
│   ├── day-wise/
│   │
│   │   ├── day-01/
│   │   │   └── intro-to-js.md
│   │   │
│   │   ├── day-02/
│   │   │   └── variables-datatypes.md
│   │   │
│   │   ├── day-03/
│   │   │   └── operators.md
│   │   │
│   │   ├── day-04/
│   │   │   └── conditions.md
│   │   │
│   │   ├── day-05/
│   │   │   └── loops.md
│   │   │
│   │   ├── day-06/
│   │   │   └── functions.md
│   │   │
│   │   ├── day-07/
│   │   │   └── arrays.md
│   │   │
│   │   ├── day-08/
│   │   │   └── objects.md
│   │   │
│   │   ├── day-09/
│   │   │   └── array-methods.md
│   │   │
│   │   ├── day-10/
│   │   │   └── hof.md
│   │   │
│   │   ├── day-11/
│   │   │   └── dom-intro.md
│   │   │
│   │   ├── day-12/
│   │   │   └── dom-events.md
│   │   │
│   │   ├── day-13/
│   │   │   └── forms-validation.md
│   │   │
│   │   ├── day-14/
│   │   │   └── mini-project-guide.md
│   │   │
│   │   └── day-15/
│   │       └── js-revision.md
│
│   ├── async-js/
│   │   ├── day-16-promises.md
│   │   ├── day-17-async-await.md
│   │   ├── day-18-fetch-api.md
│   │   └── day-19-error-handling.md
│
│   ├── react/
│   │   ├── day-20-jsx.md
│   │   ├── day-21-components.md
│   │   ├── day-22-props.md
│   │   ├── day-23-state.md
│   │   ├── day-24-useeffect.md
│   │   ├── day-25-forms.md
│   │   ├── day-26-routing.md
│   │   └── day-27-project-structure.md
│
│   └── styling/
│       ├── day-28-css.md
│       ├── day-29-bootstrap.md
│       ├── day-30-tailwind.md
│
├── projects/
│
│   ├── beginner/
│   │   ├── day-07-counter-app/
│   │   ├── day-10-calculator/
│   │   └── day-14-todo-app/
│
│   ├── intermediate/
│   │   ├── day-18-weather-app/
│   │   ├── day-19-news-app/
│   │   ├── day-22-quiz-app/
│   │   └── day-27-react-todo/
│
│   └── advanced/
│       ├── day-40-ecommerce-ui/
│       ├── day-55-dashboard-app/
│       ├── day-70-auth-system/
│       └── day-90-fullstack-project/
│
├── dsa/
│
│   ├── day-wise/
│   │   ├── day-31-time-complexity.md
│   │   ├── day-32-arrays.md
│   │   ├── day-33-strings.md
│   │   ├── day-34-recursion.md
│   │   ├── day-35-linked-list.md
│   │   ├── day-36-stack-queue.md
│   │   ├── day-37-searching.md
│   │   ├── day-38-sorting.md
│   │   ├── day-39-hashing.md
│   │   └── day-40-practice-set.md
│
│   └── practice/
│       ├── easy/
│       ├── medium/
│       └── hard/
│
├── assets/
│   ├── banners/
│   │   ├── day-01.png
│   │   ├── beginner.png
│   │   ├── intermediate.png
│   │   └── advanced.png
│   │
│   ├── logos/
│   │   ├── learnbuildjs-logo.png
│   │   └── favicon.png
│   │
│   └── screenshots/
│       ├── projects/
│       │   ├── counter.png
│       │   ├── todo.png
│       │   ├── weather.png
│       │   └── dashboard.png
│       │
│       └── website/
│
└── community/
    ├── contributors.md
    ├── leaderboard.md
    └── showcase.md

🚀 110 Days of JavaScript Projects

Welcome to LearnBuildJS – your step-by-step 110-day journey to master JavaScript with real projects!

Follow along, code every day, and build your portfolio while leveling up your JS skills.

---

## 🌱 Beginner: Day 1–30
**Focus:** Basics, syntax, loops, arrays, string manipulations.  

| Day | Project | Description |
|-----|--------|-------------|
| 1   | 👋 Hello JS! | Print "Hello World" using `console.log()` and `alert()` |
| 2   | 📝 Variables & Data Types | Use `let`, `const`, `var` and understand types |
| 3   | ➕ Simple Calculator | Addition & subtraction using prompts |
| 4   | 🌡️ Temperature Converter | Celsius ↔ Fahrenheit |
| 5   | 🎂 Age Calculator | Calculate age from birth year |
| 6   | ⚖️ BMI Calculator | Input weight & height, show BMI |
| 7   | 🔄 String Reverser | Reverse any string |
| 8   | 🔍 Palindrome Checker | Check if string is palindrome |
| 9   | 2️⃣ Even Odd Checker | Determine if a number is even or odd |
| 10  | 🔝 Largest of 3 Numbers | Find maximum of 3 numbers |
| 11  | ❓ Simple Quiz | 3 questions using prompt/alert |
| 12  | 📅 Days of Week | Map number → day name |
| 13  | ✖️ Multiplication Table | Display table for any number |
| 14  | ➕ Sum of Numbers | Sum numbers from 1 → N |
| 15  | ❗ Factorial Calculator | Factorial of a number using loop |
| 16  | 🎯 FizzBuzz | Classic coding challenge |
| 17  | 🔢 Prime Checker | Check if a number is prime |
| 18  | 🎲 Random Number Game | Guess the random number |
| 19  | ⏳ Countdown Timer | Simple loop-based countdown |
| 20  | 2️⃣ Even Numbers List | List all even numbers up to N |
| 21  | 1️⃣ Odd Numbers List | List all odd numbers up to N |
| 22  | 📊 Array Sum | Sum all elements in array |
| 23  | 📈 Max & Min | Find largest & smallest in array |
| 24  | 📝 Simple To-Do | Add & remove tasks (console-based) |
| 25  | 🎨 Color Changer | Change background color dynamically |
| 26  | 🖱️ Click Counter | Count button clicks |
| 27  | 🕰️ Show Date & Time | Display current date & time |
| 28  | 📜 Random Quote Generator | Show random quote from array |
| 29  | 🔒 Simple Login | Prompt username & password |
| 30  | ✅ Form Validation | Check empty fields using JS |

---

## ⚡ Intermediate: Day 31–60
**Focus:** DOM manipulation, events, small apps, UI.

| Day | Project | Description |
|-----|--------|-------------|
| 31  | 📝 Todo List (UI) | HTML + JS todo list with add/remove |
| 32  | 🌗 Theme Switcher | Light/Dark mode toggle |
| 33  | 🔢 Counter App | Increment & decrement buttons |
| 34  | 💰 Tip Calculator | Calculate tip percentage |
| 35  | 🎲 Dice Roller | Roll dice & show random number |
| 36  | 🎨 Random Color Generator | Generate random HEX colors |
| 37  | ⏱️ Stopwatch | Start, stop, reset timer |
| 38  | ⏳ Countdown Timer | Countdown to specific date |
| 39  | ❓ Quiz App | Multiple choice quiz in browser |
| 40  | 💱 Currency Converter | USD ↔ INR etc. |
| 41  | 🧮 Calculator UI | Buttons & interactive calculator |
| 42  | 🔑 Password Generator | Generate random strong passwords |
| 43  | ⚖️ BMI Calculator UI | HTML + JS version |
| 44  | 🌤️ Weather App (Basic) | Fetch weather using API |
| 45  | 🖼️ Image Slider | Automatic + manual slider |
| 46  | 📦 Modal Popup | Open & close modal dynamically |
| 47  | 🔽 Accordion | Expand/collapse sections |
| 48  | 🗂️ Tabs | Switch between tabs |
| 49  | ✅ Form Validation (Advanced) | Validate email, phone, password |
| 50  | 🎬 Movie Info App | Fetch data from movie API |
| 51  | 📝 Notes App | Add, edit, delete notes |
| 52  | 🏆 Quiz Score Tracker | Track correct answers |
| 53  | 💸 Tip & Bill Splitter | Split bill among friends |
| 54  | 😂 Random Joke Generator | Fetch jokes from API |
| 55  | ⌨️ Typing Speed Test | Simple typing game |
| 56  | 🖼️ Image Gallery | Display images in grid |
| 57  | 🔍 Modal Image Viewer | Click → enlarge image |
| 58  | 💾 Local Storage Todo | Persist todo in localStorage |
| 59  | 📚 Random Facts App | Show random facts from array |
| 60  | 🤖 Simple Chatbot | Basic responses using JS |

---

## 🚀 Advanced: Day 61–90
**Focus:** APIs, ES6, OOP, async JS, interactive apps.

| Day | Project | Description |
|-----|--------|-------------|
| 61  | 🌤️ Weather App (Advanced) | Fetch API + dynamic UI |
| 62  | 🦠 COVID Tracker | API + charts |
| 63  | 📰 News App | Fetch latest news using API |
| 64  | 🐙 GitHub Profile Finder | Search users by username |
| 65  | 🎬 Movie Search App | Fetch movies + show details |
| 66  | 🖼️ Image Search App | Unsplash API integration |
| 67  | 🗂️ Task Manager | CRUD + localStorage |
| 68  | 🃏 Memory Game | Card flip memory game |
| 69  | 🐍 Snake Game | Classic snake game using JS |
| 70  | ❌ Tic Tac Toe | Play vs player |
| 71  | ❓ Quiz App with Timer | Countdown + score |
| 72  | 🥁 Drum Kit | Play sounds on key press |
| 73  | 🎹 Piano App | Web piano using JS events |
| 74  | 🧮 Calculator (Advanced) | Operator precedence, decimals |
| 75  | ⏳ Countdown to Event | Dynamic countdown |
| 76  | 🌍 Weather + Geolocation | Use geolocation API |
| 77  | 🍲 Random Meal Generator | Meal API + dynamic UI |
| 78  | 📝 Markdown Previewer | Write & preview markdown |
| 79  | 💰 Expense Tracker | Track income & expenses |
| 80  | ⏱️ Pomodoro Timer | Work/Break timer |
| 81  | 🎟️ Movie Booking UI | Simple booking interface |
| 82  | 🎵 Music Player | Play, pause, next, prev songs |
| 83  | 🎨 Color Palette Generator | Generate & copy colors |
| 84  | 🖼️ Image Carousel | Dynamic images with arrows |
| 85  | ⚖️ BMI Calculator (Improved) | Add chart/graph |
| 86  | 🌐 Portfolio Website | Interactive portfolio |
| 87  | 💡 Random Advice App | Fetch advice API |
| 88  | 📺 YouTube Video Search | YouTube API integration |
| 89  | ⏳ Task Countdown | Countdown for tasks |
| 90  | 🕰️ Real-time Clock | Analog + digital clock |

---

## 🏆 Master / Capstone: Day 91–110
**Focus:** Full projects, deployment-ready, combining JS, HTML, CSS.  

| Day | Project | Description |
|-----|--------|-------------|
| 91  | 🌤️ Weather PWA | Progressive web app version |
| 92  | 💬 Chat App (Basic) | Frontend-only chat simulation |
| 93  | 🎵 Music Player UI | Full interactive UI |
| 94  | 💰 Expense Tracker UI | Add charts and summary |
| 95  | 🎟️ Movie Seat Booking | Select seats, confirm booking |
| 96  | ❓ Quiz App (Full) | Timer, score, multiple questions |
| 97  | 🃏 Memory Game (UI) | Add animations + levels |
| 98  | ⏱️ Pomodoro Timer (UI) | Stylish frontend |
| 99  | 🥁 Drum/Piano App | Full soundboard + UI |
| 100 | 🌐 Portfolio Project | Deployable personal portfolio |
| 101 | 📝 ToDo App (Full) | Advanced CRUD + localStorage |
| 102 | 🐙 GitHub Finder | Search users + show repos |
| 103 | 🎬 Movie App (Advanced) | Search, filter, save favorites |
| 104 | 🍲 Random Meal Generator (Advanced) | API + responsive UI |
| 105 | ⌨️ Typing Speed App (Advanced) | Track speed & accuracy |
| 106 | 🐍 Snake Game (Advanced) | Levels + score |
| 107 | ❌ Tic Tac Toe (AI) | Player vs Computer AI |
| 108 | 📝 Notes App (Advanced) | Dark mode + localStorage |
| 109 | 🎵 Music Player (Advanced) | Playlist + shuffle + repeat |
| 110 | 🏆 Capstone JS Project | Combine multiple features in one app |

---

## 💡 How to Use This Roadmap
1. Pick a day → read instructions → code project.
2. Day/X Like Day 1, Day 2
3. Push your project to **GitHub** for portfolio.  
4. Repeat every day for **110 days** to master JavaScript!  

---

> “Practice is the key 🔑 – build, break, fix, and learn every single day.”  

📚 LearnBuildJS – Beyond 110 Days

Congratulations! 🎉 You’ve completed 110 days of JavaScript projects. Now let’s focus on advanced learning, contributing, and portfolio-building.

---

🌐 Contributing to LearnBuildJS

We welcome contributors of all levels! 💻

How to Contribute:

1. Fork the repo
2. Clone it locally
3. Pick a task from Issues
4. Make your changes
5. Commit & Push
6. Open a Pull Request (PR)

Areas to Contribute:

• Add new projects or challenges
• Write notes & explanations for beginners
• Improve website UI / UX
• Add DSA problems with solutions
• Create interactive examples or demos

Every contribution counts! 🏅

---

📘 Notes Section

Maintain a structured notes section for easier learning:

📝 LearnBuildJS Notes Structure

Organized notes for JavaScript and DSA to make learning easy and structured.

notes/
├── javascript/
│ ├── fundamentals.md
│ ├── functions.md
│ ├── arrays.md
│ ├── loops.md
│ ├── dom_events.md
│ ├── es6_features.md
├── dsa/
│ ├── arrays.md
│ ├── strings.md
│ ├── linked_lists.md
│ ├── trees.md
│ ├── graphs.md
│ ├── sorting.md
│ ├── searching.md
│ ├── dynamic_programming.md

```

### 📌 Description:

- **javascript/** → Notes covering **core JavaScript concepts**  
- **dsa/** → Notes covering **Data Structures & Algorithms**  
- Each `.md` file contains theory, examples, and code snippets for easy reference  

> Keep this structure inside your repo for easy navigation and contribution!