🟨 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
