我不是前端工程师，对于前端知识略有研究，因此这篇文章是咨询了几位前端工程师才斗胆发出来的。或许有不对有瑕疵，一定要提醒我。（只有仔细的人才能看到文末的彩蛋）

那么，回到今天的主题。如何成为前端工程师？

首先前端工程师的学习路线分为：

以下我们会按照以上的路线整理教程。

一、开发工具：sublime、HBuilder

sublime ==> 前端开发工具技巧介绍

HBuilder ==> HBuilder 使用教程

(开发工具只是辅助，具体选择看个人的喜好)

二、基础：HTML， CSS教程

选择一（w3c的教程）：HTML 教程 + HTML 5 教程 + CSS 教程

选择二（imooc教程）： HTML+CSS基础课程 + 如何用CSS进行网页布局 + 网页布局基础-慕课网 + 网页简单布局之结构与表现原则

选择三（网易云课堂）：oeasy教html、css网页设计与制作(html5教程) 、HTML5入门 - 网易云课堂 、 8小时学会HTML网页开发

任意选择其一进行学习即可。

三、进阶：Javascript，jQuery

Javascript ==> JavaScript 教程 （w3c） 或 JavaScript - 网易云课堂 或 李炎恢JavaScript教程 季

或者JavaScript入门篇-JavaScript入门视频教程 和 JavaScript进阶篇_JavaScript视频教程

jQuery ==>jQuery 教程 | 菜鸟教程

或者 jQuery基础视频教程 和 jQuery基础修炼圣典_DOM篇_jQuery视频教程 和 jQuery基础修炼圣典 和 jQuery基础修炼圣典

实战：网页定位导航 + 瀑布流布局-慕课网 + 搜索框制作-慕课网

或者jQuery 实战经典

四、：AJAX 教程

AJAX 教程 | 菜鸟教程 或者 Ajax全接触-慕课网

五、框架扩展学习：zepto、Bootstrap、React、VUE、Angular

Bootstrap == > http://v3.bootcss.com/ || Bootstrap 教程

zepto ==> GMU API 文档

React ==> 用于构建用户界面的JAVASCRIPT库 || React 入门实例教程

Angular ==> AngularJS 教程 || AngularJS中文网

六、 调试工具：Firebug

Firebug 教程 || WEB调试工具-Firebug-慕课网

七、网站优化

seo： SEO在网页制作中的应用

前端性能优化： Yahoo军规-慕课网 || 网站前端性能优化总结

后再给大家推荐一份完整的极客学院前端教程：本科生如何系统地学习前端开发？ - 路人甲的回答

如果你想学习编程，但是找不到学习路径和资源，欢迎关注专栏：学习编程

如何学习Python爬虫[入门篇]？ - 知乎专栏
如何一步一步的学Java - 知乎专栏
C、C++语言学习资料 - 知乎专栏
学好Python的11个资源 - 知乎专栏
程序员把妹指南之修电脑篇 - 知乎专栏
编程教程资源整理汇总- 知乎专栏
免费实用的API接口 - 知乎专栏
零基础如何开发游戏 - 知乎专栏
代码编辑器的配色方案 - 知乎专栏

虽然我不是前端工程师，但是我对前端很感兴趣的，想认识一些前端开发的朋友或者想学习前端开发的朋友。于是在这里，我建了一个微信群和qq群，用来交流聊天。

前端交流微信群：（微信群无法识别请加qq群，qq群中有微信群二维码）

前端交流qq群：489268413