1.第一阶段——HTML的学习
超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因 此，我们必须掌握HTML的基本结构和常用标记及属性。
HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!
在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。
2.第二个阶段——CSS的学习
CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。
“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。
3.第三个阶段——Java的学习
Java是一种在客户端广泛使用的脚步语言，在Java当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!有么有? 此时，也许你还沉浸在Java给你带来的惊喜之中，但你的项目经理却突然对你大吼道“这个效果在××浏览器下不兼容，重新搞……”“不兼容?”瞬间石化了有木有? “我擦，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”Java的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。
4.第四个阶段——jQUery的学习
jQuery 是一个免费、开源的轻量级的Java库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其write less,do more的核心宗旨。这个Feel倍儿爽!有么有? “豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐!能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪?可以实现吗?答案是肯定的。这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、Java插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!
web前端学习路线，按照顺序学习就可以了，希望你早日学有所成。
web前端学什么
Web前端学习路线图，希望对初学者有帮助。
1.Javascript 语言
全栈开发中，用的编程语言就是 javascript
2.HTML5 标签和 DOM
这是前端最核心技术，为之后学习各种开发框架，打下坚实基础。
3.CSS3
学习通过 css 开发网页和各种可视 UI 组件。
4.SASS
利用 sass 语言，开发复杂的页面 css
5.Node.js
掌握Node.js 核心 API ，具备后端开发能力。
6.Express 5.x 框架
掌握 Express 框架，从而具备快速开发后端程序的能力。
7.socket.io 库
让前后端通过 websocket协议通信，是web 开发游戏、聊天等程序必备技术。
8.Mongoose 框架
可以让程序具备文档数据储存能力
9.Git 命令与 github
可以对项目进行版本管理，从而能团队开发项目。
10.Gulp 构建工具实战
通过 gulp 工具，灵活对项目进行构建。
11.Webpack
可以用和 Node.js 后端模块化方式，开发前端程序，从而能开发大型系统。
12.Jasmine & Karma
可以利用 Jasmine & Karma 轻松实现，多种浏览器同时进行单元测试，而不必切换界面。
13.前端相关框架
JQuery / Bootstrap / Vue.js /React / Angular通过框架帮我我们快速开发程序
14.移动端与桌面程序开发工具
phonegap / react-native / electron / 微信小程序开发
这套工具，基本上只是打包工具，和提供了一些特定平台 API ，开发还是使用之前的 Web 技术。
如果通过这套学习路线图学完，那么就业是毫无压力的，但是做为有志向的码奴，我们还需要展望未来和扩展眼界。
其实，很多想学习技术的同学都一方面是兴趣使然一方面是想找一份满意的工作，如果你学的技术对企业没有实际价值，那么也白瞎，(除非你是理论计算机学家)，就目前在“互联网+”趋势的引导下，Web前端工程师的需求只会越来越大。
希望对您有所帮助！~
1．掌握基本的web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，了解其与不同浏览器的兼容性、渲染原理及bug
2．必须具备网站性能优化、SEO和服务器端开发的基本知识
3．必须学会使用各种web前端开发和测试工具来辅助开发吗
4．除了技术知识之外，还需要理论知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分层支持
5．未来的web前端开发工程师还将学习HTML5、web视觉设计、网站色彩搭配、网站交互设计模式等相关技术
像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端开发必学的高级技术;HTML5地理位置应用、离线应用、Webworker多线程实现、Websocket、跨平台开发技术和WebAPP开发等，这些企业级应用技术也是现在开发的主流；现在前端开发最热门、要人最多，就是使用canvas开发网页游戏动画，以及会用 Cocos2d-js制作游戏等开发。
一、初级阶段：前端初体验，感受视觉冲击，提升学习兴趣，打消学习疑虑
PS入门（前端UI协同工具蓝湖与标你妹工具使用)
HTML5，cSS3(大量CSS3网页特效制作)
移动端布局基础(媒体查询、页面适配)，响应式页面布局。
二、中级阶段：夯实基础，打通任督二脉，杜绝做一个API的搬运工
JS入门，
DOM操作，BOM，H5常用新API，Jquery之DOM操作，Ajax ;
JS高阶，面向对象(OOP)，原型、原型链，执行上下文栈，作用域、作用域链，This，闭包，ES6/ES7.Jquery页面特效+插件封装;
服务器知识Node.js (Express4) , MongoDB(mongoose)/Mysql. Websocket.
三、高级阶段：通往前端实战之路，时下最新开发框架与使用技巧，杜绝过时技术炒剩饭
Vue全家桶(Vue2.x+Vue-Router3.x+Vuex3.x+ElementUl2.x+Axios0.9)
React全家桶(React16.x+React-Route-Dom5.x+Redux4.x+React-Redux+Redux-Thunk)
微信小程序（登录态+微信支付)
Webpack4.x