前端学习路线

前端学习路线整理 红色字体部分表示在学习完当前目标之后可以做的事情。

前端学习路线开篇

1.HTML：

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=1 选集：p1-p59)
学习目标：制作简单的html页面

---

2.CSS：

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=60 选集：p60-p273)
学习目标：让html变得好看起来

---

3.HTML5+CSS3：

【可以制作简单PC端的页面】

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=274 选集：p274-p407)
学习目标：学习HTML和CSS新特性

---

4.移动端web页面：

【可以制作简单手机端页面】

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=408 选集：p408-p432)
学习目标：学习了解移动端web页面

---

5.Flex伸缩布局：

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=433 选集：p433-p458)
学习目标：掌握Flex布局，可以更好的为html页面进行排版

---

6.rem(css中的单位)+Bootstrap(前端框架)：

【可以制作使用框架的手机端页面】

学习方式：视频-地址(哔哩哔哩pink老师：https://www.bilibili.com/video/BV1pE411q7FU?p=433 选集：p433-p458)
学习目标：掌握Flex布局，可以更好的为html页面进行排版

---

7.JavaScript语法：

【可以制作交互式前端页面】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1ux411d75J)
学习目标：掌握JS基本语法使用

---

8.jQuery：

【可以在项目中使用插件】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1a4411w7Gx)
学习目标：掌握JQ语法的使用，可以在项目中使用插件。

---

9.Ajax：

【可以实现简单的前后端交互】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1zs411h74a)
学习目标：了解前端和后端是什么，掌握Ajax使用，简单的前后端交互。

---

10.Vue基础：

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1V44y177zD?p=1 选集：p1-p140)
学习目标：了解vue基础语法。

---

11.Vue-cli3脚手架：

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1V44y177zD?p=141 选集：p141-p148)
学习目标：掌握Vue-cli脚手架的使用。

---

12.实战项目(Vue+element)：

【可以实现前后端分离开发】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1mQ4y1r7yZ )
学习目标：掌握Vue-cli脚手架的使用。

---

13.Vuex：

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1ea411A7GF)
学习目标：学习了解Vuex

---

14.Uniapp：

【可以前后端分离开发微信小程序、支付宝小程序、手机app等】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV1vh411B7Sb)
学习目标：学习掌握Uniapp使用，制作一个实战项目

---

15.React：

【可以前后端分离开发微信小程序、支付宝小程序、手机app等】

学习方式：视频-地址(哔哩哔哩：https://www.bilibili.com/video/BV14y4y1g7M4)
学习目标：学习掌握React语法，制作一个React实战项目

---

16.Angular：

【可以前后端分离开发微信小程序、支付宝小程序、手机app等】

学习方式：官方文档自主学习https://angular.cn
学习目标：尝试自主参考官方文档进行框架学习，制作一个实战项目，实战项目就存在官方文档当中。

---

特别篇：基于JS的后端语言Node

【可以前后端分离开发微信小程序、支付宝小程序、手机app等】

学习方式：在学习了14.ajax之后就可以开始学习了解，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1a34y167AZ)
学习目标：用node制作一个实战的后端项目。

---

面试时还需要掌握的基础知识（冲击大厂）

数据结构

【使用javascript实现数据结构和算法】

学习方式：学习js基础之后学习在进行数据结构和算法学习，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1yD4y127vy)

学习目标：掌握数据结构：数组、字符串、队列、栈、链表、集合、哈希表、二叉树；掌握的算法：排序、双指针、查找、分治、动态规划、递归、回溯、贪心、位运算、DFS、BFS、图，能动手完成实现算法。

---

计算机网络

学习方式：课本配合视频学习课本推荐，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1Mh411b7sM)

学习目标：掌握http协议，网络模型，tcp/udp协议，能用自己的语言表达出来。

---

操作系统

学习方式：通过视频学习，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1YE411D7nH)

学习目标：了解操作系统的进程、线程、进程/线程的的通信方式、调度算法、死锁、内存模型能用自己的语言表达出来。

---

设计模式

学习方式：通过视频学习，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1Nv411z7z6)

学习目标：了解软件设计模式能表达出来设计模式。

---

git版本控制

【使用git管理自己的项目】

学习方式：课本配合视频学习课本推荐，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1vy4y1s7k6)

学习目标：掌握git的使用方法，创建一个自己的git仓库。

---

Linux服务器

【操作linux系统】

学习方式：通过视频学习，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1Sv411r7vd)

学习目标：能介绍一些linux常用的命令，和一些实际应用过程中具体命令操作步骤。

---

正则表达式

学习方式：视频地址(哔哩哔哩：https://www.bilibili.com/video/BV12J41147fC)

学习目标：了解和掌握正则表达式使用。

---

工作后继续学习的知识

ES6+ 特性

学习方式：在学习了14.ajax之后就可以开始学习了解，视频地址(哔哩哔哩：https://www.bilibili.com/video/BV15a411J71o)

学习目标：了解 JavaScript 语法新特性和ES6的使用。

---

UmiJS

【学会使用UmiJS开发框架】

学习方式：通过视频学习基础和实战项目，基础视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1pG411879j) ；实战项目视频地址(哔哩哔哩：https://www.bilibili.com/video/BV1v94y197uj)
学习目标：完成一个基于UmiJS开发的企业级项目。

---