Web 前端怎样入门？
css+html5+javascript同时学的模式对吗？ 把全部的回答看扫了一遍信息量大的惊人，等看完这些答案我觉得小白会更加迷惑吧。我来换个角度说这个问题。确定目标
我强烈建议想入门的朋友先想清楚目的是什么，是要成为专业前端工程师，还是因为一些特定的需求或者兴趣来学习前端相关的知识？目的不同学习路径完全不同，过程也是不同的“愉悦感”和“成就感”。前端这条路的入门难度基本上取决于你的计算机科学的背景知识和相关经验有多丰富，你经常会在网上看到有人说经验丰富的程序员花了几个小时看了看某个新的语言的语法，然后就可以开始写一些代码的段子，其实也不能算是假的（毕竟生产级代码和在 playground 上随便写点非生产级代码的差别还是挺大的）。本文针对没有什么基础的朋友准备的，属于你只要想学入门是可以入的文章, 顺着文中提到的链接都走完，也许可以实现你的特定目标也不一定。
预备知识
无论是以什么为目标，你需要首先要从技术角度了解一个页面的渲染流程，资源的加载逻辑。关于这个知识点，你可以看一下 MDN 的教学文章，图文结合，中英文都有，没有广告，非常适合初学者学习了。
万维网是如何工作的读完这个你才能理解为什么有些教程里需要本地起一个 Web 服务器，以及在哪里启动一个 Web 服务器，而有些教程的范例里直接在 CodePen/jsFiddle 这样的网站上就可以直接做了。
不需要完全理解这个过程，大概明白就好。其实计算机科学领域大部分的知识你都可以在入门的时候保持这样的一个态度：不需要很懂某些概念，先把它们当工具来用，否则很容易陷入无限依赖的技术细节中。你看上面的链接里有一个扩展阅读，如果你想继续了解相关知识，可以点击扩展阅读继续了解一些细节。这是一个很好的学习计算机专业理论的方法，就先从应用的角度了解有什么用，怎么用，如果有必要再继续深挖细节和原理，这是如何做到的，为什么这样做。
在确定阅读完上面的链接之后，你可以看到有一个章节是 关于如何是设置一个本地测试服务器 。你可以按照这个教程来配置你本地的环境，但这里其实又引入了不少其他的概念，比如下载安装 Python，比如如何使用命令行。如果你使用的是 Mac 的话，这里推荐一些 App，它们将这个过程做得简单了一些，把本地测试服务器和页面编辑器做到了一起，还有一些方便的工具帮助你快速调整页面元素和样式，编辑内容。
[*]https://panic.com/coda/
[*]www.espressoapp.com
[*]tumult.com
他们内置了预览功能，可以让你的初步学习集中在如何把你想要的效果做出来上，而不用花费更多的心思在如何搭建环境，选什么编辑器，用什么插件，怎么启动服务器上，怎么改端口上。其实很像上古时期 Dreamweaver 简化+现代化版本。
如果你的网络状况比较好的话，你可以直接打开这几个网站，它们也做了类似的事情，不需要本地配置环境，可以直接让你在线进行编辑，实时看到你的页面在编辑之后会长什么样子。
[*]https://codepen.io/pen
[*]https://jsfiddle.net/
[*]http://jsbin.com/
[*]https://glitch.com/
基础概念
Web 前端技术一般来说是从静态到动态的顺序来学习，主要涉及到的技术有 HTML/CSS/Javascript，你可以按照HTML>CSS>JavaScript这样的顺序来学习。凡与编程相关的东西都会有标准和版本的概念，作为入门的话，我推荐使用目前的主流标准和版本来进行学习，基础知识部分其实在各个版本中区别不是很大，但这里还是建议使用目前主流的版本，否则你可能很快就会遇到一些兼容性问题导致很难解决。如果可能的话，还是尽量使用上面提到的在线编辑预览的网站，如果遇到问题也可以直接把你在编辑的页面分享出去，以便直接获得帮助。
基本上学语言的过程都差不多，需要记住一些常见的关键词，常见的标签。在现代的编辑器工具的帮助下，自动补完功能会帮助你输入，所以在初期你需要做到熟悉即可，不需要死记硬背。在熟悉了HTML标签之后，可以尝试以练代学，用结合任务和学习相关的知识。基本上所有现行的游戏化学习的系统，或者自助在线教学的系统（比如Udacity）都是类似的过程。
具体可以参照MDN Web入门的系列教程来依次学习，有小练习，也有比较系统的文章。
实践方式
HTML负责内容，CSS负责样式，JavaScript负责功能。在进行这样的学习任务切分之后，你就可以把任何一个小目标拆成这样的结构。这里用著名的前端框架示例工程任务列表来举例子，你可以把这个目标拆分为：
[*]内容部分：
[*]示未完成任务列表及每一项的内容
[*]显示已完成的任务列表及每一项的内容
[*]用来输入新的任务的输入框
[*]视觉部分：
[*]未完成任务的视觉样式
[*]已完成任务的视觉样式
[*]输入框和按钮的视觉样式
[*]功能部分：
[*]在缓存中保存所有的任务和任务的状态
[*]输入新任务后可以添加到本地缓存中
[*]加载数据显示到视觉上
你可以参考 TodoMVC.com上面展示的任务列表应用的内容，视觉和功能部分，作为你的目标定义。如果你进行不下去，还可以看一下它上面的实现结果，来进行反推。
在你完成了基本的 HTML/CSS/JavaScript 学习之后，你就基本上属于前端入门的状态了，这之后你会发现想做点什么都会逃脱不掉框架这个词。TodoMVC.com 这个网站搜集了目前世界上主流的前端框架实现的任务列表应用，你可以通过它快速了解每个框架用起来是什么风格，大概的设计思路是什么样的。
你也可以通过 GitHub.com 找到你对应感兴趣的框架，通过 Star 数量了解到一个框架的流行度，通过 Issues 了解到它的使用人群的沟通方式，解决问题的速度，以及现在依然留存问题的数量，进一个简单的评估。
职业 Web 前端工程师
在学习完基础知识，并尝试过一些框架之后，这样基本上算是前端入门了。之后的道路要怎么走取决于你的目标是什么。如果你的目标是成为一个职业的 Web 前端工程师的话，那么接下来道路大概有两个方向是要特别发力的。补充计算机科学相关的基础知识，包括但不限于操作系统，数据结构，算法，网络...…拓展在前端上的视野，无论是深度还是广度。
前端可能是一个看似需要比较少计算机科学背景的职位，但实际上现在的工作岗位上对于计算机科学的要求一点也不少。现在的前端工作已经是工程化的很彻底的一个领域了，而且随着中台化，Serverless 的普及，前端能够完成的工作和作品越来越多。所以如果你如果已经掌握了前面提到的 HTML/CSS/JavaScript，那么你现在可以畅想的未来可能比起你刚入门前端时的想象要大很多了。
我非常建议尝试一些系统化的书籍或者课程来帮助你快速的补足自己的短板，尤其是在建立自己知识系统的初期，这个阶段找到一个合适的知识系统作为基础，持续不断的补足和扩展自己的知识网络是非常有效果的学习过程。
如果有足够的精力，可以自己尝试做一些图谱或者系统，把自己的知识总结起来。如果精力不够，上一些系统的提纲挈领的课程可以比较好的帮助你建立基础系统和对行业的认识，类似在拉勾教育上的前端高手进阶课程算是一个不错的总结，通过这个课程你可以补充一些前端必备的基础知识的高级用法，同时也会帮你梳理前端工程化中的常用工具，扩展解决问题的思考角度和视野。
前端高手进阶如果你的英文不错的话，可以尝一下在 coursera 上找一下web frontend/web application的课程，上面的课程大部分都有视频教学，学习过程也是相对系统的。Stanford 的 CS142 Web Application也是相对完整的课程，但是这个课程目前没有视频，教学材料在官网网站上都有，可以自行搜索看看。
如果你的自制力不太行，又非常想系统地来学习前端的话，还希望有一些更现成的方案的。做算法优化的时候，常见的两个方向要么时间换空间，要么空间换时间。同样的在现实中也有这样的 tradeoff: 如果你的自制力，执行力，认知能力很好，拥有良好的自我学习习惯，良好的总结能力，有明确的目标，严格的项目管理流程，可以讨论的有经验的友人，那么你现在看我的文字就是浪费时间了，应该充满信念感和目标感的去执行自己的计划了～
如果你心中有犹豫的话，那么拉勾上的这个大前端就业集训营也许是一个不错的方案。你可以把这个训练营当作一个高强度的预科班，在 6 个月中集中的进行补短板，了解行业，主流框架的学习，完整的项目经验的积累，解决方案的交流学习。单纯从学技术的角度来说是非常不错的，你可以通过一下链接了解一下课程的知识图谱是什么样的。如果各方面的能力自制力足够的话，这个课程的大纲安排通过自身的努力也可以完成知识的部分，经验部分就要自己想办法了。通过这个课程应该可以让你从一个刚入门的前端转身成为一个有完整知识体系的前端工程师了。
介绍
大前端就业急训营-拉勾教育-互联网人实战大学报名点这里
拉勾教育 - 拉勾旗下教育平台当然，如果你上了课没有好好的学的话，那效果没有人能够给你保证，正如很多人上网上的培训课通常都半途而废一样，这都是对人性的考验。如果你决心走职业的道路，那么对自己的人性进行一次磨练也是必要的过程了。
非职业向 Web 前端工程师
公众号内容编辑/数据可视化/游戏/小程序/手机客户端
如果你的目标是非职业向的 Web 前端工程师的话，其实大可以按照自己的兴趣进行特定的学习，不用非要补充短板，和实现知识系统化。在完成上述的基础学习之后，尤其是掌握 JavaScript 之后，你基本上已经可以去找特定领域的工具或者框架了。
如果你要做公众号内容编辑的话，可以多关注 CSS 案例，同时从微信学院，微信公开课，这些最直接的资源了解行业动态。
如果你要做数据可视化的尝试的话，可以去看看https://d3js.org/，https://echarts.apache.org/en/index.html，常用的图表库可以到这里查看
Openbase如果要做创意交互案例的话，可以多关注
[*]p5js.org
[*]https://www.pixijs.com/
如果要做游戏的话，可以关注
[*]https://www.pixijs.com/
[*]https://github.com/gamelab/kiwi.js
[*]https://github.com/photonstorm/phaser
[*]白鹭
[*]layabox
如果是手机客户端的话，可以关注
[*]https://reactnative.dev/
[*]https://weex.apache.org/zh/guide/introduction.html
当然这里也只是给你一个索引，作为兴趣的话更重要的还是要享受其中，上面任何一个领域要深入下去，前端技术只是表面技术，后面都有大量的其他知识在支撑着你看到的案例，所以这都意味着你需要花费更多的经历去看其他的技术，也就不用拘束于“前端技术”这个领域，更需要打开自己的边界，往感兴趣的地方深入走走，定好目标边学边做。 网上有一张流传甚广的前端工程师技能图谱，很多人看到了这张图，便纷纷从入门到放弃。
http://picx.zhimg.com/v2-d99d0604e98b62100cdcece828462654_r.jpg?source=1940ef5c
说好的前端是最容易入门的呢？这和传说中讲的不一样啊。
确实，前端涵盖面非常广，所包含的知识非常多，要想短时间内就学会所有内容成为大牛是比较困难的，建议还是循序渐进，找到适合自己的前端发展方向。
当然，无论如何，首先得打好的便是基础知识：
HTML+CSS+JavaScript
HTML是超文本标记语言，它是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。
重点学习内容：
[*]学习基础知识及如何编写语义化的 HTML
[*]了解页面的各个部分，并且学会如何正确地构建 DOM
学习完 HTML 的基础知识后，可以动手编写 一个 HTML 页面，什么网站都可以，比如一个论坛的登录页面，而且要确保结构是正确的。虽然完成的页面看起来很丑，但是暂时还不用着急，现阶段的重点是学会编写正确的结构。
CSS是层叠样式表，通过样式属性来对标签进行布局规范，也就是用来美化网页的。
[*]学习 CSS 的语法以及常见的属性
[*]了解盒子模型以及如何使用 Grid 和 Flexbox
[*]完成以上操作后，还需要学会如何使用媒体查询来编写响应式网页
这时候，你就可以给自己的网页增加样式了。
JavaScript 可以让你的 HTML 页面更具有交互性。如果我们不需要加载整个页面，而只加载部分内容，这时出现的滑块、弹窗等都是由 JavaScript 完成的。你需要学习：
[*]JavaScript 语言的语法和基础结构
[*]学习如何通过 JavaScript 来操作 DOM 对象。例如，通过 JavaScript 删除页面中的某些元素、添加一些元素、操作类名、应用 CSS 样式等等
[*]学习并理解作用域、闭包、变量提升和事件冒泡等
[*]学习如何使用 XHR 或者 Ajax 发送 HTTP 请求。Ajax 可以让你在不重新加载页面的情况下执行某些页面操作。
完成上面的内容后，就可以去学习 ES6+ 中所有的新功能。
教程类推荐：
[*]W3school：HTML/JavaScript免费教程
[*]freecodecamp 学习网站：免费学习网站，对新手非常友好
[*]廖雪峰的Javascript教程
[*]菜鸟教程
[*]MDN 官方教程
[*]W3C 官方文档
喜欢视频的，可以看一看慕课的免费课程，或者 codecasts的课程。
书籍推荐：
HTML与CSS：
[*]《深入浅出HTML与CSS、XHTML》
[*]《HTML & CSS设计与构建网站》
JavaScript：
[*]《编写可维护的JavaScript》
[*]《JavaScript设计模式》
[*]《EffectiveJavaScript:编写高质量JavaScript代码的68个有效方法》
[*]《JavaScript语言精粹》
其他素材/书籍
来源：github.com/justjavac/free-programming-books-zh_CN
CSS/HTML
[*]学习CSS布局
[*]通用 CSS 笔记、建议与指导
[*]CSS参考手册
[*]Emmet 文档
[*]前端代码规范 (腾讯 AlloyTeam 团队)
[*]HTML和CSS编码规范
[*]Sass Guidelines 中文
[*]CSS3 Tutorial 《CSS3 教程》
[*]MDN HTML 中文文档
[*]MDN CSS 中文文档
JavaScript：
[*]Google JavaScript 代码风格指南
[*]Google JSON 风格指南
[*]Airbnb JavaScript 规范
[*]JavaScript 标准参考教程（alpha）
[*]Javascript编程指南 (源码)
[*]javascript 的 12 个怪癖
[*]JavaScript 秘密花园
[*]JavaScript核心概念及实践 (PDF) （此书已由人民邮电出版社出版发行，但作者依然免费提供PDF版本，希望开发者们去购买，支持作者）
[*]《JavaScript 模式》 ：“JavaScript patterns”中译本
[*]学用 JavaScript 设计模式 （开源中国）
[*]深入理解JavaScript系列
[*]ECMAScript 5.1 中文版
[*]ECMAScript 6 入门 ：作者：阮一峰
[*]JavaScript Promise迷你书
[*]You-Dont-Know-JS ：深入JavaScript语言核心机制的系列图书
JavaScript 经典类库 jQuery
因为 JavaScript 有可以封装的特性，所以在后面也出现了很多用 JavaScript 封装的类库、插件。比如说最经典的类库就是 jQuery了。
jQuery 类库就是在类库里面封装好了很多 JavaScript 的事件方法。jQuery 通过封装，减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化，通过调用方法就可以了。你需要学习：
[*]jQuery语法和JavaScript原生语法的差异
[*]Dom对象和jQuery对象
[*]jQuery的入口函数和JavaScript的入口函数的差异
[*]jQuery事件的执行逻辑。
相关教程：
[*]jQuery API 中文文档
[*]hemin 在线版
[*]css88 jq api
[*]css88 jqui api
[*]学习jquery
[*]jquery 源码查找
这时候，你就可以做一些响应式网站并使用 JavaScript 添加交互功能了。
包管理器
包管理器有 yarn 和 npm，两者几乎相同，都只有安装的功能。你可以选择其中的任何一个，一旦学会使用其中的一个，另一个也就会了。
这时候，可以在你的网页中引入一些外部库。比如安装一些 Toast 插件，当用户点击按钮的时候，用 Toast 插件向他们显示信息；或者你可以创建一个登录表单，利用一些表单验证库来进行表单验证。
接下来还可以学习一些CSS预处理，CSS文件管理，CSS的一些框架，各种构建工具等等。
前端框架
前端框架众多，React、Vue、Angular 三足鼎立，很多人都不知道应该学什么好。
一个很简单的方法是：先学工作实际需要的&自己更偏好的
[*]React：Facebook 推出的一款声明式的，高效的，灵活的用于创建用户界面的JavaScript 库，现在越来越火了
https://www.awesomes.cn/repo/facebook/react
[*]Angular：比较容易学，因为它几乎支持所有常用的功能。例如支持懒加载的路由器、支持拦截器的 HTTP 客户端、依赖注入、CSS 封装组件等等。有了它，你可以不用再引入其他库了
[*]Vue
框架学习可以分为这3个步骤：
[*]第一步：基础学习。看官方的文档及教程（如果有的话）
[*]第二步：项目驱动学习。通过项目的方式来写编写大量的代码，掌握该框架的用法及踩坑，快速积累经验
[*]第三步：求知驱动学习。在求知驱动学习过程中，遇到任何产生困惑或者感兴趣的点，都要去深入学习。
相关教程：
React入门实例教程：阮一峰
Vuevue.js教程
Angular：菜鸟教程
当然，前端要学的内容远不止这些，路漫漫其修远兮，加油吧~
附一张大牛的技能图谱~
http://picx.zhimg.com/v2-cb4395dcdad0c454b2338426eb909852_r.jpg?source=1940ef5c
<hr/>九章算法，硅谷一线工程师在线直播授课，已经帮助30000+人成功拿到心仪offer。
全栈开发基础项目课，0门槛入学，转专业小白快速pick前后端知识，免费报名试听
更多课程信息请访问：九章算法 写在前面的话，不想看的可以直接拉到原答案～
========2021.5诈尸=============
我这次！！整了一个花活，下面我讲的内容，我整成了一个交互式学习的网站！！！而且完全免费！！玩着就能学那种，还能收集表情包！！！！
赶紧来瞅一眼！！
汪小黑：完全免费！！我搞了一个互动式前端学习的网站！！最近思考了很久，也看了下前端方面的资料，发现市面上免费的前端教程质量真的很参差不齐，所以准备尽最大的努力的把这篇文章写成极度干货，实操性极强，而且适应目前前端大环境的前端入门教程，并不是干货的罗列，而是会细致到实操流程，确保能帮助到大家
==========2020.06.07更新=========
失踪人口回归？？？没啥毛病，今天更新了初学者需要掌握的调试技巧，至于每个阶段，学哪一块的调试技巧，文中都有附带了详细信息，总结起来就是这篇
https://zhuanlan.zhihu.com/p/145466139也就是说这篇文章我已经嵌在这篇回答里了！！翻下去顺畅的学习吧！！！
千万别再说，我看了很久没看出哪有错误这种话了！！！学会调试！！！
==========2019.10.27更新==========
有人对聊天机器人那段有疑惑，而且提到了跨域问题，所以增加了一小段示例代码
==========2019.10.20更新==========
之前留言或者私聊想加群的朋友们，现在准备建群啦～
qq群：948805468
微信群：加我微信吧，我拉你进群：a1127502049
群作用：前端朋友之间互助答疑～一起学习～，还有就是对文章，学习路径的建议反馈，建议反馈记得@我哈，可以随便皮，但是不要口吐芬芳=。=，也不要负能量之类的
目前正在写【前端学习路线--基础篇】，作为对入门篇的补充，本文说过前端完全入门的三个阶段，初步入门，基础打牢，能力进阶，基础篇就是针对的第二个阶段
后续可能会找些朋友免费带入门，验证下入门篇和基础篇的有效性，所以记得加群和活跃哈哈哈
https://zhuanlan.zhihu.com/p/87230567禁止发任何广告！！维护群氛围，发广告的人会直接T！！
==========2019.09.08更新==========
失踪人口回归了朋友们，今天更新了
3.5 fetch的教程，以及简单聊天机器人的做法
4.5 vue实战项目推荐
目前为止这个学完这个教程你已经可以做出这些东西了
[*]简单的静态网站（劝退率：10%）
[*]2048游戏（劝退率:25%）
[*]聊天机器人（劝退率：15%）
[*]简易待办清单--todoList（项目劝退率：20%,vue加成劝退率：40%,总劝退率：60%）
[*]全民答题webapp（项目劝退率：30%,vue加成劝退率：40%,总劝退率：70%）
以及获得持续更新的vue实战项目的收集以及推荐（更新在4.5部分）
==========2019.07.21更新==========
更新了vue入门前的坑相关的文章，说了vue入门前卡住&螺旋蒙逼的主要原因，这边文章什么时候看我也插在这个回答里了，跟着流程走的可以暂时先不用看
https://zhuanlan.zhihu.com/p/74546693下次更新会补充一些vue自学的项目的推荐，然后根据最近帮助入门的朋友们的一些疑惑修改下这个回答
==========2019.07.07更新==========
这篇文章仅仅讲怎么入门，入门不代表你会前端，只是让你知道前端这个体系是怎么样的，你还需要加固这个体系才能说自己“会前端”，也就是文中提到的基础打牢和能力进阶，这块知识我以后也会逐渐补充学习路径
这次我在文章里加了，vuex和vue-router怎么入门，稍微完善了点框架学习的路径
然后补充了git和github的学习方法和学习路径，以及什么时候开始学这俩玩意
下次更新会说下入门vue前的一个大坑，大多数0基础会在这里卡死一阵子=。=，但是有人指点的话会理解的很快，大概会在7.14日更新
===========2019.07.04更新=========
收藏数是点赞数的三倍了，朋友们，点赞并且关注我吧，这样我才有持续更新的动力呀
============以下是原答案=========
看了看高赞答案，总觉得高赞答案太干货了一些，如果确确实实做下去的话，确实可以入门，emmmm，但是总觉得只有很少一部分人能够坚持下去。
我认为入门的话一般是靠自学，而自学最重要的其实是驱动力
自学一件事情，如果没有持续的驱动力，兴趣都会慢慢减弱的。刚好前端这个体系又很庞大，就很容易出现这种局面：
[*]看html，哎呦，挺简单呀，每天看一点，我很有进步啊（兴趣很高，一段时间过去了
[*]看css，好像难了一点，不过我好像抗的住（兴趣减弱了，又一段时间过去了
[*]看js，emmmmm（兴趣已经不足以让我学习了，摊手
[*]看框架，mmp，好累啊，凉透了（放弃治疗
[*]再见，我不适合编程……
所以学以致用是关键，只学现阶段可以用到的一小部分知识，不至于兴趣磨灭的太严重，然后用项目驱动自己消化知识，用做完项目的成就感来加强自己的兴趣
入门之后再巩固基础，这样大概就能迈进前端的门槛了（说错别打我，毕竟上面都是我自学前端的真实感悟233333）
我在17年用大半年时间自学了前端，做了几个项目，然后进入了准一线互联网厂子。
在拿到offer之后，因为室友考研没去（对，是没去，不是失败……），又决定教一下他前端，帮他找找工作，结果他在两个月内入门了……找到了一份还不错的工作
他对前端可是0基础……而且是拿空闲时间学习……（要问我为什么的话，那可能是因为他聪明吧233333
所以我来分享下这个套路，能不能帮到大家，下面开始上干货啦
============干货分割线==========
如果你还不太了解编程，或者想知道自己有没有编程的兴趣，请先看这篇文章，如果是奔着前端来的，跳过这个回答
自学简单编程可行吗？正文开始
先说下需要的工具
版本控制：github和git（先不用学这个，后面我会讲到在哪个时期学）
编辑器：vscode（推荐，因为我是vscode党），webstorm，sublime……
调试工具：chrome devtool
包管理：npm（这个在学习框架的时候再开始用吧，一开始看对新手还是有点劝退的）
=================
如果以找工作为目的的话，学习前端我把它分为三个阶段
[*]兴趣启蒙+初步入门
[*]基础打牢（巩固基础知识，对写过的代码有深一点的理解
[*]能力进阶（说白了就是刷刷面试题吧23333，了解一下新一点，高级一点的技术
然后这三个阶段的核心都是靠项目驱动，没有项目巩固的知识点，做了也记不住~~（一开始可能是通过自己的项目驱动，到之后也可以靠实习的项目来驱动
这个回答我会详细说说怎么入门，也就是第一个阶段，这个阶段的核心就是，学会一个前端生态的最小单元。
这句话是什么意思呢，就是只学习目前用的上的一小部分html，css，js和框架，完成一个基础项目
这时候就已经入门了，可以反过头来巩固基础知识了。
下面是学习这个最小单元的4个部分
1.学习html（1-2天，不要超过2天）
[*]教程：w3cschool，不推荐视频教程（因为视频教程讲的太多了，很多东西对于入门做东西用不上）
[*]推荐读物：不推荐
[*]只看我这张图上提到的部分（图上的大纲都是按照w3cschool的教程写的），要看到什么程度呢？大致有印象，知道这个标签是干啥的就行了
http://pic1.zhimg.com/v2-40d6727360ca923de918b85cb61dde52_r.jpg?source=1940ef5c
学习html大纲
[*]带着这几个问题去看教程，保证看完之后这几个问题都有自己的理解
[*]html是什么
[*]html的基本结构长什么样子
[*]标签是什么
[*]属性是什么
[*]看完之后用这个html自测表测一下自己，看看能记起多少标签，10个左右就可以进入下一阶段了
http://picx.zhimg.com/v2-b8c07fb25d82e3890e80f9e6d01ff0f7_r.jpg?source=1940ef5c
html自测表
2.学习css（2-5天，不超过5天）
还是那句话，学以致用，只学满足自己做小项目所需的最少知识
[*]教程：推荐w3cschool，不推荐视频教程
[*]推荐读物：css权威指南（全部都学完了回过头来再看吧）
[*]只学我这张思维导图提到的部分，学到什么程度呢？有个大致印象，能对下面那些问题做出自己的理解就好了
http://pic1.zhimg.com/v2-233548bc10c707e7f95a86eda99764bb_r.jpg?source=1940ef5c
学习css大纲
[*]带着这几个问题去看w3cshcool的教程
[*]css是什么
[*]css的语法是怎么样的结构
[*]怎么对一个标签增加简单的样式，自己尝试一下？
[*]css盒模型是什么
[*]display的值有哪几种，这几种值区别是什么
[*]css怎么实现垂直水平居中？你能使用几种方式实现？
[*]页面的常见布局有那几种，分别可以怎么实现？
等等，在这里先学会调试的html+css部分，免得遇到各种样式问题无法解决
https://zhuanlan.zhihu.com/p/145466139
[*]实现前端生涯里第一个小项目，做一个google首页
[*]你可能会遇到几个问题
[*]怎么垂直水平居中？？ 上面那几个问题你解决了的话就不会遇到这个问题了，这个属于页面的常见布局
[*]打不开google怎么办？？ emmmm，打不开google就做百度呀，长的没啥差别，我主要是觉得google好看
[*]用不用做的太精细？？ 不用，凭着感觉走，又没人催你交作业对吧，像那个小话筒icon懒得做就不做呗
[*]没思路怎么办？？这……私信我吧，我给你拆解下结构你再想……
http://picx.zhimg.com/v2-76517c786847fe7cfc3f21bbde87520d_r.jpg?source=1940ef5c
google首页
好了，到这你已经变成一个小白切图仔了，可以做一做简单的静态页面啥的了，现在你可能会在下面两种状态的其中一种
[*]我的代码写的太丑了啊啊啊啊啊啊，怎么办啊？
[*]感觉过的去啊，并没有什么不适感233333
如果你处在第一种状态，找一份看的过去的代码规范修一修（代码规范，借用了高赞大佬里面的那个链接，我懒得找了=0=）
如果你处在第二种状态，咱就甭废话了，继续吧
3.学习js（1周-3周）
这大概是开始劝退的一个阶段了，因为开始复杂起来了呀~~很多人都在这溜了
好吧，这个还是看你又没有编程基础，如果你学过vb，c++这种东西，哪怕挂科了，只要脑子里有个概念，这里就比较好学
如果完全0基础，慢慢啃吧=0=，完全0基础还是看视频来的快
[*]教程：w3cshcool的教程（适合有微弱编程基础的人，就是至少知道变量是啥，能看懂简单for循环的人）& 完全0基础的人，可以看视频了（我没看到啥合适的视频，慕课上的js入门视频可以看一看，主要还是按照下面的大纲来，和大纲无关的视频就可以跳过了）
[*]推荐读物：高级程序设计（全部学完了回过头来再看吧）
[*]只学这张思维导图提到的部分
http://picx.zhimg.com/v2-fb1592c253a1227d4fe644dd6e83c035_r.jpg?source=1940ef5c
js大纲
[*]带着这几个问题去学习
[*]js有哪些基本类型，每种基本类型是干啥的
[*]对象是什么，函数是什么，数组是什么
[*]数组，函数，对象的常用方法有哪些
[*]DOM是什么，我能用它做什么
[*]jquery是什么？
在这里要学会js调试了，不然学起来真的会各种崩盘=。=来来来，学习调试的js阶段
https://zhuanlan.zhihu.com/p/145466139
[*]实现前端生涯中第一个有趣的项目，做一个2048小游戏
说到这你就有那么一定概率蒙逼了，我感觉啥都不会，就做游戏了？？扯淡呢吧？其实并不是呀23333，当然不是让你直接写，这个是有非常详细的视频教程的
写完你就会发现，好像也挺简单的呀，原来我学的这么点东西可以做小游戏了呢，到时候就很很有成就感~~（问我为啥？emmmm，我当时也是这样学前端的呀
游戏视频教程：2048教程地址（慕课上非常有年代感的一个教程了，但是我觉得对入门来说还蛮好，而且这个课程免费又详细！！如果当时不是这个教程我就被劝退了）
[*]你可能会遇到一些问题
[*]现在jquery用这么少，为什么我要搞这出，学了也用不上啊？ 这个教程是为了让熟悉js的，jquery只是顺带，而且让到这个阶段的你用框架实现你也没辙对吧，所以还是jquery实现靠谱点
[*]代码课程里都有了，我看懂课程复制粘贴不就得了 ？千万不要这样做！！！千万不要！！你要知道自己写和看代码是完全不同的两件事，你可以看完每节课程，然后把课程关掉，按照自己的理解写出这节课相关的代码，但是一个字母都不要复制粘贴！！
[*]好多语法不懂怎么办？？不懂就查，查了就记，这才叫项目驱动，学以致用嘛
[*]现在你做完2048了，开瓶香槟庆祝一下吧，然后……做个复盘吧2333333
[*]画出2048的游戏流程图
[*]想想自己重新写的话，每一步逻辑是不是还很清晰，脑子里模拟下重写~~
学到这里，你可能觉得自己老厉害了，已经可以写小游戏了，那么我就告诉你一个好消息和一个坏消息吧
[*]好消息：你已经开始入门前端了，已经可以看懂前端的初级知识了，已经可以通过代码解决问题了
[*]坏消息：同时还有一个坏消息，你现在大概是6年前的小白前端的水准（打个比方，别深究~~
好的，现在你可能有下述三个状态其中之一
[*]妈的好难啊！！脑细胞都快死完了，再写一遍不知道写不写的出来，好多语法不懂balabala……
[*]还好啊，就是有些语法不太懂，想巩固一下
[*]兴奋ing，继续干吧
状态1的话：整理笔记，好好消化。然后再开始学习。状态2的话：买一般高级程序设计翻一翻看一看吧，觉得无聊了开始下一步。状态3的话：go on
稍微等等，你现在需要学习一个工具的使用
那就是上面提到的git和github了~这个过程需要2天
[*]教程：
Git教程
[*]只看这张图中红框标注的部分
http://pic1.zhimg.com/50/v2-f103667b587ede52e677bb198c1d8610_720w.jpg?source=1940ef5c
git大纲
[*]你可能会遇到一些问题
[*]蓝框标注的是什么？蓝框标注的内容也是git极端重要的一部分，尤其是在多人开发中，但是你现在可以暂时不用，这块可以在会使用git之后重新回来补学，标签管理也可以看看，但是重要性不如分支管理
[*]为什么老是提示命令不存在的情况？廖大大的教程是在mac上的，里面的命令是针对mac和linux系统的，所以你在window上用不了，遇到这种情况可以查：xx命令在window上对应的命令是什么
[*]说是学习两个工具，为什么这里只给了git的教程？因为github是个远程的代码仓库，你目前要学关于它的部分只是怎么创建仓库和怎么把代码放上去，这些东西一查就查到了
[*]然后解决这几个问题
[*]github是什么？怎么在github上创建一个仓库？
[*]怎么把github上自己创建的仓库克隆到本地？
[*]最后做一个练习：把你上面做好的2048用git提交到github
[*]你需要执行这些操作：（我没有把命令写出来是为了让你思考下=。=，所以你也不要直接按照网上的命令照搬，想清楚每条命令是干什么的，为什么要这样做）
[*]克隆远端一个空仓库到本地
[*]把2048复制到这个本地仓库里
[*]用add命令把新增的文件添加到git
[*]提交commit
[*]把更改同步到远程仓库
欧克欧克，下一阶段~
3.5.学习fetch
emmmmmm,为啥子蹦出来一个3.5呢？？好的吧，我承认我之前把这玩意漏掉了
作为前端，和后端通信是必然的，因为需要从后端获取数据呀。
那么什么是通信呢？？通信简单来说就是从后端拿到前端需要的数据，这么来说吧，上面那个2048的游戏，数据就是那个二维矩阵，这种数据一般放在前端就可以了
但是有些数据，例如用户信息这种隐私型的数据，是需要放在后端的，放在服务器那集中储存和处理，要拿到这些数据，就要使用到一种约定好的通信方式，比如ajax和fetch，（ajax虽然也还在用，但是比起fetch已经是过去式了，所以这里只说fetch）
[*]promise教程（能查到大把入门教程）promise教程
[*]fetch教程（随便查就可以，很简单，推荐）fetch教程
老规矩，带着这几个问题去学习
[*]promise是什么，它为了解决什么问题？
[*]fetch是什么，为了解决什么问题？
[*]fetch和promise有什么关系？
[*]fetch和ajax有什么关系？
其实上面那些问题很简单，不要查的太深入了，现在可以做项目了，可以做什么呢？？不要惊讶，你可以做一个聊天机器人了，没错，就是聊天机器人
hhhh，其实想简单做的话几行代码就搞定了，复杂做的话也有很多种玩法
说说是怎么做吧，之前在上面说了，前端是要从后端拿数据的，那么如果前端能传给后端自己想说的话，然后后端再答复回答是不是就好了，那么这个过程是怎样做的呢？
[*]利用一个神奇的api，这个api是某个开发团队提供的免费接口，用来做智能回答(http://api.qingyunke.com/api.php?key=free&appid=0&msg=关键词)
[*]上面那个链接是可以点的，点了之后浏览器会自动请求这个借口，并把数据展示出来，把“关键词”替换成你想说的话就可以聊天了~~
[*]你要做的事就是把这个过程移植到代码里~最简单的就是一个输入框输入你想说的话，然后请求，然后把回复展示出来，一个聊天机器人就做成了~
示例js代码
fetch(&#39;http://www.xhxly.cn:8080/api.php?key=free&appid=0&msg=%E4%BD%A0%E5%A5%BD&#39;)
.then(response=>response.json())
.then(data=>console.log(data))用上面的代码就可以获取到接口数据，至于链接为什么和上面不太一样，因为上面那个链接跨域了，我用自己的服务器做了下转发，没理解这段我说的是啥的话就跳过吧，用下面示例代码就成了～～
其实还有很多种玩法，比如天气查询，美食查询等等等，比如做一个微信机器人或者公众号，把机器人移植进去？然后就变成了贴心暖男？？？（相关请搜索，图灵机器人，青云客智能聊天机器人API）(其实我也做了个简单的=。=，想要试试的话私我我给你机器人的微信，如果想要详细教程的人多的话我也会推荐或者写出来~~)
下一阶段把哈哈哈哈
4.学习框架（2周-1月）
框架对入门越来越不友好了，功能越来越多了，各种东西层出不穷，如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀，而且学习曲线不是很陡峭，而且公司里常用呀
学习vue之前，你得了解下前端的一个大杀器：node.js
先安装好node.js然后搞懂这几个事情
[*]node和npm是什么，他们可以用来做什么
[*]npm init命令有什么作用
[*]node_modules和package.json有什么作用？
好了，在学习vue前，你需要避开一个大坑，这个不然你会决定项目突然变得很复杂，不知所措，这个大坑我也梳理成文章了（可以先把这篇文章过一遍，之后可以解决你不少疑惑）
https://zhuanlan.zhihu.com/p/74546693好了，开始学vue吧
[*]教程：
安装 — Vue.js这里可以看视频了，但是我没发现特别适合入门的视频，慕课上那个免费的vue2入门的课程可以看下（走用npm安装vue，新建vue项目的流程，这个很重要）
[*]推荐读物：不推荐读书=0=，多看文档，前端框架变化太快了
[*]这里就没有大纲了，把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要
[*]带着这几个问题去学习
[*]使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？（vue-cli是有官方教程的，按照官方教程来生成项目！！！）
[*]什么是双向绑定？
[*]mvvm框架是什么意思？
[*]实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架
[*]关于框架这一块我写的不太详细，有空再补充吧，我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构（对新手而言），不清楚那么多文件是干什么的
vuex和vue-router
[*]做好了todolist之后，你需要了解两个东西，也是工程化非常重要的两个东西
[*]vuex&&vue-router
[*]教程：
开始 | Vuex介绍 | Vue Router
[*]同样，这两个教程只看基础部分，然后解答下面这些问题
[*]vuex和vue-router分别是什么？
[*]vuex和vue-router分别能做什么？
[*]vuex和vue-router的诞生是为了解决什么问题？
[*]什么情况下需要使用vuex，什么情况下需要使用vue-router？
[*]解决了这些问题之后，你需要实战，这里推荐一个github上对vuex，vue-router入门比较友善的项目：https://github.com/bailicangdu/vue2-happyfri
[*]实战要点：
[*]先看懂项目中vuex和vue-router的用法（第一步不是看懂项目，而是看vuex和vue-router怎么用）
[*]自己新搭建一个项目，配置好vuex和vue-router到能使用的地步
[*]看懂项目
[*]自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看
好了如果进行到这里，你大概也就入门了吧23333，这个时候你也就能利用前端的知识解决问题了，但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶
4.5.项目推荐
1.vue完成的饿了吗前后台webapp
bailicangdu/node-elm2.一个vue完成的QQ音乐
timelessover/vue-QQmusic基本上上面项目都能自己做出来之后，前端也就彻底入门了，补充基础知识之后，找找工作实习也没啥大问题（但是很多人卡死在vue门口=。=），加油吧朋友们
========干货结束分割线======
关键其实还是驱动力，如果项目驱动能给你足够的动力的话，那就不停的找项目做吧，走完上面的流程，再看看书的话，找个学校的工作室帮老师做项目就好了（应该到工作室的门槛了）~
如果驱动力不够的话，那就关注我呗~我之后会发些之前从入门前端到现在遇到的一些事情，希望对你们有些帮助~
如果有不懂的可以来问我~说不定你骨骼清奇，一下子就打通任督二脉，直接入门了呢
码字不易，各位观众姥爷点个赞再走呗=0=，这可是知乎首答呀~ 编辑于20171020
昨晚收到了百度的offer，也算圆满结束了我的秋招之路，秋招参加面试的几家单位滴滴、华为、拼多多，以及我老家的中移物联网都收到了录用offer（至于我最后去了哪儿，这就是个迷了）。秋招参加了面试的就这几家，他们的offer也算是给我自学前端的一个认可了吧。
这里给自学前端的，以及打算入门前端或者即将找工作的一些小建议吧：
关于项目：很多人问我怎么接项目，其实我接的项目真的很low，以前都是接的外包，外包除了能挣点钱，由于开发周期短、没人检查你的代码质量，其实学不到什么东西。
简历上面的几个项目也是实验室和校内的项目，当然简历被刷也是常有的事，比如网易、京东、腾讯就没给我面试机会。所以项目不够有亮点的，最好可以找人内推。然后我每次面试自我介绍都是着重介绍我的“电子科技大学助理管理系统”，真的是一听就很low的项目，然而我确实在里面花费了很多心血，从项目的需求、选型、开发、重构、优化等等过程亲力亲为，因此，无论你的项目看起来多么low，只要你认认真真在里面做了事情的，公司都会认可你的。
然后就是我的感觉大公司都很看重基础，不要觉得会react、vue、angular....几十种框架就很牛逼了，他们只要你懂得其中一种就够，注意是“懂”，不仅仅是“会”。
总而言之，先打好基础，再研究工具。能实习就去实习。
小感慨：看了自己以前的回答，发现自己从科研走不通选择了自学前端，然后拿了互联网的offer之后又没有选择互联网。用一个朋友的话来总结自己吧，其实我一直在路上，至于什么时候找到自己想要的喜欢的适合的，还在寻找吧，但我一定会在把每件事情都做好。
祝各位热爱互联网和前端开发的朋友们都能实现自己的理想和抱负吧～
<hr/>编辑于20170227
首先感谢大家的点赞，这里统一回答一下评论中出现的问题：
1.能不能分享这些电子书？
答：其实我是很乐意分享的，但是考虑到版权问题，大家还是到正规的售卖电子书的地方买吧，抱歉咯~ 不过我可以很乐意的分享我目前正在撰写的Gitbook Web Practice BooK · GitBook(平时对前端知识的总结)
2.如何接外包？
我觉得这个应该是很容易吧 ==，我以前也是不知道，最开始是在我们学校的BBS看到有人的项目找前端的，就接的。（不过建议是在接之前，自己先动手写过几个网页） 然后接了一次，就会有人又来找你。还有就是我们学校外面盘踞了好几个专门做外包的小公司，他们也招做兼职的。不过接活儿的时候一定要注意先多了解一下这个项目，有没有原型图，时间线，技术要求，对方是否靠谱等。
3.打个小广告
上面也介绍了，自己为了找工作，拼命的在补基础知识，并且想把这些知识写成书中。目前就完成了HTML和HTTP部分，不过还是希望大家关注一下，戳这里哦—— Web Practice BooK · GitBook
另外有人问我Git： daisyHawen (Hawen) · GitHub
<hr/>以下是原文：
好多人提到百度前端学院，是的，作为一个从百度前端学院受益的人来说一说：
2016.3做了百度前端学院系列，确实学习了不少东西。因为其实很多时候做很多东西都是项目驱动型的，如果不给你布置一个什么任务，你根本没有决心学习下去。
然后另一个就是 慕课网。因为慕课网上面的教程好多都是免费的，而且技术也很新。
而且我觉得我看视频的效率比看书要高。
学了一年了，说一下我的心路历程
<hr/>首先第一步必然是W3cschool
另外我觉得菜鸟教程也不错
HTML 教程 | 菜鸟教程
CSS 教程 | 菜鸟教程
JavaScript 教程
jQuery 教程 | 菜鸟教程
Bootstrap 教程
（不得不说MDN才是王道）
<hr/>第二步 然后，说一下，我学习的慕课网课程：
[*]最基础的课程：
HTML+CSS基础课程
http://www.imooc.com/u/1974843/messages
JavaScript入门篇-JavaScript入门视频教程
学习HTML、CSS、JS入门
[*]学习IDE，和GIt
快乐的sublime编辑器_sublime编辑器使用
版本控制入门
[*]CSS进阶
[*]学习一些CSS3的特效，有好多，这里只列了一部分
十天精通CSS3_css3入门视频教程
CSS3实现漂亮ToolTips效果
css3实现网页平滑过渡效果
形形色色的下拉菜单
CSS3绚丽照片墙
CSS Sprite雪碧图应用
按钮特效-慕课网
Sass入门篇_Sass入门视频教程
[*]HTML进阶
[*]主要是学了H5的Canvas
HTML5之元素与标签结构
HTML5音乐可视化
炫丽的倒计时效果Canvas绘图与动画基础
Canvas绘图详解
HTML5离线应用实战演练
[*]js进阶
jQuery源码解析（DOM与核心模块）
[*]尝试做一个完整的系统
H5+JS+CSS3实现七夕言情
CSS3扁平化风格博客
商城分类导航效果
手把手教你实现电商网站后台开发
[*]Node.js React.js以及前端工具webpack gruntfile
进击Node.js基础(一)-慕课网 进击Node.js基础(二)-慕课网 node+mongodb 建站攻略(一期)-慕课网 node建站攻略(二期)
React入门视频教程 React实战--打造画廊应用(上)-慕课网 React实践图片画廊应用（下）
Grunt-beginner前端自动化工具
学习时长居然有1046小时，当然也有可能是因为我忘记关实验室电脑了。不过后来当你入门了之后，我建议看视频还是来得太慢了，还是看API文档好。
http://picx.zhimg.com/c41891e98dd76f05518d6ec182d55b92_r.jpg?source=1940ef5c
(更新于20171020 后来，我又买了好多付费教学视频来看，什么性能优化类看，什么源码解读类的也看，不仅仅限于如何搭建一个网站了)
<hr/>第三步 就是百度前端学院了
<hr/>当然光学这些还是不够的，这期间自己还接了几个外包来练手。
一个是管理系统，另一个类似于借贷宝一样的web系统
<hr/>还有看书：
http://picx.zhimg.com/v2-46e0549e17390df01175a2bada91b442_r.jpg?source=1940ef5c
以上是我的书单，当然我还没看完。
目前就看了
[*]HTML与CSS3权威指南
[*]javascript权威指南
[*]HTTP权威指南
[*]javascript+dom编程艺术
[*](更新于20171020 现在基本上看完了，还有Vue.js权威指南，Node与Expres开发指南，实战ES2015，阮一峰老师的那本ES6....)
<hr/>最后最后，善于写博客自己总结
非常害羞的给出的自己的blog，写得很粗糙，平时主要只是为了记录自己学习过程中的体会。
Daisy花园
然后也试着用jekyll和gitio搭了博客，但是疏于管理 ，看看就好, Daisy花园
我平时还是比较喜欢在CSDN上写（估计这点会被吐槽，因为不符合程序员的极客思维），但是我觉得CSDN也是markdown语法，写起来也挺方便的啊。
而且在上面我找到了成就感啊
http://pic1.zhimg.com/v2-11f3ac4d26698bd448ecc62cbf5bda60_r.jpg?source=1940ef5c
现在已经开始有排名了
http://pic1.zhimg.com/50/v2-d8652739c5f99781bf843d3147864159_720w.jpg?source=1940ef5c
<hr/>后记
想说研一这一年很辛苦：
有导师这边的事：一边在研究云里面的访问控制（发了一篇EI），写了一篇国内核心（然而这居然不能挂自己的名，这也是我放弃了科研的原因），还参与了中国云桌面标准的拟定。
还要上课：昨天看学分，发现要求只用修25个学分，自己修了30个。
另外还接了外包项目，所以经常翘课熬夜加班啊。
因此很多时候学习前端都是偷偷摸摸，导师一出现立马调到word或者matlab界面，然后还翘了很多选修课，不过回头看看自己的收获还是蛮多的。
然而前端技术正在日益更新，而且里面还有很多知识点技术点掌握不牢实，所以，这一年继续加油。
争取明年这个时候可以找一个理想的前端工作。
最后再说一点，遇到bug一定要用google，stackoverflow上面有很多好的问题解答。
难得写得这么用心，您就点个赞再走呗~ 又过了好久，前端发展果然很快，重写了回答，以免误人子弟，以后不再更新。匿名是不想引起过多关注，没有别的意思。
<hr/>直接进入正题。前端入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。入门的话三个月肯定是足够了。
IFE（百度前端技术学院）是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大。所以我个人建议先刷点 15 年的基础题，不会做也可以参考别人的代码。
[*]IFE2015：ife/2015_spring/task at master · baidu-ife/ife · GitHub
[*]IFE2016：百度前端技术学院
自己想搞点其他项目也是可以的，本质上就是要给自己找点事情做，绝对不能单看书。
我把这三个月大致分为三个阶段。
1. HTML + CSS
前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境就是浏览器，推荐 Chrome。你需要的只是一个编辑器，直接用 VSCode 吧。
HTML 和 CSS 不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，可以参考 MDN。
我当时是看了一本书 Head First HTML and CSS，比较无脑，虽然浅显易懂但价格比较感人，粗略翻一遍就可以了，不用买。
迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分，对两者有个大致印象就好，不用死记硬背，短时间记不住的。刷慕课网勉强还行，但以后查资料还是要看 MDN 的，建议一步到位，最好看英文原版的。
接下来就是学习 CSS 了，CSS 要学深入非常难，入门的话会切图就行了。推荐：
[*]《CSS 权威指南（第四版）》。第四版包含了 CSS3 的内容，不需要再看别的了。这书非常枯燥，花几天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。
以上内容用时 5 天左右，主要是啃《CSS 权威指南（第四版）》。下面是实践。
学了几天 HTML 和 CSS 了，应该也有点成果了。打开 IFE2015 task1，写个静态页面吧。
写不出来是正常的。可以去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者查 MDN，多尝试，不断踩坑才有进步。
切完一张图后，别着急往下写。新手的代码通常会有胡乱的代码缩进、毫无章法的属性顺序等问题。
这时候应该重写。重写之前先找一份代码规范，比如 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的，只要合理及风格统一即可。
再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。
开始重写了，会发现写代码速度也快了很多。切几张页面后，应该比较熟练了。如果看到页面布局就大概知道应该怎么写了，那就可以进入 JavaScript 的学习了。
以上内容用时 10 天左右。
进阶部分可以回头再看：
[*]掌握预处理工具 Sass 或 Less，语法都差不多，不用死记硬背，一通百通
[*]阅读 Bootstrap 源码。其实用得很少了，主要是看下大量的 CSS 代码是如何组织的，以及关注栅格布局等关键实现
[*]《CSS 揭秘》，奇技淫巧合集，增长一下见识，献上膝盖就行
2. JavaScript
这是至关重要的阶段。广义的 JavaScript 可以大致分为语言特性（ECMAScript）和 Web API（DOM、BOM 等）。
[*]强烈推荐《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章大致讲语言特性，是重中之重，必须反复阅读，直至完全理解，有 C/C++ 基础的同学应该没什么问题。DOM、事件流、表单、JSON、Ajax 与最后几章也相当重要，是一些常用的 Web API。其余章节可以略读或直接跳过，比如像 XML 这种已经没用的东西就不用看了，还有那些列举大量 API 的章节，用到再查
[*]推荐《JavaScript 语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，去掉坑就是“精粹”了，过一遍就好，不理解的以后回头再看。
[*]ECMAScript(简称 ES) 规范在 2015 年后每年都有新特性加入，而红宝书成书时间较早，很多知识点已经跟不上了。ES6(又称 ES2015) 及以后的语言特性也是必学内容，推荐阮一峰老师的《ES6 标准入门》，但这本书以 API 居多，所以还是留个大致印象，以后写到类似的地方，查一查在新的语言特性下，有没有更简洁的写法就好，不必死记硬背
[*]强烈推荐《你不知道的 JS》。原版是英文的，有需要的同学可以自行搜索中文版。非常精彩的书，将 JavaScript 的细节一网打尽。前几本书里搞不懂的东西，比如 this 的指向等问题，通常都能在这里找到答案
[*]不太推荐《JavaScript权威指南》，也就是犀牛书，那就是像一本字典。我就翻过一下，没有细读，不好进一步评论
[*]评论里有提到 jQuery，我觉得完全不用看，写祖传项目的时候再学也很简单的。还是要以原生的 API 为主
以上内容用时 1 个月左右，如果有一些编程经验的话，应该没什么压力。 这些书全部刷完后，差不多就入门了，可以跟人谈笑风生了。 开始实践，IFE2016 阶段二的题基本随便刷。
进阶：
[*]TypeScript。对于有静态语言经验的同学，可以直接上手，基本没有难度
[*]学会使用包管理工具 npm，学会在社区上找想要的包，如 npms.io
[*]尝试使用 webpack 构建项目，并通过 Babel 编译 ES 新特性的代码兼容旧版浏览器。配置 webpack 令人痛苦，先能跑起来就行，精细的优化可以以后慢慢调，多查点资料
[*]配置 ESLint 规范代码格式，养成良好编码习惯
[*]看一下 lodash，尝试自己用简洁的代码实现。不希望读过我回答的人还遇到下面这种情况，因为这个问题里的面试官我认识（逃
如何看待前端面试不知道 lodash 被嘲讽不可思议？
[*]Web Fundamentals，宝藏网站，Web 开发进阶必读
3. JavaScript 框架
这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。
目前主流框架经常被提及的是 React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。
熟练掌握至少一种框架，把 IFE2016 刷通关吧，耗时 1 个半月左右。我个人推荐 React，对提升 JavaScript 基础有很大帮助。Vue 更像是一门新语言。新人通常不用纠结框架好坏，时间长了都学会也没什么难度吧。
进阶：
[*]框架周边生态，如无数种 Redux 封装，无数种 CSS in JS 方案等
[*]造些轮子
[*]带着问题读源码
[*]Node.js，Backend for Frontend
[*]……
[*]都到了这个份上，该学什么心里都有数吧，还用写么
4. 计算机基础知识
发现前端有太多的非科班选手，所以特此补充一节，不懂基础的话天花板会很低。由于本人有 OI 的经验所以稍微占点优势。
操作系统：
[*]《深入理解计算机系统》（CSAPP），入门级别的书，挑重点看一下
[*]《现代操作系统》，翻译得比较差，有条件的同学可以读英文原版，或者用 Operating Systems: Three Easy Pieces 代替
[*]The Linux Programming Interface，系统编程好书，跟前端的直接关系已经不大了，但不了解一下的话实在说不过去，不要把路子走窄了
[*]Advanced Programming in the UNIX Environment (3rd Edition)（中文版《UNIX 环境高级编程》），同上面的可以一起看
计算机网络：
[*]《计算机网络 自顶向下方法》，入门的网络书，前端至少也要懂 HTTP 协议吧
[*]TCP/IP Illustrated（中文版《TCP/IP 详解》），非常详细的经典，内容巨多，按需阅读吧
[*]UNIX Network Programming（中文版《UNIX 网络编程》），跟上面系统编程的书一起读
算法和数据结构：
[*]《算法（第四版）》，书里是 Java 实现的，但其实并不难
[*]《算法导论》，比较学术，以实践为主的话可以略读
[*]必须刷题，加强编码水平，LeetCode 级别就足够应付大部分面试了
[*]《算法竞赛入门经典（第二版）》《算法竞赛入门经典 训练指南》，搞竞赛的基本人手一本，没接触过又感兴趣的可以看一下
编译原理：
[*]《编译原理》，俗称龙书。项目里这么多涉及到编译的东西，学一下屠龙之技也无妨啊，其实挺好玩
<hr/>评论里有觉得我误导人，认为完全不可能做到，甚至说我装逼的。我必须澄清，文章里提到的都是 100% 真实经历，我不缺人脉不缺钱，又不开培训班，何况我都匿名了，装逼图个啥呢……
不过，这个答案还是禁止任何形式的转载，包括但不限于复制、扩充、改写等。
完。
页:
[1]