如何自学web前端开发？精细的自学步骤是什么样的？【附勺子】

目标人物是，一个文科的女生，27岁，非计算机专业，自学的情况下感觉太慢。也担心学习计划制定的有问题。所以想问一个具体的学习计划，包括时间点什么的。

<!-- -->

前端开发是技术学习，它有利益的驱动，高工资嘛。但它更应该是兴趣驱动。那么现在的兴趣是什么呢？学习web前端开发，学了之后能做什么呢？能做一个网站。

那么在当前阶段，我们的目标是做一个网站。分析需求实现的步骤如下，

第1步，要先会html

第2步，要做css

第3步，要掌握JavaScript

第4步，要掌握 node

第5步，要掌握vue

上面是大概的步骤，接下来我们把这些步骤细化。

首先要搞清楚HTML是什么东西，该怎么样去用。这个很简单大概1~3天应该就差不多吧，

然后是css的基本使用，这里面有以下几个关键点，

盒模型，定位，活动，行级、块级转换，清除浮动，各种常用排版，优先级，选择器，基本上也就这些东西吧，css并不是太复杂的东西。然后css3和常用的动画，在刚开始的时候并不需要去着急学习他。这些东西有一周的时间应该够用了，

也就是说在7~10天的时间内你应该会搞懂html和css的使用。然后再做一些比较典型的页面，例如京东的首页呀，网易的页面，淘宝的一些页面，还有一些个什么活动页面，就是一些常见的页面，你做上两三个3、4个基本也就可以了。

总体来讲零基础的同学呢，在自学的情况下半个月的时间，全部搞定htm和css网页制作。

<!-- -->

接下来第二阶段就是JavaScript。

对于初学者来讲JavaScript，这个地方不建议投入太多的精力，因为这里面很多的概念和底层的实现，在短期内通过自学啊，不是很容易理解。

所以最好还是先掌握了基本的语法，例如，var、this、for、if else、function、array、Object、{}，等。熟悉基本的业务逻辑开发思想，在脑子里边能够建立基本的程序运行的逻辑思路，就可以了。至于JavaScript更深层次的理论，底层的运行规律啊，可以放在以后慢慢的去掌握。

在这一个阶段比较适合的实例是基本的dom操作，例如，点击按钮实现一个显示、隐藏的切换效果；或是轮播图左右滚动之类的。JavaScript的入门语法并不困难，在这一阶段，主要掌握简单需求的开发逻辑思想。

学习时限嘛，

1、基本语法三天；

2、掌握基本操作三天；

3、几个小例子，一周；

So，半个月搞定原生JavaScirpt操作。

<!-- -->

接下来是jQuery，这个js库，现在不是特别的火热，但也有相当的市场占用率。所以我个人的建议是，你可以学，也可以跳过。

<!-- -->

再接下是node，它的学习比较复杂，不建议新人入坑太深。它涉及的网络方面的内容相对多一些，日常工作中，

1、node是什么？怎么安装？

2、npm是什么？怎么用它安装node的各种包？

搞定这二个就行了，三天足够了。

<!-- -->

再往下是VueJs，它比较简单，先不要看它太深入的一些原理啊、概念什么的，

第1步，掌握基本的v-指令；

第2步，vue-cli的安装、使用；

第3步，做一些简单的，还是轮播图、显示隐藏之类的切换；

第4步，做一些留言板之类的东西；

掌握基本的使用，一周时间？应该差不多，它简单的很。

<!-- -->

webpack，网上查一些资料，背一下，大概知道是什么东西，怎么回事就行了。这个东西不要自己太深学，没啥用。因为公司里不同项目的webpack配置都不一样，都tm快赶上玄学了。

<!-- 面试题 -->

这个不用多说，网上各种百度，凡是你能找到的面试是，都做。

时间，半个月。

<!--

齐活了，你可以去面试了。 -->

html、css半个月；

原生JavaScirpt半个月；

nodeJs三天；

vueJs一周；

面试题半个月；

统共二个月左右，前端开发技能基本掌握。然后就是不断的面试，再加强弱点；再面试，再加强弱点。不断的迭代，入职是迟早的事。

<!-- 上面那些呢，是策略，思路。

下面是勺子, -->

<!-- html、css -->

http://www.w3school.com.cn/

精通CSS（第2版）

https://book.douban.com/subject/4736167/

CSS3实用指南

https://book.douban.com/subject/10482084/

<!-- JavaSciprt -->

慕课网

https://www.imooc.com/course/list?c=javascript

JavaScript 中的函数式编程实践

https://www.ibm.com/developerworks/cn/web/1006_qiujt_jsfunctional/

敏捷软件开发

https://book.douban.com/subject/1140457/

掌握高内聚、低耦合、解耦，各种设计模式、原则。

前端开发知识结构（墙裂推荐）

https://github.com/JacksonTian/fks

<!-- node -->

Node.js 包教不包会

https://github.com/alsotang/node-lessons

【NodeJS 学习笔记04】新闻发布系统

https://www.cnblogs.com/yexiaochai/p/3536547.html

过年7天乐，学nodejs 也快乐

https://www.cnblogs.com/qqloving/p/3541099.html

七天学会NodeJS

https://github.com/nqdeng/7-days-nodejs

Nodejs学习笔记（二）--- 事件模块

https://www.cnblogs.com/zhongweiv/p/nodejs_events.html

M守护神.NET|Node.js入门

https://www.cnblogs.com/liusuqi/p/3735491.html

<!-- vue -->

vue官方文档

https://cn.vuejs.org/

Vue 入门指南

https://www.cnblogs.com/aaronjs/p/3660102.html

Vue.js 入门教程

https://www.runoob.com/w3cnote/vue-js-quickstart.html

推荐五个Vue2的免费教程

https://juejin.im/post/584cc93b8e450a006ac2196d

<!-- 项目、作品集 -->

颜海镜作品

http://yanhaijing.com/myProject/

脚儿网作品

http://jo2.org/category/myworks/

fgm作品

http://www.fgm.cc/learn/

岑安作品集

https://github.com/hongru/hongru.github.com

米空格 js作品

http://www.laoshu133.com/Lab/

javascript个人作品

http://www.cnitblog.com/yemoo/category/3107.html

个性的作品主页

http://zaole.net/

Frozen UI · 动效库

http://frozenui.github.io/case.html

<!-- 面试题 -->

那几个月在找工作（百度，网易游戏）

https://www.nowcoder.com/discuss/3196

2014年最新前端开发面试题

http://www.html-js.com/article/1743

2016校招内推 -- 阿里巴巴前端 -- 四面面试经历

https://www.cnblogs.com/imwtr/p/4685546.html

年后跳槽那点事：乐视+金山+360面试之行

https://www.cnblogs.com/lvdabao/p/3660707.html

js 也来 - 【拉勾专场】抛弃简历！让代码说话！

https://www.cnblogs.com/52cik/p/js-question-lg.html

FEX 的面试过程

https://github.com/fex-team/interview-questions

前端开发面试题

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

前端开发面试题

https://segmentfault.com/a/1190000000465431

如何面试一名前端开发工程师？

http://www.html-js.com/article/Large-search-front-team-column%202961

5个经典的前端面试问题

http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98

收集的前端面试题和答案

https://github.com/qiu-deqing/FE-interview