企业官网建设流程全解析

工作到第五六个年头，回头再看自己早些年写的页面，那种感觉挺微妙。我这次下决心重拾前端，起因很朴素：手上接了个需要自己搭界面的活，结果布局调了半天调不明白，Flex 的对齐属性全靠记忆瞎猜，JS 里的事件委托写起来还要翻文档。基础这东西不用就退化，而且退化得比你想的快。于是我把一套前端入门课程的练习篇重新翻出来，配套视频一集一集看，案例一个一个敲，从 HTML 标签、CSS 盒模型一直练到 DOM 操作和事件。这篇不是教程，是我把这套配套视频里的练习全部重做一遍之后，关于怎么练、练什么、卡在哪儿、怎么爬出来的完整记录，适合那些有基础但生疏了想捡回来的人，也适合刚入门正在跟着视频练、但练完就忘的新手。

1. 重拾前端为什么必须从"动手练"切入而不是"再看一遍教程"

1.1 眼高手低的真实成因拆解

我先说说自己第一次"重拾"失败的经历，那次我选的是把课程视频从头到尾刷一遍。倍速开着，看的时候频频点头，"哦这个我知道""这个简单"，两个小时刷完十集，成就感拉满。第二天让我手写一个三栏布局，我卡在清除浮动上，卡了四十分钟。原因不复杂：看视频是被动接收，写代码是主动调用，大脑在这两件事上调用的机制完全不一样。看的时候你只需要"识别"，写的时候你要"生成"，而生成的路径需要反复走才能形成稳定的神经回路。

更麻烦的是，视频有"节奏保护"。老师讲到position: absolute的时候，会顺带说出"记得给父元素加相对定位"，这句话在视频里出现得恰到好处，你听着觉得理所当然；但等你自己面对一个元素飞出去的时候，脑子里根本不会自动弹出这句话。视频把"知识"和"触发这个知识的场景"已经帮你缝合好了，你产生的是一种被缝合过的错觉。练习的意义，就是把这根线拆开，让你自己去缝。

所以我后来给自己定了个硬规矩：每个知识点，视频只看一遍，然后关掉视频默写三遍，最后改一个需求。这三步分别对应识别、生成、迁移，也就是练习篇真正该干的事。配套视频里的案例其实设计得挺有梯度，从单个标签的用法到一整个页面，如果你只是"跟着敲"，那就浪费了这个梯度，必须自己加一层"关掉视频"的动作。

1.2 练习篇的定位与我给自己设计的推进路径

这套练习篇的定位很明确：它是肌肉记忆训练场，不是知识索引。你在里面不会遇到什么前沿特性，全是float、padding、addEventListener这类老掉牙的东西，但恰恰是这些东西，构成了你之后看任何新框架时的底气。我见过太多人 React 写得飞快，但让他处理一个元素的垂直居中，他还是条件反射地写margin: 0 auto然后发现没用。

我的推进路径分四段，按周切：

这个路径的关键在于每周的验收方式不是"我看完了"，而是"我能不看资料写出来"。这是个很残酷的标准，但你一旦习惯了这种标准，进步速度会比"刷完"快两到三倍。另外说一下，我给每一周都留了缓冲，因为实际执行下来必然会卡住，别把计划排得太满，卡住才是正常状态，卡住的地方就是你的真实盲区。

2. 练习环境准备与工具链搭建

2.1 编辑器配置：够用就行，别在这上面花两天

我见过不少人在"重拾"的第一天，花整整一天折腾编辑器主题、字体、快捷键，然后心满意足地关掉电脑。这是个特别隐蔽的拖延陷阱。我自己的配置极简：一个主流代码编辑器，装三四个插件，其余全部默认。

必须装的插件只有两类。一类是实时预览：改完保存，浏览器自动刷新，这个能省掉大量"改一行、切窗口、F5"的时间，一天下来能省出半小时。另一类是标签自动补全：输入div.card>ul>li*3按一下键就展开成嵌套结构，写 HTML 骨架时提速非常明显。其他的格式化、括号高亮、路径提示，属于锦上添花，装不装都行。

这里有个实操心得：练习阶段千万不要装"代码片段库"类插件。那些插件会让你输入三个字母就补全一整段 Flex 布局代码，看起来很爽，但你练的就是"手写"这件事，插件帮你补全等于别人替你练了。我第一周就把这类插件全关了，强迫自己把每一个属性名敲完整，敲错几次反而记牢了。

工作区还有一个容易被忽略的点：把练习代码和笔记分开放。我的习惯是建一个练习总目录，下面按周分文件夹，每周一个，每个案例再单独一个文件夹。笔记单独放另一个目录，用纯文本写，记录"今天卡在什么上、为什么、怎么解决的"。这个习惯坚持一个月后，你会发现自己的问题清单会重复出现，重复出现的那几条就是你真正的短板。

2.2 目录结构的约定与命名规范

目录结构这件事，一个人练的时候看起来无所谓，但它直接影响你后期能不能快速找回某个案例。我用的约定是这样：

practice/ ├── week01-html-css/ │ ├── 01-card/ │ │ ├── index.html │ │ ├── style.css │ │ └── images/ │ └── 02-list/ ├── week02-layout/ │ ├── 01-float-three-col/ │ └── 02-flex-nav/ └── week03-dom/ ├── 01-tab-switch/ └── 02-todo/

命名上坚持两条：全小写、用短横线连接，不要出现中文、空格、大写字母混用。我知道这听起来像废话，但实际踩过的坑很真实——早期我用中文文件夹名，后来想把这个练习目录放到别的机器上跑一下，路径编码问题折腾了半小时，最后还得重命名。还有一点，每个案例里HTML 和 CSS 分开文件，不要图省事写在行内。练习阶段强制分离，能逼着你把选择器写对，也方便你后期把某一段 CSS 单独抽出来复用。

2.3 浏览器调试面板的必会操作

练习篇真正的主战场不是编辑器，是浏览器的调试面板。我在重拾过程中花在这上面的时间，可能比看视频还多。有四个功能必须练到条件反射：

第一是元素检查。鼠标点一下元素，右侧立刻显示它命中的全部 CSS 规则，从上到下按优先级排列，被划掉的那些就是被覆盖的。这个视图能直接回答"我的样式为什么没生效"这个高频问题，比盲猜快十倍。

第二是盒模型可视化。选中元素后有个彩色方块图，从内到外分别是内容、内边距、边框、外边距，四边数值都标着。练习盒模型的时候，我基本是改一行 CSS 就去看一眼这个图，看数值有没有按我预期变化。这个习惯建立起来以后，你对"这个元素到底占多宽"的判断会变得非常准。

第三是临时改样式。右侧面板里可以直接改数值、勾掉某条规则、加新属性，刷新就还原。这个功能对练布局特别有用：你可以把float: left勾掉，立刻看到不加浮动时是什么样；把overflow: hidden加上，看看父元素高度有没有恢复。这种"对比观察"比看十遍讲解都管用，因为你亲眼看到了差异。

第四是控制台看报错。JS 练习阶段，养成写完就打开控制台看一眼的习惯，红色报错会直接告诉你哪个文件的第几行出了什么问题。我一开始总忽略这步，导致页面毫无反应的时候还在那儿一行行读代码，浪费时间。

注意：调试面板里的改动都是临时的，刷新就没了。改到满意的效果一定记得回编辑器里落地，我至少有三四次改完很满意，顺手刷新了一下，全没了。

3. 配套视频练习的三阶段推进法

3.1 第一阶段：跟着敲，建立的是"输入法肌肉记忆"

第一阶段没什么技巧，就是视频放一段，暂停，自己敲一遍，敲完对照。听起来很笨，但这一步不能跳。它的价值不在于理解，而在于让手指熟悉那些标签名和属性名的拼写，让大脑熟悉"这个结构大概长什么样"。

我在这个阶段给自己加了两个小动作，效果挺明显。第一个是每敲完一个案例，把视频进度条拖回去，看老师有没有提到我漏掉的细节。经常有这种情况：我敲出来了，视觉效果也差不多，但老师前面说过一句"这里用语义化标签更好"，我用的还是div。这类细节不会影响页面呈现，但会影响你对"为什么这么写"的理解。第二个小动作是敲完立刻删掉重敲一遍，第二遍不看视频，卡住的地方做个标记。

这个阶段大概占整个练习时间的四成。听着比例不小，但它是地基。我见过跳过这一步直接去写项目的，结果 CSS 属性名拼错、HTML 结构嵌套错误，报错都看不懂，反而更慢。

3.2 第二阶段：关掉视频自己写，暴露知识盲区

这是整个练习里最痛苦、也最有价值的一段。做法很简单：看完一个案例的视频，关掉视频，关掉代码，从一个空的 HTML 文件开始，把刚才那个案例完整复现一遍。不要求像素级一致，要求结构一致、主要样式一致、交互一致。

我实测下来的情况是：第一个案例我卡了整整五十分钟，其中二十分钟卡在"居中"，十分钟卡在"清除浮动"，剩下二十分钟在反复调内边距。而这个案例在视频里只有八分钟。差距在哪？在于视频里老师是"顺手"写了某个属性的，而我根本不知道那个属性存在，或者知道但没想到这个场景要用它。

这里有个技巧：卡住的时候不要立刻去看视频，先给自己定一个"挣扎时限"。我的时限是十五分钟，十五分钟内允许翻文档、翻笔记、在调试面板里瞎试，就是不许看原视频。超过十五分钟还没解决，再去看，看完之后必须在一张纸上写清楚"我为什么没想到"。这个"为什么"才是真正的收获，它往往指向一个认知缺口，比如"我从来没把overflow和父元素高度塌陷联系起来"。

3.3 第三阶段：加需求改造，从"复现"走到"迁移"

复现只能证明你记住了，改造才能证明你懂了。第三阶段我给每个案例都加一个视频里没有的需求，难度不大但不能靠背。

举几个我实际加过的改造：

• 导航栏案例：视频里是横向五个链接，我加一个"最后一项靠右"的需求，逼自己去想margin-left: auto和flex: 1的配合。
• 卡片列表案例：视频里是固定三列，我改成"屏幕窄于某个宽度时变成两列、再窄变一列"，这个当时还没学媒体查询，我是用百分比宽度加flex-wrap硬凑出来的，凑了半小时，但那一小时里我对flex-wrap的理解比看视频深得多。
• 选项卡案例：视频里是点击切换，我加一个"默认选中第一项"，逼自己去想初始化逻辑放在哪。
• 待办列表案例：视频里只能添加，我加了"删除"和"标记完成"，逼自己去用事件委托，因为直接给每个删除按钮绑事件，后加进去的项就没有事件了。

这套改造做下来，最直观的变化是：我开始能预判"改这里会影响哪里"。这个能力在真实项目里比任何语法知识都值钱，因为实际开发中你绝大多数时间不是在写新代码，而是在改已有代码。

4. 核心知识点练习拆解

4.1 HTML 结构的语义化练习要点

HTML 这块很多人觉得没东西可练，标签就那么些，背下来就完事。我不这么看。语义化的真正价值不在"好看"，而在它决定了你 CSS 选择器的组织方式，也决定了后期改版时的改造成本。

我的练习方法是：每写一个页面，先不写任何 CSS，只把结构搭出来，然后检查三件事。第一，去掉所有样式之后，这个页面在纯文本状态下读起来是不是还讲得通，有没有"一堆 div 完全分不清谁是谁"的情况。第二，标题层级有没有乱，是不是出现了正文里用三级标题但页面上没有二级标题的情况。第三，表单控件有没有和标签正确关联，点标签文字能不能聚焦到输入框。

第三个点最容易被跳过，但它是"语义化"里最实用的部分。我在做一个搜索框练习的时候，一开始用的是普通的div包一个输入框加一个按钮，点"搜索"两个字完全没反应，因为那两个字根本就是个装饰性的div。改成正确的表单结构之后，不但点击能聚焦，键盘的 Tab 顺序也自动正确了，还白得了一个回车提交的能力。那一刻我才明白，语义化不是你额外付出的成本，它是浏览器免费给你的能力，你不用反而要自己写代码补。

再补充一个实操细节：练习阶段我建议强制自己用最少嵌套。新手特别容易写成每层只有一个子元素的"俄罗斯套娃"，五层 div 包一个文字。这样的结构写 CSS 时选择器会越写越长，改起来极其痛苦。我的自检标准是：如果一个容器里面只有一个子元素，且这个容器没有任何独立样式，那就把它删掉。这个规则帮我砍掉了大量无用嵌套。

4.2 CSS 盒模型与尺寸计算，必须动手算一遍

盒模型是整块 CSS 里最需要"算"的部分，光看讲解是学不会的。我建议你拿一个具体元素，把它的尺寸从头算一遍，算完再打开调试面板对照。

标准盒模型下，一个元素在页面上占的总宽度是这样算的：

总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

举个具体例子：内容宽度 200px，左右内边距各 20px，左右边框各 1px，左右外边距各 10px。

总宽度 = 200 + 20×2 + 1×2 + 10×2 = 200 + 40 + 2 + 20 = 262px

这时候如果你要把它和另一个同样宽 200px 的元素并排放在一个 500px 的容器里，你会发现放不下，因为实际占了 262px 加 262px 等于 524px，超了。新手在这里最常见的反应是"我明明设的 200px 怎么放不下"，其实是被内边距和边框撑开的。

解决办法是把盒模型改成"边框盒"，也就是让宽度包含内边距和边框：

* { box-sizing: border-box; }

改完之后，你设 200px，内容区域会自动被压缩，总宽就是 200px 加上外边距。我现在的习惯是每个练习项目开头就把这条规则写上，省掉后面大量的调试时间。但练习阶段我建议你前两周别写，就用默认的标准盒模型，强制自己把每次的尺寸算一遍。等你算到看见数值就能反应过来、算到不用打开调试面板也知道会不会溢出，再统一改成边框盒。

还有一个必须动手练的点：垂直居中。这玩意儿方法太多，每种方法的适用条件都不一样。我把练习时试过的几种整理成表：

最后一行那个坑我踩了不止一次。Flex 里水平居中和垂直居中用的是两个不同属性，一个管主轴一个管交叉轴，一旦把容器方向改成竖向排列，这两个属性的作用就互换了。我当时的解决办法很土：在纸上画一个箭头标出主轴方向，然后再选属性。画了七八次之后就不用画了。

4.3 浮动与定位：老技术为什么还得练

有人会问，现在都 Flex 和 Grid 了，还练浮动干嘛。我的回答是：你得知道你在改什么。大量存量项目和大量老教程还在用浮动布局，你完全看不懂浮动，接手一个老页面就跟看天书一样。而且浮动带来的"父元素高度塌陷"问题，是理解块级格式化上下文最好的入口，这个东西在后面解决各种奇怪布局问题时反复出现。

浮动练习的核心就两件事：怎么让元素浮起来，怎么让父元素重新包住它。第二件事有三种常见做法：

/* 做法一：给父元素加 overflow */ .parent { overflow: hidden; } /* 做法二：父元素末尾加一个空元素清除浮动 */ .clearfix { clear: both; } /* 做法三：用伪元素清除，最干净 */ .parent::after { content: ""; display: block; clear: both; }

做法一最省事，但有副作用，它会把超出容器的内容裁掉，如果你的页面里有下拉菜单或者提示气泡要溢出去，就全被切了。做法二要在 HTML 里塞一个纯样式的空标签，语义上不干净。做法三是我现在的默认选择，不污染 HTML，也没副作用。这三种做法的差异，光看视频是记不住的，必须每种都用一遍，然后自己制造一个"内容溢出"的场景，看看做法一坏在哪。我就是在做了这个实验之后，才真正理解为什么大家都推荐伪元素那种写法的。

定位这块，重点练absolute和relative的配合。规则很简单：绝对定位的元素会往上找最近的、有定位的祖先元素作为参照。所以"子绝父相"这个口诀的本质是：给父元素一个相对定位（但不改变它的位置），好让子元素有个参照物。我在练习的时候故意做过一个对照实验：给父元素加相对定位和不加，各跑一遍，看子元素跑到哪里去了。不加的时候它跑到了整个页面的左上角，因为再往上找不到参照物了。这个实验做一次，比背十遍口诀管用。

4.4 DOM 操作与事件：从"能跑"到"能维护"

JS 部分的练习，我建议从"查询元素、改内容、改样式"这三件事开始，然后立刻进入事件。因为没有事件，你改的东西用户触发不了，练起来毫无反馈，很容易放弃。

第一个必练的案例是点击切换。结构大概是一个按钮列表加一个内容区，点哪个按钮就显示对应内容。这个案例练的是：查元素、遍历、绑事件、切换类名。写第一遍的时候我是给每个按钮单独绑事件的，代码重复得厉害，六个按钮写了六段几乎一样的代码。第二遍我改用循环绑定，代码短了一半。第三遍我学了事件委托，只在父容器上绑一次，靠事件对象的target判断点的是谁。三遍下来，我对"事件冒泡"这个东西的理解就从"知道有这么回事"变成了"知道它为什么有用"。

事件委托为什么重要，我举个自己踩的坑。做待办列表的时候，我一开始给每个删除按钮都绑了事件，然后测试的时候先加了三条待办，删掉第一条，再从列表里加第四条——新加的第四条点删除，没反应。原因很明确：事件是在那三条已经存在的按钮上绑的，第四条是后来才创建的，它身上根本没有事件。当时我的解决办法是每次添加新的待办之后，把所有的删除按钮重新绑一遍事件。这个办法能跑，但极其丑陋，而且重复绑定会导致老按钮触发两次。改成事件委托之后，问题一次性消失，代码也短了。

除了事件，还有两个必须练的小东西：定时器和本地存储。定时器练一个轮播图或者倒计时，能让你理解"异步"这个概念不是玄学；本地存储练一个刷新不丢数据的待办列表，能让你第一次体会到"数据"和"界面"是两回事。我在做这个练习的时候，刻意把数据存在一个数组里，界面每次根据数组重新渲染，而不是直接操作页面元素。这个思路当时只是觉得清爽，后来学框架的时候才发现，这就是所谓"数据驱动视图"的雏形，早一点建立这个直觉，后面学任何框架都轻松。

5. 常见问题与排查技巧实录

5.1 样式完全不生效的排查顺序

这个问题我踩过太多次，后来总结出一个固定顺序，按这个顺序走基本五分钟内能定位：

1. 看选择器有没有写错。类名少个点、多个空格、拼错字母，这是最高频的。
2. 看选择器优先级够不够。你写的是类选择器，但目标元素上有行内样式，那你怎么写都覆盖不了。
3. 看样式表有没有被正确引入。路径写错、文件名大小写不对，整张表都没加载。
4. 看有没有被后面的规则覆盖。同样的优先级，写在后面的赢。
5. 看浏览器缓存。改了没反应，强制刷新一下。

这个顺序的设计逻辑是从最可能、最容易查的开始。第 1、2 条在调试面板里一眼就能看到，第 3 条看网络面板有没有 404，第 4 条看样式面板里那条规则有没有被划掉，第 5 条是兜底。我早期的问题基本都是顺序乱跳，一上来就怀疑缓存，刷新十遍没用，最后发现是类名少了个点。

实操心得：给元素加一个绝对不会生效的测试样式，比如outline: 3px solid red，如果页面上能看到红框，说明选择器是通的，问题在具体属性上；看不到红框，说明选择器本身有问题。这个办法能在一秒内把问题范围砍掉一半。

5.2 布局错位与塌陷类问题速查

布局问题最烦人，因为它往往没有报错，页面就是"看起来不对"。我把练习阶段遇到的整理成一张速查表：

表里第三行那个"多余空隙"，害我查了半小时。当时做一排并排的图片，怎么调都差那么几个像素，我以为是外边距，一个个清零都没用。后来在调试面板里看到每个图片盒子之间有一段空白，才反应过来是 HTML 里标签换行产生的空白字符。解决方案有三个：标签全写一行（可读性差）、父元素设字号 0 再给子元素单独设回来（略绕）、改用 Flex 布局（最干净）。我现在一律选第三个。

第四行的"外边距合并"也是经典坑。两个上下相邻的块，上面设下外边距 20px，下面设上外边距 30px，你以为中间会有 50px，实际只有 30px，因为浏览器取了较大的那个。这个行为在标准里写得很清楚，但新手不看标准，就会觉得"我的设置被吃掉了"。解决办法也简单：只给一个方向设外边距，养成习惯，别两边都设。

5.3 JS 完全不执行或事件没反应

JS 的问题排查，第一步永远是打开控制台看有没有红字。有红字先解决红字，绝大多数时候红字解决完，功能就正常了。没有红字但功能不生效，按下面几条查：

第一，脚本放的位置对不对。如果脚本写在页面顶部，而它要操作的元素在下面，脚本执行的时候元素还不存在，查出来就是空值。经典表现是报"无法读取空值的属性"。解决办法要么把脚本放到页面末尾，要么把逻辑包在页面加载完成的事件里。我早期特别喜欢把脚本放在顶部，因为"看起来整齐"，结果被这个问题坑了无数次。

第二，选择器查到的到底是哪个。页面上有多个同名元素的时候，查单个只会拿到第一个，你给"第二个"绑的事件当然不生效。这种情况我一般会在查完之后立刻打印一下，看看拿到的是不是我以为的那个。

第三，事件绑定的对象对不对。比如你想给按钮绑，结果绑到了按钮外面的容器上，点容器空白处能触发，点按钮反而不行。

第四，有没有被别的元素挡住。这个最隐蔽，元素明明在那儿，事件就是不触发，因为有个透明的层盖在上面。解决办法是在调试面板里给可疑元素加个高亮背景，或者临时把上层元素隐藏掉看看。

一个很省时间的习惯：写 JS 的时候，每完成一小步就打印一次中间结果。查元素之后打印一下，绑事件之后在回调里打印一下，改完样式之后打印一下。看起来啰嗦，但一旦出问题，你能立刻知道是哪一步断的，而不是从头到尾重新怀疑一遍。

5.4 案例跑得起来但经不起改的三种典型情况

这是练习到中后期才会暴露的问题，也是最值得警惕的。第一种情况是硬编码路径：图片用的是本机的绝对路径，案例在你自己电脑上跑得好好的，换个目录就全变成裂图。解决办法是从一开始就写相对路径，并且保持目录结构和引用路径严格对应。

第二种情况是样式和结构耦合过深。你写选择器的时候用了很长的层级链，比如"外层容器下的第二个子元素的第一个链接"，案例只要能跑就行。但等你改一下结构，加个包裹层，样式全崩。我的做法是尽量只用类选择器，最多两层，避免用"第几个子元素"这种依赖顺序的选择器。

第三种情况是逻辑写死在事件里。比如选项卡切换，你把"点第一个按钮显示第一块内容"这种映射关系直接写死在四个回调里。想加第五个选项卡就得再复制一段。正确做法是先抽一个数组存数据和对应关系，然后循环生成。这个改造我第一次做的时候花了四十分钟，做完之后加第五个选项卡只需要加一行数组元素。从"能跑"到"能改"，中间隔着的就是这一步抽象，练习阶段越早建立这个意识，后面写任何东西都会更从容。

6. 练习节奏、验收标准与个人体会

6.1 每日时间分配与可持续的练习节奏

我试过两种节奏，效果差别很大。第一种是周末集中练六个小时，结果周一全忘，而且中间那两个小时的效率低得可怕。第二种是每天固定一个半小时，连续练，效果完全不一样，因为每天都能保持"手感"，前一天卡住的东西在睡眠之后反而更容易想通。

一个半小时我是这么分的：前二十分钟看视频和做笔记，中间五十分钟关掉视频自己写，最后二十分钟改需求或者复盘。中间那五十分钟必须是完整不被打断的，因为写代码进入状态需要时间，被打断一次至少要十分钟才能回来。我当时把手机放到另一个房间，一开始觉得夸张，试了一周之后发现这是最有效的一个改动。

复盘那二十分钟，我只做一件事：在笔记里写下今天卡住的点和解决方式。不用写得多漂亮，一句话就行，比如"浮动导致父元素高度塌陷 → 伪元素清除"。一个月下来这份笔记会变成你自己的问题索引，比任何教程都贴合你的情况，因为里面全是你真实踩过的坑。

6.2 我用的验收清单和几条实话

最后分享一下我自己用的验收清单。每完成一个阶段，我会对着这几条自查一遍，任何一条过不了就回去补：

说实话，这套练习做完，我最大的感受不是"我学会了很多新东西"，而是"我以前以为自己会的东西，有一半是没掌握的"。这个发现不太舒服，但它很有用，因为它让我在后面看任何新框架的时候，不再急着跳过基础部分，而是会先问一句：这个东西解决的是哪个老问题，它为什么比老办法好。

还有个小技巧分享给同样在重拾的人：每完成一个阶段，把之前做过的某个案例重新做一遍。不要看旧代码，从空文件开始。间隔一两周之后重做，你会发现自己不但没忘，还写出了比第一遍更短的代码。这种"看得见的进步"是坚持下去最大的动力，比任何打卡都有用。我现在的练习目录里躺着二十多个案例，其中大概有六个是被我重做过两三遍的，那几个恰好是我现在最有把握的部分。