WEB前端开发初学者必看的学习路线（附思惟导图）

不少同窗想学习WEB前端开发，虽然互联网有不少的教程、网站、书籍，但是却又不知从何开始如何选取。看完网友高等游民白乌鸦无私分享的原标题为《写给同事的前端学习路线》这篇文章，相信你会有所收获。

 

前端开发入门学习有：HTML、CSS、JavaScript（简称JS）这三个部分。因此在学习以前咱们须要先明确三个概念：

1. HTML——内容层，它的做用是表示一个HTML标签在页面里是个什么角色。
2. CSS——样式层，它的做用是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。
3. JS——行为层，它的做用是当用户触发某些行为时，会给内容和样式带来什么样的改变。

 

 

1、HTML，CSS部分

---

HTML/CSS初学，就照着http://www.w3cschool.cn/的实验作，把http://www.w3cschool.cn/index-6.html和http://www.w3cschool.cn/index-7.html两套作完了就入门了，

入门以后，学习CSS的精华，即布局，推荐李炎恢的教学视频，布局这一章：http://edu.51cto.com/lesson/id-14895.html第27章，若是以为不够，须要实战，则再学习接下来的28，29章。注意，这时候必定要老师讲一块代码，本身就要照着实现一次，切勿只看不作。

CSS还有一个精华部分就是命名规范，找几个著名网站（好比豆瓣、网易新闻）这类，研究它们的命名规范，我这里，有一个现成的命名规范可供学习（须要登陆evernote查看）：https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832

学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候若是想继续深刻学习相关类库和框架，推荐Sass和Compass，推荐两篇阮一峰的博客：http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.ruanyifeng.com/blog/2012/11/compass.html

 

和这本书：《Sass and Compass in Action》http://book.douban.com/subject/6732187/

 

2、JavaScript部分

---

初学者推荐看视频：http://edu.51cto.com/course/course_id-166-page-1.html，特别注意JavaScript的OOP写法（重点，可多看几遍），以及闭包、原型链，异步编程部分（次重点），前者写项目都在用，后者涉及JS这个语言本质特色。

而后须要学习JS和HTML/CSS在浏览器下的调试方法，推荐用Google Chrome下的chrome developer tools调试，能够看这个视频学习：http://happycasts.net/episodes/40

 

 

看完视频并通过实践后，能够看《Javascript good parts》（http://book.douban.com/subject/2994925/）这本书，没必要细看，看它的思想便可。用于巩固，提高JS方面的编程思想。

 

3、web前端学习路线思惟导图

---

web前端学习路线思惟导图

图太大很差展现，看不清楚能够进入如下连接查看——web前端学习路线思惟导图在线版：https://www.processon.com/view/link/57d28d0ee4b0942d7a89c9dd