如何成为一名Web前台开发人员？入行学习完整指南

经过如此多的实验和测试，而不是说你从头开始创立了所有内容，接着，你在网页上创立了第一个登录表单时，你感觉如何？经过了屡次更改后，将布局分配给第一个Web应用程序时感觉如何？当成功解决了数千个客户的操作时，你感觉如何？

大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉的确令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，解决网站的后台部分，并使其成功地为客户服务。

每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为客户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将探讨要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员（前台，后台和全栈）的实用指南。

1、首先确定你的目标或者道路

我们将探讨很多技术，趋势和工具，但我们不希望您不知所措，因而你需要首先决定要成为一名Web开发人员要做什么，由于这将帮助你选择合适的工具。和学习技术。成为Web开发人员的起因有很多，下面列出了少量选择因素：

你想作为一名Web开发人员在一家公司工作，这是最普遍的起因。

你想以自由开发人员的身份来开始自己的业务或者代理商。

你可以成为其余公司的顾问。

你可以创立自己的应用来赚钱。

编码是你的业余爱好。

从上述感兴趣或者目标的领域，你可以选择适用于你的目标的正确工具和技术。假如你的目标是成为一名前台开发人员，则可以选择前台开发的工具和技术。后台和全栈开发也是如此。

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前台学习交流裙：：603 ：985 ：993。里面聚集了少量正在自学前台的初学者裙文件里面也有我做前台技术这段时间整理的少量前台学习手册，前台面试题，前台开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

2、Web开发的基本工具和软件

计算机和操作系统：假如没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机（假如你拥有的话，那么更好……）。你可以使用任何类型的中型笔记本电脑或者台式机。对于操作系统，可以使用适合你的MacOS，Windows（最新版本）或者Linux。

文本编辑器/ IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具备良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其余少量不错的选择，例如Sublime Text或者Atom。假如我们谈论IDE，那么是Visual Studio（http://ASP.net或者C＃），Eclipse和Netbeans（Java）。是不错的选择。

Web浏览器：大多数开发人员的首选是Chrome或者Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也获得了长足的进步，其中的少量好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。

终端：您将使用少量系统命令来使用CLI进行很多工作。您可以将默认或者第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper这些都是可以使用的选项。

设计（可选）：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或者草图，但是假如您是自由职业者，则可能必需学习Adobe XD，Photoshop，Sketch或者Figma。

3、从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者者使用什么框架和后台语言，都必需使用HTML和CSS构建前台应用程序。因而，这是在Web开发中要学习的第一件事。

HTML5（语义元素，属性，文档类型等）

CSS基础知识颜色，字体，位置，盒子模型等。

CSS Grid和Flexbox对齐内容或者创立列。

CSS自己设置属性

4、响应式布局

您的应用程序应该在所有类型的设施（例如智能手机，平板电脑，台式机，iPad或者任何其余屏幕尺寸的设施）上都可以查看和使用。因而，理解创立响应式设计或者布局非常重要。让我们来看少量重要的主题。

理解如何设置视口

媒体查询不同的屏幕尺寸。

流体宽度

雷姆单位

移动优先

5、自己设置可重用CSS组件

与其依赖大型的CSS框架（如Bootstrap），不如创立自己的模块化，可重用的CSS组件以在项目中使用。假如您构建自己的定制设计，则无需导入完整的库。您创立只要要特定UI的组件。现在的新趋势最近还出现了有助于更有效地编写CSS代码的代码。假如你已经理解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预解决程序，可为标准CSS增加更多功能并使其更加高效。

你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创立单独的Saas文件。Sass的确节省了很多时间，所以你绝对应该在2020年学习它。

6、CSS框架

学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，依然非常相关或者有用。有许多流行的CSS框架可供使用，其中少量如下。

Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其余框架。

Tailwind CSS是其余正在流行的框架，与其余框架几乎没有什么不同。它是一组实用程序类，因而您可以创立自己的按钮和其余看起来与其余按钮的确不同的东西。它们也是高度可定制的。

物化

布尔玛

7、前台必需语言：JavaScript

学习HTML和CSS之后，接下来需要学习的是Vanilla Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言（例如PHP，Python或者http://ASP.net）中使用大量javascript，并且假如您想与React，Angular，NodeJS，Vue或者任何其余javascript框架或者库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的少量重要主题…

JavaScript基础知识（变量，数据类型，函数，条件等）

DOM（文档对象模型）

JSON（JavaScript对象表示法）

提取API（请求/响应/ Ajax）

假如您想转向React，Vue，Angular或者其余框架，现代JS（ES6）概念对于学习非常重要。

8、少量重要工具

Web开发中将使用少量工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其余开发人员合作以及相似的东西。让我们探讨其中少量工具。

Git（版本控制）和Github是您一定会在2020年学习的最受欢迎的工具。Git在与其余开发人员协作和管理代码方面有很多帮助。您还可以选择其余少量选项，例如GitLab，Bitbucket和其余少量选项。

理解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其余用于不同目的的选项卡。

大多数IDE或者文本编辑器都具备增加扩展名或者插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual Studio代码中的VSCode扩展可帮助下载扩展，例照实时服务器或者实时saas编译器以与React一起使用。

Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。

学习使用javascript软件包管理器，例如NPM和Yarn。假如您正在使用Javascript框架或者库（例如React），那么这些软件包管理器将使用很多，但是对于其余语言（例如Python或者Php），您将使用不同的软件包管理器。

假如要在前台安装NPM软件包，则必需使用Webpack或者Parcel。假如要创立自己的模块，或者者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因而需要Webpack或者Parcel对其进行捆绑。

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前台学习交流裙：前面：600 中间：610 最后：151。里面聚集了少量正在自学前台的初学者裙文件里面也有我做前台技术这段时间整理的少量前台学习手册，前台面试题，前台开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

9、基本部署

此时，一旦你知道应该为前台开发学习什么工具或者技术，就需要知道如何在Internet上部署前台网站。假如你正在为小型企业构建少量小型应用程序，登录页面或者个人站点，则无需学习AWS或者DevOps，仅由于它们具备光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习少量部署工具和步骤。

域注册（Namecheap，Google等）

托管托管（InMotion，Hostgator，Bluehost等）

静态主机（Netlify，Github页面）

SSL证书。

FTP，SFTP（文件传输协议）非常适合小型应用程序。

SSH（安全外壳），用于高级应用程序。

CLI和Git。

到目前为止，我们探讨的任何工具，技术趋势或者步骤都是前台开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设施的布局。您还可以使用到目前为止探讨的工具或者技术来部署小型应用程序或者项目。假如您想申请工作，那么学习少量前台框架（如React，Vue或者Angular）将是很棒的。

10、前台框架和状态管理

框架使您可以进行更高级的前台开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或者页面交互。这对于协作更好，也有助于编写简洁的代码。另外，理解状态管理。每个框架都有不同的方法。以下是2020年的少量流行框架和状态管理器。

React： React库是最流行的Web开发学习方法，与其余框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将 Redux和 Context API与Hooks一起使用以进行状态管理。

Vue： Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。

Angular：此框架通常在大型组织中使用。它具备相当陡峭的学习曲线。用Angular学习 TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和 Services是可以学习此框架的良好状态管理器。

可选学习：

假如您具备这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建客户界面。

理解服务器端渲染。NextJS（React）和NuxtJS（Vue）是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其余功能。

静态网站生成器：Gatsby（反应式）和Gridsome（Vue）

我们已经探讨了所有大多数前台开发工具和技术。现在让我们探讨成为后台开发人员或者全栈开发人员的语言和技术。

11、服务器端语言（选择一种）

您应该至少理解一种服务器端语言。要在2020年选择一种语言，下面提供了少量选项…

NodeJS（不是语言，而是运行时环境）

Python（非常适合初学者）

Java（适合大型组织）

Php（适合自由职业）

Ruby（2020年少两极）

C＃

Go

注意：无论你喜欢学习哪种服务器端语言，都要确保你理解使用该语言的数据结构和算法。数据结构和算法将帮助您为客户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串（最重要）。你将同时使用这两种方法。

12、服务器端框架（选择一项）

一旦学习了自己选择的一种服务器端语言，即可以使用其中一种语言框架。您可以选择以下给出的选项之一…

Node.js – Express，Koa，Adonis，Feather.js，Nest.js

Python：Django，Flask，

Java：Spring MVC，Grails

PHP：Laravel，Symfony，Codeignitor，Slim

Ruby：Sinatra上的Ruby on Rails

C＃：http://ASP.NET MVC

Go： Revel

13、数据库（选择一项）

大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或者某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将探讨2020年少量流行的数据库。

关系数据库：RDBMS依然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MS SQL。

NoSQL：MongoDB，RethinkDB，CouchDB

云数据库：Firebase，Azure Could DB，AWS

轻量级和缓存：Redis，SQLlite，NeDB

在学习数据库时，您还将学习RDBMS，ORM（对象关系映射器）或者ODM（对象数据映射器）的SQL（结构化查询语言）。GraphQL ：（可选）您可以理解现在流行的GraphQL。这是API的查询语言。它具备相似于JSON的简单语法，并且相当容易实现。

14、CMS：内容管理

您绝对应该理解内容管理系统，尤其是假如您是自由职业者。CMS用于将内容增加到您的网站或者应用程序。用户能够升级自己的内容非常好。

传统CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）

其余CMS ：DEDECMS，帝国CMS，PHPcms，http://Prismic.io，Strati。

15、部署和DevOps

托管全栈应用程序或者后台应用程序比仅前台应用程序要复杂少量，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。理解有关用于部署应用程序的以下内容。

在大多数公司中，有不同的团队从事DevOps的工作。因而，拥有有关DevOps的知识完全是可选的。您可以理解到，假如您正在从事自己的项目。

SSH（安全外壳）

Web服务器环境：NGINX，Apache

应用程序托管：Linode，Heroku，AWS，Azure，Now。

虚拟化：Docker，Vagrant

测试：单元，功能，集成等

负载平衡，监视，安全性。

以上所有技术工具都足以使您成为前台，后台或者全栈开发人员。根据最终目标选择正确的工具和技术。