Web 开发
热 议 结 Web 前端怎样入门？
7.2 更新
被私敲的烦了，私信不回，要问问题可以去值乎付费提问。
对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答案的最后了……
统一更新下前端现状：
文本编辑器：VS Co... 显示全部 »
被私敲的烦了，私信不回，要问问题可以去值乎付费提问。
对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答案的最后了……
统一更新下前端现状：
文本编辑器：VS Co... 显示全部 »
7.2 更新
被私敲的烦了，私信不回，要问问题可以去值乎付费提问。
对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答案的最后了……
统一更新下前端现状：
文本编辑器：VS Code + 一系列插件
包管理工具：npm
JS：紧跟每年更新的ES标准，强烈推荐上TypeScript
CSS：多了个PostCSS，以及CSS Modules等一系列模块化方案……
框架：React全家桶，Vue全家桶，本身就是全家桶的Angular（至少擅长其一）
构建工具：webpack
流程工具：npm script足够了，实在不够再用gulp
额外值得强烈推荐的：函数式编程，响应式编程（RxJS）
----------
3.5 更新
大家还是别点赞了吧，这个答案似乎给了很多人前端入坑很简单的错觉，十分惶恐…
----------
11.25 更新
至今 1570 赞，3452 收藏，有点被吓到了。
其实这个回答主观性很强，不适合大多数人，所以收藏的意义不大。
----------
原答案：
五角场文秘职业技术学院，大三狗一枚。
刚刷完IFE最终任务之一，来分享下自己过去三个月的前端学习经历。
我的提交 百度前端技术学院
前端是干什么的我就不赘述了，推荐看这个答案：Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？ - 张秋怡的回答
直接进入正题。前端入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。
IFE是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大，新手很容易在task1-6丧失信心，那个任务实在是太麻烦了。所以我个人建议先刷15年的task1和task2，都是很基础的题目了，不会做也可以参考别人的代码。
[list][*]IFE2015：ife/2015_spring/task at master · baidu-ife/ife · GitHub [/*][*]IFE2016：百度前端技术学院我把这三个月大致分为三个阶段。
1. HTML + CSS
前端的入门门槛极低，体现在HTML和CSS上。运行环境就是浏览器，推荐Chrome。你需要的只是一个文本编辑器，推荐Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。当然你非要用记事本的话，也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。
HTML和CSS不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，推荐慕课网 HTML+CSS基础课程。
我当时是看了一本书 Head First HTML and CSS，讲得浅显易懂，不过价格比较感人，也是只翻一遍的书，没有必要买了。
迅速刷一遍慕课网，对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。
HTML5的API可以先放一放，回头再看。
接下来就是深入学习CSS了。推荐：
[list]《CSS权威指南（第3版）》。很枯燥的一本书，但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主，知道CSS3有什么内容就好，记忆属性是枯燥且毫无意义的。[/list]
以上内容用时5天左右，下面是实践。
学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。
我X，完全写不出来。
这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。
画完第一张图后，别着急往下写。你的代码肯定会有如下问题：
[list]胡乱的代码缩进毫无章法的属性顺序满页的div不停地写id和class[/list]重写吧，是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。
再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。
开始重写了，会发现功力大增，写代码速度也快了很多的。
写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入JavaScript的学习了。
以上内容用时10天左右。
进阶部分可以回头再看：
[list]掌握预处理工具Sass，自动化工具Gulp。阅读Bootstrap源码。
《CSS揭秘》，极其惊艳的一本书，涵盖了CSS3的很多奇技淫巧，虽说有些地方不太实用，但让人眼前一亮，很值得看。[/list]
2. JavaScript
这是至关重要的阶段。
[list]强烈推荐《JavaScript高级程序设计（第3版）》，俗称红宝书。前七章是重中之重，必须反复阅读，直至完全理解，期间可配合其他书一起读。DOM，事件流，表单，JSON，Ajax与最后几章也相当重要。其余章节可以略读或跳过（比如浏览器嗅探，XML以及那些列举大量API的章节，完全可以用到再查）推荐《JavaScript语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，我个人是喜欢把这些坑点全部搞清楚的，但这本书却避而不谈了，剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。强烈推荐《你不知道的JS》。精彩至极的一本书，将JavaScript的坑一网打尽。之前搞不懂的问题，比如闭包，this之类的都可以在这里找到答案。ES6也是必学的内容，推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多，所以还是留个大概印象，以后写到类似的地方，查一查有没有ES6更简洁的写法就好，不必死记硬背。以及需要学会Webpack的使用，Babel和模块化就靠Webpack了。不太推荐《JavaScript权威指南》，也就是犀牛书。那就是一本字典……[/list]
进阶：
[list]《JavaScript设计模式与开发实践》，设计模式是必须了解的内容，这本是写得不错的。
《高性能JavaScript》，红宝书作者的另一力作，讲了一些优化技巧与性能瓶颈问题，值得一读。[/list]
以上内容用时1个月左右，中途可穿插IFE2015 task2的题，比2016年的要简单。
这些书全部刷完的话，应该可以跟人谈笑风生了。
开始实践，IFE2016阶段二的题，想怎么刷就怎么刷吧。如果有编程经验的话，应该没什么压力了。
3. JavaScript框架
这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。
目前主流框架经常被提及的是React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性，说不定过两年这些框架全都被淘汰了呢【逃
学习至少一种框架，把IFE2016刷通关吧。耗时1个半月左右。
进阶：看各种源代码。这也是我最近打算做的事情，但是好像期末考要到了TAT
最后补充一下，计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书，抽空还是要看看的：
[list]《深入理解计算机系统》，CSAPP，也是我们专业这学期的课程（但是我的专业明明是EE啊）。
《计算机网络 自顶向下方法》，看名字就知道必读了吧。
[*]操作系统好书挺多的，推荐一本 Operating Systems: Three Easy Pieces ，英文不够好就《现代操作系统》吧。
[/*]算法和数据结构，推荐两本：《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大，但作为一个码农，不要求你写红黑树，至少快速排序和二分查找这种要会写的吧。[/list]话说这几本中文的，都是机械工业出版社的啊……
后记：其实学的内容越多，就越感到自己知识面的匮乏。这个答案本应还有4,5,6甚至更多的，但由于本人只学了三个月，水平有限，目前只能达到这个程度了。写得不对的地方，望大牛们指正，轻拍。谢谢大家~
------------
惊人的点赞收藏比……只收藏不点赞的都是坏银QAQ
被私敲的烦了，私信不回，要问问题可以去值乎付费提问。
对于绝大部分零基础转行的同学来说，你要做的不是想着怎么快速入门前端，而是应该补回计算机基础知识，拥有最基本的专业素养。可以直接拉到答案的最后了……
统一更新下前端现状：
文本编辑器：VS Code + 一系列插件
包管理工具：npm
JS：紧跟每年更新的ES标准，强烈推荐上TypeScript
CSS：多了个PostCSS，以及CSS Modules等一系列模块化方案……
框架：React全家桶，Vue全家桶，本身就是全家桶的Angular（至少擅长其一）
构建工具：webpack
流程工具：npm script足够了，实在不够再用gulp
额外值得强烈推荐的：函数式编程，响应式编程（RxJS）
----------
3.5 更新
大家还是别点赞了吧，这个答案似乎给了很多人前端入坑很简单的错觉，十分惶恐…
----------
11.25 更新
至今 1570 赞，3452 收藏，有点被吓到了。
其实这个回答主观性很强，不适合大多数人，所以收藏的意义不大。
----------
原答案：
五角场文秘职业技术学院，大三狗一枚。
刚刷完IFE最终任务之一，来分享下自己过去三个月的前端学习经历。
我的提交 百度前端技术学院
前端是干什么的我就不赘述了，推荐看这个答案：Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？ - 张秋怡的回答
直接进入正题。前端入门是一个螺旋上升的过程，既要反复看书，也必须抓紧时间实践。
IFE是一个绝佳的练习平台，题目都是开源的。15年的学习资料比较多，而16年的题目题量较大，难度也稍大，新手很容易在task1-6丧失信心，那个任务实在是太麻烦了。所以我个人建议先刷15年的task1和task2，都是很基础的题目了，不会做也可以参考别人的代码。
[list][*]IFE2015：ife/2015_spring/task at master · baidu-ife/ife · GitHub [/*][*]IFE2016：百度前端技术学院我把这三个月大致分为三个阶段。
1. HTML + CSS
前端的入门门槛极低，体现在HTML和CSS上。运行环境就是浏览器，推荐Chrome。你需要的只是一个文本编辑器，推荐Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。当然你非要用记事本的话，也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。
HTML和CSS不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，推荐慕课网 HTML+CSS基础课程。
我当时是看了一本书 Head First HTML and CSS，讲得浅显易懂，不过价格比较感人，也是只翻一遍的书，没有必要买了。
迅速刷一遍慕课网，对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。
HTML5的API可以先放一放，回头再看。
接下来就是深入学习CSS了。推荐：
[list]《CSS权威指南（第3版）》。很枯燥的一本书，但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主，知道CSS3有什么内容就好，记忆属性是枯燥且毫无意义的。[/list]
以上内容用时5天左右，下面是实践。
学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。
我X，完全写不出来。
这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。
画完第一张图后，别着急往下写。你的代码肯定会有如下问题：
[list]胡乱的代码缩进毫无章法的属性顺序满页的div不停地写id和class[/list]重写吧，是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。
再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。
开始重写了，会发现功力大增，写代码速度也快了很多的。
写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入JavaScript的学习了。
以上内容用时10天左右。
进阶部分可以回头再看：
[list]掌握预处理工具Sass，自动化工具Gulp。阅读Bootstrap源码。
《CSS揭秘》，极其惊艳的一本书，涵盖了CSS3的很多奇技淫巧，虽说有些地方不太实用，但让人眼前一亮，很值得看。[/list]
2. JavaScript
这是至关重要的阶段。
[list]强烈推荐《JavaScript高级程序设计（第3版）》，俗称红宝书。前七章是重中之重，必须反复阅读，直至完全理解，期间可配合其他书一起读。DOM，事件流，表单，JSON，Ajax与最后几章也相当重要。其余章节可以略读或跳过（比如浏览器嗅探，XML以及那些列举大量API的章节，完全可以用到再查）推荐《JavaScript语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，我个人是喜欢把这些坑点全部搞清楚的，但这本书却避而不谈了，剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。强烈推荐《你不知道的JS》。精彩至极的一本书，将JavaScript的坑一网打尽。之前搞不懂的问题，比如闭包，this之类的都可以在这里找到答案。ES6也是必学的内容，推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多，所以还是留个大概印象，以后写到类似的地方，查一查有没有ES6更简洁的写法就好，不必死记硬背。以及需要学会Webpack的使用，Babel和模块化就靠Webpack了。不太推荐《JavaScript权威指南》，也就是犀牛书。那就是一本字典……[/list]
进阶：
[list]《JavaScript设计模式与开发实践》，设计模式是必须了解的内容，这本是写得不错的。
《高性能JavaScript》，红宝书作者的另一力作，讲了一些优化技巧与性能瓶颈问题，值得一读。[/list]
以上内容用时1个月左右，中途可穿插IFE2015 task2的题，比2016年的要简单。
这些书全部刷完的话，应该可以跟人谈笑风生了。
开始实践，IFE2016阶段二的题，想怎么刷就怎么刷吧。如果有编程经验的话，应该没什么压力了。
3. JavaScript框架
这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。
目前主流框架经常被提及的是React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性，说不定过两年这些框架全都被淘汰了呢【逃
学习至少一种框架，把IFE2016刷通关吧。耗时1个半月左右。
进阶：看各种源代码。这也是我最近打算做的事情，但是好像期末考要到了TAT
最后补充一下，计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书，抽空还是要看看的：
[list]《深入理解计算机系统》，CSAPP，也是我们专业这学期的课程（但是我的专业明明是EE啊）。
《计算机网络 自顶向下方法》，看名字就知道必读了吧。
[*]操作系统好书挺多的，推荐一本 Operating Systems: Three Easy Pieces ，英文不够好就《现代操作系统》吧。
[/*]算法和数据结构，推荐两本：《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大，但作为一个码农，不要求你写红黑树，至少快速排序和二分查找这种要会写的吧。[/list]话说这几本中文的，都是机械工业出版社的啊……
后记：其实学的内容越多，就越感到自己知识面的匮乏。这个答案本应还有4,5,6甚至更多的，但由于本人只学了三个月，水平有限，目前只能达到这个程度了。写得不对的地方，望大牛们指正，轻拍。谢谢大家~
------------
惊人的点赞收藏比……只收藏不点赞的都是坏银QAQ
