🟨 Phase 1: Tech Foundations

🎯 Goal: Build a strong foundation in web development basics — HTML, CSS,

JavaScript, Git, and how the internet works.

📅 Duration: 20 Days
⏱️ Daily Time: 4 hrs/day
⏳ Total Time: ~80 hours
📘 What You’ll Learn
●​ How the Internet works (DNS, HTTP, Hosting)​

●​ HTML: tags, forms, semantic elements​

●​ CSS: Box model, Flexbox, Grid, selectors​

●​ JavaScript basics: variables, loops, arrays, functions​

●​ DOM Manipulation​

●​ Git & GitHub​

●​ Basic terminal commands​

💻 Mini Projects to Build (Time Estimate Included)

1.​ Basic Portfolio Website – 2 days​

2.​ JavaScript Calculator – 2 days​

3.​ To-Do List with LocalStorage – 2 days​

4.​ Form Validator – 2 days​

5.​ GitHub Repo Setup & Practice – 1 day​

@ 2025 Mike Devlogs | All rights reserved

💡 10 Project Ideas to Try
1.​ Personal Resume Website​

2.​ Interactive Survey Form​

3.​ Weather UI with Dummy Data​

4.​ Product Landing Page​

5.​ Countdown Timer​

6.​ Light/Dark Mode Toggle​

7.​ Simple Image Gallery​

8.​ Pricing Table UI​

9.​ Basic Blog Layout​

10.​Digital Clock​

🔗 Free Resources (with URLs)

🌐 Web Fundamentals:
1.​ How the Internet Works – Fireship​
https://www.youtube.com/watch?v=TNQsmPf24go​

2.​ Intro to Web – MDN​

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web​

3.​ What is HTTP – Codecademy​

https://www.codecademy.com/article/what-is-http​

🧱 HTML & CSS:

4.​ HTML Crash Course – Traversy Media​
https://www.youtube.com/watch?v=UB1O30fR-EE​

@ 2025 Mike Devlogs | All rights reserved

 5.​ CSS Crash Course – Traversy Media​
https://www.youtube.com/watch?v=yfoY53QXEnI​

6.​ Flexbox Froggy Game​

https://flexboxfroggy.com/​

7.​ CSS Grid Garden Game​

https://cssgridgarden.com/​

8.​ HTML/CSS Certification – FreeCodeCamp​

https://www.freecodecamp.org/learn/responsive-web-design/​

⚙️ JavaScript Basics:
9.​ JavaScript for Beginners – Net Ninja​
https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET​

10.​JS DOM Tutorial – CodeWithHarry​

https://www.youtube.com/watch?v=KkMDCCdjyW8​

11.​JavaScript30 Projects – Wes Bos​

https://javascript30.com/​

📁 Git & CLI:

12.​Git & GitHub Full Course – Amigoscode​
https://www.youtube.com/watch?v=apGV9Kg7ics​

13.​Command Line Crash Course – Traversy Media​

https://www.youtube.com/watch?v=5XgBd6rjuDQ​

14.​Git Handbook – GitHub Docs​

https://guides.github.com/introduction/git-handbook/​

@ 2025 Mike Devlogs | All rights reserved

🟦 Phase 2: Frontend Development
🎯 Goal: Learn how to build interactive user interfaces using modern frontend
frameworks like React. Also gives a peek into alternatives like Vue and Angular.

📅 Duration: 30 Days
⏱️ Daily Time: 4 hrs/day
⏳ Total Time: ~120 hours
📘 What You’ll Learn
●​ What is a frontend framework?​

●​ JSX and React Components​

●​ Props, Events, and useState​

●​ Lists & conditional rendering​

●​ Routing with React Router​

●​ useEffect & lifecycle​

●​ Forms, inputs, and validation​

●​ Fetching APIs using fetch or axios​

●​ UI design with TailwindCSS / Bootstrap​

●​ State management overview (Context API)​

●​ Intro to Vue and Angular (optional)​

💻 Mini Projects to Build (Estimated: 10–12 Days)

1.​ To-Do App – React basics with useState – 2 days​

@ 2025 Mike Devlogs | All rights reserved

 2.​ Weather App – Fetching data from API – 2 days​

3.​ Quiz App – Conditional UI with states – 2 days​

4.​ GitHub User Search – Input + API + display – 2 days​

5.​ Notes App – LocalStorage + hooks – 2–3 days​

💡 10 Project Ideas to Practice

1.​ Recipe Search App (fetch meals API)​

2.​ Typing Speed Game​

3.​ Random Joke/Quote Generator​

4.​ Color Picker Tool​

5.​ Movie App using TMDB API​

6.​ Personal Portfolio in React​

7.​ Markdown Blog Editor​

8.​ Currency Converter​

9.​ Tic Tac Toe Game​

10.​Contact Manager App​

🔗 Free Resources (with URLs)

⚛️ React:
1.​ React Official Docs​
https://react.dev/learn​

2.​ React Tutorial for Beginners – Net Ninja (Playlist)​

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i4g-0dAaMmFAyM6k3FmuZz​

@ 2025 Mike Devlogs | All rights reserved

 3.​ React Course – FreeCodeCamp (5 hrs)​
https://www.youtube.com/watch?v=bMknfKXIFA8​

4.​ React Crash Course – Traversy Media​

https://www.youtube.com/watch?v=w7ejDZ8SWv8​

5.​ Props & useState – Codevolution​

https://www.youtube.com/watch?v=O6P86uwfdR0​

6.​ React Router Tutorial – Web Dev Simplified​

https://www.youtube.com/watch?v=Law7wfdg_ls​

7.​ useEffect Hook – Simplified Guide​

https://www.youtube.com/watch?v=0ZJgIjIuY7U​

8.​ React Hooks Cheatsheet​

https://react-hooks-cheatsheet.com/​

9.​ React Practice Projects – 30 Days of React​

https://github.com/Asabeneh/30-Days-Of-React​

10.​React Code Examples – CodeSandbox​

https://codesandbox.io/examples/package/react​

11.​Huxn Dev – React Projects & Tutorials​

https://www.youtube.com/@huxnwebdev​

🎨 CSS Frameworks:
12.​TailwindCSS Docs​
https://tailwindcss.com/docs​

13.​Bootstrap 5 Crash Course – Traversy Media​

https://www.youtube.com/watch?v=4sosXZsdy-s​

@ 2025 Mike Devlogs | All rights reserved

🟩 Phase 3: Backend Development (MERN & Django
Options)
🎯 Goal: Learn how the backend works — build APIs, connect to databases,
handle authentication, and build the core logic for full stack apps.

📅 Duration: 30 Days
⏱️ Daily Time: 4 hrs/day
⏳ Total Time: ~120 hours
📘 What You’ll Learn
🔷 Common Backend Concepts (applies to both stacks):
●​ RESTful API basics (CRUD)​

●​ HTTP methods: GET, POST, PUT, DELETE​

●​ Authentication (JWT or Sessions)​

●​ Database models and relationships​

●​ API testing with Postman​

●​ Connecting frontend to backend​

🧭 Choose Your Stack Path:

🟪 Path 1: MERN Stack (JavaScript/Node)
●​ Node.js and Express basics​

●​ Routing, middleware, REST APIs​

●​ MongoDB and Mongoose​

●​ Environment variables, .env files​

@ 2025 Mike Devlogs | All rights reserved

 ●​ Authentication with JWT​

●​ Error handling and validation​

●​ File uploads (Multer)​

🟧 Path 2: Django (Python)

●​ Django basics (views, templates, URLs)​

●​ Django models and ORM​

●​ Django REST Framework​

●​ Token-based Auth / Session Auth​

●​ Admin Panel customization​

●​ Handling Forms and Serializers​

●​ File uploads with Django​

💻 Mini Projects to Build (Choose Based on Stack)

Project Description Time

Blog API Full CRUD backend 2–3

days

Auth System Login/Register with JWT or Sessions 3 days

Notes API Create and update notes 2 days

Task Manager Todo API with deadlines & status 3 days

File Upload System Profile picture or image uploads 2 days

💡 10 Project Ideas
1.​ Blog Platform Backend​

2.​ User Auth System with JWT​

@ 2025 Mike Devlogs | All rights reserved

 3.​ File Upload API​

4.​ Portfolio CMS backend​

5.​ Public API for Quotes​

6.​ Notes & Tasks API​

7.​ Resume Uploader Backend​

8.​ Weather Alert API (dummy)​

9.​ Contact Form API​

10.​Expense Tracker API​

🔗 Free Resources (with URLs)

MERN Stack (Node + Express + MongoDB)

1.​ Node.js & Express Crash Course – Traversy​

https://www.youtube.com/watch?v=fBNz5xF-Kx4​

2.​ Express.js Docs​

https://expressjs.com/​

3.​ MongoDB for Beginners – Net Ninja​

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i4g-0dAaMmFAyM6k3FmuZz​

4.​ Mongoose Crash Course – Traversy​

https://www.youtube.com/watch?v=DZBGEVgL2eE​

5.​ REST API Tutorial – Web Dev Simplified​

https://www.youtube.com/watch?v=fgTGADljAeg​

6.​ JWT Auth Tutorial (Node) – Dev Ed​

https://www.youtube.com/watch?v=2jqok-WgelI​

7.​ Postman API Testing Guide​

https://learning.postman.com/docs/getting-started/introduction/​

8.​ Full MERN Project – JavaScript Mastery​

https://www.youtube.com/watch?v=4UZrsTqkcW4​

@ 2025 Mike Devlogs | All rights reserved

Django (Python)

9.​ Django Crash Course – Traversy​

https://www.youtube.com/watch?v=F5mRW0jo-U4​

10.​Django Docs (Getting Started)​

https://docs.djangoproject.com/en/stable/intro/tutorial01/​

11.​Django REST Framework Tutorial​

https://www.youtube.com/watch?v=ZdvRKtlKzIE​

12.​JWT Auth in Django REST – Dennis Ivy​

https://www.youtube.com/watch?v=Zt-rR5hz1bY​

13.​File Uploads in Django​

https://www.youtube.com/watch?v=UwdC91wjBzM​

14.​Django Project Ideas – CodeWithStein​

https://www.youtube.com/watch?v=1yn8pRE_Ojw

@ 2025 Mike Devlogs | All rights reserved

🟨 Phase 4: Full Stack Integration (Frontend +
Backend)
🎯 Goal: Learn to connect your frontend (React) with your backend
(Node.js/Express or Django), and build real-world full stack applications with
authentication, data flow, and API integration.

📅 Duration: 25 Days
⏱️ Daily Time: 4 hrs/day
⏳ Total Time: ~100 hours
📘 What You’ll Learn
●​ How to structure a full stack project​

●​ Connecting React with Express or Django​

●​ Using Axios or Fetch to make API calls​

●​ Handling CORS, proxies, and environment variables​

●​ Authentication (JWT or Session) end-to-end​

●​ User data management across frontend/backend​

●​ Uploading files/images from frontend to backend​

●​ Protecting routes & dashboards​

●​ Error handling across layers​

●​ Real-time feedback (toasts, loaders, spinners)​

⚙️ Stack Options
●​ MERN Stack: React + Express + MongoDB + Node​

@ 2025 Mike Devlogs | All rights reserved

 ●​ React + Django: React frontend + Django REST backend​

💻 Mini Projects (Choose your stack)

Project Description Time

Auth System Login/register with protected routes 3–4

days

Blog App Create/read/update/delete posts with user 4–5

auth days

Notes Manager Full CRUD with categories and filters 3 days

File Upload App Upload/download/view files 2–3

days

User Dashboard React frontend connected to profile API 3–4

days

💡 10 Full Stack Project Ideas

1.​ Full Stack Blog Platform​

2.​ Job Board (Post & Apply)​

3.​ Portfolio CMS (customize through backend)​

4.​ Full Stack ToDo App​

5.​ Quiz App with Timer + Score History​

6.​ Budget Tracker with login & charts​

7.​ Resume Builder (PDF output)​

8.​ Habit Tracker with monthly calendar​

9.​ Simple Chat App (Realtime Optional)​

10.​File Uploader + Viewer (Images, PDFs)​

@ 2025 Mike Devlogs | All rights reserved

🔗 Free Resources (MERN + Django Integration)
MERN Integration:

1.​ MERN Stack Tutorial – JavaScript Mastery​

https://www.youtube.com/watch?v=4UZrsTqkcW4​

2.​ React + Node Auth Tutorial – Dev Ed​

https://www.youtube.com/watch?v=2jqok-WgelI​

3.​ MERN Guide – FreeCodeCamp​

https://www.freecodecamp.org/news/learn-the-mern-stack/​

4.​ CORS & Proxy Config in React​

https://create-react-app.dev/docs/proxying-api-requests-in-development/​

5.​ File Upload in MERN – Web Dev Simplified​

https://www.youtube.com/watch?v=GmnV4I2TYAU​

React + Django Integration:

6.​ React + Django REST Full Course – Dennis Ivy​

https://www.youtube.com/watch?v=Uyei2iDA4Hs​

7.​ Connecting React Frontend with Django Backend​

https://blog.logrocket.com/integrating-react-django-apps/​

8.​ Axios Setup & API Integration in React​

https://www.npmjs.com/package/axios​

9.​ Django CORS Headers Setup​

https://pypi.org/project/django-cors-headers/​

10.​Django + React File Upload​

https://www.youtube.com/watch?v=BoYebo5iPQg​

🧩 Bonus Advice:
●​ Use Postman or Thunder Client to test your backend first​

●​ Use .env files to protect sensitive keys​

●​ Use React Context or Redux to manage global user state​

@ 2025 Mike Devlogs | All rights reserved

 ●​ Add toast notifications for real-time UX feedback (use react-toastify or
sweetalert2)​

●​ You can host the backend and frontend separately (Render + Vercel combo works
great)

🟥 Phase 5: Deployment, Hosting & DevOps Basics

🎯 Goal: Learn how to host, secure, and automate full stack apps with modern
DevOps tools — get your apps live with custom domains, backups, and CI/CD
pipelines.

📅 Duration: 10 Days
⏱️ Daily Time: 3–4 hrs/day
⏳ Total Time: ~35–40 hours
📘 What You’ll Learn
●​ Domain & hosting basics (Vercel, Netlify, Render, Railway, Heroku)​

●​ Deploying frontend (React apps)​

●​ Deploying backend (Express/Django API with DB)​

●​ Connecting frontend + backend on different domains​

●​ Environment variables for frontend/backend​

●​ HTTPS setup (Free SSL)​

●​ GitHub Actions & CI/CD automation​

●​ Common errors in deployment & debugging​

●​ Hosting MongoDB (MongoDB Atlas) or PostgreSQL​

●​ Backup & monitoring​

@ 2025 Mike Devlogs | All rights reserved

💻 Mini Projects to Deploy
1.​ React Todo App – deploy on Vercel​

2.​ Blog API – deploy Django/Express backend to Render​

3.​ Full Stack Auth App – React + backend​

4.​ Portfolio Website – hosted on GitHub Pages + custom domain​

5.​ Image Upload API – deploy and test live with Postman​

💡 10 Practice Ideas
1.​ Deploy any full stack project with .env config​

2.​ Create CI pipeline using GitHub Actions​

3.​ Set up auto-deploy on main branch push​

4.​ Connect MongoDB Atlas to a live Node app​

5.​ Enable HTTPS with custom domain on Render​

6.​ Deploy Django API with static file hosting​

7.​ Enable CORS between frontend/backend​

8.​ Store & retrieve image files via cloud backend​

9.​ Create a staging site & production site​

10.​Setup GitHub Actions to run tests before deploy​

🔗 12 Free Resources (with URLs)

🚀 Deployment Platforms:

@ 2025 Mike Devlogs | All rights reserved

 1.​ Vercel Docs​
https://vercel.com/docs​

2.​ Netlify Full Guide – FreeCodeCamp​

https://www.youtube.com/watch?v=sGB2D5Bffo4​

3.​ Render Full Stack Hosting Guide​

https://render.com/docs​

4.​ Railway Hosting Docs​

https://docs.railway.app/​

5.​ GitHub Pages – Docs​

https://docs.github.com/en/pages​

⚙️ Backend Hosting:
6.​ MongoDB Atlas Setup​
https://www.mongodb.com/atlas/database​

7.​ Render Django Deploy Guide​

https://render.com/docs/deploy-django​

8.​ Express App Deploy – Render​

https://render.com/docs/deploy-node-express-app​

🔄 CI/CD & Automation:

9.​ GitHub Actions Docs​
https://docs.github.com/en/actions​

10.​CI/CD Crash Course – TechWorld with Nana​

https://www.youtube.com/watch?v=ECuqb5Tv9qI​

11.​GitHub Actions with React – Fireship​

https://www.youtube.com/watch?v=R8_veQiYBjI​

12.​Deploy React with Env Vars – Web Dev Simplified​

https://www.youtube.com/watch?v=RawCjIDvMdE

@ 2025 Mike Devlogs | All rights reserved

🟪 Phase 6: Career Prep – DSA, Resume, Freelance,
Jobs
🎯 Goal: Become job-ready or freelance-ready by strengthening
problem-solving, polishing your portfolio, and preparing for interviews and
opportunities.

📅 Duration: 10 Days (can extend alongside projects)

⏱️ Daily Time: 3–5 hrs/day
⏳ Total Time: ~40–50 hours
📘 What You’ll Learn
●​ Data Structures & Algorithms (basic level)​

●​ Solving coding problems on LeetCode​

●​ Resume writing for developers​

●​ Creating your job-ready portfolio​

●​ Freelance profile setup (Fiverr, Upwork, LinkedIn)​

●​ Behavioral & technical interview prep​

●​ How to contribute to open source​

●​ Tracking job applications​

●​ Building a project case study blog​

●​ Pitching to clients and recruiters​

💻 Daily Routine Breakdown

Day Focus Area

Day 1–3 DSA Basics – Arrays, Strings, Hashmaps

@ 2025 Mike Devlogs | All rights reserved

Day 4–5 LeetCode Easy (10–15 problems)

Day 6 Resume Writing + LinkedIn Optimization

Day 7 Portfolio Polish (Project Descriptions, Live Links)

Day 8 Freelance Profile Creation (Fiverr, Upwork, etc.)

Day 9 Mock Interview + Open Source Intro

Day 10 Final Checklist & Job Application Tracking

💡 10 Practical Things to Do
1.​ Solve 15 LeetCode Easy questions​

2.​ Build your resume with ATS format (PDF + online)​

3.​ Polish portfolio with links, GitHub, and short videos​

4.​ Upload 3 best projects to GitHub with README​

5.​ Create Fiverr or Upwork profile with services​

6.​ Write 1 blog post (case study style) for your project​

7.​ Make an intro video for your LinkedIn header​

8.​ Submit resume to 10+ companies​

9.​ Apply to 3 internships or freelance gigs​

10.​Reach out to 5 devs on LinkedIn & engage​

🔗 12 Free Resources (with URLs)

📊 DSA & Problem Solving
1.​ LeetCode Practice​
https://leetcode.com/problemset/all/​

2.​ NeetCode Roadmap (DSA)​

https://neetcode.io/roadmap​

@ 2025 Mike Devlogs | All rights reserved

 3.​ Codeforces for Competitive Practice​
https://codeforces.com/​

4.​ DSA Crash Course – Kunal Kushwaha​

https://www.youtube.com/watch?v=apnE0LJmuJg​

5.​ JavaScript DSA Guide – Codevolution​

https://www.youtube.com/watch?v=RBSGKlAvoiM​

📄 Resume & Portfolio

6.​ Dev Resume Template – GitHub​
https://github.com/saadpasta/developerFolio​

7.​ Resume Builder – Novoresume​

https://novoresume.com/resume-templates​

8.​ Free Portfolio Inspiration – Bestfolios​

https://www.bestfolios.com/portfolio​

💼 Freelance & Career Prep

9.​ Upwork Getting Started​
https://www.upwork.com/nx/start/​

10.​Fiverr Freelance Guide​

https://www.fiverr.com/resources/guides​

11.​LinkedIn for Devs – Fireship​

https://www.youtube.com/watch?v=rnqAXuLZlaE​

12.​Mock Interviews – Pramp​

https://www.pramp.com/​

@ 2025 Mike Devlogs | All rights reserved

THANK YOU

@ 2025 Mike Devlogs | All rights reserved