如何开始 Web 开发（前端）？🤔 [第一部分]

从哪里开始呢？

为什么我们需要学习 JavaScript？

所以，你可能是个新手？或者你正在网上学习编程，但感觉自己错过了什么，或者可能做得不对？好吧，这篇文章很可能就是为你准备的……XD。

在我分享开始 Web 开发的道路之前，我想说，无论我说什么都远远不是完美的路线图，我只是分享自从我开始学习 Web 开发以来在过去一年的经验教训，你可以随意以你的方式扭曲事物，但请记住概念仍然是一样的。

从哪里开始呢？

这个问题最简单的答案是——从 HTML 和 CSS 开始，然后是 JavaScript。现在让我们更深入地了解一下。

为什么需要从 HTML 和 CSS 开始？

让我们了解一下什么是 HTML 和 CSS？

用我的语言来说，我将 HTML 称为骨架，将 CSS 称为构成或样式，将 JavaScript 称为负责网页功能的肌肉。

现在我们知道了HTML和CSS的含义，让我来澄清一个最常见的误解：HTML和CSS是编程语言，但它们根本不是！HTML是一种标记（结构）语言，即超文本标记语言（HyperText Markup Language），CSS是样式表（Styling Sheet），即层叠样式表（Cascading Style Sheets）。两者都用于构建和设置网页样式，但无法像编程语言那样运行。因此，HTML和CSS是（Web开发）的必备技能，在你学习编程语言（JavaScript，我们稍后会讨论）之前，你必须学习它们。

但现在的问题是，我在哪里可以学习它们？为此，我列出了一些免费资源，任何人都可以开始学习或复习他们已经知道的知识。

开始使用 HTML 和 CSS 的免费资源：-

• FreeCodeCamp.org
• Codecademy.com
• Traversy Media HTML 和 CSS 速成课程
• Net Ninja HTML 和 CSS 速成课程
• Colt Steele YouTube 训练营
• Kevin Powell 的高级 CSS 概念
• W3schools.com

从上面选择一个并开始✨

在继续构建布局之前，请确保您了解：-

• HTML 基础和语义标签
• CSS 选择器、盒模型、基本属性及其值、定位
• CSS Flexbox（救星 - 这里是 Wes Bos 免费课程，很不错flexbox.io）
• CSS Grid（这是 Wes Bos 的另一个免费 CSS Grid 课程cssgrid.io）
• 响应式布局的 CSS 媒体查询

现在您已经了解了 CSS Flexbox 和 Grid 的基础知识，您必须练习构建一些网页，我将向您推荐一个很棒的网站，您可以在其中尝试构建布局并获得一些工作反馈。

Frontendmentor.io是一个很棒的网站，也为初学者提供布局挑战。他们基本上会给你一个 zip 文件，里面包含图片、设计和样式指南，你必须照着做，然后直接写代码，完全不用考虑设计！选择一个初学者级别的挑战，然后开始做就行了。正是在这里，我获得了自信：是的，我现在可以构建布局了。你可以加入 Slack 上的 Frontendmentor 社区，在那里你可以结识一些朋友，分享你的作品，并获得一些很棒的反馈，这将促进你的成长。

这些是我自去年开始我的旅程以来使用过的一些最好的 HTML 和 CSS 资源。

现在您已经熟悉了如何构建响应式布局，让我们开始讨论网页的本质，也就是 JavaScript。

哈哈，这些 gif 很酷 😂，我希望你和博客一起喜欢它们。

为什么我们需要学习 JavaScript？

如果您想成为一名优秀的 Web 开发人员，JavaScript 是您必须了解的编程语言，因为它负责网页的功能。例如，为了让按钮执行某些操作（称为 DOM 操作），您需要 JavaScript，等等。在早期，JavaScript 仅用作客户端编程语言（存在于客户端 HTML 页面中的脚本），但现在我们可以在 Node.js 的帮助下将其用于后端（指计算机应用程序或程序中允许其运行且用户无法访问的代码部分），Node.js 是一个 JavaScript 运行时环境，可用于构建游戏、桌面应用程序、移动应用程序等等。很棒吧？

是的，Fab，我们明白了，现在告诉我们在哪里可以学习这种神奇的语言？😆 哎呀，我刚想到这一点......

您可以从哪里开始学习 JavaScript？

资源太多了，人们常常感到困惑，所以我将解释何时以及为何使用所提到的资源。

学习 JavaScript 的免费资源

• Colt Steele YouTube 初学者课程（最新） ——这段视频时长近 3 小时，Colt（我最喜欢的在线老师）会带你了解 JavaScript 的基础知识，之后你可以继续学习更高级的内容。我强烈推荐给完全的初学者。

• Florin Pop 的 YouTube 频道- 这家伙真是个高手，看完 Colt 的视频后，你可以看看 Florin 的“学习 JavaScript”和“JavaScript 数组”播放列表，学习更多高级概念并进行练习。他还有其他 CSS 播放列表，以及 Freecodecamp 的 HTML 和 CSS 课程，你也可以看看。

• Traversy Media、DevEd和The Net Ninja Youtube 频道 - 这些都是很棒的家伙，他们有很多用于学习 JavaScript 的视频和播放列表，其中包括使用 HTML、CSS 和 JavaScript（DOM 操作）构建功能齐全的网页的视频。

• Wes Bos YouTube 频道- Wes 有一个 JavaScript30 播放列表，教我们在 30 天内用原生 JavaScript 构建 30 个东西。在你掌握 JavaScript 基础知识并熟悉 ES6 之后，这是必修课（你可能需要了解 Freecodecamp 的 ES6 模块）。

这些都是视觉学习资源，但如果你喜欢从书面资源中学习 - 我明白了🥳。

呵呵我知道我太棒了😁（抱歉，我的自大也是个特征）

• FreeCodeCamp.org、Codecademy.com和Scrimba.com - 它们都非常适合练习 JavaSript 并提高您的解决问题能力。
• 您不懂 JS——对于初学者来说这可能不是最好的选择，但您可以在通过上述资源掌握基础知识后尝试阅读这本书。
• Flavio Copes手册和博客- 他是一位出色的博主，他的 HTML、CSS 和 JavaScript 手册以及其他手册都非常方便，另外，如果您愿意，可以订阅他的时事通讯，其中包含教程和更多内容。
• Catalin Pit 博客- 他的博客非常有用，如需了解更多信息，您可以通过 Twitter 和 Instagram @catalinmpit 与他联系。
• Chris Ferdinandi去制作新闻通讯- 一份超棒的每日提示新闻通讯，它将教您许多新事物并帮助您成长为一名开发人员。

从上述任何资源学习 JavaScript 后，请确保您确实了解以下提到的 JavaScript 概念：

• 变量
• 数据类型
• 字符串操作
• 功能
• 数组
• 闭包
• 范围
• 对象
• 原型
• 课程
• 承诺、异步/等待
• DOM 操作 - 文档对象模型是网页的面向对象表示，可用于更新 HTML 和 CSS 文档的内容、结构和样式。

呼，真是太多了，虽然作为初学者我还有一些资源，但这些已经足够了。（敬请期待即将发布的博客，了解更多资源）。以上提到的内容都属于前端开发（处理客户端开发——用户可以看到和使用的内容）。

所以现在，在您学习了 JavaScript 之后，您必须在继续前进之前构建一些东西来练习您所学到的知识，相信我，这是掌握它的唯一方法。

• 从构建需要通过 JavaScript 进行一些 DOM 操作的登陆页面开始 - 它可以像隐藏和显示某个东西或者在点击时更改样式等一样简单，重点是尽可能多地练习 DOM 操作。

• 在您熟悉了静态网站的构建之后，是时候进入稍微复杂一点的部分了——构建 Web 应用程序（别担心，如果您按照上面提到的步骤操作，那么您已经准备好编写一些代码了）。现在，我不是要您构建新的 Facebook 或 Twitter，我们将从 CRUD Todo 应用程序开始，它代表创建、读取、更新、删除，这意味着构建一个应用程序，用户可以在其中创建 Todo，更新和读取现有的 Todo，以及能够删除所需的 Todo。首先尝试自己创建这个应用程序，不要害怕在您感到卡住或想不出任何东西时随时谷歌搜索（因为这种情况会经常发生，相信我）。

• 当你终于能够从零开始构建一个 Todo 应用，无需任何教程时，就可以开始独立开发一个应用，通过 API 获取数据并显示在网页上。它可以是一个老爸笑话应用，然后是一个天气应用或电影应用。

您肯定可以找到上述项目的教程，但请尝试再次执行这些项目，直到您可以在没有教程的情况下自行创建它们，这可能是您的第二次、第三次或第四次尝试，无论需要多长时间，但请确保您最终能够擅长它。

最后我想给出一些建议：

• 如果你一开始记不住所有 HTML 标签或 CSS，也不要难过，一开始什么都记不住是很正常的。随着你不断构建东西，你会记得更牢，而且 Google 的存在是有原因的，即使是高级开发人员也一直在使用 Google，而会使用 Google 是开发人员最重要的技能之一，所以不要因为 Google 用得太多了而感到内疚。

将您的大脑用作处理器，而不是记忆器- 只要知道在哪里可以找到什么东西，您就可以开始了。

• 构建布局一开始会感觉像攀登珠穆朗玛峰，但不要担心，只需将页面部分分解成块，使用笔和纸并在元素周围制作框，然后尝试分块构建页面 - 这是最好的学习方式。

• JavaScript 会让你感到不知所措（100% 保证），但不要因为自己无法解决问题或需要提示和谷歌搜索就放弃——这很正常，因为一开始我们的大脑还在适应这门语言，所以看看别人的代码和他们的解决方案，理解其原理和工作原理是没问题的。尝试直到你能够在很少或完全没有帮助的情况下解决问题，但在此之前，看看解决方案来理解事情的运作方式是可以的。

• 构建 Web 应用程序会让你感觉——“天哪，我怎么会这样想？”
  但不要担心，一旦你熟悉了其他人如何构建事物，你的思维也会开始这样思考，只要有耐心，因为耐心是关键。

• 我不会说不要拿自己和别人比较，因为我自己还没能完全做到这一点，但我会分享一下当我开始拿自己和别人比较时的做法——我会告诉自己：“如果有人学得比我快，或者很快就擅长了某件事，那也没关系，我的生活和时间表不一样，所以我会按照自己的节奏走，让别人按照他们的节奏走。我正在尽我所能，享受这个过程。我迟早会到达我的目的地，但我一定会的。”

• 不要让诸如“我不够好，也许这不适合我？”之类的问题困扰你，一旦你下定决心，你就可以做任何你想做的事情。

• 如果你遇到问题，并且已经用 Google 搜索了足够多的内容（不到一天），那么可以尝试联系其他开发者寻求帮助，直接告诉他们你遇到了问题，并且已经用 Google 搜索过了，但仍然无法解决。千万不要只说“嘿”或“嗨”，要说明你为什么直接联系他们，这样可以增加他们帮助你的机会。Instagram 和 Twitter 上都有很棒的 #100DaysOfCode、#Buildupdevs 和 #DevinitelyHealthy 社区，他们非常活跃，随时准备帮助他人。

• 最后但同样重要的一点是，请经常休息，因为这有助于您恢复精神并恢复得更强壮。

这篇博文就到此为止了，因为对于初学者来说已经足够了，我不想让大家被这些额外的信息淹没。随着我不断学习，我会继续写这个系​​列。

附言：如果您需要帮助或有任何疑问，请在 Twitter 和 Instagram 上与我联系@fabcodingzest（由于我正在休息，2020 年 6 月我将不会在 Instagram 上活跃，但您可以在 Twitter 上找到我）