研究与学习

高效研究

作为一名 Web 开发者，你会花大量时间搜索工作中遇到的问题解决方案——你不必记住所有东西！专业的 Web 开发者会经常使用 MDN Web Docs 等工具来查找他们忘记的东西。你会发现，学习 Web 开发更多的是解决问题和学习模式，而不是学习大量语法。

为了促进这一点并变得更加自给自足，你应该学习有效的策略来寻找答案——如下文各节所述——以及何时使用哪种策略。例如，首先在线查找信息，只有当你真正陷入困境时，才向你的导师、同学或高级开发人员寻求帮助。

选择高质量的资源

你应该确保你选择的研究资源是高质量和信誉良好的。要找出哪些资源信誉良好，可以向你的老师或更有经验的同事咨询他们推荐的资源，并进行一些网络搜索，了解其他人在网上推荐的资源。MDN 当然是推荐的；其他好的例子包括：

• Stack Overflow
• Scrimba ^{课程合作伙伴}
• YouTube
• freeCodeCamp
• Codecademy
• Dev.to

了解何时使用何种资源

文档有不同的类型，了解每种类型何时有用是很重要的。不同网站的术语会有所不同，并且通常存在一定程度的重叠，但通常常见的类型有：

• 参考资料：类似于人类语言有词典列出每个单词的含义，编程语言也有参考资料，试图详尽地涵盖开发者将使用的每个可能特性的目的和语法，通常还附带用法示例。参考资料侧重于特性“做什么”而不是“如何”使用它。
• 教程：允许开发者学习“如何”使用新技术。教程通常是分步的，面向初学者。
• 指南/操作方法：也与学习相关，但往往不太侧重于初学者，通常旨在解决特定问题。
• 解释器/概念：倾向于关注解释特定技术背后的高级概念和用例，而不是深入到低级代码细节。
• 问答/论坛：人们提问，其他人提供答案的网站。

你应该查阅多个不同的网站，看看每个网站流行的文档风格，并思考在不同情况下哪些文档风格有用。例如：

• MDN 非常适合查找有关不同 HTML、CSS 和 JavaScript 功能的参考文档，并且还包含有用的指南和教程，供你学习新技术。
• Stack Overflow 是一个问答式网站，人们在此互相帮助，寻找特定问题的解决方案。
• Scrimba 和 Codecademy 提供分步互动式教程。YouTube 也是一个寻找视频教程的好地方。

最重要的是，找出最适合你的学习方法。不同的人以不同的方式学习。实际上，你可能最终会使用多种资源进行研究和学习。

有效搜索

如果你无法在你喜欢的网站上找到问题的解决方案，你需要将搜索范围扩大到网络的其他部分。我们在课程早期讨论了有效网络搜索的一般技巧（参见搜索信息）；本节提供了一些与查找高质量信息相关的具体提示和技巧。

• 当你在使用特定工具或产品时遇到问题，请首先查阅官方文档。令人惊讶的是，很多人没有想到这样做；官方文档通常是针对初学者的，所以有经验的人可能不认为它们是合适的。如果你正在使用的产品是 Web 平台，那么 MDN 就是“非官方”的官方文档，所以你来对地方了！
• 检查你找到的资源的日期。它们是最近维护的，还是长时间未更新，因此可能已过时？信誉良好的网站通常会包含发布日期和“上次更新”日期，正是为了让你轻松检查这一点。理想情况下，一篇来自信誉良好网站的关于现代技术或技巧的文章不应长时间（比如 2-3 年）不维护。当然，涵盖成熟技术（例如，基本的 HTML 或 CSS 功能）的旧文档仍然可能是准确的，但你应该牢记这一点。
• 接着上一点，即使是新发布的资源也可能包含过时的信息。例如，一篇关于 CSS 页面布局的文章是讨论 Grid 和 Flexbox 等现代方法，还是仍然呈现使用浮动创建多列布局等过时技术？
• 不要只依赖单一的信息来源。交叉参考不同的来源，特别是如果你不确定某个来源是否值得信赖。
• 你还可以尝试使用人工智能工具来帮助解决编码问题——例如ChatGPT 或GitHub Copilot。你应该谨慎使用人工智能工具（尤其是作为初学者），并熟悉它们的优缺点。
  • 从积极方面看，它们可以极大地加快研究/搜索速度，并有助于组织代码和文本。
  • 另一方面，人工智能工具没有推理能力，经常提供具有误导性或完全错误的答案。你不应该想当然地认为人工智能的答案是正确的——测试它们，并用其他来源验证它们。

关于复制粘贴代码的旁注

无论是否由人工智能生成，复制、粘贴和使用你没有编写且不理解的代码始终是需要谨慎的，无论你的技能水平如何。这会使错误更难修复，并且代码可能存在安全、性能或可访问性问题，这通常是由于你使用它的上下文或方式造成的。

作为初学者，仅仅复制粘贴解决方案意味着你错过了亲自动手学习的机会，这对于记忆技能或概念至关重要。如果代码受版权保护而你没有使用权限，你也可能会遇到许可问题。

这里的建议是，如果你要使用别人的解决方案，至少在复制粘贴之前先尝试理解它是如何工作的。理想情况下，从解决方案中学习，然后编写自己的版本。

建立联系网络

我们已经讨论了足够的网站，现在我们来谈谈人。以及网站。

建立一个合作网络是成为一名 Web 开发者必不可少的一部分。我们也会在协作与团队合作中讨论这一点；这里我们将重点关注如何利用你的网络来协助研究。

一个有效的研究网络由几组不同知识水平和与你亲近程度的人组成：

• 同伴：与你的直接同伴（可能是你的同学或队友）分享信息并向他们提问是有益的，因为他们可能拥有有用的见解可以分享，或者愿意共同解决问题。他们也可能以前处理过相同的问题，并能提供答案。

• 老师或资深同事：如果你的同伴无法提供帮助，下一步通常是向资深同事、经理或老师寻求帮助。他们会比你的同伴更有经验，但请记住，他们的空闲时间会更少。如果你能证明你已经首先尝试自己解决问题，并且尊重他们的时间，你将获得更好的结果和更多的赞赏。为此：

  • 记录你已经尝试过的操作。哪些失败了？
  • 如果研究主题是特定代码示例或你无法使其工作的技术，请使用 CodePen 或 Scrimba ^{课程合作伙伴} 等网站创建在线测试用例，以便向他们展示。
  • 仔细思考要问他们什么问题——具体问题是什么？如果你有多个问题要问，请按优先级排序，以确保涵盖最重要的项目。
  • 为本次会话设定一个目标，例如，“尝试找到最高优先级问题的解决方案”。另请注意，解决最大的问题也可能导致解决其他问题。
  • 询问他们希望如何与你沟通问题，以使互动尽可能地让他们感到舒适。
  • 如果安排会议，不要占用他们超出你需要的时间。如果你不确定需要多长时间，将会议时间限制在例如 30 分钟。你总是可以在将来向他们寻求更多帮助。

• 更广阔的社区网络：这可能由专门的在线社区组成，例如论坛或聊天群组（例如MDN Web Docs Discord或freeCodeCamp 论坛），或者物理聚会，例如会议或技能分享活动。

• 全球网络：有时你可能会束手无策，在这种情况下，你可以尝试在社交媒体网络等通用全球社区上提出你的问题。有时有用的答案可能来自意想不到的地方。

最重要的是，确保你始终对所有与你互动的人保持尊重和友善。你也应该学会回报和索取；相互帮助并提供帮助的 Web 开发者更有可能建立牢固的关系并持续获得帮助。

制定学习计划

制定一个计划来帮助你学习想学的东西是个好主意。

从目标陈述开始

这听起来可能很傻，但你应该从一个简单的句子开始，说明你想要实现的目标。你应该有抱负，但也要现实。

以下目标范围不同，但都是现实且可实现的：

• 我希望在两年内成为一名专业的 Web 开发者。
• 我想学习足够的知识，为我的当地业余网球俱乐部建立一个网站。
• 我想学习 HTML 和 CSS，以便我能扩展我的工作职责，接手更新我们公司网站的内容。

以下目标不那么现实：

• 我想在三个月内从一个完全的初学者成为一名高级 Web 开发者。
• 我想在两年内创办自己的公司，并建立一个超越 Facebook 的社交网络。

定义你需要什么才能实现目标

一旦你确定了目标，研究实现目标所需的条件是个好主意。

例如

• 我需要的材料
  • 一台电脑
  • 互联网接入
  • 笔和纸
• 我需要的知识
  • 如何使用 HTML、CSS、JavaScript 以及相关工具和最佳实践来构建网站和 Web 应用程序（我们绝对能在这方面帮助你！）。
  • 如何获取域名、主机，并用它们将网站或应用程序上线。
  • 如何经营一家小企业。
  • 如何宣传我的业务并吸引客户。

估算你需要多少时间

接下来，你应该开始制定一个时间计划来实现你的目标。它可以很简单，比如：

“我大概需要 500 小时来学习我需要了解的知识，我有一年的时间来完成。如果我假设有 2 周的假期，我每周需要花 10 小时在这上面。我晚上和周末有空，所以我将围绕这些时间安排我的学习。”

不要为计划的准确性而纠结。一个粗略的估计就足够了——更重要的是把一些东西写下来作为努力的目标。

你能花多少时间当然取决于你的具体情况。如果你还在上学，那么你比有工作和孩子要养的人有更多的空闲时间。实现你的目标仍然是可能的，但你必须对你能多快做到这一点保持现实。

如果你正在大学或学院学习 Web 开发课程，那么大部分规划都已为你完成——你真幸运！

在你的主要目标下写下一些子目标是个好主意，这样可以让你更容易地跟踪进度。例如：

• 在夏季前学习 HTML 和 CSS 基础知识
• 在 12 月前学习 JavaScript 基础知识
• 在明年 4 月前完成示例网站项目
• etc.

如果你不确定目标清单上该列出哪些项目，我们的课程大纲可以提供帮助。

当你制定好每周计划后，你应该在一个简单的电子表格甚至笔记本上记录你每周完成的工作！持续思考你取得了多少进展，并根据需要调整你的计划。

如何保持学习动力

保持学习动力很困难，尤其是当你试图学习像编程或 Web 开发这样复杂的技能时。以下是一些保持动力和持续学习的技巧：

• 尽量让你的工作环境尽可能高效。准备一个舒适的桌椅，确保有足够的光线看清你在做什么，并尽量加入有助于你集中注意力的东西（例如，轻柔的音乐、香氛，或其他你需要的东西）。不要试图在一个有干扰的房间里工作——例如电视开着，你的朋友在看足球！此外，把你的手机放在房间外面——大多数人都会被手机分散注意力，所以你应该把它放在其他地方。
• 饮食、锻炼和睡眠。健康饮食，定期锻炼，并确保充足睡眠。这听起来很明显，但当你真正投入编码时，很容易忘记。将这些基本要素纳入你的日程，并确保你没有将学习时间安排在这些事情上。
• 奖励自己。为每次学习会话结束后安排有趣的事情，只有在学习结束并完成时才能进行。例如，如果你真的很喜欢玩游戏，那么“今晚除非我完成 3 小时的学习，否则不玩游戏”这句话会非常有动力。现在你需要的只是意志力。祝你好运！
• 共同学习和演示。这并非对每个人都适用，但如果可能的话，尝试与他人一起学习。同样，如果你正在学习 Web 开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者在你当地的聚会中找到一个人？有人可以讨论想法和寻求帮助是非常有用和鼓舞人心的，你也应该花时间演示你的作品。那些赞赏的呼声会激励你前进。

休息，以及橡皮鸭调试

如果你在寻找问题答案或集中精力学习时遇到困难，休息一下会很有用。出去散步 15 分钟，给自己泡杯茶，或者听听音乐。或者将这三者结合起来！

长时间不休息地工作对身体也有害；长时间盯着显示器会损害你的眼睛，长时间静坐对你的背部或腿部可能有害。你可以通过“20-20-20”规则降低眼睛疲劳的风险；每隔 20 分钟，看向 20 米外的东西 20 秒。我们还建议每 1 到 1.5 小时进行一次适当的 15 分钟休息。

在休息期间，尝试与同事、朋友或家人讨论你的问题。即使他们无法为你提供答案，你也很可能会通过自己在脑海中推理论证问题而找到解决方案。当你大声向自己或一个无生命的物体解释问题时，它也同样有效。

这种技术被称为橡皮鸭调试（或橡皮鸭法），得名于传统上你向一只橡皮鸭解释你的编程问题。

高效问题解决

没有一种有效的方法可以解决所有与 Web 开发相关的问题（和学习所有知识），但有一些通用建议在大多数情况下都能很好地帮助你。

将问题分解成小块

当你试图实现某个特定功能但觉得难以理解时，你应该尝试将其分解为多个较小的问题或块。

例如，如果你面临一个“构建一个简单的两列网站”的任务，你可以将其分解如下：

• 创建 HTML 结构。
• 确定基本的网站排版。
• 确定基本配色方案。
• 实现高层布局——页眉、水平导航菜单、带有主列和侧边栏的主内容区域以及页脚。
• 实现水平导航菜单。
• etc.

然后你可以进一步分解。例如，“实现水平导航菜单”可以写成：

• 标记菜单项列表。
• 将菜单项水平排列成一行。
• 移除不必要的默认样式，如列表间距和项目符号。
• 适当设置菜单项的悬停/焦点/活动状态样式。
• 均匀分布菜单项间距。
• 给菜单项足够的垂直间距。
• 确保文本在每个菜单项中居中。
• etc.

这些问题中的每一个似乎都没有你最初遇到的那个大问题那么难以解决。

学会识别模式

Web 开发主要关乎问题解决和模式。

一旦你写下解决特定问题需要做的事情，你就可以开始找出要使用哪些技术功能来解决它。例如，专业的 Web 开发者已经创建了许多水平导航菜单，所以他们会立即开始思考这样的解决方案：

1. 导航菜单通常由链接列表创建，例如：

   html

   <ul>
     <li><a href="">First menu item</a></li>
     <li><a href="">Second menu item</a></li>
     <li><a href="">Third menu item</a></li>
     <li><a href="">etc.</a></li>
   </ul>
   

2. 要使所有项目水平排列成一行，最简单的现代方法是使用 flexbox：

   css

   ul {
     display: flex;
   }
   

3. 要移除不必要的间距和项目符号，我们可以这样做：

   css

   ul {
     list-style-type: none;
     padding: 0;
   }
   

4. （其他步骤后续。）

你需要进行多少研究才能找到解决方案，将取决于你的经验程度以及你之前是否实现过类似的东西。你可能会从之前的项目中识别出这种模式，并且只需要查找你从那时起忘记的少量语法。

当你找到此类问题的解决方案时，值得记录下你所做的事情，并在某个目录中保留一些最少的代码示例，以便你可以回顾以前的工作。

查看别人的代码

网络上有开发者工具，可以让你查看用于构建任何网站的代码。如果你没有可用的解决方案，一个好的研究方法是找到具有类似功能的网站，并查看它们是如何实现的。

持续学习心态

你应该养成持续学习的心态。网络不断发展，技术和趋势总是在变化，你需要不断更新知识才能跟上。你永远不可能学会所有东西！

为了让自己更容易些：

• 保持好奇心。如果你看到一个很酷、有趣或你不理解的网站功能，做一些研究，找出它是如何实现的。它可能会成为你下一个研究项目或学习任务的基础。
• 你应该定期参与阅读任务或小型研究项目。留出特定的学习时间来获取新技能。
• 养成定期阅读技术新闻、博客和浏览器发布说明的习惯，看看有什么新事物值得你去学习。
• 持续练习。你解决问题练习得越多，你大脑中该区域的神经通路就越强，回忆该特定问题的细节和逻辑就越容易，未来学习类似解决方案时你也会感到越舒适。

• 概述：软技能
• 下一页