LPU - Lovely Professional University
What you'll learn

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.

  • "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"
  • "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"
  • "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)
  • "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)
  • "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
  • 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"

Avatar
Yatika Hasija
Assistant Professor

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