如何快速入门前端？附资料下载

买了一些前端入门书籍，好像也看不太明白？
看了好多视频教程彷佛也是似懂非懂？
若是你如今是初学前端，入门的话，能够看看下面内容……或者有一点帮助

学习前端，前端就比如如盖房子~
html就充当了房子结构这部分，也是房子的基础。
css呢，就比如我们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css
javascript呢，就比如这个房子的功能，房子须要制冷吧，须要暖气吧，也须要上下水吧。这些功能性的就至关因而javascript

例子可能不是很恰当，只是帮助你们有个初步的认识~

---

 

一、前端工具（dreamwear/sublime/Photoshop/SVN等）

 

二、零基础入门（html，CSS）

前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置...

经常使用标签集合
header、article、aside、section、footer、nav、h1-h六、p、ul、ol、li、img、dl、dt、dd...绝对路径、相对路径、标签语义化、标签嵌套规范、SEO...

经常使用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超连接及伪类划分、标签类型划分及特性、inline、inline-block、block..

浮动进阶
浮动的做用、浮动的特性、文档流、浮动的各类问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件...

定位
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度...

表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操做、表单默认样式初始...

兼容性问题处理
兼容性问题总结、浮动在IE6，7下的各类问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式...

整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...

css3入门
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、background-clip...

移动端布局
测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断...

Animation和Transform
浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题...

Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具...

3.项目实战

PC端的企业网站布局（例：sony官网）
PC端的电商类网站布局（例：京东商城）
移动端常见页面布局（例：微信活动页/商城）

推荐图书：

学习前端书籍天然不可少，这里给你们推荐《html 5与css 3权威指南》，虽然主要是讲解html5+css3，但倒也是一本好的入门书籍。该书比较系统，覆盖面也比较广。技术新颖，全部知识点都紧跟html 5与css 3的最新发展动态（html 5和css 3仍在不断完善之中）；也有比较强的实战性（包含246个示例页面），不只每一个知识点都配有精心设计的小案例（便于动手实践），配合案例，也比较生动有趣。该书不只能知足你全面而系统地学习理论知识的需求，还能知足你须要充分实践的需求。

 

本次还收集了一些视频资料，给你们入门学习

 

下载连接： http://pan.baidu.com/s/1kUlwT19 （百度云盘）

---

 

我的认为学习前端可能又分为下面几个阶段；

　　第一阶段——HTML标签的学习

　 　超文本标记语言(HyperText Mark-up Language 简称HTML)，“超文本”就是指页面内能够包含图片、连接，甚至音乐、程序等非文字元素。
html是一个网页的骨架，就比如是盖房子的结构~这也是前端页面的基础。试着想一下，若是一个房子连砖头和水泥都没有，后面的步骤又有什么意义呢？因此咱们必须彻底掌握HTML的基本结构和常见的标签，属性。有了一个好的开始，距离成功已经一小半啦~

关于HTML怎么记忆、学习？可能一上来死记硬背，也不会有太好的预期。并且还有可能被吓到？
“我去！这么多标签！怎么记得玩？”

我的感受有两点能够尝试：
1，语义化的去记忆。好比ul li这个就是列表，button就是按钮，table就是表格。其实这也是html5所倡导的，语义化标签。
2，试着写一个一个小的demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？

学习HTML就是要本身不断的去写，去尝试。看着本身的代码能跑起来，有了心目中的效果，这种心情仍是很开心的！给你们推荐一个网站，w3cSchool，这里面有在线的代码编辑器。能够边写边看到效果~

　　ok~学习完成html后，咱们来到第二阶段——css
　　去给咱们的房子装修一番吧~

 

---

 

　　第二阶段——CSS的学习

　　CSS，层叠样式表——（Cascading Style Sheets），是可以真正作到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS可以对网页中的对象的位置排版进行像素级的精确控制，支持几乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力，并可以进行初步交互设计，是目前基于文本展现最优秀的表现设计语言。CSS可以根据不一样使用者的理解能力，简化或者优化写法，针对各种人群，有较强的易读性。

　　CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时咱们就以及可以对网页中各个元素进行精准的排版，作出符合咱们意愿的网页啦！

关于CSS的各类属性，咱们仍是能够参考学习HTML那样。能够说CSS的属性几乎彻底是语义化的。咱们须要改变边框，那就是“border”，那咱们须要右侧边框作一些改变，那就是“border-right”。很明显，接下来按照咱们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

彻底就是咱们须要什么，只要凭着需求去寻找。

　　说完装修，咱们终于要给房子打造一些功能啦~follow me~

 

---

 

　　第三阶段——JavaScript

　　JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增长动态功能。

简单来讲，javascript是一个能够运行在浏览器上面的语言（固然如今基于一些库/框架已经远不仅是在浏览器上了），它能够操控浏览器，让浏览器遵从咱们的命令。这有点像一个电视剧和遥控器，而javascript就是咱们的遥控器。浏览器根据javascript的指令，作出相应的反馈。好比操做DOM（也能够理解成为操做HTML），能够操做CSS。有了javascript就可让我更加灵活&动态的操控HTML,CSS.

严格来讲、HTML和CSS还算不上真正的“语言”，而javascript倒是如假包换的脚本型语言，既然是语言，那就会有字符串，数组，对象等等。而咱们的javascript能够处理这些与数据有关的工做，好比给数组排个序，去个重等等。

而咱们依靠javascript能够作些什么呢？网页上常见的轮播图，网站的注册功能，提交咱们的留言，刷新获取新闻等等。固然，咱们强大的javascript远不止此啦~之后再为你们深刻介绍~

然而由于历史缘由，好比咱们灰常“尊敬”的 IE 浏览器~出了一套本身的javascript标准，没有和主流javascript标准兼容啊！！做为一个前端er是否是应该把更多精力用在有意义的地方呢，而不是解决兼容。。。

因此，彷佛咱们还须要一个利器，来让咱们更快速的开发~没有错，这就是咱们的——jQuery！

 

---

 

　　第四个阶段——jQuery

　 　jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,作得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。现在，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

若是继续用盖房子作例子，jQuery更像是一个装修队。咱们只须要关注咱们的房子设计自己，把个人想法，理念告知这个装修队，让它来给咱们处理那些杂七杂八的事情。好比会不会吵到邻居？怎么协调物业？干活总得有人手的，对吧...

　　jQuery的优势我就不挨个说啦，一句话，jQuery是你更上一层楼的利器，也是咱们前端er一大利器！

 

---

 

　　Web前端学习小建议

这里跟你们扯一扯学习前端的小方法，是我本身的学习方法，你们凑合看看，倒也不必定对~

在写css前，其实html的结构要是比较合理的，这样写css也会比较顺手。在写一个网页以前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，而后结合本身的项目，心中有一个大体规划。能够先把最外层轮廓写好，先不着急去写某一个具体的部分。

这里给你们分享一些小技巧：

一、使用reset.css
火狐和IE这两种不一样的浏览器，在绘制CSS样式方法上大相径庭。这种状况下，使用reset.css重置全部的基本样式会让你获得一个全新的空样式表。（能够去网上找一下，不少的）

二、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 
}

三、理解class和id
这两个选择器老是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来讲id就是用来标识那些单独不重复的样式，而class是能够重复使用的。

四、实用的<li>
<li>也叫连接列表，在与<ol>或<ul>正确搭配的时候很是好用，尤为是用在导航菜单样式上。

五、少用<table>多用<div>
CSS最大的优点之一是使用<div>达到样式上的灵活多变。不一样于<table>，<div>里的内容不会 被锁在单元格<td>中。能够说几乎全部的表格布局均可以在<div>和样式的正确使用下完成。固然，有大量表格内容时，仍是用 <table>吧。

六、CSS调试工具
在设计CSS时，可以获得页面布局的预览对于优化CSS样式和纠错是颇有帮助的。这里有一些免费的CSS调试工具推荐给你，你能够把它装在浏览器上：好比FireFox Web Developer、DOM Inspector、Firebug等

七、!Important
全部被!important 标记的样式，即便它后来被重写，浏览器也只会采用被标记的那条。
.page {
  background-color:blue !important;
  background-color:red;
}
好比上面的例子，由于background-color:blue 被标记为!important ，即便后来有把背景改为红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在以后的编码中被修改，遗憾的是IE不支持。

牢记以上小技巧，也许你的css技能忽然就起飞了呢？关于javascript的一些小技巧，下次我再整理给你们~一次性看太多，你们是否是也有点晕？

学习前端须要方法，更须要一颗日常心，不要把前端想的多难，须要吃什么苦。。。既然学习这么痛苦，为何不快乐一点学呢？anyway~但愿你们能够成为一个优秀的前端er！