# 测试同学如何学习前端




最近发现很多测试同学有学习前端开发技术的需求，理由无外乎如下

* 前后端分离以后如果不了解前端技术那么测试起来可能找不到问题的症结所在
* 一些测试工具需要前端展示和操作，因为测试工具的前端操作可能比较复杂，所以一般会选用前后端分离的方案去专心搞前端
* 专业前端越来越多，不会一点前端技术可能都不好交流


### 总路线图

![](https://raw.githubusercontent.com/kamranahmedse/developer-roadmap/master/images/frontend-v2.png)


好了，看到路线图可能大家觉得凉凉了，其实不用怕，那测试同学怎么学前端呢？这里推荐一条相对路径较短的线路

### 知识储备阶段

我们首先要把前端知识的粗略的过一遍，不要求全部弄明白，起码混个脸熟。

* 学习html语法，最好能自己手动写一些静态的页面，丑一点没关系
* css基础，主要是学语法和布局，不需要纠结与细节和动画
* JavaScript基础，主要是学语法，操作dom
* 要了解什么是Ajax以及如何用代码发起ajax请求，如何在浏览器里查看ajax请求
* 如果对web ui自动化很感兴趣，可以学习jquery

### 进阶

* 学会使用1个package manager，比如npm/yarn
* 学会使用package manager与安装依赖
* 学习css预处理器，比如sass/PostCss等
* 学会使用1个css框架，比如bootstrap/bulma之类

### 继续进阶

* 学会使用构建工具，比如webpack/rollup/parcel/gulp/npm scripts/eslint等
* 学习1个js框架，比如react/angular/vue
* 学会使用某个js框架做1个todo list。这个github上有同名项目，大家可以搜索一下

基本上到这里对于入门来说就差不多了，要学的东西看上去很多，但实际上却是比较聚焦的。

根据经验，大家一般会在知识储备阶段放弃，毕竟万事开头难。

其实大家可以使用目标导向的方式，比如给自己定个目标，3个月以后看懂todo list的源码并自己实现1个，那么学起来可能会有更多动力。

点击阅读原文可以查看[todo list](http://todomvc.com/)的源码。












原始封面

![课程图片](https://images.unsplash.com/photo-1437652633673-cc02b9c67a1b?w=300)