前端开发人员指南 - 第一部分

欢迎来到我的第一个正式博客系列，这是我练习撰写指南/教程的第一个系列。

• 本指南适用于：完全的初学者和有经验的开发人员。
• 本指南不适合以下人群：中级或高级开发人员。

这是我的“面向初学者的前端网页开发入门指南”。我不是那种
做过惊艳开源项目的技术大牛，也不是大型科技公司的代言人。我只是一个几个月
前刚找到第一份工作的初级开发人员，我想分享一些我的经验，希望能帮助你迈出第一步，
开始动手实践。

本系列文章分为三部分：第一部分：学习资源；第二部分：项目创建与举办；
第三部分：求职建议

欢迎来到第一部分！

对于专注于前端开发的开发者而言，提升效率的核心要素是 Web 开发的三大基石：HTML、CSS
和 JS。我不会详细讲解每种语言和技术，这部分内容应该在相关资源中找到。但用我
自己的话来说：

• HTML是网站的骨架，也是让您可以在浏览器中将内容显示在屏幕上的根本原因。它构成了网站的架构和结构，或者说是内容的基础。
• CSS是样式组件。颜色、字体、定位、大小、动画等等，CSS都能做到，而且功能远不止这些。
• JavaScript是交互组件。这是你必须掌握的核心知识，它是 Web 开发的瑞士军刀。如果你能学会 JavaScript，你就能学会任何东西。它是 Web 的编程语言。

还有一些东西虽然并非编程或开发特有的，但却是当今
网络开发领域高效工作所必需的：

• Chrome 开发者工具是调试、测试、检查和维护代码的必备工具。虽然有很多学习资源，但文章和视频毕竟有限。真正掌握开发者工具的最佳方法是参与项目实践。
• Git/GitHub版本控制也至关重要。我强烈推荐Traversy Media 制作的这段视频，它讲解了如何创建代码仓库、添加代码、编写提交信息以及推送到主分支。在进行任何项目或学习之前，务必先完成这些步骤。
• Markdown虽然不是必需的，但它是编写 GitHub 上的 README 文件以及像这样的博客的有用工具。
• 你需要一个编辑器来编写代码。我推荐 Visual Studio Code。如果你需要一些帮助来了解它们的使用方法，这个视频会很有帮助。
• 终端/控制台/命令行界面：了解如何操作控制台至关重要。几乎所有编程工作都会涉及到终端的使用。请观看此视频并阅读此指南进行学习。

没错。所以你现在还没被搞得焦头烂额吧？如果觉得压力山大也没关系。我当时也觉得压力山大，所有要
学这些东西的人都一样。别想着一下子学完所有东西，只学你需要的就好。至于其他的，
谷歌就是你最好的朋友。

我也强烈推荐这篇
关于如何提问编程问题的指南。是的，它至关重要，因为你会经常做两件事：

• 提问
• 寻找答案

学会这些技能是你现在最应该学习的技能。好了，废话不多说，我们来看看资源吧。

HTML/CSS

这两者通常结合在一起，纯粹是因为没有 HTML 就无法编写 CSS。

• Shay Howe 制作了两篇非常棒的 HTML 和 CSS 教程，涵盖了进阶和入门主题。这是我学习这两门语言的首选推荐。你可以在这里
  找到教程。完成所有练习，查看 他提供的补充资源，在你的编辑器中编写代码，并将代码提交到你的代码仓库。不要使用在线 编辑器，在自己的电脑上编写代码，并将代码保存到 GitHub/GitLab。关于 HTML 和 CSS 的参考资料，请参考MDN。
  
  

• 看完 Shay Howe 的教程后，我建议你做两件事：创建自己的网站，以及完成“100 天 CSS 学习计划” 。创建
  网站只需要 HTML 和 CSS。网站可以做得丑陋凌乱，但一定要完成。网站要简洁。只包含
  展示你是谁以及你做什么的必要内容（例如，介绍、你掌握的语言、经验和联系方式等
  ）。“100 天 CSS 学习计划”并不建议你完成所有项目，只需完成足以让你熟练掌握 CSS 的项目即可。
  每次感到无聊或有空闲时间时，都可以做一个项目。

• 学习Bootstrap。当然，你也可以选择 Foundation、Bulma、Semantic UI，或者干脆不用框架。
  但 Bootstrap 因其能快速创建网站而被广泛应用。用 Bootstrap 重新设计你的个人网站。如果遇到问题，请查阅
  官方文档或在网上搜索相关信息。主动学习，弥补知识的不足。

• 这时你可以开始学习 JavaScript 了，但如果你还需要练习，可以克隆一个你喜欢的网站的设计，
  探索上面提到的各种 CSS 框架，深入了解 SASS 或 LESS，甚至可以学习 Pug 或 HAML。选择权
  完全在你，重要的是你要动手实践。你不可能通过学习教程掌握 HTML 和 CSS 的全部知识，你只需要学习足够多的内容，以便在某个地方使用即可。不要试图学习整个 Bootstrap 框架。只需使用 你项目所需的
  资源和代码即可。
  

• 您可能还会想：“我的网站应该托管在哪里？”。我推荐以下三种选择：surge.sh、
  GitHub Pages，或者如果您有更大的需求，可以选择Heroku。所有这些服务
  在一定数据量或网站大小限制内都是免费的。

JavaScript

这部分内容会非常庞大​​，先提醒一下。JS 生态系统极其庞大，但别因此放弃学习。
我以前也跟你一样被它搞得焦头烂额，但随着时间的推移，你会逐渐理解它，并能编写出功能完善的应用程序和网站。

• 首先，学习 JavaScript 并没有一个完美的万能资源。市面上有很多资源，质量也参差不齐。我会尽量列出
  那些真正帮助我学习如何在网站中添加 JavaScript 以及如何以“现代方式”使用它的资源。

• 我建议先从可汗学院关于 DOM（文档对象模型）操作的视频
  开始 。如果你感兴趣，也可以在那里学习完整的 HTML/CSS/JS 课程。你可能会学到
  一些之前指南中没有提到的知识。

• 接下来，我建议你可以尝试将学到的一些知识应用到你的个人网站上。比如，添加一个
  点击后显示“你好！”的按钮。之后，我想向你推荐javascript.info和
  MDN 的 JavaScript 文档。按照 javascript.info 的指南学习，
  尽可能多地掌握相关知识，如果还有不明白的地方，可以查阅 MDN 文档。

• 此时我必须指出，仅仅做编程练习和阅读教程不足以学习 JavaScript。我强烈
  建议你开始阅读博客、收听播客、关注 Reddit 子版块，以及观看任何与 JavaScript 相关的视频。你需要学习
  JavaScript 的术语、设计和架构，而单靠教程是学不到这些的。多接触
  与 JavaScript 相关的编程资源。

• 之后你可以开始学习Wes Bos 的 JS30。由于 Wes 大量使用 ES6，所以你现在需要掌握 ES6 的相关知识
  。这绝对是学习 JavaScript 的最佳资源之一。你可以在 30 天内完成 30 个小项目，也可以按照自己的
  节奏学习。

• 接下来我想推荐一些类似 100DaysOfCSS 的网站，你可以在那里持续练习 JS。如果你需要更多
  练习，可以去HackerRank、CodinGame或CodeWars看看。

• 现在你可以开始拓展学习领域，选择 React、Angular 或 Vue。它们融合了你目前为止所学的一切。选择其中一种，
  用它做个小项目，看看哪种最适合你，哪种能让你更高效。如果你想深入
  学习前端和后端，我推荐《使用 JS 进行 Web 编程》。
  如果你想学习更多计算机科学相关的内容，可以试试CS50或者《自学计算机科学》
  中的一些章节。

差不多就是这样了！这些就是我推荐的学习内容。可能还有很多东西我没提到，不过当你学习所有资料的时候，大部分都会学到的:D

希望你有所收获，我们第二部分再见！