码上问学问代码之理，学编程之道

网站开发 · 项目案例库

面向「网站开发（HTML / CSS / JavaScript）」课程的项目答辩选题参考。下面 12 个项目按难度分为「入门 / 进阶 / 综合」三档，每个项目都给出了技术栈、核心功能、对应知识点与答辩亮点，方便你结合兴趣选题、控范围、做演示。选一个能讲清楚、做完整、可扩展的项目，比堆功能更重要。

💡
选题四原则：① 结合兴趣（你真的用过/想要的东西，讲起来更有底气）；② 范围可控（先定 MVP，再谈扩展，别一上来就做"网站"）；③ 覆盖课程知识点（HTML 结构、CSS 布局、JS 交互至少各占一块）；④ 可现场演示（数据能跑、交互有反馈，答辩时别冷场）。
PART 01

入门 · 静态网页（HTML + CSS）

无需后端，重点考察结构语义化与排版布局

个人简历网页

难度 ★☆☆

用语义化标签 + CSS 排版一份可在线浏览、可一键打印成 A4 的简历，是静态网页最经典的练手项目。

语义化 HTMLFlex / Grid@media print字体排版

核心功能

  • 个人信息区、教育 / 工作经历时间线
  • 技能进度条、联系方式、头像
  • 一键打印 / 导出 PDF（打印样式控制一页 A4）
  • 手机端响应式适配

对应知识点

  • HTML 文档结构、header / section / article
  • 盒模型、定位、Flex 与 Grid 布局
  • print 媒体查询、响应式断点

答辩亮点

打印样式（刚好一页 A4 不溢出）、语义化结构评审、移动端重排。评委最易追问："为什么用 section 而不是 div？"

个人主页 / 名片页

难度 ★☆☆

一个简约的单页个人站：自我介绍 + 作品集入口 + 社交链接，适合作为所有项目的"个人门户"。

Flex 居中CSS 变量过渡动画锚点导航

核心功能

  • 头像 / 简介居中布局
  • 社交链接按钮（GitHub / 邮箱 / 微信）
  • 作品卡片网格 + 悬停效果
  • 回到顶部、平滑滚动

对应知识点

  • Flex 垂直水平居中、间距系统
  • :hover 过渡、CSS 变量复用颜色
  • 锚点 + scroll-behavior 平滑滚动

答辩亮点

把"名片页"作为你其他项目的统一入口，体现工程组织意识；配色用 CSS 变量统一管理，展示可维护性。

课程表 / 学期计划表

难度 ★★☆

用表格标签制作一份可高亮、可横向滚动的课程表，专门练"表格标签 + 合并单元格"。

table 标签rowspan/colspan斑马纹:hover 高亮

核心功能

  • 周一~周日列、节次行
  • 跨行跨列合并连续课程块
  • 当前星期高亮（用 JS 取当天）
  • 移动端横向滚动不挤压

对应知识点

  • table / thead / tbody / tr / th / td
  • rowspan 与 colspan 合并规则
  • 表格专属样式、border-collapse

答辩亮点

rowspan/colspan 合并的"算格子"逻辑最易考察；展示移动端横向滚动方案（overflow-x:auto）。

产品 / 活动宣传页

难度 ★★☆

一个静态落地页（Landing Page）：Hero 主视觉 + 特性区 + 价格/FAQ + 行动按钮，考综合排版。

Grid 布局渐变背景吸顶导航卡片

核心功能

  • 首屏主视觉（标题 + 副文案 + CTA）
  • 三栏特性卡片、价格对比
  • 吸顶导航 + 锚点跳转
  • FAQ 折叠（纯 CSS 或少量 JS）

对应知识点

  • Grid 多列布局、间距节奏
  • 渐变 / 阴影（克制使用）
  • position:sticky 吸顶

答辩亮点

展示"设计稿 → 页面"的还原度；用 sticky 实现吸顶导航是高频考点。
PART 02

进阶 · JavaScript 交互

加入 DOM 操作、事件、本地存储，重点考察"状态 + 反馈"

个人工作台 Dashboard

难度 ★★☆

整合实时时钟、待办清单、快捷书签、本地夜间模式的"浏览器主页"，是 JS 综合能力的最佳载体。

DOM 操作localStoragesetInterval事件委托

核心功能

  • 实时时钟（每秒刷新）
  • 待办增删改查 + 本地持久化
  • 快捷书签网格、白天 / 夜间切换
  • 模块卡片拖拽排序（进阶）

对应知识点

  • JS 变量 / 函数 / 数组方法
  • DOM 增删改、事件监听
  • localStorage 存取、状态管理雏形

答辩亮点

数据刷新页面不丢（localStorage）、"状态 → 视图"的渲染思路，可演示可扩展。

古文鉴赏网站

难度 ★★☆

古典中国风的多页古文阅读站：篇目目录 + 原文 + 逐句译文 + 字词注释，文化与技术结合的好选题。

多页 HTML古典排版锚点目录localStorage 收藏

核心功能

  • 篇目目录 + 锚点跳转
  • 原文 + 逐句译文对照
  • 字词注释悬浮 / 弹层
  • 收藏夹（localStorage）、篇内搜索

对应知识点

  • 页面结构、CSS 衬线字体排版
  • 行距 / 字距 / 留白的编辑感
  • 字符串处理、localStorage

答辩亮点

主题鲜明（文化 + 技术）、排版细节讲究；篇目用 JSON/数组驱动，体现"数据 → 视图"可扩展。

在线 Markdown 笔记

难度 ★★☆

左侧写 Markdown、右侧实时预览的笔记工具，练"输入事件 + 正则解析 + 本地保存"。

textareainput 事件正则解析localStorage

核心功能

  • 左右分栏实时预览
  • 标题 / 列表 / 粗体等基础语法解析
  • 本地自动保存、导入导出 .md
  • 字数统计、主题切换

对应知识点

  • input 事件、字符串与正则
  • 函数拆分（解析 / 渲染）
  • Blob 导出文件

答辩亮点

演示"边写边出"的实时反馈；可讲正则解析的边界（为什么要防 XSS / 转义）。

背单词 / 卡片工具

难度 ★★☆

可自定义词库、卡片翻面、随机抽题、统计正确率的记忆小工具，练数组与随机算法。

数组 / 对象Math.random翻面动画localStorage

核心功能

  • 词卡翻面（正面单词 / 背面释义）
  • 随机抽题、答对 / 答错收集
  • 学习进度与正确率统计
  • 自定义词库导入

对应知识点

  • 数组遍历、对象结构
  • 随机数、洗牌算法
  • CSS transform 翻面

答辩亮点

翻面动画用纯 CSS（transform + backface）；随机算法可对比"真随机 vs 不重复抽题"。

图片画廊 / 相册

难度 ★★★

响应式图片网格 + 点击灯箱大图 + 分类筛选，考 Grid 布局与定位弹层。

CSS Grid灯箱 fixed分类筛选键盘切换

核心功能

  • 瀑布 / 网格布局
  • 分类标签筛选（纯 JS 类名切换）
  • 点击灯箱放大、左右键切换
  • 图片懒加载（loading="lazy"）

对应知识点

  • Grid 自适应列
  • position:fixed 弹层、遮罩
  • 键盘事件、焦点管理

答辩亮点

灯箱的"打开 / 关闭 / 键盘可达"完整交互；筛选用数据属性驱动，体现思路清晰。

番茄钟 / 专注计时

难度 ★★☆

25 分钟专注 + 5 分钟休息循环，带任务清单与提示音，练 setInterval 倒计时与状态机。

setInterval状态机Web AudiolocalStorage

核心功能

  • 工作 / 休息循环倒计时
  • 任务清单 + 已完成番茄数
  • 结束提示音（Web Audio）
  • 暂停 / 重置、当日统计

对应知识点

  • 计时器清除（clearInterval）
  • 状态切换（工作 / 休息 / 暂停）
  • 音频合成（免音频文件）

答辩亮点

讲清"为什么用状态机而不是一堆 if"；计时精度（用时间戳而非单纯递减）是加分点。
PART 03

综合 · 纯前端高阶

不写后端，靠 HTML/CSS/JS 做出"完整可用"的网站，重点考察工程化思维与交互深度

个人作品集网站

难度 ★★★

把多个课程项目、技能、联系方式整合到一个站点，是求职最实用的纯前端项目。

语义化结构分类筛选平滑滚动深色模式

核心功能

  • 项目卡片网格 + 按技术栈筛选
  • 关于我、技能进度条、联系方式
  • 滚动揭示动画（IntersectionObserver）
  • 一键深色 / 浅色切换（localStorage 记忆）

对应知识点

  • Flex/Grid 复杂布局、BEM 命名
  • 事件委托、DOM 操作
  • CSS 变量主题、无刷新交互

答辩亮点

讲清"数据（项目列表）与渲染分离"——加项目只改数据数组、不碰布局代码；可现场切主题演示。

响应式产品官网（单页）

难度 ★★★

一个滚动到底的单页官网：首屏 / 特性 / 价格 / 常见问题 / 联系表单，最练整页布局。

整页布局滚动动效表单校验多断点

核心功能

  • 首屏 Hero + 多个内容区块
  • 滚动揭示与导航高亮（当前区块）
  • 价格卡片对比、FAQ 折叠展开
  • 联系表单前端校验（正则 / 必填）

对应知识点

  • 多断点响应式（手机/平板/桌面）
  • sticky 导航、scroll 事件节流
  • 表单约束校验 + 友好错误提示

答辩亮点

现场拖动窗口从手机拉到桌面，演示三档断点都不乱；讲"为什么平板要单独一档"。

前端小游戏（2048 / 记忆翻牌）

难度 ★★★

用纯 JS 实现完整游戏逻辑，是检验"状态管理 + 事件 + 本地存储"的硬核项目。

状态管理键盘/触摸localStorage动画

核心功能

  • 棋盘/卡牌状态建模与渲染
  • 键盘 + 触摸双操作（移动端可玩）
  • 分数统计、本地最佳记录
  • 胜利 / 失败判定与重开

对应知识点

  • 数据结构（二维数组 / 状态对象）
  • 事件处理、requestAnimationFrame
  • localStorage 持久化

答辩亮点

讲清"视图随状态变化"——一次按键如何更新数据再重绘；展示本地最佳分跨刷新保留。
PART 04

答辩怎么评 · 评分维度与准备清单

评委看什么、你该准备什么
评分维度参考占比评委关注点
功能完整度25%需求是否实现、边界情况是否处理、能否现场跑通
技术深度20%是否用对技术点、有无"为什么这么做"的思考
代码规范15%结构清晰、命名合理、注释到位、无明显冗余
界面美观15%布局合理、配色统一、响应式、细节对齐
演示流畅15%讲解有条理、重点功能现场演示不冷场
问答表现10%能讲清难点、承认不足并说明改进方向
1

需求分析

用一两句话讲清"给谁用、解决什么问题"，别一上来就写代码。

2

技术选型

说明为什么用这套技术（纯静态 / JS 交互 / 无框架），体现取舍思考。

3

核心演示

挑 2~3 个最能体现水平的功能现场演示，提前演练不卡壳。

4

难点讲解

准备一个"最难的坑"，讲你如何发现并解决，比功能列表更加分。

5

代码走查

能指出关键文件 / 函数的作用，结构一目了然。

6

总结展望

坦诚不足 + 可扩展方向（如做 PWA 离线访问、加交互动效、接入组件库）。