如何成为一名前端开发人员（完整实用指南）

本文最初发表于https://www.devaradise.com/how-to-become-front-end-developer

前端开发人员，也称为前端工程师，是通过 HTML、CSS 和 Javascript 将设计转换为可运行的网站页面的人，以便用户可以通过浏览器访问该网站页面并与之交互。

十年前，还没有“前端开发者”这个称呼。开发网站的人，通常被称为“Web 开发者”。

随着 Web 技术的快速变化，UI/UX 设计、后端开发、前端开发、DevOps 等术语应运而生。这些术语对 Web 开发中的角色进行了分类，因为成为一名全栈开发人员（负责项目中的所有工作）变得越来越困难。

成为一名前端开发人员意味着你将成为设计师和后端开发人员之间的桥梁。你应该了解设计，同时也应该具备编程能力。

互联网上资源如此丰富，自学前端开发相当容易。但是，决定从哪里开始学习，或者下一步该学什么，可能会让人感到困惑。

这就是为什么我会在这篇文章中向你展示当你决定成为一名前端开发人员时应该遵循的路径。我还几乎在每个步骤中都推荐了最好的资源，这样你就不用自己费力寻找了。

在继续之前，请记住，完成以下所有步骤可能需要几个月的学习时间。想要成为一名优秀的前端开发人员，有很多学习资源。

您所要做的就是保持专注并保持耐心。

掌握基础知识，设计网站

在这个阶段，你应该能够设计一个简单的可运行的网站。你将学习构建网站的基本知识，从概念到技术细节。

1. 了解网络的工作原理及其术语

首先，你应该了解网络是如何运作的。这听起来可能有点琐碎，但在你深入技术层面之前，你应该先了解它背后的概念。

对网络运作方式及其术语的错误理解可能会拖慢你学习技术知识的速度。因此，这里有一些资源可以帮助你拓展对网络的理解。

• Web 的工作原理（MDN Web 文档）
• Web - 基本概念（教程要点）

2.学习HTML和CSS

HTML 是超文本标记语言 (Hypertext Markup Language) 的缩写。它是一种用于创建和排列网页内容（例如标题、段落、图像和其他内容）的标记语言。

CSS 是层叠样式表 (Cascading Style Sheets) 的缩写。它是一种表示语言，用于设置 HTML 内容的外观和布局。您可以使用 CSS 设置字体样式、颜色、位置、填充、边距等等。

这两种语言在网站建设中是独立的，但又相互关联。互联网上 99%（如果不是 100%）的网站都是基于这两种语言构建的。

如果您想了解 HTML 和 CSS 的外观，可以在此处按下CTRL+Shift+i或F2 。选择“元素”选项卡，您将看到它们：左侧是 HTML，右侧是 CSS。

现在，您应该在哪里学习 HTML 和 CSS？

这里有一些学习 HTML 和 CSS 的资源。

• 正确学习 HTML 和 CSS - iLoveCoding（71 个免费视频课程，适合循序渐进学习）
• HTML 教程 - W3schools和CSS 教程 - W3schools（更像是文档，适合实验）

完成本课程大约需要1-2周（或更快），前提是你持续学习。如果你还没有完成这一步，请不要跳到下一步。学习需要耐心。

3.学习使用Javascript和Jquery

在这一步中，我不期望您立即掌握 Javascript，因为您将在后面的第 10 步中了解更多信息。您只需了解它是什么以及如何在网络上将它与 HTML 和 CSS 一起使用。

此步骤的主要目标是您可以使用 Javascript（具体来说是使用 JQuery）创建具有功能和动态内容的网站。

Javascript 是一种编程语言，用于在网站上添加功能、交互性、自动化、动态内容等。Javascript 可以完成 HTML 和 CSS 无法完成的任务。

JQuery 是最流行的 Javascript 库，可以使编写常见的 Javascript 任务更加简洁。

要使用 Javascript 和 JQuery，您可以阅读以下教程：

• 如何将 Javascript 添加到 HTML - DigitalOcean 社区
• JQuery 简介 - DigitalOcean 社区

这些教程仅供参考。有关文档，您可以访问：

• Javascript 教程 - W3Schools
• Jquery 教程 - W3schools

要查看完整的视频教程，您可以观看 YouTube 上的此视频播放列表：

https://www.youtube.com/embed/videoseries?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1

4. 对 Web UI/UX 概念的基本理解

我之前提到过，前端开发人员是设计师和后端开发人员之间的桥梁。所以，你不仅需要会写代码，还应该了解 UI/UX（用户界面/用户体验）的概念。

这不是技术技能，但通过理解它，您将为您的网站增加价值，特别是当您的团队中没有设计师时。

要了解用户体验基础知识，您可以先阅读以下文章：

• 良好用户体验的基本概念 - Usabilla.com
• 用户体验 (UX) 设计综合指南 - Josephineuba.com

5. 练习与实验

你已经学习了 HTML、CSS 和 Javascript/JQuery，但你还没有掌握它们。只有当你制作了真正的网站后，才能真正掌握它们。现在正是你创建作品集的时候。

您可能在一个月内完成了课程和教程，但不断练习 HTML、CSS 和 JQuery 至少需要 2 个月的时间才能让您成为一名前端开发人员。

这一步不能停止，因为您还应该练习接下来的步骤。

首先，我挑战你创建一个像这样的单页个人网站。想要尝试其他的实验和灵感，你可以访问这些前端开发者聚集的网站：

• Codepen.io
• 科多普

使用前端工具和框架

在这个阶段，你将使用一些前端框架和工具来帮助你构建网站。在你的项目中使用它们将加快你的Web开发进程，因为它们可以自动执行Web开发中的常见任务。

6.学习CSS框架（Bootstrap）

如果你完成了1-5步，那么你肯定已经创建了一些网站作品集。现在你可以开始熟悉网站代码了。

既然你已经掌握了基础知识，现在你将能够更高效地编写代码。在你的项目中使用 CSS 框架，你将提高网站构建的效率。

简而言之，CSS 框架就是一堆可以在项目中使用的 CSS 代码。通过在项目中包含 CSS 框架，即使您不编写自己的 CSS 代码，也能让您的网站看起来美观且完美。只需在您的div 元素中添加一些CSS 框架已为您设置好样式的类即可。

在这一步，你将学习如何使用 Bootstrap，因为它是网络上最流行的 CSS 框架。实际上，Bootstrap 不仅仅是一个 CSS 框架，它的组件中也使用了它自己的 JavaScript 代码。

要学习 Bootstrap，可以直接访问 Bootstrap 文档网站：

• Bootstrap 官方文档

如需实用指南，您可以观看下面的 YouTube 视频播放列表：

https://www.youtube.com/embed/videoseries?list=PLylMDDjFIp1A3sMkpWwbIsQ8l8bZcIBmC

7. 使用 CSS 预处理器（SASS 和 LESS）

您的网站项目越来越大、越来越复杂，页面也越来越多。您需要编写更多的 CSS 代码。您可能经常会通过复制粘贴的方式在不同的页面上重复使用某些 CSS 样式。最终，您的 CSS 代码会变得杂乱无章。您也希望减少代码编写量，因为太多的页面会让您感到压力重重。

好吧，如果你也遇到这种情况，那么是时候使用 CSS 预处理器了。简而言之，CSS 预处理器是一个可以让你使用其自身语法生成 CSS 代码的工具。

它具有嵌套、变量和混合等功能，可让您创建可重用的 CSS 代码。大多数 CSS 预处理器语法与 CSS 非常相似。您学习它不会有任何困难，因为它更像是 CSS 的精简版。

CSS 预处理器有很多选择，其中最流行的是 SASS 和 LESS。它们的语法也非常相似。

要开始使用 SASS 或 LESS，您可以阅读以下文章：

• SASS 入门 - Scotch.io
• LESS CSS - 初学者指南 - Hongkiat

另外，关于使用 SASS 的实际示例，您可以观看下面的 YouTube 视频。在该视频中，作者使用 VSCode 扩展将 SASS 编译为 CSS。

如果您更喜欢使用 LESS，可以在 YouTube 上搜索其他视频。只需搜索“LESS 入门”即可。

8.使用版本控制（Git）

版本控制是另一个有用的工具，可帮助您管理任何类型的软件开发项目中的文件和更改。因此，它不仅适用于 Web 开发。

当您与项目中的其他程序员合作或必须将项目拆分为不同版本时，版本控制的好处就会实现。

目前，软件开发中最常用的版本控制系统是 Git。Git 是一个免费的开源分布式版本控制系统，旨在快速高效地处理从小型到大型的所有项目。

Git 与 Github 不同。Git 是一款软件，而 Github 是一个流行的网站，你可以在那里展示或上传你的 Git 代码库。

要开始使用 Git，您可以访问以下链接：

• 完整的 Git 指南 - Flaviocopes.com（快速实用教程）
• Git Book（Git 官方文档）

如果您更喜欢通过视频学习 Git，您可以观看 YouTube 上的这个视频：

9. 使用包管理器（NPM）

包管理器是一种软件开发工具，可帮助程序员轻松地为项目导入或添加外部库或依赖项。

在使用包管理器之前，您会注意到，每次您需要外部库（如JQuery）或框架（如Bootstrap）时，您都会手动下载并将其包含到您的项目中。

除非你的项目需要大量的库，否则这没什么问题。你无法再手动下载并引入它们，因为效率低下。因此你需要一个包管理器来帮你自动化这个过程。

在前端开发中，最流行的包管理器是 NPM（Node 包管理器）。NPM 是 JavaScript 运行环境 Node 的默认包管理器。

NPM 的软件包存储在npmjs.com。要开始使用 NPM，您可以阅读以下教程：

• NPM 初学者指南：前端开发人员指南
• 使用 NPM 脚本构建项目启动器

如果您更喜欢通过视频学习，您可以观看 YouTube 上的此视频播放列表：

https://www.youtube.com/embed/videoseries?list=PLC3y8-rFHvwhgWwm5J3KqzX47n7dwWNrq

10.使用任务运行器/构建工具（Gulp）

在继续下一步之前，你必须确保你的 Web 开发项目已由 NPM 初始化（步骤 9）。任务运行器将作为开发依赖项包含在你的 NPM 项目中。

任务运行器是一种自动化工具，可帮助您运行 Web 开发中的常见任务，例如将 SASS 或 LESS 编译为 CSS、缩小 HTML/CSS/JS、优化资产以及运行 Web 服务器。

通过使用任务运行器，您可以优化生产代码，从而提高性能。

要开始使用 Gulp 任务运行器，您可以阅读下面 Zell Liew 撰写的 CSS-tricks 文章：

• Gulp 初学者指南 - CSS 技巧

对于视频教程，您可以观看 YouTube 上的这个视频：

如果您需要有关如何在实际项目中构建 Gulp 任务的参考，您可以查看我在 Github 上的 Gulp-starter 存储库。

更多 Javascript 内容

在此阶段，您将学习 Javascript 编程语言的基础知识，作为使用 Javascript 框架之前的准备。

11.理解编程的基本概念

完成1到10步后，你可能会觉得自己已经成为一名真正的程序员了。其实不然，因为你之前学的大多是标记语言（HTML）和表示语言（CSS）。你只是对JavaScript略知一二。

这就是你现在要学习它的原因。不过，在学习技术知识之前，像往常一样，我建议你先阅读一下编程语言的概念。

您可以从阅读以下文章开始：

• Kevin Lewis解释编程概念
• 计算机编程教程 - Tutorialspoint（用技术性的东西解释，但你不必练习）

12.学习现代Javascipt（ES6）

你之前已经学习过一些 JavaScript 知识。现在，是时候全面学习它了。这一次，你不会仅仅通过文章或 YouTube 视频来学习，因为有太多课程需要学习。

不用多说，以下是 Udacity 提供的免费综合 JavaScript 课程列表：

1. JavaScript简介
2. ES6 - JavaScript 改进
3. JavaScript 和 DOM
4. 面向对象的 Javascript
5. JavaScript 测试
6. JavaScript 设计模式
7. JavaScript 承诺
8. 异步 Javascript

你应该慢慢地学习它们。

本课程列表摘自 Berkan Cetinkaya 在 Medium 上发表的文章《[路线图] 使用 Udacity 学习现代 Javascript》。感谢他，我得以在那里找到完整的免费课程列表。

深入研究 Web 应用程序的 JavaScript 框架

在这个阶段，你将学习一个 JavaScript 框架。你不需要学习所有列出的框架。只需选择其中一个，然后专注于它，直到你掌握它。

如果你不知道什么最适合你学习，你可以先阅读这篇文章：

• Angular、React、Vue：哪个是 2020 年的最佳选择？

13.学习Vue.js

Vue.js（通常称为 Vue - 发音类似于view）是一个用于构建用户界面和单页应用程序的开源渐进式 JavaScript 框架。

与其他单体框架不同，Vue 的设计从一开始就注重可增量应用。其核心库专注于视图层，易于上手，并易于与其他库或现有项目集成。

相比于 React 和 Angular，Vue 是 JavaScript 框架社区中最年轻却最有实力的成员，由 Google 前工程师尤雨溪发布。

阿里巴巴、Netflix、Adobe 和 Gitlab 是一些使用 Vue.js 的大公司。

要学习 Vue.js，您可以参加以下 Vuemastery 提供的免费综合课程：

1. Vue 初学者之路
2. Vue 中间路径
3. Vue 进阶之路

有关文档，您可以转到此处的 Vue 官方文档。

14.学习 React

React 是用于构建用户界面的最流行的 JavaScript 库之一。它自 2013 年起由 Facebook 及其社区推出并维护。React 用于通过实现虚拟 DOM 来构建单页应用程序。

React 让创建交互式 UI 变得轻而易举。只需为应用中的每个状态设计简单的视图，React 便会在数据发生变化时高效地更新并渲染正确的组件。

Facebook、Instagram 和纽约时报等一些品牌都在其网络应用程序中使用了 React。

对于 React 资源，我找不到像 Vue 那样完整的免费课程。因此，我推荐以下 Udacity 的付费课程：

• 成为一名 React 开发者

但是，如果您还没有准备好参加付费课程，您可以随时在 Google 上搜索“React 入门”来获取免费教程。

15.学习Angular

Angular 是一个开源 Web 应用程序框架，由 Google 的 Angular 团队以及个人和企业社区领导。

与 React 和 Vue 相比，Angular 对于初学者来说学习曲线陡峭，因为它基于 Typescript 构建（所以你必须先学习它），并且有许多功能需要学习。

由于其丰富的功能和架构，Angular 适用于大型复杂的 Web 应用程序。

Gmail、Youtube TV、Microsoft Office 和 Xbox 是一些在其 Web 应用程序中使用 Angular 的大品牌。

要学习 Angular，您可以参加以下 Angular University 的免费完整课程：

• Angular 初学者指南
• 完整的 Typescript 课程

~~

结论

现在，你已经知道在哪里可以学习成为一名前端开发人员了。成为一名前端开发人员并非需要几天或几周的时间，而是需要几个月甚至几年的时间。

如果你只是阅读然后忘记，以上所有收集的资源都是无用的。你必须耐心学习。

所以，从现在开始，我希望你再也没有借口不学习前端开发了，因为我已经为你展示了学习路径。上面的大部分资源甚至是免费的。

祝你好运！