前端导学

一.前端导学

1.简述
水平有限,还请大家见谅，下面开始切入正题,刚开始学习前端时，需要掌握一些基础知识如下：html css JavaScript等等，学好并且巩固这些基础知识能够帮助我们学习一些优秀的前端框架,例如当我们的html/css/js学的不错而且能够自己写出静态页面(我们通常浏览的网页，但没有交互功能)时，就可以学习bootstrap等，这些稍后再说。

2.学习网站
①我在学习html和css的时候第一个接触的网站是w3shool,缺点：是全是以文字形式，容易枯燥无味 优点：虽然文字过多，但他采用的是文字+代码实例+代码实验,你可以学完后,照着网站提供给你的代码实例在自己的编辑器上敲敲看又或者可以直接在这上面试验代码,而且能够实时显示结果。
w3shool:https://www.w3cschool.cn/

网络上有两种此网站,一个是w3school，另外一个是w3cshool，都是提供学习的网站，并没有什么不好的东西,但我还是推荐大家学习w3shool.

②另外一个推荐的网站是我最喜欢也是我最感谢的网站，我从一个什么都不会，到会用ps切片，写静态页面，再到使用各种框架全是靠它，那就是慕课网,，几乎没有缺点，慕课网的教学模式有两种一是视频，二是实时代码编写。
慕课网:http://www.imooc.com/

综上，之所以推荐慕课网，并不是因为它的教学方式，而是因为它的内容,充满了干货以及细节，这点接下来就会有体现,

3.学习方法

我推荐大家将w3school当做工具书来用,忘了一些标签或者知识，可以迅速的在这上面查找到，如果将它作为主要学习的网站,也是可以的，将慕课网作为主要的学习网站，是一个非常好的选择，将它与w3school配套使用，效果更佳。

4.学习路径【重要！！！！！】

1.首先大家要学习的肯定是html与css，这是核心。
推荐大家使用慕课网的①HTML+CSS课程：http://www.imooc.com/learn/9
以及w3shool的①HTML课程：http://www.w3school.com.cn/h.asp w3shool的目录很直观，大家按照顺序学习即可，学完HTML后学习CSS，w3shool中的HTML5与CSS3大家也可以进行学习，这只是同一种语言的不同标准而已

2.很多人学完HTML+CSS后，立马就去学习JavaScript，其实我是不推荐大家这么做的，因为html与css看似简单，但里面蕴含着很多的细节。在这里推荐大家推荐一些HTML与CSS的细节教程与文档。
学习完慕课网的HTML+CSS课程后,我们就可以学习②网页布局基础：http://www.imooc.com/learn/95 ，以及③如何使用CSS进行网页布局：http://www.imooc.com/learn/57 ,这样能够让大家对网页布局有个初步的理解。
然后我们需要对CSS进行更深入的理解。这样可以帮助我们解决一些奇怪的问题，例如，高度塌陷等等。
④
1.CSS深入理解之float浮动：http://www.imooc.com/learn/121
2.CSS深入理解之margin：http://www.imooc.com/learn/680
3.CSS深入理解之padding：http://www.imooc.com/learn/710
4.CSS深入理解之border：http://www.imooc.com/learn/755
5.CSS深入理解之line-height：http://www.imooc.com/learn/403
6.CSS深入理解之relative：http://www.imooc.com/learn/565
7.CSS深入理解之absolute：http://www.imooc.com/learn/192

3.现在我们要掌握的是一门很牛逼的脚本语言JavaScript，同样推荐大家是学习慕课网的⑤JavaScript入门篇：http://www.imooc.com/learn/36 以及⑥进阶篇：http://www.imooc.com/learn/10
JavaScript我觉得是非常重要的，学得好，简直不要太牛逼。这里给大家2本电子书(最棒的javascript书籍)进行配套学习。
JavaScript DOM编程艺术以及JavaScript权威指南，学习顺序先从DOM编程艺术开始再到权威指南，下载地址：https://pan.baidu.com/s/1bo9OTpd

4.之后，的jquery，less/sass等等也是一样照葫芦画瓢，w3shool以及慕课网均有教程。

5.教程分享
下面是慕课网实战收费教程的分享，并不是入门课程，大家根据自己知识的掌握程度选择课程。

1.响应式开发一招致胜：要求：了解HTML、CSS、JS基础知识。

2.微信小程序入门与实战: 要求：基本无要求，如果有javascript以及css基础更好。 可以编写微信小程序

3.Vue.js 2.0 入门与实战 ： 要求：一些nodejs以及npm操作经验，一些html/css/js 经验，es6语法的一些了解

4.6小时使用Jquery实现小应用: 要求：适合了解简单的HTML和JavaScript语法

5.ES6零基础教学 解析彩票项目: 要求：具备编程基础，对JavaScript、jQuery有一定的了解

8套整合下载 链接: https://pan.baidu.com/s/1eR6vgMe 密码: 7cuw

连接过期不补。
侵删~

资源列表：
w3shool {
①HTML课程：http://www.w3school.com.cn/h.asp
}
慕课网 {
①HTML+CSS课程：http://www.imooc.com/learn/9
②网页布局基础：http://www.imooc.com/learn/95
③如何使用CSS进行网页布局：http://www.imooc.com/learn/57
④CSS深入理解系列{
1.CSS深入理解之float浮动：http://www.imooc.com/learn/121
2.CSS深入理解之margin：http://www.imooc.com/learn/680
3.CSS深入理解之padding：http://www.imooc.com/learn/710
4.CSS深入理解之border：http://www.imooc.com/learn/755
5.CSS深入理解之line-height：http://www.imooc.com/learn/403
6.CSS深入理解之relative：http://www.imooc.com/learn/565
7.CSS深入理解之absolute：http://www.imooc.com/learn/192
}
⑤JavaScript入门篇：http://www.imooc.com/learn/36
⑥JavaScript进阶篇：http://www.imooc.com/learn/10
实战教程 {
8套整合下载 链接: https://pan.baidu.com/s/1eR6vgMe 密码: 7cuw
}
}

文档 {
1.5种方法去掉HTML中Inline-Block元素之间的空白 : http://www.cnblogs.com/dpure/p/4610511.html

2.CSS的Float: http://www.w3cplus.com/css/css-containing-floats-part-2

3.BFC和IE的hasLayout: http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

4.CSS布局奇淫巧计之-强大的负边距: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

5.利用css样式画各种图形(正方形、矩形、梯形等): http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

6.HTML解析原理: http://www.cnblogs.com/NetSos/archive/2010/11/29/1891194.html

7.HTTP协议详解: http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html

8.浏览器内部工作原理: http://kb.cnblogs.com/page/129756/

9.Javascript的this用法: http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

10.JS内存机制及前端进阶文档: http://www.jianshu.com/p/cd3fee40ef59
}