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 component model and unidirectional data flow in modern frameworks
- Analyze the document object model, rendering, and reconciliation foundations
- Build component-based interfaces with React or Vue
- Manage application state with predictable patterns and stores
- Design responsive layouts using modern CSS and design principles
- Apply accessibility standards grounded in the WCAG guidelines
- Configure modern build tooling and module bundling
- Measure and optimize front-end performance and loading behavior
- Test components and user interactions systematically
- Evaluate trade-offs between rendering strategies and architectures
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 document object model and the browser rendering pipeline
- The component model and unidirectional data flow
- Declarative rendering, reconciliation, and the virtual DOM
- Reactive programming and dependency-tracked state propagation
- WCAG accessibility principles and semantic, inclusive interaction
- The critical rendering path and front-end performance metrics
- Module bundling, tree shaking, and code splitting
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 rendering pipeline, the DOM, and the event model as core abstractions.
PracticeSet up the toolchain and build a small DOM-driven page for the project shell.
ProjectProject scaffold and initial static interface are established.
Wk 2
Modern JavaScript
LectureCover modules, asynchronous programming, and the language features behind reactive UIs.
PracticeRefactor the project shell into modular JavaScript with async data loading.
ProjectProject loads data asynchronously into a modular front end.
Components
Wk 3
Component Model and React or Vue
LectureIntroduce the component model, declarative rendering, and unidirectional data flow theory.
PracticeRebuild the interface as components in React or Vue.
ProjectProject interface is implemented as reusable components.
Wk 4
Props, Events, and Composition
LectureDiscuss component composition, data binding, and the design of clean component APIs.
PracticeCompose the project from nested components with clear prop and event contracts.
ProjectProject features a composed component hierarchy with clear interfaces.
Wk 5
Specification MilestonePresentation
LectureReview state management theory and how component boundaries shape architecture.
PracticeStudent teams present their project specification: feature scope, component map, and accessibility and performance goals.
ProjectApproved specification and component architecture plan are delivered.
State
Wk 6
State Management
LectureAnalyze local versus global state, stores, and predictable state-update patterns.
PracticeIntroduce a state store and centralize shared project state.
ProjectProject manages shared state through a predictable store.
Wk 7
Routing and Data Fetching
LectureCover client-side routing, data caching, and synchronization with server state.
PracticeAdd routing and resilient data fetching with loading and error states.
ProjectProject supports multiple routes with robust data fetching.
Wk 8
Interim Demo MilestonePresentation
LectureDiscuss forms, validation, and managing complex interactive state.
PracticeStudent teams present an interim demo of the working component application and discuss design choices.
ProjectInteractive multi-view application is demonstrated.
Quality
Wk 9
Responsive Design
LectureExamine responsive layout theory, fluid grids, and mobile-first design principles.
PracticeMake the project fully responsive across breakpoints with modern CSS.
ProjectProject adapts cleanly across mobile and desktop layouts.
Wk 10
Accessibility
LectureTeach WCAG principles, semantic markup, ARIA, and inclusive interaction design.
PracticeAudit and remediate the project against accessibility standards.
ProjectProject meets core accessibility guidelines with verified fixes.
Wk 11
Build Tooling and Bundling
LectureExplain module bundling, tree shaking, code splitting, and dev-server theory.
PracticeOptimize the project build with Vite, code splitting, and asset handling.
ProjectProject has an optimized, code-split production build.
Wk 12
Performance and Testing
LectureCover web performance metrics, the critical rendering path, and component testing strategy.
PracticeProfile and tune the project performance and add component and interaction tests.
ProjectProject meets performance budgets and has an automated test suite.
Capstone
Wk 13
Final Demo and DefensePresentation
LectureSynthesize front-end architecture, accessibility, and performance principles.
PracticeStudent teams present the final demo with an oral defense of component design, accessibility, and performance decisions.
ProjectFinal front-end application is delivered with documentation and defense.
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 one single-page web application that grows from a static shell into a component-based, state-managed product. The application is made responsive, accessible to WCAG standards, and tuned to performance budgets with an optimized build. Every increment is validated through component and interaction tests.
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 to read for graduate-level depth.
- 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 |