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

项目评分 · 示范案例

本案例配合《项目评分标准模板》使用，以一个简历类项目为例，按"需求规划 / 结构搭建 / 样式实现 / 布局与响应式适配 / 发布与答辩"五个维度逐条打分并说明扣分理由。本例故意把失分集中在「响应式平板断点」，方便课堂上讲清"标准怎么落地、分给多少、下次怎么改"。案例人物与项目均为教学虚构。

一、案例概况

教学虚构示例，用于课堂讲解
示例学员
李雨晴（化名）
项目名称
《个人简历网站》
项目主题
简历类（制作简历 + 多模板）
技术栈
纯静态 HTML / CSS

一句话定位：为求职准备的个人简历网页，支持三套模板一键切换、在线浏览，并能一键打印成 A4 纸质简历。无后端、无需数据库，纯前端静态项目。

▶ 打开真实网页实例（李雨晴《个人简历网站》· 可切模板 / 打印）

讲解建议：案例里"李雨晴"的失分集中在平板断点缺失；而上面这份真实实例已补齐平板断点（≤1024px 强制单栏），现场把窗口从宽拖到窄，可直观对比"合格"与"优秀"的差距。

二、五维度逐条评分

学员实际做了什么 → 逐项给分 → 维度得分与评语
1

需求规划

总评 10% · 项目内满分 20 16/20良好

学员实际成果

  • 需求分析（写清）：目标用户=应届求职者；核心问题=纸质简历不便分享、HR 更习惯看链接；使用场景=招聘平台附链接、面试现场手机展示。✓ 清晰
  • 功能清单（较完整）：个人信息区、教育/经历时间线、技能进度条、模板 A/B/C 切换、打印导出。但未标注优先级、未区分 MVP 与扩展。✓ 完整 ⚠ 缺优先级
  • 技术选型与计划（过简）：仅写"用 HTML 和 CSS 做"，未说明为何纯静态、无开发里程碑。✗ 缺失

逐项给分（对照标准评分项）

评分项满分得分说明
需求分析88目标用户/问题/场景清晰
功能清单87完整但缺优先级标注
技术选型与计划41仅一句话，无理由无计划
维度合计2016落在"良好 15–17"区间
评语：需求与功能描述清楚，是亮点；但技术选型说明与开发计划缺失，扣在"为什么这么做"的思考上。改进：补一句"为何纯静态（无需后端、易部署）"+ 三阶段计划（结构→样式→响应式）。
2

结构搭建

总评 10% · 项目内满分 20 18/20优秀

学员实际成果

  • 语义化结构（到位）：header 头像区、nav 模板切换、main、section 各模块、article 经历条目、footer。✓
  • 目录组织（规范）：resume/ 下 index.html、css/(base.css, templates.css, print.css)、js/switch.js、img/。✓
  • 代码规范（较好）：缩进统一、模板用"同一结构换样式"的组件化思路；注释略少。✓ ⚠ 注释少

逐项给分

评分项满分得分说明
语义化结构88标签语义准确
目录与文件组织66结构清晰、资源分离
代码规范与可维护64整洁但注释不足
维度合计2018落在"优秀 18–20"区间
评语：结构语义化到位、目录规范，体现工程化意识，是范本级表现；唯一可改进是适当增加关键注释（如模板切换逻辑）。
3

样式实现

总评 12% · 项目内满分 24 22/24优秀

学员实际成果

  • 视觉一致性（统一）：用 CSS 变量统一配色/间距，三套模板风格协调不冲突。✓
  • 交互与状态（细腻）：模板切换按钮 hover/active、技能进度条入场动画。✓
  • 细节打磨（有小瑕疵）：整体精致，但打印时页脚留白偶尔不均。⚠ 打印小瑕疵
/* 三套模板共用同一组设计变量 */ :root{ --brand:#b04a2c; --ink:#2b2520; --gap:14px; } .template-a{ --accent:#b04a2c; } .template-b{ --accent:#5e7a46; }

逐项给分

评分项满分得分说明
视觉一致性88变量统一、模板协调
交互与状态样式88hover/active/动画到位
细节打磨86打印版式小瑕疵
维度合计2422落在"优秀 22–24"区间
评语：视觉统一、交互细腻，是亮点；打印版式细节再打磨即满分。提示学员：用 @media print 显式控制页边距可消除留白不均。
4

布局与响应式适配

总评 10% · 项目内满分 20 13/20合格

学员实际成果

  • 布局技术（稳健）：Flex 双栏（信息侧 + 时间线侧）清晰、盒模型理解到位。✓
  • 响应式断点（主要失分）：只做了桌面 + 手机两档，缺平板断点；平板宽度下双栏过挤、未重排为单栏。✗ 缺平板
  • 浏览器兼容（小问题）：Chrome/Edge 正常，Safari 下进度条圆角略偏移。⚠ Safari

逐项给分

评分项满分得分说明
布局技术88Flex 运用正确
响应式断点83仅两档、平板未适配
浏览器兼容42Safari 小偏移
维度合计2013落在"合格 12–14"区间
评语（讲解重点）：这是本案例最大失分点。桌面布局稳健，但只做"桌面/手机"两档，平板（768–1024px）下双栏拥挤、内容溢出。改进：补 @media (max-width:1024px) 把双栏重排为单栏。Safari 进度条问题加 -webkit-appearance:none 即可。补上平板断点即从"合格"升到"优秀"。
5

发布与答辩

总评 8% · 项目内满分 16（含过程记录） 15/16优秀

学员实际成果

  • 部署上线（完成）：已部署到静态托管，链接可公开访问、无死链。✓
  • 演示与讲解（精彩）：现场演示"切模板 + 打印预览"流畅，能答"为何纯静态"。✓
  • 过程记录（完整）：有课堂练习痕迹 + 开发日志（模板迭代 v1→v3）+ 反思，反思略简。✓ ⚠ 反思简
  • 第 13 周 · 课堂
    完成结构骨架（语义化标签 + 目录）
  • 第 14 周 · 课后
    模板 v1 上线，仅单套样式
  • 第 15 周 · 课后
    v2 增加模板 B/C 与切换，修复手机布局
  • 第 16 周 · 课堂
    v3 补打印样式，部署上线，模拟答辩

    • 逐项给分

    评分项满分得分说明
    部署上线66已上线、可访问
    演示与讲解66流畅、能答追问
    课堂与项目过程记录43日志完整、反思略简
    维度合计1615落在"优秀 15–16"区间
    评语：已上线、演示精彩、过程记录完整（呼应"过程与结果并重"），是加分项；仅《反思》段落可更具体（写清"平板断点为何漏、下次的 checklist"）。

    三、总分汇总与课程总评换算

    项目内 100 分 → ×50% 计入课程总评
    维度总评占比项目内满分本例得分得分率
    1 需求规划10%201680%
    2 结构搭建10%201890%
    3 样式实现12%242292%
    4 布局与响应式适配10%201365%
    5 发布与答辩8%161594%
    项目内合计50%1008484%
    课程总评"项目"项84 × 50% =42 / 50
    总评评语：项目完成度高，结构与样式出色，发布与过程记录完整（符合"过程与结果并重、实操优先"）。主要短板集中在"响应式平板断点"（维度4 仅 65%），补上后即达优秀档。整体属于"良好偏上、一处明显短板"的典型样本，非常适合作为课堂讲解案例。
    改进建议（给学员）：① 补 @media (max-width:1024px) 平板断点，双栏重排单栏；② 修复 Safari 进度条圆角（加 -webkit-appearance:none）；③ 打磨打印页脚留白；④ 需求里补"技术选型理由 + 三阶段计划"。

    四、课堂讲解 · 高频失分点

    把标准讲"活"：学生常在哪扣分
    失分点对应维度典型表现讲评引导
    响应式只做两档布局与响应式桌面 + 手机，平板漏适配强调"三档思维"：桌面/平板/手机都要测
    技术选型不写理由需求规划只写"用 HTML/CSS"追问"为什么不用框架/后端"，逼出取舍思考
    过程记录缺失发布与答辩只有最终文件，无日志标准明确要求"含课堂与项目过程记录"，从第一节课养日志习惯
    只测 Chrome布局与响应式Safari/Firefox 错位交付前跨浏览器自查一次
    功能无优先级需求规划一股脑列功能教 MVP 思维：先核心、再扩展