前端开发之路：一份详尽的实用指南

发表时间: 2021-02-25 21:33

本篇文章较长，预计阅读时间17分钟

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

十年前，还没有“前端开发人员”这样的术语。当有人开发网站时，他们只是称呼为Web开发人员。

随着Web技术的快速变化，诸如UI / UX设计，后端开发，前端开发，DevOps之类的术语出现了。他们对Web开发中的角色进行了分类，因为成为全栈开发人员（在项目中完成所有工作）变得越来越困难。

成为前端开发人员意味着你将成为设计师和后端开发人员之间的桥梁。你应该了解设计，同时也应该能编写代码。

借助互联网上巨大的资源，你可以很容易地学习前端开发。但是，决定从哪里开始学习或下一步该怎么做可能会造成混淆。

这就是为什么在这篇文章中，我将向你展示当你决定成为前端开发人员时要遵循的方法。我还提供了几乎可以在每个步骤中推荐的最佳资源，因此你不必自己寻找资源

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

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

掌握基础知识，设计网站

在这一阶段，你应该能够设计一个简单的网站。你要学习建立网站的基本知识，从概念到技术知识。

1.了解网络的工作方式以及术语

首先，你应该了解网络的工作原理。在你进行技术性研究之前，你应该了解其背后的概念是什么。

在学习技术知识时，对网络的工作方式及其术语的错误理解可能会减慢你的学习速度。因此，你可以阅读以下一些资源，以加深对网络的了解。

1、网络的工作方式（MDN Web文档）：https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works2、网络-基本概念（教程要点）https://www.tutorialspoint.com/web_developers_guide/web_basic_concepts.htm

2.学习HTML和CSS

HTML代表超文本标记语言。它是一种标记语言，用于创建和排列Web内容，例如标题，段落，图像和其他内容。

CSS代表级联样式表。它是一种表示语言，用于对HTML制作的内容的外观和布局进行样式设置。你可以通过CSS设置字体样式，颜色，位置，填充，边距等。

这两种语言是独立的，但在建立网站时相互关联。互联网上99％（如果不是100％）的网站都基于这些语言。

如果你想知道HTML和CSS的外观，可以按CTRL + Shift + i或F2。选择“元素”选项卡，你将看到它们，左侧为HTML，右侧为CSS。

那么你应该在哪里学习HTML和CSS？

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

国内：1、相对完整的教程，也没有废话，所以我推荐这个https://www.bilibili.com/video/BV18o4y1Z7pj2、HTML教程-W3schools和CSS教程-W3schools（更像文档）https://www.w3cschool.cn/html/国外：1、正确学习HTML和CSS-iLoveCoding（71个免费视频课程，非常适合逐步学习）https://ilovecoding.org/courses/htmlcss2

要完成本课程，假设你一天学习两到三小时，则需要大约1-2个星期（或更短的时间）。如果你还没有完成此步骤，请不要跳到下一步。学习需要耐心。

3.学习使用Javascript和Jquery

在此步骤中，我不希望你一次掌握Javascript，因为稍后在步骤10中将学习更多有关Javascript的技术。你只需要了解Javascript是什么以及如何将其与Web上的HTML和CSS一起使用。

此步骤的主要目的是可以通过Javascript（特别是使用JQuery）创建具有功能和动态内容的网站。

Javascript是一种编程语言，用于在网站上添加功能，交互性，自动化，动态内容等。Javascript做HTML和CSS不能做的事情。

JQuery是最流行的Javascript库，可简化编写常见Javascript任务的过程。

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

国内：1、相对完整的教程，也没有废话，所以我推荐这个https://www.bilibili.com/video/BV18o4y1Z7pj2、JavaScript 教程https://www.runoob.com/js/js-tutorial.html3、jQuery 教程https://www.runoob.com/jquery/jquery-tutorial.html国外：YouTube https://www.youtube.com/embed/videoseries?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1

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

我之前提到过，前端开发人员是设计人员和后端开发人员之间的桥梁。因此，不仅希望你能够编写代码，而且还应该了解UI / UX（用户界面/用户体验）概念。

这不是技术技能，但是通过了解它，您可以为你的网站增加价值，尤其是在团队中没有设计师的情况下。

要了解UX基础知识，你可以先阅读以下文章：

1、用户体验的基本概念-Usabilla.comhttps://usabilla.com/blog/fundamental-concepts-ux/2、用户体验（UX）设计综合指南-Josephineuba.comhttps://josephineuba.com/a-comprehensive-guide-to-user-experience-ux-design/

5.实践与实验

你已经了解了HTML，CSS和Javascript / JQuery，但尚未掌握它们。你只有在拥有真正的网站时才能掌握它们。这是你创建投资组合的时间。

你可能已经在一个月内完成了这些课程和教程，但是使用HTML，CSS和JQuery进行练习将使你至少持续两个月的时间才能成为前端开发人员。

在这一步没有止境，因为你还应该练习接下来的步骤。

对于首发，我挑战你创建一个单页的个人网站是这样。要获得其他实验和灵感，你可以访问以下网站，前端开发人员可以进行环聊：

1、Codepen.io2、https://tympanus.net/codrops/使用前端工具和框架

使用前端工具和框架

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

6.学习CSS框架（引导程序）

如果你在完成第1-5步后到达此处，则应该确定会建立一些网站。你可能会开始习惯于对网站进行编码。

由于你已经掌握了基础知识，因此现在你可以升级到可以更有效地进行编码的程度。通过在项目上使用CSS框架，你将提高构建网站的效率。

简而言之，CSS框架是一堆CSS代码，你可以在项目中使用它们。通过在项目中包含CSS框架，即使你没有编写自己的CSS代码，也可以使你的网站看起来不错且合适。只需将一些类放入CSS框架为你设置样式的div中即可。

在这一步中，你将学习使用Bootstrap，因为它是Web上最流行的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代码。

它具有一些功能，例如nesting，variable和mixin，使你可以创建可重用的CSS代码。大多数CSS预处理器语法与CSS非常相似。学习它会很轻松，因为它更像是一个简洁的CSS版本。

有很多CSS预处理器可供选择。SASS和LESS是最受欢迎的。它们的语法也非常相似。

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

1、SASS入门-Scotch.iohttps://scotch.io/tutorials/getting-started-with-sass2、LESS CSS-新手指南-Hongkiathttps://www.hongkiat.com/blog/less-basic/

8.使用版本控制（Git）

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

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

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

Git与Github不同。虽然Git是一种软件，但Github是一个受欢迎的网站，你可以在其中展示或上传你的Git存储库。

要开始使用Git，你可以转到以下链接：

1、完整的Git指南（快速实用教程）https://flaviocopes.com/git/2、Git官方文档https://git-scm.com/book/en/v2

9.使用软件包管理器（NPM）

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

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

除非你从事的项目需要大量的库，否则没关系。你无法再手动下载和添加它，因为它效率不高。这就是为什么你需要包管理器来自动执行此操作的原因。

在前端开发中，最受欢迎的软件包管理器是NPM（节点软件包管理器）。NPM是JavaScript运行时环境Node的默认包管理器。

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

1、NPM入门：面向前端开发人员的指南https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/2、使用NPM脚本构建项目启动器https://css-irl.info/a-modern-front-end-workflow-part-1/如果你喜欢通过视频学习，则可以从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技巧文章：

初学者的Gulp-CSS技巧：https://css-tricks.com/gulp-for-beginners/

11.了解编程的基本概念

经过第1步到第10步后，你可能会觉得自己已经成为一名真正的程序员了。好吧，你并没有真正做过，因为你之前学到的主要是标记语言（HTML）和表示语言（CSS）。你只对javascript有所了解。

这就是为什么你现在将对此有所了解。但是，像往常一样，在学习技术知识之前，我建议你先阅读有关编程语言的概念。

你可以先阅读以下文章：

1、凯文·刘易斯（Kevin Lewis）解释编程概念https://medium.com/@_phzn/explaining-programming-concepts-46cc7c9950592、计算机编程教程-Tutorialspoint（介绍了技术知识，无需实践）https://www.tutorialspoint.com/computer_programming/index.htm

12.学习现代Javascipt（ES6）

你之前已经学过一些有关javascript的知识。现在，是时候全面学习它了。这次，你将不仅要学习文章或一些youtube视频，因为要学习的课程太多了。

13.学习Vue.js

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

与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。

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

14.学习React

React是用于构建用户界面的最受欢迎的Javascript库之一。自2013年以来，它由Facebook和社区启动和维护。React用于通过实现虚拟DOM来构建单页应用程序。

React使创建交互式UI变得很轻松。为应用程序中的每个状态设计简单的视图，当数据更改时，React将有效地更新和呈现正确的组件。

Facebook，Instagram和《纽约时报》是将React用于其Web应用程序的一些品牌。

对于React资源，我找不到像Vue这样的完整的免费课程。

15.学习Angular

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

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

由于功能丰富且具有其体系结构，因此Angular适用于大型复杂的Web应用程序。

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

结论

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

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

因此，从现在开始，我希望你不再有任何借口来学习前端开发，因为我已经向你展示了学习途径。上面的大多数资源甚至都是免费的。