跪求Web前端学习路线，哪位大佬可以说一下吗？

web前端在近几年市场时间，迅速地发展起来，适合初学者，前端开发相比IT其他岗位，入门门槛更低，容易上手，所见即所得，且不过时，相比后端学习起来更加容易。
下面分享一下web前端学习路线：
学前阶段：Git的使用进行代码版本控制管理
第一阶段：HTML+CSS3
第二阶段：移动端web页面
第三阶段：JavaScript编程
第四阶段：前端MVVM框架实战
第五阶段：微信小程序&泛客户端
第六阶段：Nodejs
第七阶段：就业指导
第八阶段：前端延伸TypeScript
想要清晰了解更加详细的“前端学习路线”大家可以在B站搜索我们的名称，里面的标注了哪些是重点学习，哪些知识点是已经过时了，企业不会再用的技术。这样就能让你少走很多的弯路，最起码的能让你学习起来目标更加清晰。希望能帮到你。

自己在家学习签单的话要，多利用网络来学习比如说前期的话看一些，视频教程，中期的话看一些书籍，一定要注意多学js，这是网站前端的灵魂，然后多练习网站布局，这个的话没有什么技巧多练习就能会的多。

现在前端开发是一个很火很热门的行业，在这里为大家详细解释一下这个高大上的行业！
在国内大学课程里面，几乎没有前端开发这门课程，无非就是一些网页设计之类的课程，但那些课程无论是老师讲还是学生听，都是敷衍了事，这个我深有体会，我相信大家一定也有同感！所以，目前前端开发主要是通过自学，和参加正规的培训！对于培训来说，一般会分为初级、中级、高级等级别，因为凭我们自己很难掌握这些技能。但是自学是很困难的，毕竟是一个人自己摸索，网上看上去有很多视频可以学习，但是那些视频很多都是过时的，像js和h5这些想要自学根本学不会，更何况以后深入学习还要掌握框架构造！很多小伙伴就根本找不到学习的方向，最后白白浪费了自己的时间和精力！所以对于有条件的小伙伴，个人推荐最好是系统的学习一下！
接下来为大家介绍一下怎么零基础学习前端
基础知识：
1、HTML + CSS 这部分建议在 W3school 在线教程 上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。也可以去w3school和慕课网学习。
Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 W3school上学习。之后建议马上看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。对于有需要的小伙伴，推荐找一个培训班或者裙进行系统学习，下文会讲到呢 。
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
jQuery，简单易用，在W3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充： 可以使用 Codecademy 学习 Javascript，jQuery，用户体验真的很好
　传统web从业者为什么必须学习前端开发技能？——学习前端开发是晋升和加薪的捷径。传统web从业者，只要精通html+css，简单的JS效果，切切图，写写网站等就可以了，而如今的前端开发不再只是一个简单的网站，现在越来越多的云计算应用程序，比如web QQ接近我们经常使用的QQ的功能。以前用java 、J2EE、 Net 、Object C等高级语言开发的应用程序也越来越走向web化、云端化。 BS架构应用程序已逐渐成为主流。时代变了，用最犀利的前端技术武装我们的大脑的时代已经来临！
那么我们应该怎么学习前端开发这门技术呢 ？ 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 ，并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个裙，前面是伍思二，中间是一把一，最后是八溜一！ 在这里有最新的HTML课程 免费学习 也有很多人指导你进步，不需要你付出什么 只要你有一颗学习的心就可以了。
下面是关于前端开发的一下杂谈 有兴趣的可以看看 ：
1、想要跟上潮流，想要掌握最新技术，做高精尖人才升职加薪，必须学习前端开发最新技能，毕竟做前端的就得跟上时代的潮流，如果有小伙伴想要学习前端开发，个人认为潭州学院还是蛮不错的 ！相比于线下的培训班，潭州无论是学费还是学习时间，都远远比线下的培训班更加实惠，而且只要有电脑，有网络就可以进行学习！

2、前端开发的就业方向及薪资情况。
记得有人说过，未来不再有互联网公司，因为未来所有的企业都会有互联网部门，而互联网世界离不开前端开发，像淘宝、阿里巴巴、支付宝、腾讯、京东、新浪微博等等大型的基于互联网的企业与产品，都需要优秀的前端高级开发人才。
不仅仅是互联网企业，随着O2O模式的越来越普及，传统企业越来越互联网化、云端化，前端开发人才需求越来越多，人才缺口高达上百万。
招聘网站上现在的前端开发工程师的平均薪酬已经达到了12926元，需求巨大，前景广阔，薪资还高。

3、你适不适合学习前端开发？
如果你已经有了传统web基础(css+div)，那么是时候提升你的前端开发技能了…
如果你没有接触过web前端开发，那么如果你经常上网，冲浪，希望要了解互联网世界背后的故事，可以先从web前端开始了解，因为这是开启互联网世界大门的钥匙…
web前端JS课程的核心特点。
web前端课程的核心特点是：我们不仅仅要学会制作一个网页，一个特效。
更多的是我们要用web前端开发传统应用程序，我们做pc端，移动端，各种响应式，web 游戏，web 企业管理系统，web 移动程序，开发一个大规模项目，html5游戏，甚至用js开发传统高级语言才能做的数据库交互，不用后台语言，就靠我们js做后台，流行大趋势……

4、课程模块介绍。
未来需要什么，我们就需要学什么：
模块1：基础入门阶段；
模块2：web移动开发– html5、 css3、
模块3：html 5 游戏— html5 、canvas；
模块4：用js去做传统java 、NET、 PHP才能做的数据库 *** 作，服务器编程。— ajax 、nodejs；
模块5：大型BS、云计算、项目开发（比如淘宝，京东）–面向对象、设计模式、大型项目分层架构思想（比如MVC，MVVM)、js框架、web前端架构、js组件；

5、学习方法、薪资目标。
两大基础，内外双修
两大基础：js基础（蹲马步，基础中的基础–函数，事件，语句等）、面向对象（基础）。内外双修：
内掌握面向对象编程思维，模块化编程思维，大型项目分层编程思维，大型项目团队如何合作；
外学习一些前辈总结出来的最佳编程实践：设计模式，比如能够保证全局唯一的单例模式，创造万物的工厂模式，模拟现实中介的中介模式，代理模式，以及所有业界都在谈，都在吹，都在用的依赖倒置，依赖注入，面向切面编程等。
结语：年前，随着iPhone的兴起，iOS开发火爆中国。当年的行动者，如今已经成为百万富翁！今天，随着HTML5等WEB前端技术兴起，前端开发的大潮已经袭来！赶快行动，让青春不留遗憾，占领行业制高点，主动权就再你的手中！

CSS部分

盒子边倾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止点击事件/鼠标事件“穿透”

div {    pointer-events: none;   /链接啊，点击事件啊，都没有效果了/ }

用来控制元素在移动设备上使用滚动回d效果

main{
-webkit-overflow-scrolling: touch;
}

可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况

文字渐变效果

text-gradient{    background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text;    color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}

实现圆弧

clip-path: ellipse(80% 60% at 50% 40%);

JS部分

JavaScript中检测数组的方法

(1)、typeof *** 作符

这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object
(2)、instanceof *** 作符

这个 *** 作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性

const arr = []
consolelog(arrconstructor === Array) // true

(4)、ObjectprototypetoString

const arr = []consolelog(ObjectprototypetoStringcall(arr) === '[object Array]') // true

(5)、ArrayisArray()

常用的字符串 *** 作

字符串转化toString()

字符串分隔split()

字符串替换replace()

获取长度length

查询子字符串 indexOf

返回指定位置的字符串或字符串编码 charAt charCodeAt

字符串匹配 match

字符串拼接concat

字符串的切割或提取slice() substring() substr()

字符串大小写转化 toLowerCase toUpperCase

字符串去空格 trim() 用来删除字符串前后的空格

其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()， 参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重

const str = '11122223333'const uniqueStr = [new Set(str)]join('')

常用的数组 *** 作

1、Arraymap()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、ArrayforEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Arrayfilter()
此方法是将满足条件的元素作为一个新数组返回
4、Arrayevery()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Arraysome()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Arrayreduce()
此方法为所有元素调用返回函数
7、Arraypush()
在数组最后面添加新元素
8、Arrayshift()
删除数组第一个元素
9、Arraypop()
删除数组最后一个元素
10、Arrayunshift()
在数组最前面增加元素
11、ArrayisArray()
判断是否为一个数组
12、Arrayconcat()
数组拼接
13、ArraytoString()
数组转化为字符串
14、Arrayjoin() 
数组转化为字符串，并用第一个参数作为连接符
15、Arraysplice(开始位置，删除个数，元素)
其中reduce使用方法为：

arrreduce(callback,[initialValue])
跳过第一个索引。如果提供initialValue，从索引0开始。

callback （执行数组中每个值的函数，包含四个参数） 
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素） 
3、index （当前元素在数组中的索引） 
4、array （调用 reduce 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，

数组去重：

const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [new Set(arr)]

常用对象方法

1、Objectassign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Objectis()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型， 应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Objectkeys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、ObjectdefineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性

var a = {};ObjectdefineProperty(a, 'name', {    value : 'kong',    enumerable : true //该属性是否可枚举})

5、ObjectdefineProperties()
可添加多个属性,与ObjectdefineProperty()对应,
6、isPrototypeOf

function a(){}
var b = new a();consolelog(aprototypeisPrototypeOf(b));//true

安卓监听可视区域变化，让输入框移动至可视区域

if (/Android/gitest(navigatoruserAgent)) {          windowaddEventListener('resize', function () {            if (documentactiveElementtagName === 'INPUT' || documentactiveElementtagName === 'TEXTAREA') {              windowsetTimeout(function () {                documentactiveElementscrollIntoViewIfNeeded();
             }, 0);
           }
         });
       };

vue中平滑滚动到某个位置

this$refsrulescrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加参数

/
向URL追加参数
@function stringifyUrlArgs
@param {string} url - URL路径
@param {object} params - 参数对象
@return {string}
const stringifyUrlArgs = (url, params) => {
 url += (/\/)test(url) '&' : ''
 url += Objectkeys(params)map(key => `${key}=${params[key]}`)join('&')  return url
}

解析URL参数

/
解析URL参数
@function parseUrlArgs
@param {string} url - 字符串
@return {object}export const parseUrlArgs = url => {  const arr = urlmatch(/([^=&]+)(=([^&]))/g) || []  const args = arrreduce((a, v) => {
   a[vslice(0, vindexOf('='))] = vslice(vindexOf('=') + 1)    return a
 }, {})  return args
}

好用的JavaSrcipt库与模块（包）

日期时间处理库

1、monentjs
2、dayjs
day相对于monent要轻量许多

高精度数学运算

number-precision

NPstrip(num)         // strip a number to nearest right numberNPplus(num1, num2, num3, )   // addition, num + num2 + num3, two numbers is required at leastNPminus(num1, num2, num3, )  // subtraction, num1 - num2 - num3NPtimes(num1, num2, num3, )  // multiplication, num1 num2 num3NPdivide(num1, num2, num3, ) // division, num1 / num2 / num3NPround(num, ratio)  // round a number based on ratio

实用工具库

Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等

第一阶段：前端页面重构。主要内容包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学完此阶段，学员可胜任Web前端开发工程师/前端页面布局与重构工程师，就业薪资为4K-6K；
第二阶段：JavaScript高级程序设计、PC端全栈开发。主要内容包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。学完此阶段，学员可胜任HTML5大前端工程师、高级HTML5大前端工程师、网站开发工程师、移动前端开发工程师，就业薪资为6K-10K；
第三阶段：Nodejs后端开发、Vuejs前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架。学完此阶段，学员可胜任高级HTML5大前端工程师、全栈工程师、移动前端App开发工程师、微信开发工程师、小程序开发工程师、数据可视化开发工程师，就业薪资为10K-15K。

---