Phase 1: Frontend React.
js (4 months/ 64 hours)
✅ Overview
● Goal: Learn frontend web development and build a project using React.
● Duration: 4 months
● Weekly Time: 4 hours (2 × 2-hour sessions per week)
● Target Audience: Someone with no prior programming experience
● Final Outcome: Build and deploy a fully functional frontend using React that
consumes a REST API.
🗓️ Monthly Breakdown
📅 Month 1: Web & Programming Fundamentals
🧠 Goal: Learn the basics of how the web works and the core languages
(HTML, CSS, JavaScript)
Topic Hours Sessions Description
How the Web Works 2 1 What is HTML, CSS, JS, client/server,
how browsers render pages
HTML Basics 4 2 Tags, structure, headings, lists, links,
images, forms
CSS Basics 4 2 Styling elements, selectors, colors, fonts,
spacing
JavaScript 6 3 Variables, data types, functions,
Fundamentals I conditions, loops
📅 Month 2: JavaScript Deep Dive + DOM Manipulation
🧠 Goal: Learn JavaScript in the browser and prepare for React
Topic Hours Sessions Description
JavaScript Deep Dive 4 2 Objects, arrays, higher-order functions,
II ES6 features (let/const, arrow fx)
DOM Manipulation 4 2 Selecting elements, events,
creating/modifying DOM
JavaScript Projects 4 2 Create interactive mini-projects (counter,
form validator, etc.)
Introduction to React 4 2 What is React? Components, JSX, state,
Concepts props (no coding yet)
📅 Month 3: React Fundamentals
🧠 Goal: Build real React components, manage data with state and props
Topic Hours Sessions Description
React Setup & JSX 2 1 Create React App, JSX syntax,
React dev tools
Components, Props & 4 2 Functional components, props
State passing, useState
Event Handling & Forms 4 2 onClick, onChange, building
forms
Conditional Rendering & 4 2 if/else, ternary, map rendering
Lists
useEffect + Basic Fetching 2 1 Fetch data using useEffect and
display it
📅 Month 4: Project Work + API Integration
🧠 Goal: Build a real-world app using React, connected to a backend
Topic Hours Sessions Description
React Router 2 1 Multiple pages, navigation,
routes
Project Planning + API 2 1 Define app idea, design pages
Overview and components
Project Development 6 3 Build homepage, list views, API
weather app using public api fetching
(Part 1)
Project Development auth 4 2 Add forms, update features,
page using public api (Part 2) basic auth UI
Final Touches & Deployment 4 2 Styling, responsiveness, deploy
to Netlify/Vercel
Weather Project Demo: https://weather-demo.elkfafy.online/
Auth Project Demo: https://auth-demo.elkfafy.online/
Phase 2: Backend NodeJS (4 months/ 64 hours)
✅ Overview
● Goal: Learn backend development using Node.js and Express.
● Duration: 4 months
● Weekly Time: 4 hours (2 × 2-hour sessions per week)
● Target Audience: Someone with no programming experience
● Final Outcome: Able to build and deploy a RESTful API connected to a MongoDB
database, with basic authentication.
🗓️ Monthly Breakdown
📅 Month 1: Introduction to Programming + JavaScript Basics
🧠 Goal: Build strong programming fundamentals using JavaScript.
Topic Hours Sessions Description
Introduction to 4 2 What is programming, variables, data
Programming types, flow control
JavaScript Basics I 4 2 Loops, conditionals, functions
JavaScript Basics II 4 2 Arrays, objects, methods
JavaScript in Practice 4 2 Practice mini problems, building small
logic challenges
📅 Month 2: Node.js & Express Fundamentals
🧠 Goal: Understand the backend environment and build your first APIs.
Topic Hours Sessions Description
What is Node.js + npm 2 1 Installing Node, npm, intro to
modules
Building with Node.js 2 1 Creating a server with native HTTP
(http) module
Express.js Basics 4 2 Setting up Express, routing,
middleware basics
RESTful API Design 2 1 CRUD concepts, HTTP methods
Principles (GET, POST, etc.)
Building Your First API 4 2 Create routes for a simple
blog/todo app
📅 Month 3: MongoDB, Mongoose, API Features
🧠 Goal: Connect to a database and add dynamic functionality.
Topic Hours Sessions Description
Intro to MongoDB and 2 1 What is NoSQL, installing
NoSQL MongoDB locally or using Atlas
Mongoose Basics 4 2 Schema definitions, Models, CRUD
with MongoDB
API with MongoDB 4 2 Modify API to use database
Integration
Middleware, Error 4 2 Custom middleware, error
Handling handling, route validation
📅 Month 4: Authentication + Final Project
🧠 Goal: Build and deploy a real-world app with authentication.
Topic Hours Sessions Description
User Authentication Basics 4 2 JWT, bcrypt, login/register APIs
Project Planning 2 1 Choose app idea, design routes
Building the Project 4 2 Implementing CRUD,
e-commerce-api authentication
Finishing Touches + 6 3 Deploy on Render/Vercel,
Deployment documentation, testing
E-commerce APIs Demo: https://github.com/Elkfafy/ecommerceApis
