Frontend

Module 1: HTML and CSS

The web platform

Faculty: Deepak Rohilla, senior frontend engineer. You start with documents and layout — not a React tutorial on day one.

HTML that means something

• Landmarks, headings, forms, buttons that are buttons
• Images with alt that is honest
• A page that works without CSS as a check

CSS layout

• Flex and grid for real UI, not a gallery of tricks
• Responsive breakpoints you can defend
• Spacing and type as a system, not magic numbers

States

• Hover, focus, disabled — visible, not decorative
• Dark/light only if you can keep contrast
• A broken layout you fix in DevTools

Review bar

• Deepak’s bar: can a keyboard user finish the form?
• Does the title match the page?
• No div soup without a reason

You leave with a multi-section landing page Deepak would not reject for semantics.

Module 2: JavaScript

The web platform

The language of the browser. You will manipulate the DOM, fetch data, and handle errors without a framework hiding them.

Language

• let/const, functions, arrays/objects, modules
• Async: promises, fetch, abort
• Events and when not to add a listener per pixel

DOM

• Query, create, update without innerHTML as a habit
• Forms: validate, then submit
• Accessibility: focus management on a modal

Debugging

• Breakpoints, network tab, a 4xx you caused
• Source maps in a tiny bundler or none

Boundaries

• Not Java/Spring
• Not ‘learn 12 frameworks’
• Not a design-tool certification

You leave with a vanilla JS app that fetches, renders, and fails visibly.

Module 3: React foundations

React

React after you can do it without React. Components, state, effects, and lists that do not remount the universe.

Components

• Props down, events up
• Composition over a 400-line App.jsx
• Keys that are ids, not indexes, when the list mutates

State and effects

• useState for UI state, not a global dump
• useEffect: fetch, subscribe, cleanup
• The bug: effect that loops

Routing and forms

• Client routes without breaking refresh
• Controlled inputs, errors, disabled submit
• A loading and empty state

Deepak’s review

• Name the state. Name the server data.
• No ‘any’ if you use TypeScript — optional but encouraged
• A11y on custom controls

You leave with a React UI that lists, filters, and submits without a tutorial repo clone.

Module 4: Quality — a11y and performance

React

Senior frontend work is constraint. You will measure, not decorate.

Accessibility

• Keyboard, labels, live regions when needed
• Color contrast you check
• A screen-reader pass on the capstone

Performance

• Bundle size, images, waterfalls
• Lighthouse as a conversation, not a trophy
• Code-split a route

CSS in a React app

• Modules or a small token file — pick one
• No 40 competing CSS-in-JS religions as the syllabus

Testing-lite

• A few component tests or Playwright-shaped smoke
• A bug you caught before the call

You leave with a checklist Deepak uses: a11y, perf, and a note on what you skipped.

Module 5: Capstone

React

Ship a UI someone can use on a phone. Mentored review with Deepak Rohilla.

Capstone

• One product surface: dashboard, checkout-lite, or content app
• README: how to run, stack, known gaps
• Deploy or a recorded demo

Walkthrough

• Three minutes: decisions, not a feature tour
• What you would rewrite with more time
• Career call: Frontend vs Java vs Gen AI for Developers

Professional habits

• PR description
• Issue a teammate could pick up
• No fake CTC

Published terms

• ₹40,000, 3 months, live online
• Placement support, certificate, internships as on the page

You leave with a deployed or demoable React app and a review note from the frontend track.