About this course
Build responsive, accessible, interactive user interfaces with modern component frameworks and front-end tooling.
Course format. Thirteen weeks, four contact hours each: a two-hour lecture (concepts and theory) and a two-hour practice session. The course is project-based; teams carry one running project end to end and present it three times, in weeks 5, 8, and 13.
What you will build
Shipped an accessible single-page application in React or Vue with TypeScript: a composed component hierarchy, predictable store-managed state, client-side routing, WCAG-audited markup, and a Vite code-split build tuned to performance budgets and covered by Vitest and Playwright tests.
Expected outcomes
- Explain the browser document model, the DOM tree, event bubbling and capturing, event delegation, and the shadow DOM encapsulation boundary
- Build component-based interfaces in React and Vue with TypeScript, applying atomic design, composition patterns, and progressive enhancement from semantic HTML through interactive behavior
- Manage shared application state with Redux Toolkit or Pinia, implement asynchronous data fetching with stale-while-revalidate caching, and apply optimistic updates for responsive user experiences
- Design responsive and adaptive layouts using Tailwind CSS across the 375 px to 1440 px viewport range and apply human-factors principles including affordances, Fitts' Law, and cognitive load to guide interaction design
- Configure Vite production builds with code-splitting and lazy loading, audit WCAG AA accessibility compliance with axe DevTools, and evaluate CSR, SSR, SSG, and ISR rendering strategies using Next.js for their SEO, TTFB, and hydration trade-offs
- Develop components in isolation with Storybook and write comprehensive automated tests using Vitest to cover all user-facing features
Key topics
- Component frameworks (React/Vue)
- State management
- Responsive & accessible design
- Build tooling & performance
Theoretical foundations
The concepts and results this course rests on.
- The browser document model: the DOM tree, the event system (bubbling, capturing, and delegation), and the shadow DOM encapsulation boundary
- Progressive enhancement: semantic HTML as the structural baseline, CSS as the presentation layer, and JavaScript as the behavior layer added last
- Asynchronous state management: the Promise model, async/await syntax, stale-while-revalidate caching, server-state synchronization, and optimistic updates
- Reactive state and unidirectional data flow: the Flux pattern, reducer functions, derived state, and immutable update semantics
- Human factors and interaction design: affordances, Fitts' Law, Hick's Law, cognitive load theory, and user mental models
- Responsive and adaptive design: fluid grids, media queries, container queries, viewport units, and mobile-first progressive layout
- Component-driven development and design systems: atomic design, design tokens, isolated component development environments, and composition patterns
- Web performance and Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift, perceived latency, and performance budgets
- Build optimization: module bundling, code splitting, tree shaking, lazy loading, and chunk strategy for production assets
- Rendering strategy trade-offs: client-side rendering, server-side rendering, static site generation, and incremental static regeneration, with their implications for SEO, time-to-first-byte, and hydration costs
Prerequisites
This is a Year-3 course. It assumes the mandatory CS core: data structures and algorithms, operating systems, computer networks, databases, software engineering, and the core mathematics (linear algebra, probability and statistics, calculus, discrete mathematics). It additionally requires the specific prior courses listed below.
Course-specific prerequisites:
- Programming fundamentals
- Basic web technologies (HTML, CSS, JavaScript)
Weekly schedule 13 weeks · lecture + practice
Foundations
Wk 1
The Web Platform and DOM
LectureExamine the browser document model, the DOM tree, event bubbling and capturing, event delegation, and the shadow DOM encapsulation boundary.
PracticeScaffold the project as a React application with Vite and navigate the component tree alongside the live DOM in browser DevTools.
ProjectProject scaffold initialized as a React application with working development server.
Wk 2
Async JavaScript and TypeScript
LectureCover progressive enhancement from semantic HTML through interactive behavior; introduce Promises, async/await, and the stale-while-revalidate caching model for server-state synchronization.
PracticeAdd TypeScript to the project, type all component props and API response shapes, and wire up async data fetching with loading and error states.
ProjectProject fetches data asynchronously through typed interfaces.
Components
Wk 3
Component-Driven Development and Design Systems
LectureIntroduce atomic design, design tokens, component composition patterns, and the role of isolated development environments in maintaining a coherent design system.
PracticeSet up Storybook and document core project components with typed props, usage variants, and interaction stories.
ProjectCore components are isolated, documented, and tested in Storybook.
Wk 4
Reactive State, Unidirectional Data Flow, and Vue
LectureAnalyze reactive state, the Flux pattern, reducer semantics, derived state, and immutable updates; contrast React's model with Vue's Composition API and reactivity system.
PracticeExplore Vue's Composition API and Pinia-based state management; implement a feature equivalent to the React project to experience the contrast.
ProjectComponent hierarchy covers all three user-facing features with clear data-flow contracts.
Wk 5
Specification MilestonePresentation
LectureReview state management design, component boundary decisions, and the architectural implications of data-flow choices.
PracticeStudent teams present their project specification: feature scope, component map, state design, and accessibility and performance goals.
ProjectApproved specification and component architecture plan delivered.
State
Wk 6
State Management with Redux Toolkit
LectureAnalyze server-state synchronization, optimistic updates, and the trade-offs between local, global, and server-owned state; contrast Redux Toolkit slices with Pinia stores.
PracticeIntegrate Redux Toolkit into the project, define feature-domain slices, and migrate component-local state to the centralized store.
ProjectShared application state flows through a Redux Toolkit store with typed actions and selectors.
Wk 7
Responsive and Adaptive Design with Tailwind CSS
LectureExamine fluid grids, media queries, container queries, viewport units, and mobile-first design progression; discuss how utility-first CSS enforces design tokens at scale.
PracticeStyle the project with Tailwind CSS, tuning layouts across all three user-facing features from 375 px to 1440 px.
ProjectApplication layout adapts responsively from mobile to desktop across all features.
Wk 8
Interim Demo MilestonePresentation
LectureDiscuss human factors in UI design: affordances, Fitts' Law, Hick's Law, cognitive load theory, and how mental models shape interaction patterns.
PracticeStudent teams demonstrate the working responsive application and discuss component design and interaction decisions.
ProjectInteractive multi-feature responsive application demonstrated live.
Quality
Wk 9
WCAG Accessibility
LectureCover WCAG AA requirements, semantic landmark roles, ARIA attributes, keyboard navigation patterns, focus management, and inclusive interactive states in a component context.
PracticeAudit the project with axe DevTools and remediate all WCAG AA failures in keyboard navigation, ARIA roles, and color contrast.
ProjectProject achieves WCAG AA compliance verified by axe DevTools across all three features.
Wk 10
Core Web Vitals and Build Optimization with Vite
LectureIntroduce Core Web Vitals (LCP, INP, CLS), perceived latency, and performance budgets; explain module bundling, tree shaking, code splitting, lazy loading, and chunk strategies.
PracticeConfigure the Vite production build with route-based code splitting, lazy-loaded components, and asset caching; measure bundle sizes and Lighthouse scores.
ProjectProject has an optimized, code-split production build meeting defined performance budgets.
Wk 11
Rendering Strategies with Next.js
LectureCompare CSR, SSR, SSG, and ISR for SEO, time-to-first-byte, and hydration cost; discuss when each strategy suits different content types and interactivity requirements.
PracticePrototype a Next.js version of one project feature as both an SSR and an SSG route; measure TTFB and Core Web Vitals to compare rendering approaches.
ProjectRendering strategy evaluated and documented; trade-off decision recorded with measured evidence.
Wk 12
Automated Testing with Vitest
LectureCover component testing strategy, the test pyramid in a component-driven codebase, mocking patterns, and the role of interaction tests in validating user flows.
PracticeWrite Vitest component tests for each user-facing feature and add Playwright interaction tests covering the critical user journeys.
ProjectComprehensive automated test suite covers all three user-facing features.
Capstone
Wk 13
Final Demo and DefensePresentation
LectureSynthesize front-end architecture, accessibility, performance, and rendering strategy principles as a unified engineering discipline.
PracticeStudent teams present the final application with an oral defense covering component design, state architecture, WCAG AA compliance, performance budgets, test coverage, and rendering strategy decisions.
ProjectFinal front-end application delivered with documentation and defended orally.
AI tools in this course.
Students use AI assistants to scaffold React or Vue components, refactor prop and event contracts, and convert rough sketches into typed, composable interfaces. They prompt tools to generate Vitest and Playwright tests, mock API data, and propose accessible ARIA markup, then ask the AI to audit components against WCAG and performance budgets. Editor-integrated agents and browser or Lighthouse MCP connections help diagnose render bottlenecks and bundle bloat and suggest code-splitting changes. Because generated UI code can silently break keyboard navigation or accessibility, students validate every suggestion against real assistive-technology and performance checks.
Student project
Teams design and build a single-page web application with at least three user-facing features, implementing a component hierarchy with shared state management, responsive layouts that work from 375 px to 1440 px, WCAG AA accessibility, an optimized production build, and a comprehensive automated test suite.
Requirements
- Build a working system, not a set of disconnected exercises.
- Be original: a new system that solves a real problem, not a re-implementation of a tutorial or course demo.
- Show real depth: real data, real users or realistic load, and engineering trade-offs that are measured rather than assumed.
- Carry one running project from specification to a deployed, defensible result across the whole term.
- Work in a team of three or four and defend the design at each of the three presentations (weeks 5, 8, and 13).
Example projects
Personal finance dashboardRecipe and meal plannerMovie discovery appKanban task boardWeather and travel plannerMusic playlist managerHabit-tracking applicationEvent and ticket browser
Assessment & grading
Grading is project-based, with no written exam. Teams of three or four present one running project three times.
| Component | What it covers | Weight |
|---|---|---|
| Project · Specification | Presentation 1 (week 5): problem, objectives, and architecture | 20% |
| Project · Interim | Presentation 2 (week 8): the working system demonstrated live | 30% |
| Project · Final | Presentation 3 (week 13): end-to-end demo with oral defense | 50% |
Tools & platforms
- React: build component-based user interfaces
- Vue: build reactive component interfaces
- TypeScript: add static typing to front-end code
- Vite: bundle and serve the application during development
- Redux Toolkit or Pinia: manage application state
- React Router or Vue Router: handle client-side routing
- Tailwind CSS: compose responsive utility-based styles
- Vitest: run unit and component tests
- Playwright: run end-to-end interaction tests
- axe DevTools: audit accessibility compliance
- Lighthouse: measure performance and best practices
Free online courses
Existing free, video-based courses this course can build on, for self-study or as a teaching basis.
- YouTubeLearn React JS in This Free 7-Hour Course
- YouTubeFrontend Web Development: In-Depth Project Tutorial
In Hebrew · בעברית
- YouTubeקורס React מלא בחינם
- YouTubeקורס React - פיתוח צד לקוח
Primary literature
Seminal works for advanced study.
- PaperArchitectural Styles and the Design of Network-based Software Architectures
- PaperA Survey on Reactive Programming
- PaperWeb Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation
- PaperHTML Standard (Living Standard)
- PaperDOM Standard (Living Standard)
- PaperECMAScript Language Specification (ECMA-262)
References
Books and resources link to an online or publisher page.
- DocumentationReact Documentation (Learn React)
- DocumentationVue.js Documentation (Vue 3 Guide)
- DocumentationMDN Web Docs
- DocumentationWCAG 2 Overview (Web Content Accessibility Guidelines 2.2)
- TextbookEloquent JavaScript, 4th Edition
- TextbookHigh Performance Browser Networking
- DocumentationVite Documentation (Getting Started)
Role in each concentration
| Concentration | Role |
|---|---|
| Intelligent Software Systems | Core · Semester 1 |
| Networking & Cyber Security | Elective |
| AI & Robotics | Elective |
| AI and Quantum Computing for Finance | Elective |
| Immersive Systems & Game Development | Core · Semester 1 |
| Defense Technologies & Autonomous Systems | Elective |