你曾经看着自己喜爱的网站，是不是想知道它到底是怎么运作的？你看它的布局方式，当你点击按钮的时候的交互，或者其他的部分，有没想过：“我想知道它到底有多么复杂”或者“我希望我也能做到”？
所有的这些事情都属于前端开发的范畴。虽然网页设计决定网站的外观，但是实现这个网页设计需要前端开发。
前端开发者们使用HTML, CSS, 和JavaScript编写通过网页设计师所创建的web应用程序的设计。他们编写的代码运行在用户浏览器的内部(相反，后端开发人员的代码在web服务器上运行)，想象一下这样的场景：后端开发者就像一个工程师，他们设计和创造让一个城市工作的系统(电力，供水和下水道，分区等)，而前端开发者则规划街道，并确保连接好一切，让人们能过自己的生活(一个简单的比喻，但你能得到一个粗略的概念)，他们还负责确保在前端没有错误和bug，以及确保设计师设计的网页能支持各种平台和浏览器。
我通过梳理几十个前端开发的工作清单，为了看看目前最需要哪些技能。下面这些是真正的雇主在求职者中寻找的东西(在不久的将来仍然一样)，掌握了下面的这些技能，你肯定能找到一个很棒的前端开发的工作！
HTML & CSS
HTML (Hyper Text Markup Language) 和 CSS (Cascading Style Sheets)，是网站编码的最基本的部分。没有这两样东西，你不能完成一个网站的设计，你最终只能在屏幕上看到一个无格式的纯文本。没有HTML，你甚至不能在页面中添加图片。
在你开始任何web开发的职业道路之前，你都必须要掌握HTML和CSS。好消息是通过短短几周，不管是HTML还是CSS，你就能得到扎实的实践经验。
最重要的部分：单独的HTML和CSS知识能让你建立基础的网站。
JavaScript
JavaScript能为你的网站添加大量的功能。你甚至能够开发很多基本的web应用程序，仅仅只使用HTML, CSS和 JavaScript(简称JS)。在最基本的层面上，JS能够添加很多互动的元素到你的网站，使用它开发实时更新的地图，互动电影，和线上游戏。像pinterest这个网站使用JS让他们的用户使用起来非常简单(事实上，不管你什么时候钉住一张图片页面都不会刷新，这要多亏于JS)。
它是世界上最受欢迎的编程语言，所以无论你作为开发者的职业生涯如何规划，这是一个非常值得学习的东西。
更多关于JS的文章在这里： You’ve Learned HTML and CSS—Now What?
jQuery
jQuery是一个JavaScript库：一个插件和扩展的集合，让开发者写JavaScript更快更简单。而不是从头开始编码，jQuery让你添加现有的元素到你的项目中，在必要的时候你也能够定制开发(这是为什么学习JS如此重要的原因之一)。你能使用jQuery做这些事情，比如倒计时，自动完成的搜索表单，甚至是自动调整大小的栅格布局。
JavaScript框架
JS框架(包括AngularJS, Backbone, Ember和ReactJS等)能让你的JS代码有一个现成的架构。虽然之前提到的4个是实际的工作清单上最受欢迎的框架，但是根据不同的需求有不同的框架。这些框架真的能让你的开发速度变的更快，就像jQuery一样，让你从头开始编码做的事情更少。
CSS框架
CSS框架(最受欢迎的是Bootstrap)是为了写CSS更加简单，如同JS框架是为了JS。它们给你一个更快的编码起点，因为很多的CSS在一个又一个的项目中使用相同的元素，框架在前期为你定义了所有的元素。很多的前端工作清单上都希望你能够熟练掌握怎么使用它们，以及了解它们的工作原理。
CSS预处理器
预处理器是另一个加快你CSS编码的东西。CSS预处理器能够给你的CSS添加额外的功能，让我们的CSS可扩展，并且更容易工作。它在你发布网站之前加工你的代码，让它变成格式更美观的、跨浏览器友好的CSS。根据真实的工作清单，SASS和LESS是需求最高的预处理器。
RESTful服务和APIs
在这一点，没有太多技术性。REST代表特征状态转移，英文是Representational State Transfer。从基本术语来说，它是一个轻量级的架构，简化了web的网络连接，RESTful服务和APIs都是REST架构的部分。查阅更多关于REST和RESTful服务，请看这里。
假设你想写一个程序，展示你所有的社交媒体的朋友的交往顺序，你应该调用Facebook的RESTful接口读取你朋友的列表，并且返回这些数据，Twitter亦然(也要调用RESTful接口)。使用RESTful接口服务的流程一般都是一样的，只是返回的数据不同。
尽管听起来像很复杂的技术，但它只是一组简单的指导方针，让你知道如何与Web服务进行通信的准则和做法。它们还让你Web服务有更好的表现，规模更好，工作更可靠，而且更容易修改或移动。
响应式和移动端设计
就美国而言，使用手机上网的人数超过了用电脑上网的人数。所以不用说，响应式和移动端设计对雇主而言是非常重要的。响应式设计意味布局(有时候还有功能和内容)随着屏幕大小、设备的改变而改变。
举个例子，当一个网站是被大屏幕的电脑访问时，用户将会看到更多的列，大的图像，以及专门为鼠标和键盘创建的交互。在移动设备上，同样的网站可能只有1列，并且优化成触摸交互，但是使用同样的基本文件。
移动端设计不仅包括响应式设计，而且还包括创建单独的针对移动设备的设计。有时候你想要用户访问你的站点时，用电脑和智能手机所看到的是完全不同的，在这种情况下，移动端的网站是有意义的。举个例子，银行的线上银行网站，使用单独的移动站点是有很多好处的，它让用户看到距离最近的银行的位置，简化账户信息(因为移动设备屏幕更小)。
如果你想学习更多的响应式设计，查阅我们的文章，mobile-web-designer，或者 8 Secrets To Building Mobile Sites Users Love。
跨浏览器开发
现代的浏览器在展示网站的一致性上非常的好，但是它们如何解析代码并呈现在屏幕前仍然有一些不同。直到所有的现代浏览器都使用web标准，并能完美的工作之前，知道如何让每一个浏览器都像你期望的那样运行，是非常重要的技能。这就是所有跨浏览器开发的内容。
查看更多的跨浏览器的兼容性请看这里或者这里，或者查看更深层次的Daniel Herken的文章Cross Browser Handbook。
内容管理系统和E-commerce平台
几乎所有的站点都是建立在内容管理系统(CMS)之上的(E-commerce平台是一个CMS具体的类型)。世界上最受欢迎的CMS是WordPress，它在成千上万的网站的幕后工作(包括Skillcrush！)——60%的CMS网站使用WordPress。
其他的受欢迎的CMS包括Joomla、Drupal和Magento。尽管知道这些不会让你成为一个WordPress专家，但是它们能让你在使用这些系统的公司(而且很多公司在使用)，找到一份令人满意的工作。
测试和调试
这是一个web开发中的事实：产生bug。熟悉测试和调试的过程是至关重要的。
单元测试是分块测试源代码的过程(这些指令告诉网站要如何工作)。单元测试框架提供一个特殊的方法和架构做这些事情(每个不同的编程语言测试框架也有不同)。
另一个测试类型是UI测试(也叫验收测试、浏览器测试或者功能测试)，你用它能够察实际情况中，用户在网站行为交互是否正确。你可以编写测试代码，在一个页面发生一个动作之后，寻找特定的HTML(比如如果用户忘记填写必填的表单，一个表单错误的提示框将会弹出)。
调试(Debugging)简单的说，就是通过测试发现所有的bug和错误(或者你的网站发布后被你的用户发现)，侦测并且知道为什么它们会发生，然后修复这个问题。不同的公司的流程可能稍微有些不同，但只要你掌握了一个，也能很容易适应其他的。
Git和版本控制系统
版本控制系统能让你追踪过去的代码，如果你把事情搞砸了，它们也能很容易的让你回退到一个早期的版本。假设你添加了一个自定义的jQuery插件，写到一半突然发现其他的代码出问题了，你能够实用版本控制系统回滚到之前的版本然后用不同的方式再试一次，而不是手动的撤销它然后再修复问题。
Git是一个被广泛使用的版本控制系统。了解并且知道如何使用Git几乎是所有开发工作的要求之一。这是一个开发者需要的至关重要的技能，但是很少被提及。
解决问题的能力
有一个东西不管工作描述还是官方标题，是要求所有前端开发者必须拥有的，那就是优秀的解决问题的能力。从找到如何让设计最好的实现，到修复那些突然出现的错误，到结合前端代码和后端代码一起工作，开发就是解决这些过程中所有的问题。
假设你创建了一个有完美功能的前端网站，然后你把它交给后端开发者让他们整合到内容管理系统。突然之间，你那些很棒的功能停止工作了，一个好的前端开发者会把它视为一个谜题并且解决它，而不是形成一个灾难。当然，一个优秀的高级前端开发者会预测到这些问题，并且在第一时间阻止它们发生。
原文地址： Exactly What You Need to Know to be a Front End Developer
网友评论