STATIC FRONT-END LAB · 01—03

从语义开始，
让网页回归简单。

三个无需框架、无需构建即可运行的学习示例。每个页面都兼顾键盘操作、响应式布局与深色模式。

Three framework-free exercises built to work from a file, a local server, or GitHub Pages.

选择一个练习

Three small sites, three different lessons.

SEMANTIC HTML

Learning Profile

使用标题层级、列表、进度条和折叠详情，构建一个清晰且可访问的个人学习档案。

  • Semantics
  • Progress
  • Details
打开单页练习

RESPONSIVE LAYOUT

Ultimate Field Notes

一个三页运动主题站点，展示响应式导航、信息卡片、时间线和无障碍数据表格。

  • Grid
  • Tables
  • Navigation
打开飞盘站点

MULTI-PAGE EXPERIENCE

Signal Conference

完整的虚构会议站点，包含讲者、日程、会场及一个不会发送数据的报名演示。

  • Forms
  • Content
  • Validation
打开会议站点