十年web前端开发工程师告诉你怎样零基础入门（文末附教程一套）
随着web前端的飞速发展，学习web前端的人员也是越来越多，在移动 互联网 时代，相信我们每个人的手机上都装有数十个APP，这些APP的开发其实也和当下热门的 Web 前端开发息息相关。
事实上，如今一半以上的APP都是采用Hybrid混合模式开发，即结合安卓和Web端技术开发。而纯 Web开发 的APP也不在少数，比如我们众所周知的 QQ 空间就是使用 Web前端 的React Native技术开发。除了APP，我们在手机端常看到的H5页面，也是主要运用了Web端的 HTML5 技术开发。 当然，Web前端现在也不仅仅局限于前端网页和APP，服务器端、桌面级应用甚至是VR都有涉及。
一 今天主要讲一下Web前端开发所需要的知识技能及学习路径
1. HTML5 + CSS3 + JavaScript
Web开发基础中的基础，HTML是负责网页结构，CSS负责网页样式，JS则负责逻辑交互。前两者更像是标记语言，没有什么逻辑，JS才是前端的重中之重。 HTML5 新增的技术大部分需要结合JS学习。
每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解JS深入性的知识，比如原型链、闭包、 设计模式 等需要更多的积累，逐渐理解并实践掌握。
2. JQuery + BootStrap + Ajax + Json
jQuery是JS的一个应用库，能够提升原生JS开发效率。Bootstrap则是响应式框架，更简单的实现手机/平板/PC多个设备的页面支持。Ajax技术用于异步交互，不刷新页面就能更新数据，比如 地图 应用等。Json是一种数据格式，被广泛应用在各大编程语言中。
jQuery 和 bootstrap 会简化很多编写的代码量，用着不亦乐乎，但对于基础还不是很扎实的人建议还是少用。 Ajax 和 json 通常用于和后端交互，在实际业务中也经常用到。
3. Git/SVN
版本管理工具，主要用于团队开发时避免文件冲突，也可回档。前端推荐学习Git。
4. Nodejs + Mysql /MongoDB(可选)
运行在服务器端的JavaScript。Express是其拓展MVC框架。其中nodejs最常用到的就是npm包管理器，不用到各个网站去下载资源包。 数据库 的学习可以选择MongoDB或者MySQL，前者与Nodejs的契合度更好，不过现在大多数网站都是 PHP +Mysql的组合，如果有学PHP的打算的话，可以先学习 Mysql 。
5. ECMAScript 6
JavaScript 的语言标准。ES6中加入了很多新的概念，也弥补了之前版本中JS的很多缺陷，越来越多的项目开始运用ES6进行开发。学之前最好把ES5先搞懂了，目前实际项目中考虑到兼容性，ES6是需要通过Babel将其编译为ES5来部署的。
6. Angular/React/Vue
前端三大框架，各自也有着各自的生态系统，根据需求自行选择学习。目前企业需求量最大的仍然是Angular，但近期趋势来看react和vue则更受欢迎。因为现在前端技术发展太过于突飞猛进，工具和框架的更新比翻书还快，建议学习还是看文档比较好。学习过程中也会遇到很多用到各种构建工具的时候。
7. 其他常用工具
这个一样是根据需求自行选择学习。比较常用的现在有 Web pack，可以将多个不同编程风格的文件打包，比如ES6/AMD/CMD之类的模块化都能识别并编译成 浏览器 能运行的文件。Sass/Less，CSS预编译框架，可以用带有逻辑性的方式编写CSS代码。Gulp/Grunt构建工具，可以自动化对代码进行压缩合并等工作。
8. 其他后端编程语言
目前市场对前端基本都要求会一门后端语言， PHP / JAVA / Nodejs / Python 等。
学习编程重要的还是实践，多敲代码，多去尝试。独立解决问题的能力、探究钻研的精神是必不可少的。有兴趣的话也可以自己搭建一个技术 博客 ，往 github 上传几个 开源 项目，这些都是不错的加分点。
一名优秀的 程序员 ，不仅仅是 程序员 。
学习前端书籍自然不可少，这里给大家推荐《html 5与 css 3权威指南》，虽然主要是讲解html5+css3，但倒也是一本好的入门书籍。该书比较系统，覆盖面也比较广。技术新颖，所有知识点都紧跟 html 5与css 3的最新发展动态（html 5和css 3仍在不断完善之中）；也有比较强的实战性（包含246个示例页面），不仅每个知识点都 配有精心设计的小案例（便于动手实践），配合案例，也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。
Web前端学习小建议
这里跟大家扯一扯学习前端的小方法，是我自己的学习方法，大家凑合看看，倒也不一定对~
在写css前，其实html的结构要是比较合理的，这样写css也会比较顺手。在写一个网页之前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，然后结合自己的项目，心中有一个大致规划。可以先把最外层轮廓写好，先不着急去写某一个具体的部分。
这里给大家分享一些小技巧：
1、使用reset.css
火狐和IE这两种不同的浏览器，在绘制CSS样式方法上截然不同。这种情况下，使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。（可以去网上找一下，很多的）
2、CSS缩写
CSS缩写简化了你的CSS代码，更重要的是，它让你的代码更加整洁易懂。
不是像这样创建CSS
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
而是像这样创建CSS
.header {
background: #fff url(image.gif) no-repeat top left
}
3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。
4、实用的<li>
<li>也叫链接列表，在与<ol>或<ul>正确搭配的时候非常好用，尤其是用在导航菜单样式上。
5、少用<table>多用<div>
CSS最大的优势之 一是使用<div>达到样式上的灵活多变。不同于<table>，<div>里的内容不会 被锁在单元 格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是 用 <table>吧。
6、CSS调试工具
在设计CSS时，能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你，你可以把它装在浏览器上：比如FireFox Web Developer、DOM Inspector、Firebug等
7、!Important
所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。
.page {
background-color:blue !important;
background-color:red;
}
比如上面的例子，因为background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持。
牢记以上小技巧，也许你的css技能突然就起飞了呢？
关于javascript的一些小技巧，下次我再整理给大家~一次性看太多，大家是不是也有点晕？
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？
anyway~希望大家可以成为一个优秀的前端er！