Front-End Web Development using React JS

Course Description

This course introduces learners to modern front-end development by covering web fundamentals, JavaScript essentials, and responsive design using Bootstrap or Tailwind CSS. It focuses on building dynamic user interfaces with React, including components, state, and props. Students will learn to integrate APIs and develop real-world applications. The course also emphasizes styling, performance optimization, and the use of industry-standard tools. By the end of the course, learners will be able to design, develop, and deploy interactive web applications. They will gain practical skills required for entry-level front-end development roles.

Course Fee Seats Limited

₹2000.00

Course Details

Duration
Duration
60 HRS
Duration
Course Label
SDC
Course Language
English
Duration
Course Mode
Online
Duration
Timings
7 PM - 9 PM
Days
Monday to Friday
Registration Till
25 May 2026
Duration
Tentative ClassStart Date
summer
Duration
Eligible Schools:
1. School of Computer Science and Engineering 2. School of AI and Emerging Technologies 3. School of Computing and Artificial Intelligence
Certificate Criteria
Certificate Criteria
75% attendance, 50% score in all Exams/CA

Curriculum Snapshot

Explore the comprehensive course modules

1 Week 1:Web Fundamentals + JavaScript Essentials

"How the Web Works (Browser, HTTP, DOM) HTML5 Basics (Forms, Semantic Tags) CSS Basics (Selectors, Box Model)" "CSS Flexbox & Grid Responsive Design (Media Queries) Introduction to Bootstrap/Tailwind " "JavaScript Basics: Variables, Data Types, Operators Functions & Scope" "Arrays & Objects ES6 Features (Arrow Functions,Template Literals, Destructuring)" "DOM Manipulation Events & Event Handling Mini Project: Interactive Web Page"

2 Week 2: React Fundamentals

"Introduction to React Setting up project using Vite" "JSX & Components, Functional Components,Class Components" "Props,Prop drilling & Component Reusability Component Structure" "State & useState Hook Handling Events in React" "Conditional Rendering Lists & Keys Mini Project: To-Do App"

3 Week 3: Advanced React Concepts

"useEffect Hook, useRef Hook, Lifecycle Concepts" "Forms Handling Controlled vs Uncontrolled Components" React Router DOM (Navigation) UseContext Hook, Context API (State Management) Assessment + Mini Project (Multi-page App)

4 Week 4: API Integration Real Apps

"Fetch API & AXIOS Working with REST APIs" Loading states & Error handling CRUD Operations with API Authentication Basics (Login/Signup UI) Project: API-based App (Weather / Blog / Movie App)

5 Week 5: Styling + Optimization + Industry Tools

"CSS Modules / Styled Components Tailwind CSS" useMemo and useCallback Hooks, Performance Optimization (memo, lazy loading) Form Libraries (Formik / React Hook Form) Version Control using Git & GitHub Deployment using Netlify / Vercel

6 Week 6: Advanced + Placement + Project

Redux / Zustand (Intro to State Management) Redux / Zustand (Intro to State Management) Testing Basics (Jest) Major Project Development +Evaluation "Resume Building Interview Questions (React + JS) Mock Interview"

Instructor Spotlight

Learn from leading experts in stem cell research

Yatika Hasija

Yatika Hasija

Assistant Professor

Assistant Professor, Full Stack Application Development School of AI and Emerging Technologies