从今天开始入坑前端，给各位前辈添麻烦了，请大家多多指教。

w3c 的教程更适合已经有一定基础，然后准备巩固和复习的人看。如果说慕课相当于学校的老师，那么 w3c 更应该是一本手册或者字典。

如果完全是 0 基础，可以看一些慕课视频或者花钱买，视频里面他会一步一步的带领你去理解一个页面，配好环境，讲解他的思路。

html+css 我看的是慕课+w3c ， js 我看的是 javascript 高级程序设计这本书外加各种网上大牛的博客文章。

港真,你的情况更适合用 Vue

心急吃不了热豆腐。
静下心来刷书，《 css 权威指南》《 javascript 高级程序设计》《 javascript 语言精粹》。
布局的话，把第一本书理解到了，布局就差不多涉猎一些其他技巧。然后你可以看看 bootstrap 框架，了解有哪些东西是常用的组件，这个框架就可以不用管具体的 css ，你只需要抄过来就可以了。后面两本书是学习原生 javascript 的，就像学汇编，看完了 js 基础应该就有了。

一开始就上 react ，太多黑盒了。你应该学一个简单点的自动化构建工具， grunt （以项目为单位）或者 gulp （以任务为单位），理解到这些工具做了什么后，就去学 webpack ，不过在此之前，还需要先学习 nodejs ，而 nodejs 又依赖于 js 基础。然后，你还要学习 es6 语法，看阮一峰老师的那本书，这样你就知道要用 babel 转换器把语法转换一下。这样， react 构建起来的黑盒就没问题了。

还有个渐进式的 vue ，简单上手容易，要求 css 基础和 js 基础。

学习的地方，去 MDN 上去看系统的教程，布局直接关键词应该就会有文章的。知乎应该也有书推介。还有百度前端技术学院。

然后你在写 html 和 css 写烦了的时候，再去学一些预处理工具模板等等，我推介 stylus,pug ，简单容易上手，这种东西也和构建工具一样，理解了做了什么就可以快速切换到另外一个。

angular2 用了 typescript ， es 语法糖，也和 es6+babel 一样的，把你写的东西转换成其他的，要求有 es6 基础。
这些东西都在把新的东西转换成最基础的 css, html, js, 所以前端最重要的，还是这三剑客，要求效率的时候，就需要其他东西来转换一下了，就像 c++与汇编语言。
编辑器用 visual studio code,要插件装就可以了。
心急吃不了热豆腐，以上是我扎实的学习路线，然而学了这么多，还是感觉只是基础…

@tomato3 非常感谢。
我先买一本 css 权威指南吧。
nodejs 我本身也在看，后端构建微服务写网关会用到这个东西。

嗯，学了 Html CSS Js(Es6) ，是基础。
不过，跟时代潮流的话，还是入 Vue 之门，更妥当些。

你这是要全包了啊...厉害