零基础开始学 Web 前端开发，有什么建议吗？
web-front-end-learning-introweb 前端简单介绍
web 前端就是写网页上 ui 和交互的代码。 其中网页包括 pc 端、移动端的浏览器访问，也包括移动端的 webview，比如淘宝的双十一活动页面、商品页面等。
前端工程师要学的东西：HTML / CSS / JavaScript，三种语言入门都很简单，所以前端门槛低，但是相应的深入就有些困难，需要懂很多东西。
代码编写工具
那么我们怎么写代码呢，使用 chrome dev tools（或者firefox 的 firebug 插件） + 编辑器（atom）
网页的构造
首先我们要了解一下网页是什么，怎么构成的。
在chrome dev tools（windows 下 f12 进入，mac 下右键“检查”）里，
其中 html 是文档骨架(MDN 的 html 入门教程)，css (MDN css 入门教程) 为 html 加上了样式，两者共同完成了 ui，js （js 入门书籍:js dom 编程艺术） 完成交互和动态的做一些事，比如向服务器接收、发送数据等。html 和 css 是基础，如果你要深入学习 web 前端就得学好 js，对于复杂交互的页面，js 占整个页面工作量的绝大部分。
编辑器
我个人认为，chrome 就是我们的 ide，可以断点调试、分析性能等等，所以我们只需要一个编辑器来写代码就行了。当然编辑器要支持 程序员修炼之道 里说的可配置、可扩展（使用插件）和可编程（编写插件），当然这些是进阶要求了，基本编写代码的要求必须要有优秀的语法高亮和代码补全功能。
符合上述要求的 atom 的效果图
这就是我们编写的代码，可以直接双击 html 用浏览器运行，也可以放到服务器上面，然后浏览器和 webview 都能通过 url 发出 http 请求来获取 html 来显示网页。
进阶
- 架构模式（推荐 mvvm 的 vue 入门教程，mvvm 适合大量的 dom 操作也就是复杂交互的页面，特别是非常适合web单页应用，vue 也可以组件化开发，react 也是组件化开发的代表）
- 版本控制(和比人合作开发, 最常用的git git 教程)
- github （学习别人的项目和开发自己的项目, github 介绍 ）
- 性能优化（动物书之狗书 高性能网站建设指南 ）
- 构建工具（比如 webpack 教程 ，并且可以使用 webpack 对模块化开发的 js 进行打包）
- node.js （其实打包工具和构建工具都是 node 写的，阿里大牛写的 node.js 教程 ）。
- 待补充
图来自 关于『真阿当』对目前流行前端技术的批判，大家有什么看法？ - 张克军的回答
