Zero to Junior: Your Web Development Journey with ReactJS

Week 1 - 2
Project Management with Jira

• Understand Agile & Scrum basics
• Create user stories, tasks, and epics
• Update task status (To Do, In Progress, Done)
• Comment and log work on tickets

Week 2 - 4
Basic HTML5 / CSS3 Concepts

• HTML5 Tags
• HTML5 Tags – Tables
• HTML5 Tags – Forms
• CSS3 (Inline, Embedded & External CSS)

Week 5 - 6
Advanced HTML5 / CSS3 Concepts

• HTML5 Tags
• HTML5 Tags – Tables
• HTML5 Tags – Forms
• TailwindCSS

Week 7 - 8 - 9
JavaScript Foundations: Core JS Concepts

• Data types, variables, operators
• Conditional statements & loops
• Functions (declaration, expression, arrow)
• Arrays and objects (CRUD operations)

Week 10 - 11
JavaScript Advanced Concepts

• Scope & Closures
• Hoisting
• The “this” keyword
• Prototypes & Inheritance
• ES6+ features (let/const, spread/rest, destructuring)
• Asynchronous JavaScript
  1. Callbacks
  2. Promises
  3. async/await
  4. Fetch API

Week 12
Basics: Version Control with Git & GitHub

• Install Git & create GitHub account
• Learn basic Git commands (init, add, commit, push, pull)
• Create and clone repositories
• Work with branches and pull requests
• Collaborate using GitHub issues & discussions

Week 13 - 15
Phase 6: React Fundamentals
React Basics

• What is React & why use it?
• Create React App / Vite setup
• JSX syntax
• Functional Components
• Props and State

React Core Concepts

• Event handling
• Conditional rendering
• List rendering (map)
• Component reuse & composition

React Hooks

• useState
• useEffect
• useRef
• useContext

React Router

• Setting up routes
• Navigating between pages
• Dynamic routes & params

Week 16 - 20
Project Development
Goal: Combine tools + code to simulate real-world tasks
Version Control

• Push code to GitHub regularly
• Collaborate via branches
• Open pull requests & review code

Jira Integration

• Break projects into tasks
• Assign yourself tasks
• Track progress using Jira boards

Component Architecture

• Container vs Presentational components
• Smart/Dumb components
• Prop drilling vs Context API

State Management

• Context API
• Redux (basic intro)

Additional Tools

• Form handling (react-hook-form)
• API handling (Axios)
• Custom hooks
• Error boundaries
• Dev tools (React Dev Tools, Redux DevTools)