学习和获得帮助

让我们直接思考一下有效的学习。

有趣的是，你的大脑学习东西有两种主要方式——专注和分散学习：

• 重点学习是你传统上可能与学术科目联系在一起的东西。你专注于一个低级的话题，并解决它带来的具体问题。你专注于一个狭窄的区域。
• 分散学习更多的是与围绕更广领域的高层次思维有关。你让你的头脑游荡更广，似乎在不同事物之间随机联系。这更多的是你在洗澡时或喝咖啡休息时的想法。

从神经科学家对大脑活动所做的研究中，我们发现，你不能同时参与两种学习或思考的方式。那么，你应该选择哪一个呢？你可能认为集中学习更适合学习，但在现实中，两者都很重要。

专注思维对于将精力集中在特定主题上，深入解决问题，以及提高你对所需技术的掌握——加强大脑中存储信息的神经通路——都很棒。然而，当你试图理解新学科或解决以前没有遇到的新问题时，它并不善于理解"大局"，并解锁新的神经通路。

为此，你需要漫不由多的思考。这与焦点正好相反——你让你的大脑在更广阔的环境中游荡，四处寻找你之前没有的联系，接触新事物（或新事物的新组合），然后你可以关注这些事物，加强它们，并开始真正理解它们的意思。

这就是为什么在进入具体细节之前，先阅读一些介绍性材料，以便对一个领域有一个高度的了解，这通常是好的。

这也是为什么你有时真的可以陷入一个问题，但随后找出答案，当你去喝咖啡休息（或散步）。你可以：

1. 知道如何使用工具 A 解决问题 A。
2. 知道如何用工具 B 解决问题 B。
3. 不知道如何解决问题 C。

假设你一直专注于问题 C，然后感到沮丧，因为你无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。

也值得看看可用的不同类型的学习材料，看看哪些材料对你来说最有效。

文本文章

你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习 CSS 框模型"），有些文章将是参考材料，允许你查找你可能忘记的细节（如"CSS 属性的语法是什么"？background

MDN Web 文档对这两种类型都非常好 - 你当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许你查找任何你不记得的语法。

网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。

视频资料

还有一些网站上有视频学习内容。很明显 YouTube 是一个不错的网站，它有很多频道，比如 Mozilla Layout Land、 MozillaDeveloper 和 Google ChromeDevelopers 提供许多有用的视频。许多人更喜欢文本文章来进行更深入的学习和参考资料，喜欢视频来快速理解概念和新功能，但你更喜欢从中学习什么实际上取决于你自己。这里没有对错的说法。

交互式的代码演练场

你可能是那种喜欢简单指令的人，更喜欢直接开始操纵代码。这也是一种合理的方法，一些学习网站倾向于采用这种方法。例如像 Codecademy 这类网站中，教程主要由交互式代码编辑器组成，你必须直接编写代码并查看是否达到了预期的结果。

许多 MDN Web 文档参考页面中也提供了交互式的示例，你可以在其中更改代码，并查看实时结果的变化。在你的计算机上或者在像 JSBin、Codepen 或 Glitch 这样的在线代码编辑器中创建自己的代码示例也是可以的。事实上，当你在学习时，你会被要求去做这些事情本身就是属于课堂的一部分！

制定一个计划来帮助你通过学习实现你想要实现的目标是个好主意。

定一个目标

这听起来很傻，但为什么不从一句话开始，说出你想要实现的目标呢？以下内容有不同的见识，但都是现实可行的：

• 我想在两年后成为一名专业的 Web 开发者。
• 我想学习足够的知识，为我当地的业余网球俱乐部建立一个网站。
• 我想学习 HTML 和 CSS，这样我就可以扩展我的工作角色，接管更新我们公司网站上的内容。

下面是一些不切实际的想法：

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

你需要什么才能到达那里？

一旦你制定了目标，研究一下实现目标需要什么是个好想法。例如：

我需要的工具：

• 一台计算机
• 接入互联网
• 一些笔和纸

我需要的知识：

• 如何使用 HTML、CSS、JavaScript 以及相关的工具和最佳实践来构建网站和 web 应用程序（我们绝对可以在这方面为你提供帮助！）。
• 如何得到域名和主机，然后使用它们将网站发布到互联网上。
• 如何经营一家小企业。
• 如何为我的生意做广告，吸引客户。

这需要花费多少时间和金钱？

预估得到这些东西的时间和成本。如果你需要工作来挣钱购买所需的材料，那么时间成本就必须考虑在内。一旦你有了一个时间估计，你就可以开始围绕你的生活制定一个计划。

我每周需要投入多少小时？

一旦你知道你需要做什么，以及你认为需要多长时间，你就可以开始写一个计划来实现你的目标。它可以简单到：

“我需要花 500 个小时来学习我需要知道的东西，我有一年的时间来学习。如果我假设有两周的假期，我打算每周为此学习 10 个小时 (在晚上和周末有空的时候)，所以我会这样安排时间。”

当然，你能在这上面花多少时间取决于你的情况。如果你在学校，那么你有比其他有工作和孩子要养活的人地情况更多的空闲时间。如果不是，实现目标仍然是可能的，但你必须现实清楚地知道实现目标最快需要多长。

如果你正在大学或学院学习网络开发课程，那么大部分计划都是为你做的——你是幸运的！

当你制定了一个每周的日程安排之后，你应该在一个简单的电子表格中，甚至在笔记本上记录下你每周要做的事情！

此外，制定一些次级目标可能是个好主意，这样你就可以更容易地了解自己处在什么阶段。例如：

• 暑期学习 HTML 和 CSS 基础知识
• 在 12 月学习完 JavaScript 基础知识
• 在明年的 4 月份前搭建好一个示例网站
• 等等。

经常想一想你取得了多大的进步，在需要的时候及时调整你的计划。

很难保持动力，尤其是当你试图学习编程或网络开发等复杂技能时。以下是一些保持动力并持续工作的建议：

• 尽量让你的工作环境更有效率。找一张舒适的办公桌椅，确保你有足够的光线看清楚你在做什么，并尽量提供有助于你集中注意力的东西（如柔和的音乐、香水，任何你需要的东西）。不要试图在一个分心的房间里工作——比如开着电视，朋友们在看足球！另外，把手机放在房间外——大多数人都会被手机分心，所以你应该把它放在其他地方。
• 定期休息。不间断地工作几个小时对你的动力不好，尤其是当你发现工作很难或遇到问题时。这只会导致沮丧。通常最好休息一下，四处走动一会儿，然后在回去工作之前喝一杯咖啡或者饮料放松。正如我们之前所说，你在这段时间里所做的分散式学习通常可以帮助你找到解决你所面临问题的方法。长时间不休息也会对身体有害；盯着显示器看太久会伤害你的眼睛，久坐不动会对你的背部或腿部有害。我们建议每小时到 90 分钟这个区间内后休息 15 分钟。
• 吃饭、锻炼和睡觉。健康饮食，经常锻炼，确保充足的睡眠。这听起来很明显，但当你真正开始编码时，很容易忘记。将这些基本要素纳入你的时间表，确保你除此之外没有安排更多的学习时间。
• 奖励你自己。可以肯定的一点：拼命工作而不娱乐会使你沉闷。你应该尝试在每一次的学习之后安排一些有趣的事情，前提是你必须在完成学习任务之后。例如，如果你真的喜欢玩游戏，那么说“除非我完成了 5 个小时的学习，否则今晚不要玩游戏”是很有激励作用的。现在你只需要意志力。希望一些顺利。
• 共同学习和演示。这不是每个人的选择，但如果可能的话，试着和其他人一起学习。再说一次，如果你正在上一门关于网络开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者找一个当地的聚会或技能分享小组？有人与你讨论想法并寻求帮助真的很有用，也很激励人，你还应该花时间向你的朋友展示你做了什么小样作品。那些感激的喊声会激励你前进。

没有一种有效的方法可以解决与 web 设计和开发相关的所有问题（学习所有东西），但在大多数情况下，有一些通用的建议可以很好地为你服务。

把东西分解成各个小块

首先，当你试图实现某个特定的东西时，你的头脑似乎真的很难理解，你应该试着把它分解成多个较小的问题或块。

例如，如果你正在考虑“构建一个简单的两栏网站”的任务，你可以将其分解如下：

• 组织 HTML 结构
• 制定基本的网站排版
• 确定基本的网站颜色主题
• 实现高级布局——页眉、水平导航菜单、带有主栏和侧栏的主要内容区域以及页脚
• 实现一个水平的导航菜单
• 等等。

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

• 列出水平排列的菜单项。
• 删除不必要的默认设置，如列表间距和项目符号。
• 适当设置菜单项的悬停/焦点/激活状态。
• 使菜单项沿直线等距排列。
• 给菜单项留出足够的垂直间距。
• 确保文本在每个菜单项内居中。
• 等等。

这些问题中的每一个似乎都不像你开始遇到的一个大问题那么难解决。现在你只需要逐步想出方案并解决所有问题！

学习并认知模式

正如我们之前所说，web 设计/编程主要是关于问题解决和模式。一旦你写下了你需要做什么来解决一个特定的问题，你就可以开始弄清楚用什么技术特性来解决它了。例如，专业的 web 开发人员已经创建了很多水平导航菜单，所以他们会立即开始考虑这样的解决方案：

创建一个水平导航栏菜单经常利用到列表，比如：

<ul>
  <li>First menu item</li>
  <li>Second menu item</li>
  <li>Third menu item</li>
  <li>etc.</li>
</ul>

要使所有内容水平放置在一条线上，最简单的现代方法是使用 flexbox：

ul {
  display: flex;
}

接着删除不必要的间距和要点，我们可以这样做：

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

等等。

如果你是一个完全的网络开发初学者，你将不得不做一些研究和网络搜索和查找解决方案来解决这些问题。如果你是一名专业的 web 开发人员，你可能还记得上次解决类似问题的时候，只需要查找一些你后面遗忘的语法。

当你找到这些问题的解决方案时，写下你所做的事情，并在某个文件目录中保留一些少量的代码示例，这样你就可以回顾以前的工作了。

另外，网络上有 开发者工具，它使你可以查看用在 web 上构建任何网站的代码。如果你手头没有解决方案，一个好的研究方法是在网络某处地方找到具有类似功能的网站，并找出它们是如何做到的。

你练习解决问题越多，你的大脑在该区域的神经通路就越强大，也就越容易回忆起特定问题的细节和逻辑。

继续修补代码，并进行更多练习。如果你没有问题要解决，可以在网上查一些测试，多上一些课程，或者问问你的朋友和家人（或当地的学校或教堂），他们是否希望你为他们做些什么。

网络开发需要你学习一套复杂的技能——有时你肯定会陷入困境，需要帮助。正如我们之前所说，即使是专业开发人员在某些时刻也需要让他人来帮助解决问题。

获得帮助的方法有很多种，下面是一些非常有效的方法。

需要学习的一项重要技能是高效网络搜索的技巧——你需要在你最喜欢的搜索引擎中使用哪些搜索词来找到你需要的文章？

搜索什么通常是相当直接的。例如：

• 如果你想了解更多关于响应式网页设计的信息，你可以搜索”响应式网页设计”。
• 如果你想了解更多关于某项特定技术功能的信息，像 HTML 元素，CSS 属性，或者 JavaScript 方法，你应该直接搜索功能的名称。<video> background-color opacity Date.setTime()
• 如果你正在寻找一些更具体的信息，你可以添加其他关键字作为补充，例如 "<video> element autoplay attribute"，或者 "Date.setTime parameters"。

如果你想搜索一些没有那么明显的专业术语的东西，你需要考虑最有可能搜索到想要的东西是什么。

• 在好几个 promises 执行之后运行代码
• 在浏览器中播放网络摄像头中的视频流
• 在元素的背景中创建线性渐变

报错信息

如果你的某段代码有问题，并且出现了一条特定的错误消息，那么把错误消息将其用作搜索词复制到你的搜索引擎中。如果在之前其他人也有同样的问题，在 MDN 或 Stack Overflow 之类的地方可能会有一些关于它的文章或博客帖子。

浏览器调试

看看你的问题是否在所有浏览器中都出现，或者它是否只发生在一个或少数浏览器中，这通常是一个好主意。例如，如果它只影响一个浏览器，则可以使用该浏览器缩小搜索范围。示例搜索可能看起来像：

• <video> 在 iOS 浏览器中播放不起作用。
• Firefox 浏览器似乎不支持 Beetlejuice API。

你现在所在的网站上有大量信息可供你使用，既有查找代码语法的参考资料，也有学习技巧的指南/教程。

在 MDN 的这一部分中，我们提供了关于 web 开发基础知识的大部分问题的答案。如果你陷入困境，最好重新阅读相关文章，看看你是否遗漏了什么。

如果你不确定该读哪篇文章，那么尝试在 MDN 中搜索一些相关的关键字（如上所述），或者尝试一般的网络搜索。要在 MDN 上搜索，你可以使用网站内置的搜索功能，或者使用你最喜欢的搜索引擎，在搜索词前面加上“MDN”。例如，“mdn responsive web design“或者”mdn background-color“。

我们在之前已经提到了 Stack Overflow，但在这里还有其他在线资源可以提供帮助。

找到一个社区是件好事，如果你试图帮助别人回答他们的问题，也可以自己在上面提出问题，你会得到很多尊重。其他好论坛包括：

• MDN Discourse
• Sitepoint Forums
• webdeveloper.com Forums

然而，在 Twitter 或 Facebook 等社交网站上寻找有用的群组也是有意义的。寻找讨论你感兴趣的网络开发主题的小组，并加入其中。在 twitter 上关注那些你知道有影响力、聪明或平易近人的人，他们似乎分享了很多有用的建议。

最后，你应该尝试参加一些线下聚会，认识其他志同道合的人，尤其是那些对初学者友好的人。meetup.com 是一个很好的地方，可以找到当地的身体聚会，你也可以尝试搜索你当地的媒体/网站上的内容。

你也可以尝试参加正式的网络会议。虽然这些费用可能很高，但你可以尝试在那里做志愿者，许多会议都提供优惠票，例如学生票或多样性票。

• Coursera: Learning to learn
• Freecodecamp
• Codecademy