Here’s your revised roadmap starting from September 29 and ending on December 3.
The plan
assumes a 5-hour daily study schedule, split evenly between UI/UX Design (Figma) and
MERN Stack Development.
Overview:
● Start Date: September 29
● End Date: December 3
● Daily Study Hours: 5 hours/day (2.5 hours for each course)
● Weekly Focus: 5 days of learning + 2 days of project work/review
● Goal: Complete both courses, build final projects, and prepare for job applications.
Phase 1: September 29 – October 26 (Foundation
Building)
UI/UX Design (Figma Course)
● Focus: Design basics, wireframing, and low-fidelity prototyping.
● Goal: Develop foundational design skills and create initial design projects.
MERN Stack Development (Programming Hero Course)
● Focus: HTML, CSS, JavaScript fundamentals, and React basics.
● Goal: Build basic web apps, understand front-end principles, and start working with
React.
Week 1: September 29 - October 5
Daily Study Time: 5 hours/day
● Sept 29 - Oct 3:
○ UI/UX:
■ Day 1: Introduction to UI/UX and Figma basics
■ Day 2: Wireframing for a simple app (to-do list)
■ Day 3: Visual design principles (color theory, typography)
■ Day 4: Low-fidelity prototyping in Figma
■ Day 5: User personas and research basics
○ MERN:
■ Day 1: HTML and basic layouts
■ Day 2: CSS fundamentals
■ Day 3: JavaScript basics (variables, functions, loops)
■ Day 4: DOM manipulation with JavaScript
■ Day 5: Building a simple dynamic app with JavaScript
Weekend Project (Oct 4 - 5):
● UI/UX: Design a basic wireframe for a to-do list app
● MERN: Create a static landing page using HTML & CSS
Week 2: October 6 - October 12
Daily Study Time: 5 hours/day
● Oct 6 - 10:
○ UI/UX:
■ Day 1: Style guides and UI grids
■ Day 2: Creating wireframes for a simple app
■ Day 3: Accessibility in design
■ Day 4: Usability testing principles
■ Day 5: Feedback and iteration on wireframes
○ MERN:
■ Day 1: JavaScript ES6+ (arrow functions, destructuring)
■ Day 2: Fetching data from APIs
■ Day 3: JavaScript async programming (promises, async/await)
■ Day 4: DOM manipulation & event handling
■ Day 5: Building a weather app with API data
Weekend Project (Oct 11 - 12):
● UI/UX: Complete low-fidelity prototype for a weather app
● MERN: Create a fully functional weather app using JavaScript and API integration
Week 3: October 13 - October 19
Daily Study Time: 5 hours/day
● Oct 13 - 17:
○ UI/UX:
■ Day 1: Transition to high-fidelity prototyping
■ Day 2: Building high-fidelity app screens in Figma
■ Day 3: Creating responsive design in Figma
■ Day 4: User testing and feedback iteration
■ Day 5: Micro-interactions and transitions
○ MERN:
■ Day 1: Introduction to React (JSX, components)
■ Day 2: React state and props
■ Day 3: Event handling in React
■ Day 4: Fetching data with React (useEffect)
■ Day 5: Building dynamic React components
Weekend Project (Oct 18 - 19):
● UI/UX: Design a high-fidelity interactive prototype for your weather app
● MERN: Develop a basic React app with API integration
Phase 2: October 20 – November 16 (Intermediate Skills)
UI/UX Design (Figma Course)
● Focus: High-fidelity designs, usability testing, and design systems.
● Goal: Build complex design prototypes and user experiences.
MERN Stack Development (Programming Hero Course)
● Focus: React, Node.js, and Express.js.
● Goal: Build and deploy a full-stack web app.
Week 4: October 20 - October 26
Daily Study Time: 5 hours/day
● Oct 20 - 24:
○ UI/UX:
■ Day 1: Creating design systems in Figma
■ Day 2: Advanced prototyping techniques (animations, transitions)
■ Day 3: Accessibility testing for high-fidelity designs
■ Day 4: Finalizing high-fidelity prototypes for the app
■ Day 5: User flows and journey mapping
○ MERN:
■ Day 1: Introduction to Node.js and setting up an Express server
■ Day 2: Building simple REST APIs with Express
■ Day 3: Connecting React to Node.js backend
■ Day 4: Introduction to MongoDB
■ Day 5: Working with MongoDB data models
Weekend Project (Oct 25 - 26):
● UI/UX: Complete and test a fully responsive high-fidelity prototype
● MERN: Build a full-stack app with basic CRUD functionality (React + Node.js +
MongoDB)
Week 5: October 27 - November 2
Daily Study Time: 5 hours/day
● Oct 27 - 31:
○ UI/UX:
■ Day 1: Finalizing design systems
■ Day 2: Adding micro-interactions to your designs
■ Day 3: Conducting usability tests and gathering feedback
■ Day 4: Making design iterations based on user feedback
■ Day 5: Finalize project case study setup
○ MERN:
■ Day 1: React Hooks (useState, useEffect)
■ Day 2: Advanced React app building
■ Day 3: Authentication in Node.js with JWT
■ Day 4: Deploying a React app to Heroku
■ Day 5: Setting up full-stack project
Weekend Project (Nov 1 - 2):
● UI/UX: Work on a new app design, implementing all learned principles
● MERN: Build a full-stack app with authentication and deploy it to Heroku
Week 6: November 3 - November 9
Daily Study Time: 5 hours/day
● Nov 3 - 7:
○ UI/UX:
■ Day 1: Preparing final design case studies
■ Day 2: Portfolio setup on Behance/Dribble
■ Day 3: Final touches on portfolio projects
■ Day 4: Designing for mobile-first applications
■ Day 5: Building complex UI patterns
○ MERN:
■ Day 1: Advanced React patterns (context, hooks)
■ Day 2: Full-stack app optimizations
■ Day 3: Connecting Node.js with MongoDB
■ Day 4: Implementing data models and queries
■ Day 5: Full-stack app deployment and testing
Weekend Project (Nov 8 - 9):
● UI/UX: Complete a final case study, polish designs for your portfolio
● MERN: Deploy and finalize your full-stack project
Phase 3: November 10 – December 3 (Final Projects &
Job Preparation)
UI/UX Design (Figma Course)
● Focus: Case studies, portfolio finalization, and job applications.
● Goal: Finalize your design portfolio and prepare for interviews.
MERN Stack Development (Programming Hero Course)
● Focus: Final project development, performance tuning, and deployment.
● Goal: Complete and deploy a full-stack app and optimize it for production.
Week 7: November 10 - November 16
Daily Study Time: 5 hours/day
● UI/UX:
○ Day 1: Final case study preparations
○ Day 2: Complete design portfolio and finalize projects
○ MERN:
■ Day 1: Optimize and fine-tune your full-stack app
■ Day 2: Finalize and deploy your app
Weekend Project (Nov 15 - 16):
● UI/UX: Finalize your portfolio and case studies
● MERN: Optimize, deploy, and document your full-stack app
Week 8: November 17 - November 23
Daily Study Time: 5 hours/day
● Focus: Job applications, portfolio review, and interview prep.
○ Apply for jobs and prepare for technical interviews
○ Work on refining your portfolio and case studies
Week 9: November 24 - December 3
Focus: Networking, interview preparation, and job applications.
● Continue to apply for jobs
● Prepare for interviews by practicing technical and design skills
