hello，同学们大家好，我是老尚，

今天想跟同学们聊一个话题，

嗯，就是零基础自学web前端的开发，

怎么样能够达到月薪12,000元，

然后呢，我在这做了一个思维导图啊，

零基础自学web前端达到月入额，12,000元，

这个我是指的工资，啊

然后呢，如果同学们觉得我说得还行，

请给我三连操作啊，

点击、收藏 、投币，

如果能转发一下那就更好了，谢谢

这个话题呢，我将分成以下几个部分啊，

就是12345678一直是8个部分啊，8个部分，

第一个部分呢，首先肯定是html、css，

因为是零基础的学生嘛，是吧，

所以肯定要先学html、css

那么我给大家找的这个啊，叫什么呢？

就是很简单啊，

html、css嘛它就是很简单的一个东西啊，

就是这个w3school，

就是这些网站啊，w3school，

他这里边这个html、css这些东西啊，

所以看起来就是啊，

挺好用的，就是一些常用的标签啊，

同学们一边啊，看一看啊，

这里面有些资料，可以看一看就可以啊，

html有很多的标签啊，那我们在学习当中呢，

你不必去学习所有的标签，

你只需要学习一些常用的标签就可以啊，

例如这个div啊，

label，span p b ul ol li dt dd i em h1 h2 h3 input

基本这些就可以

然后在这一阶段啊，html5可以先不学，

html这一阶段啊，

我们的目的啊，就是掌握一些基本的html标签，

例如说你看一些东西啊，

你有一些标签的，你不知道干嘛，

那我们大概得再去看一下啊，就可以，

现在几个阶段了啊，

html不用太深的研究，没有啥用

然后第2个阶段呢，就是这个css，

首先还是一个基本的语法啊，

那就是css也是这个w3school，

这个玩意儿挺好用的，

因为它里面有些东西呢，也是介绍得很详细是吧

然后呢，同学们在学东西的时候，

啊，不必去盲目地追新，

因为，太新的东西都需要比较好的基础啊，

这样的能够比较快速地去了解，

那如果说你一味地说我觉得追求去新的东西啊，

这个效果呢反而不好，

那么学习css呢，首先就是语法，

比如说.操作符，由class引用

#号操作符，由id引用，在这过程当中啊，

在语法这个阶段，

什么层级呀兄弟呀，啊级联啊，群组啊，

各种各样的选择器的写法不用太深究啊，

不用太深究，

因为我们只是想要先掌握基本的css语法，

然后掌握了css语法之后呢，

就是基本的一些概念，

什么层叠式样式表是什么意思？

怎么层叠的，css模型是什么？

定位是什么？文档流是什么？

定位是4种定位是什么？

position、relative、absolute,啊，

position、relative、static、fixed

常用的4种定位方式啊，定位和这个浮动对吧？

css的优先级，可以大概地了解一下，

比如说这个定位的权重!important啊

这个，然后在网上找一些例子，

网上找一个例子的话呢，可以做一做，

呃比较典型的可以做一个这个京东的首页啊，

或者说网易的首页啊，对吧啊，

或者说你可以看一看我的这个

在我b站的首页里面啊，有这个，

嗯，有什么呢？html、css仿京东电商的项目，

这个的竞拍页面可以做一下啊，

做一下还有一个还有一个这个就是这个访问京东官网啊，

这个是旧版本，但是这个呢，

说得也蛮详细啊，对于学习html、css也是比较有帮助的，

然后呢，这是html、css的这个阶段的，

css3相关的东西，在此阶段不需要去学。

这个阶段呢，

我们只需要做一两个静态的html页面啊，做一两个就可以

不必在这个阶段浪费太多的时间

css花费太多的时间去钻研，没有什么的意义。

为什么呢？因为现在前端开发嘛，都是在写js，

在面试的过程当中他也是问你js的东西占绝对多数，

那我们的目的是干嘛？是要就业啊。

我们是要成为html、css专家吗？

不是的。我们的目的，是做好项目啊，

做好准备，然后呢，通过面试找到工作，

也就是说我们是针对面试学习，我们的目的是通过面试对吧，

那你把这个自学当做一个应试，也是可以的，

那接下来第3阶段，就是这个javascript

三板斧嘛，那js是这个东西呢，

我还是给同学们推荐了这个什么啊，

这个js的话就直接说他，

就这个javascript，它就可以

就这个东西，一些一些常用的啊，常用的一些东西，

什么语法函数啊，赋值啊，字符串啊，简介输出啊，

运算符也都很详细，

同学们不要觉得这个w3school啊，它很旧啊，是

很这个800年前就有了，不新不酷是吧，

咱们学的东西啊，你不要追求酷啊，

他时间久，说明他出的早啊，

这么长时间以来他出的错就少

另外这东西很经典啊，还是要基本的先从语法开始，

js的语法呢，它也很简单啊，var 创建变量，

function函数，function()xx，

函数的传参与调用，this是个什么东西？

for循环数组和对象啊，然后forin，document是什么东西对吧，

我们把这些基本的东西这几个基本语句先搞清楚，

那我们就可以做一些东西了，

什么if else true 基本数据类型，

然后在这里边，我们就可以做一些操作dom的基本操作

比如说，

createElement、appendChild、innerHTML、setAttribute

我们创建dom节点，附加dom节点，向dom节点里面写入内容

然后呢，给dom节点添加属性，这个是一条线啊，

我们通过这个最新的语法，我们就能完成一些个，

基本简单的业务逻辑，就可以写好了。

就是在语法这一阶段嘛，

你不必说在语法这个阶段你就去深入研究document，

深入研究数组对象啊之类的哈，

咱们学的东西要有一条主线，

在这个主线的每一个阶段我们要完成不同的任务，

而不是说啊，遇到一个难点我们就往里钻，

遇到一个端端端端端，

这样的话呢，如果这么学习这样的话，

你学出来是一条折线，而不是一条直线，

有时它不光是一条折线

，还是一线弯线，浪费时间就浪费在这里

这一阶段啊，语法它的目的呢，学到这就行，

不用太多啊，不要去研究什么，

在这个阶段不要研究太深入的东西，

没有必要，你也研究不了啊，

因为你零基础初学者嘛，

你的目的是要保证能写基本业务逻辑，

建立基本的这个开发思维，然后是事件，

事件，js支持很多的事件，啊，

移入、移出啊，焦点获取、失去啊，

但是在这一阶段onclick，

我们只需要知道是一个onclick就可以，

因为啥呢，因为js它是事件驱动的，

咱们呢你知道一个，你其他的也就一通百通了。

啊，实例的话呢，可以写个轮廓图啊啊，静态留言板，

然后带菜单的横向导航条啊，二维数组的是吧？

这一阶段，你不用去做太多的原生js的例子，

你在这一阶段，你猛劲的研究原生js，没有啥大用，

因为你是一个初学者，

你在这个阶段你没有一定的代码量的积累的情况下，

你猛劲研究你研究不下去，

对吧，你没有积累，你没有量变，所以你达不到质变。

在这一阶段的目的，我们是通过一些简单的例子。

也不用太多，写太多没有用。把原生js基本的写熟练

，啊，就上面那些 基本的方法

唉，你不要有拼写错误，对吧？然后呢，

并且基本的理解了基本的开发业务的啊，

这个逻辑和需求的分析，你比如说留言板，

呃，轮播图、还有这个静态留言板，

二维数组，这种东西写简单的话，几行代码就ok，

你要写复杂的话，那一个轮播图呢，

能扩展出好多功能，

这个目的，

就是想解决你开发时没有思路的这个问题，

因为这个思路吧，它是一点一点，在你脑子里面生长出来的，

你像有些同学吧，他就跟我说，经常跟我说，

网上好多例子特别特别简单，就跟哄小孩一样，为什么呢？

他说他想找一些个完整的啊，

全面的啊，跟实际生产环节一样的，

线上的这种，全面的例子。

但是你说，网上为什么没有这样的例子呢？

这有二个原因

第1个呢，实际生产环境的例子它拿不下来，

它需要好多啊，前后端的支撑，

第2个呢，就是对于前端新人学习来讲，

真给你一个生产环境的例子，

那里面的逻辑很复杂，你根本看不明白，

所以说前端新人吧，很多时候呢，它存在着眼高手低的情况，

甚至存在的眼不高，手还挺低，这么一个情况，

他分不出来哪个好或者是不好，

但是他只是觉得啊，

然后他也写不了啥玩意，就这么一个阶段，

然后还一直要找一些比较复杂的例子

这情况就陷入了一个怪圈，啊

这个说的，希望同学们能正确的理解啊，

不要曲解我的意思，

这是这个在原生js这个地方

原来js这里连，就语法、事件、基本的写几个例子啊，如果不出错

有一些基本的思路，就可以了。然后呢？下一阶段，nodeJs，

nodeJs的话呢，

你就看这个就可以，这个菜鸟教程啊？看这个菜鸟教程

这个地方有一个，nodeJs

它也是很全面的，这个菜鸟教程，

真的这个nodeJs挺不错的，浅显易懂，

我当初，我不是在这学的

我是会nodeJs之后我回过头来看，这个写的真不错，

然后nodeJs也不用深研究

，nodeJs是什么？安装成功，npm，

nodeJs基本应用、使用

nodeJs在这一阶段，

你能把这个vue-cli脚手架安装成功运行就可以

然后其它的，

什么nodeJs的回调啊、事件啊、buffer、stream啊，

流啊，缓存啊等等文件哈，

你不要弄这些东西没有用啊，没有用

你在现在这个阶段啊，就是刚刚自学到第4阶段，

你可以研究什么，这个那个你根本不知道干嘛，

你就是，能成功安装vue-cli脚手架，

让它成功运行，就ok

第五阶段vue啊，vue的话呢，它也很简单的一个东西，

还是看这个菜鸟教程里面，你跟着它，把它这些个

常用的啊，语法指令啊，都过一遍就行了啊，

vue-cli安装成功，模板语法，掌握

常用的一些指令，

show if bind onclick model v-for这些，

基本的路由、组件，

还是把之前的轮播图、静态留言板、二维数组

把之前啊，用原生js写过的例子在用vue写一遍，

因为之前你写过了，所以业务逻辑你是知道的，

那么就是掌握熟练vue是一方面，另外呢？

对于这个业务逻辑会有一些，更啊，抽象一些的想法，

因为之前用原生js来写是面向过程，

你用vue来写，它是面向对象，这两种开发思路，

你变成一个对比，会会有一些自己的感受，

这开发思路这东西，它是慢慢，我再说一遍啊，

是在你脑子里慢慢的长出来的，

那不是说你看了一篇文章，做了一个例子啊，

然后你就biu的一下，你就有了开发思路！

不是那样啊，不是那样，

然后呢，这个啊，这样啊，然后，啊，

第6阶段我们回到nodeJs，因为我们要做全栈，

刚才我们是视图层这一边的，

现在我们要把数据层这边再搞一搞，

你要去看一下get、post请求啊，

很简单，无非就是两个事件而已，

你可以用一下啊，

安装一下express或者是Koa2来用来响应get请求，

然后呢，你把axios这个玩意儿啊，

异步获取数据的把它装上，

那目的呢是我们要写自己的接口啊，

响应get、post请求，变身为全栈开发

这边是视图，这边是数据，

nodeJs变成一个中间件，两边连接起来，

这是这么一个东西

目的呢啊，是写接口啊，变成全栈哈，

然后呢，你可以自己在网上找一些项目代码来做，

也可以跟着我在b站的全栈项目来做，

目的就是拥有全栈的开发，思想啊，

你比如说这个，我在b站有这个，啊在这儿啊，

你可以跟着我这个，

这有一个网易严选的APP啊这个应用，

这个应用啊，有同学说没有写完啊，就太短了啊，

但是，虽然它只有短短的7节啊，短短的7节，

不是这个哈，这个是一个只完成一个视图层，

好在这啊，在这个地方，

网易严选移动端app，这个刚刚更新到第5节，

但它它会是一个全栈的这么一个东西，

从前到后包括mysql数据持久化，

都会有，啊，都会有

然后呢，或者是这个高仿的boss直聘，

这个boss直聘的话呢，

噢，他也是一个视图层，

这我有一些例子都没写完哈，然后呢，

但是这个呢，这个视频教程呢，

它是一个完整的一个东西，

它是我这个收费课程里面的一部分，

这个例子呢，我并没有把它完整的放出来啊，

我也只放了7节课，这个实例教程啊，

它是我一对一零基础课的内容，

然后呢，如果说你觉得不太够你也可以呢，在网上，

找一些全栈的demo来做，这类的网上有很多，

然后呢，自学学到这一步，

相应的知识点结构啊，就已经有了，

接下来，就要向纵深的方向去发展，

首先第一个啊，就是es6啊，

你看，就一件事情，es6呢，

它的语法很简单啊，它就是一个es5的一个语法糖，

那么掌握es6最好的办法就是，

上面刚才提到的实力demo，都用es6重新再实现一遍，

目的是掌握es6的使用，然后接下来把这些例子啊，

你比如说那几个什么啊，轮播图啊什么啊，导航条啊，

留言板啊，这些东西

因为留言板你可以加上数据

轮播图的话，你也可以加上数据的生成，

对吧自动的更新、获取，

你把这个玩意或扩展一下这个，很多东西可做了，

你比如说静态留言板你可以改加上数据改成动态的啊，

留言板你加上登录注册呀，

对吧，留言你可以加上修改啊，

这就变成了一个数据的增删改查crud，

你这个东西慢慢扩展，可以做的很复杂，

然后到这一阶段，

你已经在网上找了一些个demo来做，

不用太多，你找两个就可以，做熟了就可以了，

接下来啊，es6刚才说了要写，

接下来就是第8阶段相关的理论，

那相关的理论呢，这个呢，

它都是要在代码量的基础之上进行抽象，

然后你才能在脑子里面，对他们有一个相应的理解，

然后形成你自己的前端知识体系，

并且不断的去丰富它，扩展它，

那么这里面有哪些呢？

首先是一个设计模式有23种啊，常用的16种，

但是呢，我们在前端用的比较多的就是单例、工厂、观察者，

然后，

OO是面向对象，然后呢，而且是http、Tcp/Ip协议，

http最起码你要了解HTTP它是无状态的，对吧？

Tcp/Ip呢，七层网络三次握手

这个基本的东西，

然后呢原型链、函数、prototype、constructor

new一个函数，被new的函数就是构造器，

对吧？继承有几种方式啊，prototype原型继承，

call、apply的this转移的继承

有很多种，

es6里的 class A extends B，对吧es6的继承，很多的

模块化啊，

模块化的前世今生，这个模块化呢，你要要是有时间的话，

你可以看一下我这个，

我这个里面讲模块化，我觉得讲的还不错，

那简单讲解这个啊，简单讲解，前端模块化，很简单，

其实我的标题写的很明白，这个好像只有10、12分钟，

你只需要十多分钟的，这个玩意很简单的，

那个*子都能听懂，我相信同学们都能听懂啊，

然后呢，公共方法、私有方法，什么叫公共方法呀？

函数，构造器里边个this，它是公共方法

私有方法是函数里面的子函数，这个私有方法这怎么用啊？

它是放在了函数的公共属性上，对吧？

嗯，因为时间的关系，我就不去演示了啊，

然后呢，数据结构啊，数据结构的话呢，

你最起码你要了解什么啊？啊，

队列啊，数组啊什么啊，栈啊，

什么这个这些东西啊，先入后出啊，

后入先出啊，先入先出啊，对吧唉，基本的一些东西哈，

常用算法啊，快排对吧？插值啊，还有什么换？

他常用的算法的话呢，

你最起码你要知道js里面那个sort，

sort它是一个排序函数啊，他接受一些排序的函数，

这些东西都怎么用，然后相关的理论呢，

还包括这个浏览器渲染原理与机制，

我这个地方有个视频，上在哪里呢？在这个地方，

发个呆的功夫浏览器渲染原理和打开机制就搞懂了，

你要不要试一试？

这个视频我说了66分钟啊，时间挺长的，

同学们可以看一看啊，我觉得这个说的还可以，

而且这不是我自夸呀，

你刚才同学们觉得都觉得还不错的啊，都觉得还不错，

这评论什么都觉得还不错啊，

再往下javascript性能优化、移动端适配方案，

它的性能还有它的优化啊，

这个呢，就要求你对js本身了解非常深入，

这些东西你在网上一搜就有，

移动端的适配方案的话呢，其实无非就是那4种

那个meta浏览器的适配，要么就是rem的那个适配，

要么就是修改viewport视口的那个适配，

移动端的设备方案呢，你可以看一下我这个，第2版网易严选

这个里边啊，我着重的讲解了适配的方案，在这个地方啊啊，

这是一个介绍，这是一个实现，有两节的东西啊，

专门的去讲了这个移动端的适配，

还可以啊，从这个同学们的反应来看还可以，

你再来看来看一html5、css3、前端工程化的相关知识，

为什么放在这儿呢，因为html5、css3啊，

看起来好像很新的很潮啊，

其实这两个东西啊，

在前端开发里边没有什么太多好说的，

html5呢，它是有很多新的东西，

websocket，页面数据库啊等等的一些新的API，

但是同学们啊，但是html5在前端开发实际业务当中啊，

咱不把话说死啊，

有大多数情况下，就是一些新标签，然后css3呢，

它在实际工作当中，

要么就是圆角，要么就是阴影，

要么就是什么transform变形，

要么就是animation动画，

这些个东西他们都跟业务逻辑没关系，你看一看你就会了，

然后呢，前端工程化的话，

那无非就是webpack，这些打包的一些东西啊，

很简单，所以呢，咱们说啊，你怎么样的说前端自学？

达到工资12,000块是吧，

你就按照我大概说的这么一个路径来搞，

基本问题不大啊，问题不大，

当然了，这里面也需要一些个，自律对吧，自律

就是，你看我这个方案吧，

我这里边包含的知识点是非常的有限的，

那我这里边贯彻了一个什么思想呢，就是，

学习东西啊，在不同的阶段要讲究不同的深度，

不是说你刚一开始学就要把，

某一个或者某几个点一直学到最深，一直学到最多

不是那样的啊，不是那样的，

学到一定程度，然后呢，你就可以进入下一个阶段啊，

就是这样啊，那当然，这也需要相当的自律啊，

我相信同学们都能做到，

我相信自学的同学们都能做到，

因为我当初我就是自学的，

然后呢，如果说看书的话呢，

也不用看什么书啊，不用看什么书，

这些资料网上都有，你哪里不会？搜哪里，就ok

时间的关系就说到这吧，

祝同学们，学有所成，再见