Advanced Frontend Development

Course Objectives

This course is designed to provide a comprehensive understanding of modern web

development, covering both front-end and back-end technologies. By the end of the
course, participants will be able to:

1.​ Web Development Fundamentals (AFD_WD - HTML/CSS/JS)​

○​ Understand the structure and semantics of HTML for building web pages.
○​ Apply CSS for styling and responsive web design.
○​ Utilize JavaScript for interactive and dynamic web functionalities.
2.​ Backend Development with Node.js (AFD_NE)​

○​ Develop server-side applications using Node.js.

○​ Implement RESTful APIs and handle HTTP requests.
○​ Manage asynchronous programming using promises and callbacks.
3.​ Front-End Development with React (AFD_RT)​

○​ Build interactive and reusable UI components using React.

○​ Manage state and props effectively for dynamic applications.
○​ Integrate React applications with APIs for real-world data handling.
4.​ Project Implementation (AFD_Proj)​

○​ Apply acquired knowledge to build a full-fledged web application.

○​ Follow best practices in coding, debugging, and version control.
○​ Work with databases, authentication, and deployment strategies.
5.​ Database Management with SQL & MySQL (AFD_SQL)​

○​ Understand relational database concepts and normalization.

○​ Perform CRUD operations and write complex SQL queries.
○​ Optimize database performance and ensure data security.
6.​ Core PHP Development (AFD_PHP_CORE)​

○​ Learn the fundamentals of PHP for dynamic web development.

○​ Handle form submissions, sessions, and file uploads.
○​ Implement basic authentication and authorization mechanisms.
7.​ Advanced PHP Concepts (AFD_PHP_ADV)​
 ○​ Work with object-oriented PHP for scalable applications.
○​ Integrate PHP with MySQL for backend development.
○​ Implement security best practices and performance optimizations.

This course equips learners with hands-on experience and industry-relevant skills to
build modern web applications efficiently.

Exit Profile for Freshers

Upon successful completion of this course, freshers will be equipped with essential
skills in web development, making them eligible for various entry-level roles in the IT
industry. Potential exit profiles include:

1.​ Frontend Developer​

○​ Proficient in HTML, CSS, and JavaScript for building responsive and

interactive UI.
○​ Experience with React.js for developing component-based web
applications.
○​ Understanding of UI/UX principles and modern web frameworks.
2.​ Backend Developer​

○​ Hands-on experience with Node.js and PHP for server-side development.

○​ Ability to design and develop RESTful APIs.
○​ Proficiency in database management using SQL and MySQL.
3.​ Full Stack Developer (Trainee/Junior)​

○​ Competent in both frontend and backend technologies, including React,

Node.js, and PHP.
○​ Ability to develop and integrate complete web applications.
○​ Experience in handling authentication, database management, and
deployment.
4.​ Web Developer​

○​ Strong foundation in web development with hands-on project experience.

○​ Ability to develop, test, and maintain web applications.
○​ Understanding of hosting, domain management, and performance
optimization.
5.​ Software Engineer (Web Technologies)​
 ○​ Exposure to software development life cycle (SDLC) and agile
methodologies.
○​ Problem-solving skills in debugging and optimizing web applications.
○​ Knowledge of industry best practices in security and performance.
6.​ PHP Developer​

○​ Expertise in Core and Advanced PHP development.

○​ Experience in developing dynamic web applications with MySQL
integration.
○​ Understanding of MVC frameworks like Laravel or CodeIgniter (optional).
7.​ Database Developer/Administrator (Entry-Level)​

○​ Strong understanding of SQL queries, database design, and optimization.

○​ Ability to manage MySQL databases and handle data operations.
○​ Knowledge of database security and backup strategies.

Course Module Structure

Module Name Self Learning ILT Total Duration

Duration(Hours) Duration(Hours) (Hours)

Web 0 30 30
Development(AFD_WD)

Node(AFD_NE) 0 10 10

React(AFD_RT) 0 53 53

Project(AFD_Proj) 0 10 10

SQL+MySQL(SQL_MySQL 0 10 10
_AFD)

Core 0 30 30
PHP(AFD_PHP_CORE)

Advanced 0 20 20
PHP(AFD_PHP_ADV)

Sprint 1 Project 0 10 10
(AFD_Sprint1)
Gen AI 10 10 20

Tech Orientation 0 12 12

Soft Skill 0 60 60

Total Hours 10 255 265

Curriculum

MODULE: WEB DEVELOPMENT (HTML/CSS/JS) (AFD_WD)

Day Topic Subtopics

• Overview of web development
• Introduction of HTML
Introduction to Web
1 • Structure of html page, elements, tags
Development and HTML
• Text formatting tags
• Font element
• Ordered , Unordered and Definition List
2 Working with List and Media • <img> tag and its attributes
• <audio> , <video> and <embed> tags and its attributes
• Table creation: <table>,<tr>, <th>,<td> tags and its attributes
3 Table and hyperlink • <caption>,<thead>,<tbody>,<tfoot> tags
• Internal, External and Global Hyperlink
• <form> tag and its attributes
4 Forms in html • <input> tag and its attributes
• <select>,<option>,<textarea>, <label>,<fieldset>,<legend>
• Semantic tags: <header>, <footer>, <nav>, <article>,
<section>, <aside>
• Html 5 features : <canvas>, <svg>, and
Semantic html and html5
5 <iframe>,<figure>,<figurecaption>
features
• 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)
 • CSS Introduction
• Syntax of CSS
• Selectors in CSS(Basic, Class, ID, Grouping Selectors)
6 Introduction to CSS
• Inline CSS
• Internal CSS
• External CSS
• Background
• Colors
7 CSS Properties • Border
• Margin and Padding
• Font and Text
• Layout
• Grid
• Table
8 CSS Layout and Position
• Box model
• Position
• Display
• Animation
• Transition
9 Advance CSS features
• CSS Flexbox
• Media queries for responsive design
• Vertical Menu Bar
• Horizontal Menu Bar
• Drop Down Menu Bar
10 Miscellaneous
• Pagination
• Assignment : To apply styles on web page developed in
week - 1
• Bootstrap Introduction
• Bootstrap Container
• Bootstrap Grid System
11 Introduction to Bootstrap
• Bootstrap Table
• Bootstrap List Group
• Bootstrap DropDown
• Bootstrap Forms
• Bootstrap Button
• Bootstrap Badge & Label
• Bootstrap Panels
12 BootStrap Components
• Bootstrap Pagination
• Bootstrap Image
• Navbar
• Input Types
 • Border
• Colors
• Flexbox
• Display property
Bootstrap Utilities and • Invisible Content
13
Advance Components • Bootstrap Sizing
• Modals
• Customizing Bootstrap
• Assignment : To style webpage developed in week – 1 using
Bootstrap
• JavaScript Introduction
• Internal JavaScript
• External JavaScript
14 Introduction to JavaScript • Comments
• Literals, identifiers
• Variables
• Input and Output
• Arithmetic operators
• Relational operators
• Logical Operators
Operators and Selection • if statement
15
statements • if…else statement
• Nested if…else statement
• if…else if…else statement
• switch statements
• for loop
• while loop
16 Iteration • do…while loop
• break statement
• continue statement
• built – in functions
• user defined functions
17 Functions
• Arrow functions
• scope of variables
• Document Object Model(DOM)
DOM manipulation and Form
18 • Events in javascript
Validation
• Forms and Validation
• Array in Javascript
19 Array , Objects and JSON • Objects in Javascript
• JSON
 • String
20 String and ES6+ features • JavaScript ES6+ Features
• Assignment

MODULE: Node.js (AFD_NE)

• What is Node.js?
• Features & Benefits of Node.js
1 Introduction to Node.js • Node.js vs. JavaScript (Browser vs. Server)
• Installing Node.js and NPM
• Simple Node.js Program
• Common JS & ES6 Modules (require vs. import)
Understanding Node.js
2 • Built-in Modules (fs, path, os, etc.)
Modules & File System
• Reading & Writing Files using fs module
• What is NPM (Node Package Manager)?
• Installing and Using Packages (npm install)
Package Management with
3 • Understanding package.json and package-lock.json
NPM
• Managing dependencies (devDependencies vs.
dependencies)
• Synchronous vs. Asynchronous Programming
Asynchronous Programming
4 • Callbacks in Node.js
& Callbacks
• Callback Hell & How to Avoid It
• Introduction to Promises (resolve, reject)
• Chaining Promises
5 Promises & Async/Await
• Parallel Promises
• async/await for Cleaner Asynchronous Code

MODULE: React Module (AFD_RT)

• Basics of React
• Installation of React
1 Introduction to React
• DOM
• Virtual DOM & Its Working
• Introduction to JSX
• Understanding JSX & Multiline JSX
2 JSX • ECMASCRIPT
• Difference between ES5 & ES6
• NPM modules
 • Introduction to React Elements
• DOM Elements
3 React Elements
• Functional Components
• Class Components
• Understanding Props data
• Passing Props data to DOM element
4 Props in React
• Passing Props data to Functional Component
• Passing Props data to Class Component
• Creating State Components
• Understanding State Components
5 State Components • Adding State to the Component
• Passing State to Child Components
• Updating Component State
• Adding Child Component to Parent Components
Working with child
6 • Passing Data to Child Components
component
• Updating Parent Data from Child Component
• Introduction to functions
7 Functions • Invoking Functions in React Component
• Interpolating Data in Component
• Introduction to Events
8 Events in React • Raising Event with React Components
• Working With Spread and Rest Operators
• Introduction to setState
• Understanding Synchronous and Asynchronous behavior of
setState
9 Using setState
• Functional updates in setState
• Merging state updates
• Handling state updates in event handlers
• Concept of Hooks
10 Introduction to React Hooks • Why Use Hooks in React
• Key Features of React Hooks
• List of common React Hooks
11 useState() hook • Basics of useState Hook
• Advanced Use of useState Hook
• Understanding useEffect()
12 Additional Hooks
• Understanding useContext()
• Creating Custom Hooks
Custom Hooks and Some • useRef()
13
other Hooks • useMemo() and useCallback()
• useReducer()
 • Introduction to Forms in React
14 Forms
• Capturing events from Forms
• Working with Form elements
15 Forms Elements
• Uploading Forms
Controlled Vs Uncontrolled • Understanding Controlled inputs
16
inputs in Forms • Understanding Uncontrolled inputs
• Error Handling
17 Validating Forms
• Handling validations
• React List
18 List , Map and Tables • React Map
• React Tables
• Introduction of CSS in React
• Inline Styling
19 Styling in React • CSS Stylesheet
• CSS Modules
• Styled Component
• What is Redux
• Need of Redux
20 Introduction to Redux
• History of Redux
• Redux Concepts
• Redux Toolkit App Structure.
21 Working with Redux
• Basic Redux Data Flow.
• Principles of Redux
22 NPM packages for Redux • Pros of Redux
• NPM Packages required to work with Redux
• Redux Action
Redux Action, Reducer and
23 • Redux Reducers
Store
• Redux Store
• Redux Thunk
• Redux Logger
24 Redux Middleware
• Redux Saga
• Redux Persist
• Routing
25 React Routers • react-router
• Features of react-router
• Configuration of routing using react-router
• Navigation using Links
26 Navigation
• URL Parameters
• Nested Routes
 • Application Programming Interface
27 REST API • REST API: Features and Methods in detail
• Build a REST API using json-server
28 Demo Application • Demo React application
29 Revision Revision of Contents

MODULE:Project Module (AFD_Proj)

1 Project Project Using REACT

• Introduction to RDBMS
• Overview of MySQL
1 Introduction to MySQL • MySQL versions and features
• MySQL installation
• Datatypes and variables
• Database creation
• Table creation,alter ,repair,copy,describe
2 Basic SQL Queries • Insert , update,delete
• Select
• MySQL clauses(Where,distinct,groupby,orderby)
• Boolean Operators
Operators and Aggregate • The AND Keyword
3
Functions • The OR Keyword
• Aggregate Functions
• Introduction to Joins
• Inner Join
4 Joins • Outer Join
• Left Outer Join
• Right Outer Join
• Transactions in MySQL
Advanced Database • Indexing and Performance Tuning
5
Operations • Using Stored Procedures
• Triggers and Views in MySQL
 • Overview of PHP
• Installation of xampp/wamp server
• Writing php script
1 Introduction To PHP
• Executing php script
• Literals, identifiers, variables
• Operators(Arithmetic,Relational,Logical)
• if statement
• if…else statement
2 PHP Conditional Statement • Nested if…else statement
• if…else if…else statement
• switch statements
• for loop
• while loop
• do…while loop
3 PHP Looping Construct
• for-each loop
• break statement
• continue statement
• Html forms and GET and POST methods
• PHP superglobals($_GET, $_POST,
4 Working with Forms in PHP $_REQUEST,$_SERVER)
• Validating User Input
• Preventing Cross-Site Scripting (XSS)
• Built-in functions
• User defined functions
5 Functions in PHP
• returntype and parameters
• scope of variables(Global, Local, Static)
• Introduction to Array
• Indexed Array
6 Array in PHP • Associative Array
• Multi-dimensional Array
• Array functions
• String creation
• String manipulation
7 String in PHP
• String functions
• Regular expressions
• Creating File
• Read and write operation in file
8 File Handling in PHP • Uploading file
• Downloading file
• Various file functions
 • Cookie
9 State Management in PHP
• Session
• Oops Concepts
Object-Oriented Programming • Class and objects
10
(OOP) • Access Specifiers
• Constructors and destructors
• Inheritance
11 Inheritance
• Type of Inheritance
• Polymorphism
• Method Overloading
12 Polymorphism
• Method Overriding
• Type Hinting
• Abstract class
• Interface
13 Abstraction
• Trait
• Static Methods and properties
• Types of Errors in PHP
• Custom Error Handling (set_error_handler)
14 Error and Exception Handling
• PHP Exceptions (try, catch, finally)
• Debugging Techniques and Tools
• Image Upload and Resizing
Working with Files and • PHP GD Library Basics
15
Images • Creating Thumbnails Dynamically
• Handling Large Files in PHP
• Integrating PHP with MySQL using mysqli
• Integrating PHP with MySQL using pdo
1 PHP with MySQL
• Insert and update data into table
• Fetching records from table
• Building a Complete CRUD Application
• Dynamic Form Handling with PHP and MySQL
2 CRUD application example
• Validating and Storing User Input
• Testing and Debugging the Application
• Introduction to APIs and RESTful Services
• Consuming APIs using PHP (file_get_contents, cURL)
3 Working with APIs
• Building a Basic REST API with PHP
• JSON Encoding and Decoding
• Best Practices for Writing Secure PHP Code
• Preventing SQL Injection and XSS Attacks
4 Security in PHP
• Password Hashing and Encryption
• Securing File Uploads
 • Building a Login and Registration System
• Implementing Role-Based Authentication
Session Management and
5 • Secure Password Management (Hashing with
Authentication
password_hash)
• Best Practices for Managing User Sessions

1 Project To create a Website(PHP+MYSQL)