适合我的前端学习路线（学习前端不迷路）_node.js天禹_五花肉三七分的博客-程序员宅基地

适合我的前端学习路线（学习前端不迷路）

小伙伴们想学习前端，但是却不知如何入手，上网查前端学习路线，第一页往往充斥着各种培训公司的广告，又或者是搜前端学习路线图时，出现大量的路线图导致你还是不能确定适合自己的路线。

所以在这里我向大家分享一下我走的前端道路。

一：大体上学习前端的两种选择

意思就是你是选择自学还是报社会上的培训班学。为什么要先提这一点呢，因为在我看来这也是学习前端的关键一步。那我给出我的一些看法建议。

1：如果你现在是大一，大二，时间充裕，并且对学习前端有坚定的信念，这里我建议自学，如果你所在的专业开设的有前端课程，你要多与课程老师交流，如果你前端学的差不多了，让课程老师注意到你了，那么以后他可能会带你做项目，甚至把他的一些就业资源推给你。

2：如果你现在是大三，甚至是大三下学期，你要走前端这条路。那肯定最开始是自学。跟着b站上的视频一步一步的来，这时候你要利用好最后的一个寒假和暑假（因为大四上学期就要秋招了）。如果到大四秋招了，你去面试，如果找到工作了，那万事大吉。如果没找到工作，你可以继续学习到大四上学期的一次招聘，但是在我看来你也可以选择报培训班。这就看你的选择了，因为一般培训班的收费在一两万左右。（我目前是大三，正在自学，不知道能不能赶上今年秋招）.

3：如果你是大四才开始学习前端，又或者在大四秋招找到的工作不满意，这个时候就可以选择报培训班。一般培训班的收费在一两万左右，在培训班里，因为它对你的就业有一些保证，所以在学习的过程中可能会很严格，你如果认真学习，肯定是能够学会的。并且听说有些培训班如果你最后没找到工作，它会退你一些学费，而且它应该会有内推的名额，但肯定是优异者优先，而且会给你包装简历等等。（我这样说，肯定有些小伙伴会心动，但我可不是打广告的呀，毕竟你也是拿钱换来的资源）。

二：我的前端学习路线（只代表我个人）

这张图想必不少人都见过，凭借一图之力劝退的多少前端初学者，哈哈。其实没那么夸张，实际上到第三个阶段就差不多能找工作了，但前提是你要对其特别精通，最好自己开发的有项目。

我是在b站学习的尚硅谷的学习视频，它还整理的有学习路线图：2021年度全网最全Web前端学习路线 - 哔哩哔哩专栏 (bilibili.com)。我不知道其他品牌的教育视频，但在我看来，尚硅谷的学习视频也确实良心。（哈哈，这也不是打广告，大家自行选择。有一个方法，那就是在b站搜索相关知识点，直接跟着播放量高的视频学习）。

那我也分阶段讲述我的前端学习之路。

阶段一：打好基础

html-->css-->js-->js高级-->less-->jQuery-->BootStrap-->AJAX

HTML:超文本标记语言（网页结构）。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

css：层叠样式表（添加样式）。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

js：让网页相应某种行为（让网页动起来）。学习视频：尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

js高级：详细讲述，以后用到，面试必面。学习视频：尚硅谷JavaScript高级教程(javascript实战进阶)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

Less: 是一门 CSS 预处理语言.学习视频：尚硅谷前端less教程_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

jQuery:是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。学习视频：尚硅谷jQuery教程(jquery从入门到精通)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

BootStrap：提供了优雅的HTML和CSS规范。学习视频：【极客学院】一周学会Bootstrap_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

AJAX:前后端交互。学习视频：尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

阶段二：学习框架前的铺垫

ES6-->Node.js-->MongoDB-->Webpack-->Git-->TypeScript-->promise-->axios

小伙伴们不要觉得内容多，实际上每个知识点的内容都不多，平均每个知识点会花费两三天的时间，最多的不会超过一周。

ES6：一些新语法。学习视频：尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩 (゜-゜)つロ干杯~-bilibili。

Node.js:对一些特殊用例进行优化，提供替代的API。学习视频：【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili。

MongoDB:非连接式数据库。学习视频：尚硅谷MongoDB基础教程(数据库精讲)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili。

Webpack：学习框架必不可少的。学习视频：尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

Git：是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。学习视频：尚硅谷Git教程全套完整版（12h深入掌握git）_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

TypeScript：学习过java的人对这应该很熟悉。学习视频：尚硅谷2021版TypeScript教程（李立超老师TS新课）_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

promise：学习框架必不可少的一部分。学习视频：尚硅谷Web前端Promise教程从入门到精通（2021抢先版）_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

axios：学习框架必不可少的一部分。学习视频：尚硅谷2021最新版axios入门与源码解析_哔哩哔哩 (゜-゜)つロ干杯~-bilibili（这个视频有几集会有问题，建议自己找视频学习）

阶段三：重头戏（框架）

React-->Vue-->Vue3-->微信小程序

React：一线城市多用框架。学习视频：尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

阶段四：实战。

实战就是多做项目了，先是跟着网上的一些项目做，多练习。最后团队完成一个有意义的项目。

React实战：尚硅谷React项目教程(react实战全栈谷粒后台)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

vue实战：尚硅谷Vue实战教程(企业级vue项目，Vue项目硅谷外卖)_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

阶段四：面试题

这里就让小伙伴们失望了。我也将要面临找工作了，但是在面试题上没什么资源，这里就仰仗万能的小伙伴了。求分享（哈哈）

三：相关技术的官网

html，css：HTML 系列教程 (w3school.com.cn)

js：JavaScript 教程 | 菜鸟教程 (runoob.com)

less：Less 中文网 (lesscss.cn)

jQuery：Download jQuery | jQuery

BootStrap：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

ES6：ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

Node.js：Node.js (nodejs.org)

MongoDB：MongoDB中文网

Webpack：webpack (docschina.org)

Git：直接搜github

TypeScript：TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

promise：JavaScript Promise 对象 | 菜鸟教程 (runoob.com)

axios：axios中文网|axios API 中文文档 | axios (axios-js.com)

React：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

Vue：Vue.js 教程 | 菜鸟教程 (runoob.com)

还有许多比较实用的网站比如：阿里的矢量图库，bootCDN等。

四：好书推荐

js红皮书和犀牛书。（如果你不懂什么意思，直接上淘宝搜就能找到，我还没买不知道全名叫什么，哈哈）。

五：结尾

希望大家多交流学习经验。目前我还没学完，做这个分享也花费不少时间，小伙伴们也不要吝啬一键三连哟。

如果有小伙伴想要一些资料的相关笔记代码，也可以评论私聊我。

本文链接：https://blog.csdn.net/m0_50789201/article/details/116940793

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

IO_STACK_LOCATION — I/O堆栈_木易云清的博客-程序员宅基地

I/O堆栈　　任何内核模式程序在创建一个IRP时，同时还创建了一个与之关联的 IO_STACK_LOCATION 结构数组：数组中的每个堆栈单元都对应一个将处理该IRP的驱动程序，另外还有一个堆栈单元供IRP的创建者使用(见图5-3)。堆栈单元中包含该IRP的类型代码和参数信息以及完成函数的地址。下图显示了堆栈单元的结构。 I/O堆栈单元数据结构：

笑男手札：SharePoint 2013 单一服务器场环境恢复数据库内容_普通网友的博客-程序员宅基地

SharePoint 2013 单一服务器场环境恢复数据库内容笑男的公司服务很多客户，当然，这些客户都很挑剔，所以一般情况下生产（Prod）环境的服务是不能停的。当然，如果你将包含相同网站集的数据库连接到同一个服务器场，报错！报错！报错！报错！报错！报错！报错！报错！报错还是好的，如果整个网站应用或者服务器场down了，啊哈~兄弟，你立马就是名人了！！！！在SharePo...

Fedora 安装VMware-tools注意事项_大疯疯的博客-程序员宅基地

最小化安装CentOS6 VMware-tools安装几点注意#./vmware-install.plbash:./vmware-install.pl :/usr/bin/perl:bad interpreter:No such file or directory.如果出现这个提示，则表明系统没有安装Perl环境，可以使用如下命令来提供Perl支持：#yum g

python-selenium-浏览器模式设置_Dolphin要发光的博客-程序员宅基地

我们做selenium UI自动化测试时，每次都需要启动浏览器、用例运行结束后再关闭浏览器浏览器启动相当的耗费时间，而如果在本地运行用例的话还会影响到工作这样肯定是不行的呀，所以机智的程序员们就想出了新的办法chrome浏览器的headless模式，可以让浏览器在后台运行，不需要加载样式和渲染，也可以让自动化测试更稳定浏览器模式设置常见的有无头模式和手机模式目录1. 无头模式1.1 Chrome 无头模式设置1.2. Firefox 无头模式设置2. 手机模..

详解onMeasure()(二)--利用onMeasure测量来实现图片拉伸永不变形，解决屏幕适配问题_Barving的博客-程序员宅基地

原文地址：http://blog.csdn.net/cyp331203/article/details/45027641 上一篇文章详细讲解了一下onMeasure/measure方法在Android自定义控件时的原理和作用，参看博文：Android自定义控件系列七：详解onMeasure()方法中如何测量一个控件尺寸(一)，今天就来真正实践一下，让这两个方法大显神威来帮我

Mybatis——helloWorld级程序_weixin_30793643的博客-程序员宅基地

1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> 3 <configuration&g...

随便推点

这份java集合框架面试题，让你轻松搞定面试官！_Java_Yhua的博客-程序员宅基地

这里写目录标题集合框架1. ArrayList 和 Vector 的区别。2. 说说 ArrayList,Vector, LinkedList 的存储性能和特性。3. 快速失败 (fail-fast) 和安全失败 (fail-safe) 的区别是什么？4. hashmap 的数据结构。5. HashMap 的工作原理是什么?6. Hashmap 什么时候进行扩容呢？7. List、Map、Set 三个接口，存取元素时，各有什么特点？8. Set 里的元素是不能重复的，那么用什么方法来区分重复与否呢? 是用