上传时间：
web前端开发零基础培训教程视频web前端开发零基础培训教程视频web前端开发零基础培训教程视频
56官方微信
扫一扫发现精彩frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
《前端开发从零学起》从基础到深入实战教程
【HTML与CSS】
未完待续…'I'm W3cdream，创造'，前·所·未·有
您的当前位置:>>
结合个人经历总结的前端入门方法
结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。
互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。
学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。
后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push
必备基础技能
这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向，完善技能和知识面。
是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术，非常全面。
以下是个人觉得入门阶段应该熟练掌握的基础技能：
，语法、标签、语义
，规范，与HTML结合实现各种布局、效果
定义的javascript的语言核心，原生，，
一个成熟的客户端javascript库，推荐
一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟，
在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。
基本开发工具
恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并 解决问题，以下是个人觉得必备的前端开发工具：
文本编辑器：推荐，支持各种插件、主题、设置，使用方便
浏览器：推荐，更新快，对前端各种标准提供了非常好的支持
调试工具：推荐Chrome自带的，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等
辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，
翻墙工具：lantern, 壁虎漫步
学习方法和学习目标
入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果
在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法
阅读HTML，CSS，Javascript标准全面完善知识点
阅读前端牛人的博客、文章提升对知识的理解
善用搜索引擎
熟记前面知识点部分的重要概念，结合学习经历得到自己的理解
熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。
以下是入门阶段不错的书籍和资料
HTML先看1-9章，然后1-4章。
CSS先看，然后
javascript先看，然后
在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。
动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址
可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的还有（带参考答案）
有各种各样的教程
也有很多教程，更重要的是里面有详细的文档，需要查找某个功能时在Google搜索：xxx site:https://developer.mozilla.org
也有很多优质教程
原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有或者去
建一个账号，保存平时学习中的各种代码和项目。
有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。也可以去或者这样的网站注册账号，方便实用
经常实用Google搜索英文资料应该经常找到来自的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。
经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识
有了前面的基础之后，前端基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。 可以参考前面必备技能部分提到的那两个项目，从里面选一些进行发展学习。以下是一些不错的方面：
：前端自动化工具，提高工作效率
：优秀的CSS预处理器
：优秀的CSS框架，对没有设计师的团队很不错，与less结合使用效果完美
：AMD规范的模块加载器，前端模块化趋势的必备工具
：JavaScript也可以做后台，前端工程师地位更上一步
：做Single Page Application的好工具
：智能手机的普及让移动端的流量正在逐步赶超PC端
：SPA长期运行需要注意内存泄露的问题
：重要技能
一些个人经历
的学习经历
上面的大神都总结得差不多了，我这里就胡扯一些吧
chrome dev tools：前端开发调试利器，着重注意几个功能：
console（废话）
elements:元素样式调整，很常用
sources：代码中添加断点，单步调试，以及单步调试过程中查看内存中的对象
watch expression：通过表达式查看当前内存中的值
call stack：查看调用栈，开启async，可以看异步调用栈（这个非常有用，尤其是ajax调试的时候）
scope variables：作用域链上的变量，非常有用
network：抓包查看每个请求，非常重要，前后端联调必备
timeline：分析渲染、js执行等等各个阶段，性能优化利器
emulation：模拟移动端环境，mobile页面开发必备
liveload: 修改页面后自动刷新，不用按F5
dimensions：直接在页面上测量的利器
livestyle：css样式修改后自动起效果，不需要刷新，elements修改后也能同步到代码中
image tool：测量，取色
UC二维码：移动端调试扫码必备
pagespeed，YSlow：页面性能分析和优化插件
马克飞象：优秀的在线markdown编辑器，快速写周报，做记录
sublime text2：编码方便，插件多，速度快，性能好
emmet：提升html编码速度必备
sublimelinter + 各种语言的lint和hint：代码纠错
一些snippets：自动补全，提升开发效率
Intellij IDEA和WebStorm：集成开发环境，集成了各种功能，开发比sublime要方便，但会比较吃性能
Mark Men：测量、取色、标注利器，拿到视觉稿之后第一个打开的软件
GFW Fucker：我用红杏，可以的话买个虚拟服务器当梯子
iHosts：非常优秀的hosts管理软件，轻松修改hosts，开发调试必备
Charles：Mac 平台最好用的抓包分析工具
Rythem：AlloyTeam出品的代理抓包软件，非常轻量，安装简单，移动端（真机）开发调试很好用
Wunderlist：一个非常不错的Todo List，任务、需求多的时候管理起来很方便
前端的技能其实除了JavaScript（包括NodeJS）、HTML、CSS以外，还有很多。其实前端的技能树很大，这里只能列一些我开发中见到的说一说
JavaScript：
作用域链、闭包、运行时上下文、this
原型链、继承
NodeJS基础和常用API
浏览器兼容性及常见的hack处理
CSS布局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等
语义化标签
JavaScript:
异步控制（Promise、ES6 generator、Async）
模块化的开发方式（AMD、CMD、KMD等等）
JavaScript解释器的一些相关知识
异步IO实现
常用框架使用及其原理
jQuery：基于选择器的框架，但个人认为不能叫框架，应该算工具库，因为不具备模块加载机制，其中源码很适合阅读钻研
AngularJS/Avalon等MVVM框架：着重理解MVVM模式本身的理念和双向绑定的实现，如何解耦
underscore：优秀的工具库，方便的理解常用工具代码片段的实现
polymer/React: 组件化开发，面向未来，理解组件化开发的原理
CSS和HTML：主要是CSS3的特性和HTML5的特性，以及浏览器处理的流程和绘制原理
DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
解析HTML、CSS、JavaScript时造成的阻塞
SVG及矢量图原理
Canvas开发及动画原理（帧动画）
Video和Audio
flex box布局方式
icon fonts的使用
常用NodeJs的package：
underscore
一些理念：
优雅降级、渐进增强
don`t make me think
网页可用性、可访问性、其中的意义
SEO搜索引擎优化，了解搜索引擎的原理
SPA的好处和问题
性能优化：
减少请求数量（sprite、combo）
善用缓存（application cache、http缓存、CDN、localstorage、sessionstorage，备忘录模式）
减少选择器消耗（从右到左），减少DOM操作（DOM和JavaScript解释器的分离）
CSS的回流与重绘
版本管理：首推Git，用过Git都不会想用SVN了
Git：本地版本管理的机制
SVN：远程中心的版本管理机制
自动化构建：主要就是less、模板、coffee等的预处理以及对代码压缩和合并
Gulp：基于流构建，速度快、模块质量好
Grunt：独立任务构建，速度慢，配置蛋疼，灵活性高
预处理和模板引擎
less：语法简单，但功能有限
jade、ejs、velocity等模板引擎，各有各的长处
coffee：python工程师最爱，我没用过
环境搭建：主要是将线上代码映射到本地，并在本地启动一个demo服务器，至于模拟数据的mock，见仁见智了
本地代理：ihosts
自动化测试：在业务较为稳定的情况下，可以通过自动化测试来减少测试的事件，但需求较多的时候，维护测试用例的成本会很高，可能用自动化测试会起到反效果
搭建一个属于自己的博客
Web Componets：面向未来的组件化开发方式
Shadow DOM
Custom Elements
HTML Import
移动端Native开发：这也是需要了解的，以后前端工程师会经常地和webview打交道，也要了解native开发
有些东西不是考敲码就能弄好的，我参与实习的时候感受到了很多，这些是我遇到的也是我感觉自己做的不好的地方
对于业务的思考：我个人这方面非常欠缺，所以放在最前面，在敲码前要多思考业务
交流和沟通能力：这个非常重要，前端同时需要与项目经理、产品、交互、后台打交道，沟通不善会导致很多无用功，延缓项目
知识管理、时间管理：input和output的平衡，output是最好的input。如何做好分享，参与社区，做好交流，作好记录
对新技术的渴望，以及敢于尝试
入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要持续关注技术的新动态。这里推几本我觉着不错的书：
《JavaScript高级编程》：可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看
《JavaScript权威指南》：不太适合入门，但是必备，不理解的地方就去查阅一下，很有帮助
《编写可维护的JavaScript》和：
《Node.js开发指南》：不错的Nodejs入门书籍
《深入浅出Node.js》：Nodejs进阶书籍，必备
《JavaScript异步编程》：理解JS异步的编程理念
《JavaScript模式》和《JavaScript设计模式》：JavaScript的代码模式和设计模式，将开发思维转变到JavaScript，非常好的书
《JavaScript框架设计》：在用轮子同时，应当知道轮子是怎么转起来的，讲解很详细，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西
《Don`t make me think》：网页设计的理念，了解用户行为，非常不错
《CSS禅意花园》：经久不衰的一部著作，同样传递了网页设计中的理念以及设计中需要注意的问题
《高性能JavaScript》和《高性能HTML5》：强调性能的书，其中不只是性能优化，还有很多原理层面的东西值得学习
《HTML5 Canvas核心技术》：我正在读的一本书，对于canvas的使用，动画的实现，以及动画框架的开发都非常有帮助
《HTTP权威指南》：HTTP协议相关必备，前端开发调试的时候也会经常涉及到其中的知识
《响应式Web设计》：技术本身不难，重要的是响应式网页的设计理念，以及移动先行的思想
《JavaScript语言精粹》：老道的书，也是普及JavaScript的开发思维的一本好书，非常适合入门
一些不错的网站
：没啥好说的，多阅读别人的源码，多上传自己的源码，向世界各地的大牛学习
：感受前端之美的必选之地，里面有很多酷炫的效果和优秀的插件
：快速了解js新资讯的网站
和：基本上各种问题都能在上面获得解答
：每篇文章都适合仔细阅读
：开放的CDN，很好用
：阿里的矢量图标库，非常不错，支持CDN而且支持项目
: 一个不错的网站，很多浏览器的新特性以及前沿的技术，都能在这上面找到文章
：如何活用CSS，以及了解CSS新特性，这里可以满足你
&JavaScript初学必看，非常不错
：一个前端学习的网站，里面的文章质量都挺不错的
：一个不错的node学习网站
：一个git学习网站，交互很棒
：一个前端文章分享的社区，有很多优秀文章
：一个正则表达式入门教程，非常值得一看
和：快速了解某些知识的捷径，但是如果需要深挖，还需要其他的资源
各路大牛的博客：这个太多了，就不贴了，知乎上有很全的
各种规范的官方网站，不懂得时候读规范
英文原文：
本文链接：
常用昵称：萧强，全端布道者
姓名：“刘晓强”，W3CDream创始人，目前就职于易点付。专注于web前端和移动端方面知识的研究，熟练掌握photoshop和AI，喜爱Flat UI设计和Metro UI风格，熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS，还有jQuery框架方面及一些前端框架bootstrap响应式设计等。
您的浏览器不支持Video标签。
W3C梦想站一个帮助那些喜欢网站学习开发的人而建设的学习网站，是我们专题网站工作室的成员的汗水的结晶。自2011年成立以来，我们不断努力，终于在web开发领域有了一点心得，因此，在此建设这个网站希望能与大家一起交流，让我们互相进步。我们的个人相关信息，，专注于web前端各个方面的研究及一些前端框架和一些CMS方面知识研究。（灿 灿）网站后端开发者，致志于网站后台的开发和研究。我们有自己的技术论坛，可以一起加入我们，也可以加入我们的技术群（），我们在这里一起讨论，一起学习，一起进步！如有问题可以直接进群里联系我们，欢迎广大web爱好者进站交流。
w3cdream梦想站