一位老程序员的心得分享，WEB前端菜鸟，感觉很迷茫，该怎么做？

我们可以把学习路线比作游戏中的段位上分，在不同的分段都有自己的定位和要锻炼的事情：

1、青铜 - 从零开始小学生：怀着满腔的热血，看到了这一个行业的希望和未来，准备开始学习 Web 开发知识。
a. 先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了
b. 写一个简单的表白页面送给你的女/男朋友，展示一下自己努力的成果，如果没有就当我没说

2、白银 - 懵懵懂懂初学者：懂得如何使用 HTML、CSS 和 JavaScript 三大件来实现基本页面开发功能
a. 选择一个可以覆盖多种场景、可以随自己意愿调整难度的项目尝试实现，如博客系统、记账本、Markdown 编辑器等
b. 从 React 和 Vue 这两个框架中选择一个进行学习

3、黄金 - 轻车熟路新玩家：懂得使用框架来实现上面所举例项目
a. 学习 Redux、Vuex 或者 MobX 等状态管理工具，并将他们使用到前面的项目中
b. 思考状态管理工具为你的项目带来了什么好处

4、铂金 V - 初出茅庐新司机： 懂得如何使用脚手架创建项目，并且能将代码结构根据模块化的思想进行安排
a. 学习 TypeScript，对前面的项目进行重写，注重对数据结构和类型的控制
b. 学习 Node.js，试着配合数据库实现一个比博客系统更为复杂的 CMS（内容管理系统），如 图书馆管理系统、仓库管理系统

5、铂金 I - 基本上手好司机：如果是懂得如何利用 Node.js 或 TypeScript 编写业务代码的
a. 思考在前面使用框架开发的项目中，有哪些代码是重复冗余的，有哪些逻辑是可以在多个组件之间共用的
b. 学习利用 ES2015 或更新的 JavaScript 标准，逐步替换使用框架所编写的代码

6、钻石 V - 淡定自然老司机：如果是对逻辑抽象、模块封装有了一定的理解和经验的
a. 思考如何使用纯 JavaScript 对业务组件中的非渲染、非 DOM 相关代码进行抽象
b. 引入单元测试工具，对纯逻辑代码进行测试，争取覆盖率达到 80% 以上

7、钻石 I - 赛道新手初学者：如果上面的条件你都已经满足了
a. 思考不同的代码哲学（OO、FP 等）、不同的代码结构（MVC、MVVM 等）的区别
b. 思考不同的框架之间设计的初衷，思考不同的编程语言中对同一类问题不同解法的区别

到这里我划了一条从 0 到高级前端工程师级别的纯技术路线。相信有不少有经验的同学会发现中间我省略了不少内容，但也不难发现路线中从前半段的“学习”逐步变成后半段的“思考”。优秀的工程师除了需要有在纯技术领域的沉淀以外，还需要更多对技术、团队、ROI（投资回报率）的思考，当然这依然不足以支撑我们平稳地渡过“程序员 35 岁危机”，前面的路还有很长，钻石往上还有王者呢，谁说程序员就是青春饭碗的？
回想起很多年前我也跟你一样是一个完全的新手，从 0 开始慢慢自学摸索 Web 开发，甚至后来我也没有进入科班学习计算机，那么来听听我作为一个“前人”是如何完全靠自学至今的故事吧。

本次给大家推荐一个免费的学习蔻qun，前面603 中间985最后993，
概括应用网站开发，css，html，JavaScript，jQuery，Vue、Ajax，node，
angular等。对web前端开发技术感兴趣的同学，
不管你是小白还是大牛我都欢迎，每天技术分享。

我的从 0 开始

我是一个完全从自学开始的前端工程师，想起来第一次接触前端就是初中那会特别流行合租 VPS 然后注册一个 .tk 的免费域名。而作为一个刚入门 Web 开发不久的小屁孩来说，用这种方式一探“大人的世界”属实让人兴奋。而当时最流行的博客管理软件就是用 PHP 写的 WordPress，作为一个十分成熟的 CMS 软件来说 WordPress 当时就有了非常丰富的社区资源，比如主题、模板、插件等等。而作为一个十分注重个性化的小屁孩来说，当然是要自己做一个主题的啊！于是我就从此踏上了 Web 开发的不归路，在此之前我所接触的都是 Visual Basic 这样的 Native 的语言。
以 WordPress 主题作为切入点，我开始学习 PHP 用于调用 WordPress 的 API 并输出内容、学习 HTML 用于写主题的模板、学习 CSS 用于“装潢”我的博客、学习 jQuery 用于实现页面动态效果。是的，那个时候基本上大部分人接触的是 jQuery 而不是 JavaScript，一个 $ 函数就可以完成非常多的效果这让我第一次感受到了“框架”所带来的价值。于是便一步一步地发生了以下事情（不一定完全对，毕竟时间过太久了）：

我发现页面上的一些样式效果无法在 IE 浏览器上正常显示，于是我就开始到网上学习 CSS 在 IE 的各种特殊处理，包括 reset.css、normalize.css 等工具的使用；
每次点击链接都要刷新页面，在那个网速不怎么好的年代体验非常糟糕，于是乎就开始研究怎么用 jQuery/JavaScript 实现不需要刷新页面的情况下切换页面的内容；
a. 通过