Web Development with React
Course Objectives
This course is designed to provide hands-on experience in full-stack web development,
covering frontend, backend, databases, and project implementation. By the end of the
course, participants will be able to:
1. Web Development Module - HTML/CSS/JS (WDR_WD)
● Understand the fundamentals of web development using HTML, CSS, and
JavaScript.
● Build responsive, interactive, and dynamic web pages.
● Work with modern UI/UX techniques and browser compatibility.
2. [Link] Module (WDR_NE)
● Learn server-side JavaScript programming with [Link].
● Develop RESTful APIs using [Link] and middleware.
● Implement authentication, authorization, and database integration.
3. [Link] Module (WDR_RT)
● Understand component-based development using [Link].
● Work with React Hooks, state management, and React Router.
● Develop single-page applications (SPA) with reusable UI components.
4. Database Management (SQL + MySQL) (WDR_SQL)
● Learn relational database concepts and normalization.
● Perform CRUD operations and optimize SQL queries.
● Work with stored procedures, indexing, and data security best practices.
5. Project Module (WDR_Proj)
● Develop a full-stack web application integrating frontend, backend, and
database.
● Implement industry best practices, security, and optimization techniques.
● Gain real-world project experience, version control (Git), and deployment
strategies.
Exit Profile for Freshers
Upon completing this course, freshers will have strong full-stack development skills,
making them suitable for the following roles:
1. Frontend Developer ([Link])
● Proficiency in HTML, CSS, JavaScript, and [Link].
● Experience in building dynamic UI components and single-page applications.
● Understanding of state management and API integration.
2. Backend Developer ([Link] & MySQL)
● Expertise in server-side development using [Link] and [Link].
● Ability to develop and manage RESTful APIs.
● Experience in database integration and query optimization.
3. Full Stack Developer (MERN Stack)
● Competence in both frontend ([Link]) and backend ([Link], MySQL).
● Ability to develop, test, and deploy full-stack applications.
● Knowledge of authentication, state management, and API security.
4. Web Developer
● Hands-on experience in modern web technologies (HTML, CSS, JavaScript).
● Ability to create responsive and interactive web applications.
● Understanding of browser compatibility and UX/UI design principles.
5. Database Developer (MySQL & SQL)
● Proficiency in relational database management using SQL and MySQL.
● Ability to write complex queries and optimize database performance.
● Experience in data security, indexing, and transactions.
Course Module Structure
Module Name Self Learning ILT Total Duration
Duration(Hours) Duration(Hours) (Hours)
Web 0 30 30
Development(WDR_WD)
Node(WDR_NE) 0 10 10
React (WDR_RT) 0 53 53
Project (WDR_Proj) 0 10 10
SQL_MySQL(SQL_MyS 0 10 10
QL_WDR)
Gen AI 10 10 20
Tech Orientation 0 12 12
Soft Skill 0 60 60
Total Hours 10 195 205
Curriculum
Day Topic Subtopics
Day - 1 Introduction to Web • Overview of web development
Development and HTML • Introduction of HTML
• Structure of html page, elements, tags
• Text formatting tags
• Font element
Day - 2 Working with List and Media • Ordered , Unordered and Definition List
• <img> tag and its attributes
• <audio> , <video> and <embed> tags and its
attributes
Day - 3 Table and hyperlink • Table creation: <table>,<tr>, <th>,<td> tags and its
attributes
• <caption>,<thead>,<tbody>,<tfoot> tags
• Internal, External and Global Hyperlink
Day - 4 Forms in html • <form> tag and its attributes
• <input> tag and its attributes
• <select>,<option>,<textarea>,
<label>,<fieldset>,<legend>
Day - 5 Semantic html and html5 • Semantic tags: <header>, <footer>, <nav>,
features <article>, <section>, <aside>
• Html 5 features : <canvas>, <svg>, and
<iframe>,<figure>,<figurecaption>
• Assignment: to design a simple web page
combining all of the above tags(e.g, tourist places in
your state, festivals of different states, UNESCO
heritage sites)
Day - 6 Introduction to CSS • CSS Introduction
• Syntax of CSS
• Selectors in CSS(Basic, Class, ID, Grouping
Selectors)
• Inline CSS
• Internal CSS
• External CSS
Day - 7 CSS Properties • Background
• Colors
• Border
• Margin and Padding
• Font and Text
Day - 8 CSS Layout and Position • Layout
• Grid
• Table
• Box model
• Position
• Display
Day - 9 Advance CSS features • Animation
• Transition
• CSS Flexbox
• Media queries for responsive design
Day - 10 Miscellaneous • Vertical Menu Bar
• Horizontal Menu Bar
• Drop Down Menu Bar
• Pagination
• Assignment : To apply styles on web page
developed in week - 1
Day - 11 Introduction to Bootstrap • Bootstrap Introduction
• Bootstrap Container
• Bootstrap Grid System
• Bootstrap Table
• Bootstrap List Group
• Bootstrap DropDown
Day - 12 BootStrap Components • Bootstrap Forms
• Bootstrap Button
• Bootstrap Badge & Label
• Bootstrap Panels
• Bootstrap Pagination
• Bootstrap Image
• Navbar
• Input Types
Day - 13 Bootstrap Utilities and • Border
Advance Components • Colors
• Flexbox
• Display property
• Invisible Content
• Bootstrap Sizing
• Modals
• Customizing Bootstrap
• Assignment : To style webpage developed in week
– 1 using Bootstrap
Day - 14 Introduction to JavaScript • JavaScript Introduction
• Internal JavaScript
• External JavaScript
• Comments
• Literals, identifiers
• Variables
• Input and Output
Day - 15 Operators and Selection • Arithmetic operators
statements • Relational operators
• Logical Operators
• if statement
• if…else statement
• Nested if…else statement
• if…else if…else statement
• switch statements
Day - 16 Iteration • for loop
• while loop
• do…while loop
• break statement
• continue statement
Day - 17 Functions • built – in functions
• user defined functions
• Arrow functions
• scope of variables
Day - 18 DOM manipulation and • Document Object Model(DOM)
Form Validation • Events in javascript
• Forms and Validation
Day - 19 Array , Objects and JSON • Array in Javascript
• Objects in Javascript
• JSON
Day - 20 String and ES6+ features • String
• JavaScript ES6+ Features
• Assignment
Day - 36 Introduction to MySQL • Introduction to RDBMS
• Overview of MySQL
• MySQL versions and features
• MySQL installation
• Datatypes and variables
Day - 37 Basic SQL Queries • Database creation
• Table creation,alter ,repair,copy,describe
• Insert , update,delete
• Select
• MySQL clauses(Where,distinct,groupby,orderby)
Day - 38 PHP with MySQL • Integrating PHP with MySQL using mysqli
• Integrating PHP with MySQL using pdo
• Insert and update data into table
• Fetching records from table
Day - 39 CRUD application example • Building a Complete CRUD Application
• Dynamic Form Handling with PHP and MySQL
• Validating and Storing User Input
• Testing and Debugging the Application
Day - 40 Advanced Database • Transactions in MySQL
Operations • Indexing and Performance Tuning
• Using Stored Procedures with PHP
• Triggers and Views in MySQL
Day - 41 Working with APIs • Introduction to APIs and RESTful Services
• Consuming APIs using PHP (file_get_contents,
cURL)
• Building a Basic REST API with PHP
• JSON Encoding and Decoding
Day - 42 Security in PHP • Best Practices for Writing Secure PHP Code
• Preventing SQL Injection and XSS Attacks
• Password Hashing and Encryption
• Securing File Uploads
Day - 43 Session Management and • Building a Login and Registration System
Authentication • Implementing Role-Based Authentication
• Secure Password Management (Hashing with
password_hash)
• Best Practices for Managing User Sessions
Day - 44 Web Hosting • Domain Name registration
• Types of Web Hosting
Day - 45 Revision and Q-A PHP core and Advance
Day - 46 Project To create a Website
Day - 47
Day - 48
Day - 49
Day - 50
Day - 51 Introduction to [Link] • What is [Link]?
• Features & Benefits of [Link]
• [Link] vs. JavaScript (Browser vs. Server)
• Installing [Link] and NPM
• Running a Simple [Link] Program
([Link]("Hello, [Link]!"))
Day - 52 Understanding [Link] • Common JS & ES6 Modules (require vs. import)
Modules & File System • Built-in Modules (fs, path, os, etc.)
• Reading & Writing Files using fs module
• Creating & Using Custom Modules
Day - 53 Package Management with • What is NPM (Node Package Manager)?
NPM • Installing and Using Packages (npm install)
• Local vs. Global Packages
• Understanding [Link] and [Link]
• Managing dependencies (devDependencies vs.
dependencies)
Day - 54 Asynchronous Programming • Synchronous vs. Asynchronous Programming
& Callbacks • Callbacks in [Link]
• Callback Hell & How to Avoid It
• Example: Reading a File Asynchronously
Day - 55 Promises & Async/Await • Introduction to Promises (resolve, reject)
• Chaining Promises (.then(), catch())
• async/await for Cleaner Asynchronous Code
• Example: Fetching API Data using async/await
Day - 56 Understanding HTTP • Introduction to the HTTP Module
Module & Creating a Basic • Creating a Simple HTTP Server ([Link])
Server • Handling Different Routes ([Link])
• Sending HTML as Response
Day - 57 Introduction to [Link] • What is [Link] & Why Use It?
• Installing & Setting Up [Link]
• Creating a Basic Express Server
• Handling GET & POST Requests
• Middleware in [Link]
Day - 58 Express Routing & Handling • Understanding Express Router
API Requests • Route Parameters & Query Strings
• Handling JSON Data ([Link]())
• Sending Data as JSON Response
Day - 59 Connecting [Link] with • Introduction to MongoDB & Mongoose
MongoDB (Optional for • Setting Up MongoDB Locally or Using MongoDB
React, but Useful) Atlas
• Connecting [Link] with MongoDB
([Link]())
• Performing CRUD Operations
Day - 60 Setting Up [Link] as a • Serving Static Files in Express ([Link])
Backend for React • CORS & Handling Cross-Origin Requests
• Setting Up a Simple REST API for React
• Fetching Data from [Link] in a React App (fetch
API)
• Best Practices for Backend Development
Day - 61 Introduction to React • Basics of React
• Installation of React
• DOM
• Virtual DOM & Its Working
Day - 62 JSX • Introduction to JSX
• Understanding JSX & Multiline JSX
• ECMASCRIPT
• Difference between ES5 & ES6
• NPM modules
Day - 63 React Elements • Class Components
• Functional Components
Day - 64 Functional Components • Understanding Functional Components
• Component Rendering
• Working with data in Functional Component
Day - 65 Props • Understanding Props data
• Passing Props data to component
Day - 66 Props with Components • Props with Class based Component
• Props with Function based Component
Day - 67 State Components • Creating State Components
• Understanding State Components
• Adding State to the Component
• Passing State to Child Components
• Updating Component State
Day - 68 Working with child • Adding Child Component to Parent Components
component • Passing Data to Child Components
• Updating Parent Data from Child Component
Day - 69 Functions • Interpolating Data in Component
• Invoking Functions in React Component
Day - 70 Events • Raising Event with React Components
• Working With Spread and Rest Operators
Day - 71 Using setState • Working with “setState”
• Understanding “setState” asynchronous behavior
Day - 72 React Hooks • What are React hooks
• Basic hooks
• useState() hook
Day - 73 useState() hook • How to write useState() hook
• When state variable is an array of objects
Day - 74 Additional Hooks • useEffect() hook
• useContext() hook
Day - 75 Custom Hooks • Rules to write React hooks
• Additional hooks
• Custom hooks
Day - 76 Forms • Introduction to Forms in React
• Capturing events from Forms
Day - 77 Form Elements • Uploading Forms
• Working with Form elements
Day - 78 Controller Vs Uncontrolled • Understanding Controlled inputs
• Understanding Uncontrolled inputs
Day - 79 Validating Forms • Error Handling
• Handling validations
Day - 80 Styling in React • Styling Forms
• Inline Styling
• CSS Stylesheet
Day - 81 Introduction to Redux • Understanding Redux in React
• Need of Redux
• What is Redux
Day - 82 Working with Redux • Redux Overview and Concepts.
• Redux Toolkit App Structure.
• Basic Redux Data Flow.
• Using Redux Data
Day - 83 NPM packages for Redux • Principles of Redux
• Pros of Redux
• NPM Packages required to work with Redux
Day - 84 Redux Reducers • Redux Action
• Redux Reducers
• Redux Store
Day - 85 Redux Middleware • Redux Thunk
• Redux Logger
• Redux Saga
• Redux Persist
Day - 86 React Routers • Routing
• react-router
• Features of react-router
Day - 87 Navigation • Configuration of routing using react-router
• Navigation using Links
Day - 88 URL • URL Parameters
• Nested Routes
Day - 89 REST API • Implementing styles using NavLink
• Application Programming Interface
• Build a REST API using json-server
Day - 90 Demo Application • Demo React application using Routing and API
connectivity
Day - 91 Project Project Using REACT-PHP-MYSQL
Day - 92
Day - 93
Day - 94
Day - 95
Day - 96
Day - 97
Day - 98
Day - 99
Day -
100
