你有没有看过你非常喜欢的网站, 是否研究过它的布局方式, 有没有想过我自己能不能也能实现一个, 甚至比你看的网站更好!
所有这些可见的站点界面和特效都是通过前端开发构建的(有时也称为 "前端 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. 解决问题的能力
如果所有前端开发人员都必须拥有一件事, 无论职位描述或官方职称如何, 这都是出色的解决问题的能力. 从确定如何最好地实现设计, 到修复出现的错误, 到如何使前端代码与正在实现的后端代码一起工作, 开发就是解决创造性问题.
假设您已经创建了一个功能完善的网站前端, 并将其交给后端开发人员, 以便他们将其与内容管理系统集成. 突然间, 你的一半功能停止工作. 一个优秀的前端开发人员会将此视为一个需要解决的难题, 而不是一场灾难. 当然, 优秀的高级前端开发人员会预见到这些问题, 并首先尝试预防这些问题!
如果大家对编程, Web 前端感兴趣, 想要了解学习, 打算深入了解这个行业的朋友, 可以加下我们的前端学习扣 qun :767273102, 不论你是学生还是想转行的朋友, 我都欢迎, 不定期分享干货, 网页制作, 网站开发, Web 全栈开发, 从 0 基础开始的的 HTML+CSS+JavaScript.jQuery,Ajax,node,angular 框架等到移动端 HTML5 的项目实战[视频 + 工具 + 系路线图] 都有整理, 分享给小伙伴: 学习前端我们是认真的
接下来是什么?
以上就是前端 Web 开发需要学习和掌握的全部技能! 兴趣是学习的动力, 光学习这些还不够, 在编程的世界里, 不是一劳永逸, 程序员是终身学习的行业, 共勉!
来源: http://www.jianshu.com/p/e180dfc3bfb3