学习和获取帮助

很高兴你花时间学习一组新技能，但有一些好的做法可以让你学得更有效。也会有一些时候你会卡住，感到沮丧——即使是专业的网页开发人员也会经常遇到这种情况——了解一些最有效的方法来寻求帮助，这样你就可以在工作中取得进步。本文在这两个方面提供了一些提示和技巧，将帮助你从学习网页开发中获得更多收益，以及进一步阅读，以便你可以在需要的时候找到关于每个子主题的更多信息。

有效学习

让我们直接进入，思考一下有效的学习方法。

不同的学习方法

很有趣的是，你的大脑学习事物主要有两种方式——**专注学习**和**漫散学习**

专注学习是你可能更传统地与学术科目联系在一起的。你专注于一个低级的主题，并解决它带来的具体问题。你专注于一个狭窄的领域。
漫散学习更多的是关于对更广泛领域的更高层次的思考。你让你的思绪更自由地游走，看似在不同事物之间建立随机的联系。这是你在洗澡或喝咖啡休息时进行的思考类型。

从神经科学家对大脑活动的研究所得出的结论是，你不能真正同时进行这两种学习——或思考——方式。那么你应该选择哪一种呢？你可能会认为专注学习更适合学习，但实际上，**两者**都非常重要。

专注思考非常适合集中精力学习特定科目，深入解决问题，并提高对所需技巧的掌握——增强大脑中存储该信息的神经通路。但是，它不太擅长了解“大局”，并在尝试理解新科目或解决你以前从未遇到过的新问题时，解锁新的神经通路。

为此，你需要漫散思考。这是专注的对立面——你让你的大脑在更广阔的领域游走，寻找以前没有的联系，触及新的事物（或新事物的组合），然后你可以集中精力，加强它们，并开始真正理解它们的含义。

这就是为什么在深入研究具体细节之前，先阅读一些介绍性材料，以对某个领域有一个高层次的理解通常是好的。

这也是为什么你有时会卡在一个问题上，但当你喝咖啡休息（或散步）时却能找到答案的原因。你可能会

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

假设你花了一些时间专注于问题 C，但因为你无法想到如何解决它而感到沮丧。但在去散步呼吸新鲜空气后，你可能会发现，当你的思绪游走时，你突然在工具 A 和工具 B 之间建立了联系，并意识到你可以将它们结合起来解决问题 C！这并不总是这么简单，但令人惊讶的是，这种情况发生了多少次。这也突出了在电脑前学习时定期休息的重要性。

不同的学习资料

查看可用的不同类型的学习资料，看看哪些最适合你学习也是值得的。

文本文章

你会在网上找到很多关于网页设计的文章。比如这门课程的大部分内容。其中一些文章将是教程，教你某些技巧或重要概念（比如“学习如何创建一个视频播放器”或“学习 CSS 盒模型”），而一些文章将是参考材料，让你可以查找你可能忘记的细节（比如“CSS background 属性的语法是什么？”）。

MDN Web Docs 对于这两种类型都非常好——你目前所在的区域非常适合学习技巧和概念，我们还有几个巨大的参考部分，让你可以查找任何你记不住的语法。

网上还有其他一些很棒的资源，我们将在下面提到其中一些。

**注意：**上面的文字应该告诉你一个重要的事实——你不需要记住所有东西！专业网页开发人员会使用 MDN Web Docs 之类的工具来查找他们忘记的东西。正如你将发现的，学习网页开发更多的是关于解决问题和学习模式，而不是学习大量的语法。

视频

还有一些网站有视频学习内容。 YouTube 是一个明显的例子，它有像 Mozilla Layout Land、MozillaDeveloper 和 Google ChromeDevelopers 这样的频道，提供了许多有用的视频。许多人更喜欢文本文章来进行更深入的学习和参考，更喜欢视频来快速解释概念和新功能，但这实际上取决于你个人更喜欢从什么中学习。这里没有对错之分。

交互式代码游乐场

你可能属于喜欢最少说明，更愿意直接跳进去开始玩代码的人。这也是一种合理的方法，一些学习网站倾向于支持这种方法。例如，Codecademy 是一款学习网站，其教程主要由交互式代码编辑器组成，你需要在其中直接编写代码，并查看是否获得了预期结果。

许多 MDN Web 文档参考页面也提供了交互式示例，你可以在其中更改代码，查看实时结果的变化，并在 MDN Playground 中探索示例。而且，在你自己的电脑上或在像 JSFiddle、Codepen 或 Glitch 这样的在线代码编辑器中创建你自己的代码示例也没有什么问题。事实上，当你学习的时候，这门课程会要求你这样做！

**注意：**在线代码编辑器也非常适合共享你编写的代码，例如，如果你与不在同一地点的其他人协同学习，或者向某人发送代码来寻求帮助。你可以与他们共享示例的网页地址，以便他们可以看到它。

你可能更喜欢一种学习方法而不是其他方法，但实际上，你最终可能会采用混合方法。而且你可能会想出比我们上面提到的三种方法之外的其他方法。

制定计划

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

目标陈述

这听起来很傻，但为什么不从一句简单的句子开始，说出你想实现的目标呢？以下目标范围不同，但都是现实可行的

我想要在两年内成为一名专业的网页开发人员。
我想要学到足够的知识来为我当地业余网球俱乐部构建一个网站。
我想要学习 HTML 和 CSS，以便我可以扩展我的工作职责，接管更新我们公司网站的内容。

以下目标不太合理

我想要从一个完全的初学者在三个月内成为一名高级网页开发人员。
我想要在两年内创办自己的公司，并构建一个比 Facebook 更好的社交网络。

你需要什么才能实现目标？

确定了目标后，最好研究一下实现目标需要什么。例如

我需要的材料

一台电脑
互联网访问权限
笔和纸

我需要的知识

如何使用 HTML、CSS、JavaScript 以及相关的工具和最佳实践来构建网站和 Web 应用程序（我们绝对可以在这方面帮助你！）。
如何获得域名、托管，并使用它们将网站或应用程序发布到网上。
如何经营一家小型企业。
如何宣传我的企业并吸引客户。

需要多少时间和金钱？

估计获得这些东西所需的时间和成本。如果你需要工作才能赚取购买所需材料的钱，那么也需要将这些时间考虑在内。确定了时间估计后，你就可以开始根据你的生活制定计划。

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

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

“我需要 500 个小时才能学会我需要学习的东西，而且我有一年的时间来做。如果我假设有 2 周假期，我每周需要在这上面工作 10 个小时。我在晚上和周末有空，所以我会根据这些时间来安排我的时间。”

当然，你可以花多少时间在这上面取决于你的具体情况。如果你还在上学，那么你的空闲时间比有工作和需要照顾的孩子的人要多得多。尽管如此，你仍然可以实现你的目标，但你必须对你能多快地完成它有一个现实的认识。

如果你正在上大学或学院的课程来学习网页开发，那么大部分的计划都是为你准备的——真幸运！

当你确定了一个每周的时间表后，你应该在简单的电子表格或笔记本中记录下你每周做的事情！

此外，最好制定一些子目标，以便更容易地跟踪你的进度。例如

在夏季之前学会 HTML 和 CSS 的基础知识
在 12 月之前学会 JavaScript 的基础知识
在明年 4 月之前构建一个示例网站项目
等等。

不断思考你取得了多少进展，并在需要时调整你的计划。

保持动力

保持动力很难，尤其是当你试图学习像编程或网页开发这样的复杂技能时。下面是一些保持动力和继续努力的提示

**尝试使你的工作环境尽可能高效。** 找一个舒适的桌子和椅子来工作，确保你有足够的灯光可以看到你在做什么，并尝试加入一些有助于你集中精力的事物（例如，轻柔的音乐、香味，以及你需要的一切）。不要试图在一个有干扰的环境中工作——例如，你的朋友正在观看足球比赛，电视开着！此外，将手机放在房间外——大多数人很容易被手机分散注意力，所以你应该把它放在别处。
定期休息。长时间工作而不休息对你的积极性不好，特别是当你发现工作很困难或卡在某个问题上时。这只会导致沮丧。通常情况下，最好休息一下，活动一下，然后喝点饮料放松一下，然后再回到工作中。正如我们之前所说，你在休息期间进行的弥散学习通常可以帮助你找到解决你所面临问题的方案。长时间工作而不休息对身体也不好；长时间盯着屏幕会导致眼睛疲劳，长时间坐着不动会对你的背部或腿部造成伤害。我们建议你每工作 1 到 1.5 小时休息 15 分钟。
饮食、锻炼和睡眠。健康饮食、定期锻炼，并确保获得充足的睡眠。这听起来很明显，但当你真正投入到编码中时很容易忘记。将这些基本要素纳入你的日程安排，并确保你没有将更多时间安排在学习上而不是这些事情上。
给自己奖励。的确，只工作不玩耍，聪明孩子也变傻。你应该尝试在每次学习结束后安排一些有趣的事情去做，这些事情只有在学习结束后才会出现。例如，如果你非常喜欢玩游戏，那么说“今晚除非我完成了 5 小时的学习，否则不玩游戏”会很有激励作用。现在你只需要意志力了。祝你好运！
共同学习和演示。这并非每个人都有机会，但如果可能，尽量与他人一起学习。同样，如果你正在上一个关于网页开发的大学课程，这会更容易，但也许你可以说服一个朋友和你一起学习，或者找到一个当地的聚会或技能共享小组？与他人讨论想法并寻求帮助真的很有用也很有激励作用，你应该花时间演示你的工作。那些赞赏的声音会激励你前进。

有效解决问题

没有一种有效的方法可以解决所有与网页设计和开发相关的问题（并学习所有东西），但在大多数情况下，有一些通用的建议可以帮助你。

将问题分解成小块

首先，当你尝试实现某项具体内容，并且似乎很难理解时，你应该尝试将其分解成多个更小的问题或块。

例如，如果你正在看一个“构建一个简单的双列网站”的任务，你可以将其分解如下

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

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

制作一个水平排列在一条线上的菜单项列表。
删除不必要的默认值，例如列表间距和项目符号。
适当设置菜单项的悬停/聚焦/活动状态。
使菜单项沿线均匀间隔。
为菜单项提供足够的垂直间距。
确保文本在每个菜单项中居中
等等。

每个问题看起来都不像你最初遇到的那个大问题那么难解决。现在你只需要解决所有问题了！

学习并识别模式

正如我们之前所说，网页设计/编程主要是关于解决问题和模式。当你写下解决特定问题所需的操作后，你就可以开始确定要使用哪些技术功能来解决它。例如，专业的网页开发人员已经创建了很多水平导航菜单，因此他们会立即想到这样的解决方案

导航菜单通常由链接列表创建，类似于

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>

为了使所有项目水平排列在一条线上，最简单的方法是使用弹性盒

css

ul {
  display: flex;
}

为了删除不必要的间距和项目符号，我们可以这样做

css

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

等等。

如果你是一个完全的网页开发新手，你将不得不进行一些学习和网络搜索，并查找解决此类问题的解决方案。如果你是一个专业的网页开发人员，你可能会记得上次解决类似问题的经历，只需要查阅一些你忘记的语法就可以了。

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

此外，网络还有开发者工具，允许你查看用于构建网络上任何站点的代码。如果你手头上没有解决方案，一个好的研究方法是在野外找到具有类似功能的网站，并找出他们的做法。

注意：请注意我们是如何首先讨论要解决的问题，然后讨论用于解决问题的技术的。这几乎总是最好的方法——不要从你想要使用的炫酷的新技术开始，然后试图将它强行应用到用例中。最简单的解决方案通常是最好的。

练习

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

继续修改代码并进行更多练习。如果你没有问题可以解决，请在线查找一些测试，参加更多课程，或问问你的朋友和家人（或当地的学校或教堂）是否有什么他们想让你为他们构建的东西。

获取帮助

网页开发要求你学习一组复杂技能——你肯定会遇到困难，需要帮助。正如我们之前所说，即使是专业的开发人员也需要定期帮助来解决问题。

有很多方法可以获得帮助，以下是一些更有效地获得帮助的技巧。

有效的网络搜索

要学习的一项重要技能是有效的网络搜索技巧——你需要在你的首选搜索引擎中使用哪些搜索词才能找到你需要的文章？

通常很容易知道要搜索什么。例如

如果你想了解更多关于响应式网页设计的信息，你可以搜索“响应式网页设计”。
如果你想了解更多关于特定技术功能的信息，例如 HTML 的 <video> 元素，或 CSS 的 background-color 或 opacity 属性，或 JavaScript 的 Date.setTime() 方法，你只需要搜索该功能的名称。
如果你正在寻找更具体的信息，你可以添加其他关键字作为修饰词，例如“<video> 元素自动播放属性”，或“Date.setTime 参数”。

如果你想搜索一些不太明显的关键词，你需要考虑什么最有可能返回你想要的内容。

在多个 Promise 完成后运行代码
在浏览器中播放来自网络摄像头的视频流
在元素的背景中创建线性渐变

错误消息

如果你在某些代码上遇到问题，并出现特定错误消息，通常最好将错误消息复制到你的搜索引擎中并用作搜索词。如果其他人也遇到过同样的问题，可能在 MDN 或 Stack Overflow 等地方会有一些关于它的文章或博客文章。

注意： Stack Overflow 是一个非常有用的网站——它基本上是一个关于各种技术和相关技术的经过精心策划的问题和答案的庞大数据库。你可能会找到一个能回答你问题的答案。如果没有，你可以问一个问题，看看是否有人可以帮助你。

浏览器测试

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

<video> 播放不适用于 iOS 浏览器。
Firefox 似乎不支持 Beetlejuice API。

使用 MDN

你所在的网站为你提供了大量的可用信息——既有用于查找代码语法的参考材料，也有用于学习技术的指南/教程。

我们在 MDN 的这部分中提供了你关于网页开发基础知识的几乎所有问题的答案。如果你卡住了，最好重新阅读相关文章，看看是否错过了什么。

如果你不确定要阅读哪篇文章，请尝试在 MDN 中搜索一些相关的关键词（如上所述），或尝试在网上进行一般搜索。要在 MDN 上进行搜索，你可以使用网站的内置搜索功能，或者更好的是，使用你喜欢的搜索引擎并在搜索词前面加上“mdn”。例如，“mdn 响应式网页设计”或“mdn background-color”。

其他在线资源

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

找到一个可以加入的社区很重要，如果你尝试帮助他人回答他们的问题以及提出自己的问题，你将获得很多尊重。其他好的例子包括

但是，在社交网站（如 Twitter 或 Facebook）上找到有用的组也有意义。寻找讨论你感兴趣的网页开发主题的组，并加入。关注你认识的、有影响力的人、聪明的人，或者只是看起来分享了很多有用技巧的人。

线下聚会

最后，你应该尝试参加一些线下聚会，与其他志同道合的人见面，尤其是那些针对初学者的聚会。 meetup.com 是查找当地线下聚会的好地方，你也可以尝试一下当地的新闻/活动网站。

你也可以尝试参加完整的网页会议。虽然这些会议可能很昂贵，但你可以尝试在会议上做志愿者，许多会议提供打折票，例如学生票或多元化票。