原来是yy啊一、练习3到底该练什么，先想明白再动手
"web前端练习3"这个标题看着简单，但它其实卡在一个很微妙的阶段。如果你是按顺序一路做过来的，练习1大概率是照着视频或教程敲一个静态页面，练习2可能是自己独立完成了一个带基础样式和简单交互的落地页。到了练习3，再重复"写个div、上个色、加个hover"这种操作已经没有太多增量了，这个阶段的练习重点应该转向三件事：
- 学会"按需求拆页面"，而不是拿到设计稿就从头写到尾；
- 学会"让页面数据动起来"，也就是通过接口或本地数据文件去渲染内容；
- 学会"遇到报错能自己排查"，尤其是网络相关的问题。
我在带新人时经常讲一句话：前两个练习是在练手，第三个练习是在练脑子。这个阶段做得好的话，你会突然发现自己能看懂很多以前觉得高深的东西，比如框架为什么会存在、接口联调是什么意思、UI给了标注图之后开发要怎么还原。
所以这次练习，我给自己的设定是做一个"作品集风格的产品展示页"。页面本身涵盖了导航栏、轮播主视觉、卡片列表、表单区等常见的业务模块，同时加入了一个非常关键的动作——通过fetch请求一个本地的JSON数据文件来渲染卡片列表。这个动作直接决定了这次练习的量级：它不是纯静态页面了，而是一个"靠近真实业务"的页面。
这个练习适合谁？不管你是在校学生、转行自学的人，还是已经在做切图但还没碰过数据请求的初级开发者，都可以拿这个题目练一遍。它不需要你有任何框架基础，不需要懂Node.js，也不需要会构建工具，只要你有HTML、CSS、JavaScript的入门知识，再补上一点HTTP和JSON的概念就能跟完全程。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
二、练习前的基础准备与整体思路
2.1 你需要安装和准备的工具清单
先把我这次练习实际用到的工具列一份清单。不是广告，都是免费或者社区常用的东西，你大概率已经装了大部分：
| 工具 | 用途 | 是否必须 | 备注 |
|---|---|---|---|
| VS Code | 代码编辑器 | 推荐 | 也可以用任意编辑器，但VS Code的Live Server插件非常好用 |
| Live Server插件 | 启动本地开发服务器 | 强烈推荐 | 后面会解释为什么不能直接双击打开HTML文件 |
| Chrome浏览器 | 调试页面 | 必须 | DevTools是排错的核心工具 |
| Git | 版本管理 | 推荐 | 练习3开始建议养成每次改动提交一次的习惯 |
| JSON格式化工具 | 校验数据文件 | 可选 | 出错时排查速度快很多 |
有一点我想单独说一下：很多新手会在这一步卡住，觉得"写个页面为什么要装一堆东西"。真正的理由是，做练习1、练习2的时候，页面里没有数据请求，浏览器双击打开HTML文件就能工作。但练习3一旦引入fetch请求本地JSON文件，浏览器基于安全策略会限制"file://协议"下的访问，这时候不启动本地服务器，页面大概率是白屏或报错。装Live Server这个动作，本质上是在提前模拟真实开发环境。
2.2 技术选型解析：原生三件套还是引入框架
这次练习，我没有用Vue或React，只用HTML + CSS + JavaScript原生实现。原因不是框架不好，而是练习阶段的目标决定了选型：
- 如果你还没完全理解DOM操作、事件绑定和异步请求，直接用框架很容易变成"会调用但不懂原理"；
- 原生JavaScript写一遍网络请求、循环渲染、事件委托，你才会真正理解那些框架帮我们做了什么；
- 练习3的数据量不大，交互也不复杂，原生写法并不会让代码变得很难维护。
当然，如果你已经在简历上写了熟悉Vue，那练习3可以考虑一个小任务：先原生实现，再用框架实现一遍，对比两者的差异。但如果你是第一次接触数据请求，我很不建议在练习3就跳进框架，先把这一步走扎实，后面学框架会顺畅很多。
2.3 页面架构先画出来，再动手写代码
我习惯在写任何代码之前，先在纸上或者用简单的文本工具把页面结构列出来。这次练习的产品展示页，我把它划分成了5个区块：
- Header导航区：包含Logo、导航菜单和一个按钮，滚动到顶部时固定住；
- Hero主视觉区：一个大面积的首屏，左侧文字、右侧插画或者图片，保证第一次打开页面的人能在一秒内看懂这个站是干什么的；
- 作品展示区：这是本次练习的核心，数据从data.json中读取，用JavaScript循环渲染成卡片；
- 功能特性区：展示产品的几个核心卖点，用小图标加标题加描述的结构；
- 表单区块：一个联系或订阅表单，提交时先做前端校验，再弹出一个结果提示。
这个结构没有任何花哨，是业务开发里最常见的经典布局。但它带来的训练价值很明确：页面上有的东西，一部分是写死的，一部分是需要数据驱动的，你得清楚每一块内容应该用什么方式去实现。另外，在写CSS之前，我建议先给自己的页面选定两到三个主色、一个强调色、一个正文字号和一个标题字号，避免写到一半开始纠结颜色和大小。
三、动手搭建：从页面骨架到样式还原
3.1 HTML结构规划与语义化
第一步是搭HTML骨架。你可能觉得结构很简单，实际上这里有个容易忽略的考点：语义化标签的使用。不要整篇都是div，我这次使用了header、nav、main、section、article、footer这些标签。这么做的直接理由是SEO友好，间接理由是当你工作以后拿到别人写的代码，语义清晰的页面会减少很多沟通成本。
我把作品展示区的结构预先定成这样：
html复制<section id="works">
<div class="container">
<h2>精选项目</h2>
<p class="subtitle">以下数据来自本地 data.json</p>