2020要想成为一名专业的web前台开发程序员，需要学习什么？

 你有没有看过你非常喜欢的网站，能否研究过它的布局方式，有没有想过我自己能不能也能实现一个，甚至比你看的网站更好！

 所有这些可见的站点界面和特效都是通过前台开发构建的（有时也称为“前台Web开发”）。前台开发人员是少量最受欢迎的角色，目前各大知名互联网公司的前台开发人员的工资水平甚至超过了后台开发人员

 那前台开发需要学什么呢？本篇将分解前台开发人员使用和需要的所有技能，先从前台开发的定义开始。

 什么是前台开发？

尽管网页设计是网站的外观，但前台开发是将该设计的页面通过代码的形式在网络上进行展示，并加入少量功能特效 ！使之具备肯定的交互性！

什么是前台开发人员？

前台Web开发人员是通过HTML，CSS和JavaScript等编码语言实现Web设计的人。尽管它不再那么常见，但是前台开发人员有时被称为“用户端开发人员”，以区别于后台开发人员，后台是对数据库等幕后工作进行编程。假如您前往任何站点，您可以在导航，布局（包括此文章页面）中查看前台开发人员的工作，甚至可以看到PC页面与手机页面不同的展示方式。

 本文将分解前台Web开发人员在工作中前台需要掌握什么技术？

前台Web开发人员使用哪些技能？

前台Web开发人员使用三种主要编码语言来编写由Web设计人员创立的网站和Web应用程序设计：

 HTML

 CSS

 JavaScript

他们编写的代码在客户的浏览器中运行（而不是后台开发人员，其代码在Web服务器上运行）。想想它有点像这样：后台开发人员就像设计和创立使城市工作的系统（电力，水和下水道，分区等）的工程师，而前台开发人员就是那个人走出街道，确保一切都正常连接，这样人们即可以过上自己的生活（一个简单的类比，但你得到了粗略的想法）。前台Web开发人员还负责确保前台没有错误或者错误，并确保设计出现在各种平台和浏览器中。

 1. HTML、CSS

HTML（超文本标记语言）和CSS（层叠样式表）是Web编码的最基本构建块。没有这两件事，你就无法创立一个网站设计，而你最终得到的只是屏幕上没有格式化的纯文本。假如没有HTML，您甚至无法将图像增加到页面中！

在开始任何Web开发职业生涯之前，您必需掌握HTML和CSS编码。好消息是，可以在短短几周内完成其中任何一项的扎实工作知识。

 基础中的基础：仅HTML和CSS知识即可以让你构建基本的网站。

 2. JavaScript

JavaScript允许您为网站增加更多功能，并且您可以使用HTML，CSS和JavaScript（简称JS）创立许多基本Web应用程序。在最基本的层面上，JS用于创立和控制诸照实时升级的地图，交互式电影和在线游戏等内容。像Pinterest这样的网站大量使用JavaScript来使他们的客户界面易于使用（事实上，只需你固定页面就不会重新加载页面，这要归功于JavaScript！）。

 它也是世界上最流行的编程语言，所以不论你的开发职业规划如何，这都是一个非常有价值的东西。

3. jQuery

jQuery是一个JavaScript库：一组插件和扩展，可以更快，更轻松地使用JavaScript进行开发。jQuery不是必需从头开始编写所有代码，而是让前台Web开发人员为项目增加现成元素，而后根据需要进行自己设置（知道JavaScript如此重要的一个起因）。您可以将jQuery用于倒计时器，搜索表单自动完成，甚至自动重新排列和调整网格布局。

4. JavaScript框架

JS框架（包括AngularJS，Backbone，Ember和ReactJS）为您的JavaScript代码提供了现成的结构。有不同类型的JavaScript框架可以满足不同的需求，虽然提到的四个是实际工作列表中最受欢迎的。这些框架通过为您提供快速入门真正加速了开发，并且可以与jQuery等库一起使用，以最大限度地减少您必需执行的编程。

 5. 前台框架

CSS和前台框架（最受欢迎的前台框架是Bootstrap）为CSS框架做了JS框架为JavaScript做的事情：它们为您提供了更快编码的起点。因为如此多的CSS从项目到项目的完全相同的元素开始，所以为您预先定义所有这些元素的框架是非常有价值的。大多数前台开发人员工作列表都希望您熟习这些框架的工作方式以及如何使用它们。

 6. CSS预解决器的经验

 预解决器是前台开发人员可以用来加速CSS编码的另一个元素。CSS预解决器为CSS增加了额外的功能，以保持CSS的可扩展性和易用性。它会在您将代码发布到您的网站之前对其进行解决，并将其转换为格式良好且跨浏览器友好的CSS。根据实际工作清单，SASS和LESS是两个最受欢迎的预解决器。

7. 具备RESTful服务和API的经验

在没有太过技术性的情况下，REST代表Representational State Transfer。从基本的角度来说，它是一种轻量级架构，可简化Web上的网络通信，RESTful服务和API是遵循REST架构的Web服务。在此处阅读有关REST和RESTful服务的更多信息。

假设您想编写一个应用程序，按照您成为朋友的顺序向您显示所有社交媒体朋友。您可以调用Facebook的RESTful API来读取您的好友列表并返回该数据。Twitter也是如此（它也使用RESTful API）。对于使用RESTful API的任何服务，一般过程都是相同的，只是返回的数据会有所不同。

尽管这听起来非常复杂和技术性，但它是一套简单的指导方针和实践，可以设定期望，让您知道如何与Web服务进行通信。它们还使Web服务性能更好，扩展性更好，工作更可靠，更易于修改或者移动。

 8. 响应式和移动设计

 仅在中国，更多人通过移动设施访问互联网而不是台式电脑，因而难怪响应和移动设计技能对雇主来说非常重要。响应式设计意味着网站的布局（有时功能和内容）会根据客户使用的屏幕尺寸和设施而发生变化。

 例如，当从具备大显示器的台式计算机访问网站时，客户将取得专门为鼠标和键盘客户创立的多列，大图形和交互。在移动设施上，同一网站将显示为针对触摸交互进行优化的单个列，但使用相同的基本文件。

 移动设计可以包括响应式设计，但也包括创立单独的移动专用设计。有时，您希望客户在台式计算机上访问您的网站时取得的体验与您希望他们从智能手机访问时看到的体验完全不同，在这种情况下，移动网站完全不同是有意义的。例如，拥有网上银行的银行网站将受益于一个单独的移动网站，该网站允许客户查看最近的银行位置和简化的帐户视图（由于移动屏幕较小）。

9. 跨浏览器开发

     现代浏览器在一致地显示网站方面已经相当不错，但是他们在幕后如何解释代码依然存在差异。在所有现代浏览器与Web标准完美配合之前，理解如何使每个浏览器按照您希望的方式工作是一项重要技能。这就是跨浏览器开发的一律意义所在。

10. 测试和调试

对于前台Web开发人员来说，这是一个事实：错误发生。熟习测试和调试过程至关重要。

单元测试是测试单个源代码块的过程（指示网站应该如何工作的指令），单元测试框架提供了一种特定的方法和结构（每种编程语言都有不同的方法和结构）。

另一种常见的测试类型是UI测试（也称为验收测试，浏览器测试或者功能测试），您可以检查以确保网站在客户实际在网站上执行操作时的行为。您可以编写测试，在执行操作后在页面上查找特定HTML等内容（例如，确保假如客户不记得填写所需的表单字段，则会弹出表单错误框）。

调试只是将这些测试发现的所有“错误”（错误）发现（或者者一旦您的网站启动就会发现您的客户），戴上您的侦探帽，找出起因和方法，并处理问题。不同的公司使用略有不同的流程，但假如您使用过程，您可以很容易地适应其余人。

 11. 学会使用Git

通过版本控制系统，您可以跟踪随着时间的推移对代码所做的更改。假如你搞砸了，它们也可以很容易地恢复到早期版本。所以，假设您增加了一个自己设置的jQuery插件，忽然有一半的其余代码中断了。您可以回滚到以前的版本，而后使用其余处理方案再次尝试，而不是必需加密手动撤消它并修复所有错误。

Git是这些版本控制管理系统中使用最广泛的。理解如何使用Git几乎可以满足任何开发工作的需求。这是开发人员需要具有的重要工作技能之一，但实际上很少有人谈论这些技能。

12. 处理问题的能力

假如所有前台开发人员都必需拥有一件事，无论职位形容或者官方职称如何，这都是出色的处理问题的能力。从确定如何最好地实现设计，到修复出现的错误，到如何使前台代码与正在实现的后台代码一起工作，开发就是处理创造性问题。

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

假设您已经创立了一个功能完善的网站前台，并将其交给后台开发人员，以便他们将其与内容管理系统集成。忽然间，你的一半功能中止工作。一个优秀的前台开发人员会将此视为一个需要处理的难题，而不是一场灾难。当然，优秀的高级前台开发人员会预见到这些问题，并首先尝试预防这些问题！

 现在这个时代，金钱都变成了数字，从前都是拿在手上，现在都变成了虚拟币一样，互联网时代，我们拼的是时间，只有在有限的时间，把自己提升上去，才能去给自己取得更多的回报！