Introduction & History
Why UI implementation matters, Weiser's three waves of computing (mainframe, personal, ubiquitous), why web tools became the standard, and course goals, assignments, and policies.
Last edited on October 16, 2026
IN4MATX 133
IN4MATX 133 is UCI's User Interface Software course, focused on building interfaces with web technologies: HTML, CSS, JavaScript, TypeScript, and modern UI frameworks.
This page collects lecture-by-lecture notes with live, editable HTML/CSS/JS demos, for classmates who want a structured review of markup and accessibility, styling and responsive layout, the DOM, and UI tooling.
IN4MATX 133 是 UCI 的用户界面软件课程,重点在于用 Web 技术构建界面:HTML、CSS、JavaScript、TypeScript 以及现代 UI 框架。
这个页面汇总按讲整理的课程笔记(目前为英文版),配有可编辑的 HTML/CSS/JS 实时演示,方便同学回顾标记与无障碍、样式与响应式布局、DOM,以及各类 UI 工具。
HTML & Accessibility
How the web works, HTML tags, nesting, attributes, document structure and validation, screen readers and semantic elements, alt text and aria-label, and inclusive design.
Last edited on October 16, 2026
CSS
CSS syntax and linking, element/class/ID selectors, the cascade and specificity, block vs. inline and the box model, positioning, units, pseudo-classes, fonts, and debugging tools.
Last edited on October 16, 2026
Responsive Design & JavaScript 1
Adaptive vs. responsive design, breakpoints and media queries, fluid grids, mobile-first, the Bootstrap grid and components, then an introduction to JavaScript's role and history.
Last edited on October 16, 2026
JavaScript 2
Variables and types, control flow and strings, arrays, objects and JSON, functions as objects, callbacks, forEach/map/filter/reduce, and scope, hoisting, let vs. var.
Last edited on October 16, 2026
DOM Manipulation & Package Management
The Document Object Model, selecting and editing elements, changing the DOM tree, events and listeners, script order, client-side validation, and package managers with npm.
Last edited on October 16, 2026
TypeScript & Data Visualization Tools
TypeScript types, classes and interfaces, tsconfig and declaration files, evaluating UI tools by threshold and ceiling, declarative visualization, and building charts with Vega-Lite.
Last edited on October 16, 2026
AJAX, Fetch & Promises
Web APIs, URIs and HTTP verbs, URL escaping, AJAX with XML vs. JSON, XMLHttpRequest vs. fetch(), asynchronous requests, promises with .then()/.catch(), the same-origin policy, and Promise.all.
Last edited on October 27, 2026
Server-Side Development, Authentication & Authorization
Node.js and npm, reading files, Express and its generator, authentication vs. authorization, OAuth 2.0 and its four steps, the same-origin policy, and OpenID Connect.
Last edited on October 22, 2026
Components in Angular
Frameworks for large clients, installing Angular, Model-View-Controller and how Angular implements it, components and the root component, interpolation/property/event/two-way binding, @if and @for, and nesting components with inputs and outputs.
Last edited on October 29, 2026
Separation in Angular
Standalone components and the root component, routing and ActivatedRoute, services and dependency injection, plain classes and npm libraries, Angular's file structure, and the Rolling Dice service demo.
Last edited on November 3, 2026
课程介绍与计算历史
为什么 UI 实现很重要、Weiser 的三次计算浪潮（大型机、个人计算机、普适计算）、Web 技术为何成为标准，以及课程目标、作业与政策。
最后编辑于 2026 年 10 月 17 日
HTML 与无障碍
Web 如何运作、HTML 标签、嵌套、属性、文档结构与校验、屏幕阅读器与语义化元素、alt 文本与 aria-label，以及包容性设计。
最后编辑于 2026 年 10 月 17 日
CSS
CSS 语法与引入方式、元素/类/ID 选择器、层叠与优先级、块级与行内元素及盒模型、定位、单位、伪类、字体，以及调试工具。
最后编辑于 2026 年 10 月 17 日
响应式设计与 JavaScript（一）
自适应与响应式设计、断点与媒体查询、流式网格、移动优先、Bootstrap 网格与组件，以及 JavaScript 的角色与历史入门。
最后编辑于 2026 年 10 月 17 日
JavaScript（二）
变量与类型、控制流与字符串、数组、对象与 JSON、函数即对象、回调、forEach/map/filter/reduce，以及作用域、提升与 let/var 的区别。
最后编辑于 2026 年 10 月 17 日
DOM 操作与包管理
文档对象模型（DOM）、选择与修改元素、改变 DOM 树、事件与监听器、脚本加载顺序、客户端校验，以及包管理器与 npm。
最后编辑于 2026 年 10 月 17 日
TypeScript 与数据可视化工具
TypeScript 类型、类与接口、tsconfig 与声明文件、用门槛与上限评估 UI 工具、声明式可视化，以及用 Vega-Lite 构建图表。
最后编辑于 2026 年 10 月 17 日
AJAX、Fetch 与 Promise
Web API、URI 与 HTTP 动词、URL 转义、AJAX 中的 XML 与 JSON、XMLHttpRequest 与 fetch()、异步请求、用 .then()/.catch() 处理 Promise、同源策略，以及 Promise.all。
最后编辑于 2026 年 10 月 27 日
服务器端开发、身份验证与授权
Node.js 与 npm、读取文件、Express 及其生成器、身份验证与授权的区别、OAuth 2.0 及其四个步骤、同源策略，以及 OpenID Connect。
最后编辑于 2026 年 10 月 22 日
Angular 中的组件
大型客户端的框架、安装 Angular、模型-视图-控制器（MVC）及 Angular 的实现方式、组件与根组件、插值/属性/事件/双向绑定、@if 与 @for，以及用输入和输出嵌套组件。
最后编辑于 2026 年 10 月 29 日
Angular 中的分离
Standalone 组件与根组件、路由与 ActivatedRoute、服务与依赖注入、普通类与 npm 库、Angular 的文件结构，以及掷骰子服务演示。
最后编辑于 2026 年 11 月 3 日