前端初学者学习路线

前端无论怎么变化，核心终究是：HTML，CSS，Javascript

注意，该学习路径是在短时间内学习的核心要点

每天学习7个小时计算

0.准备阶段

1. 要求学历至少大专以上
2. 英语要求会记住单词
3. 思维逻辑要求是正常人
4. 电脑一台
5. 开发工具vscode 网上下载
6. 关键核心：有对前端编码的兴趣和学习的毅力

1.入门阶段

学完可以做基本的静态网页，可以看面试题中的HTML，CSS部分，这个是非常基础的本分。

学习资源：https://www.bilibili.com/video/av80149248

学习时间：70h(2周)

学习内如下：

HTML

1. 语义标签：html5新标签

CSS

1. 选择器
2. 盒子模型
3. 定位、浮动
4. 动画
5. CSS常用属性：边框、圆角、背景、宽高、溢出
6. BFC
7. flex属性以及布局
8. css 常用单位：px、%、rem、vh、vw、em

HTML，CSS综合布局练习

1. 达到看到现有网站，自己心里很清楚怎么实现界面效果的
2. 响应式布局方案：%，rem, 媒体查询器，vh,vw,缩放
3. 看bootstrap，样式源码

2.Javascript基础

学完可以开发一个前端网站了,但距离实习还差很远

学习资源：https://www.bilibili.com/video/BV1HJ41147DG/?spm_id_from=333.788.videocard.1

学习时间：35h(2周)

学习内容如下：

1. js基础语法：变量、流程控制、循环、运算符、比较符、函数、数据类型、回调函数
2. dom编程：常用的增删改查dom的方法、属性、事件
3. bom编程：window常用的浏览器属性、方法
4. ajax、Fetch API
5. 浏览器本地储存

3.Javascript进阶

这个阶段的内容非常重要,关系到之后的进一步学习

学习资源：到掘金上面去搜索

学习时间：35h(1周)

学习内容如下：

1. js作用域
2. js原型链、继承
3. 闭包、立即执行函数
4. es5中的常用遍历函数
5. 引用数据与基础数据的区别，以及如何复制引用数据
6. this指向问题
7. js 事件过程

4.构建工具学习

学习时间：28h(4天)

学习资源：https://www.bilibili.com/video/BV1e7411j7T5?from=search&seid=15702833601474678402

学习内容如下：

1. nodejs 中的express 玩demo学习
2. webpack构建工具常用配置学习

5.Vue

主要看官网文档，加上github搜索项目练习

学习资源：https://cn.vuejs.org/；  https://www.bilibili.com/video/BV15741177Eh?from=search&seid=5456042360481253410

学习时间：70h(2周)

学习目标：

1. 熟练使用vue的各种语法；
2. 常用UI框架
3. SASS/LESS
4. vue-router
5. vuex
6. 浏览器环境调试方法

6.ES6

该阶段是js的新语法，必须掌握，工作中会使用

学习资源：https://www.bilibili.com/video/BV1xW411x7sw?from=search&seid=12056380761691782132

学习时间：70h(2周)

1. 新的变量定义，数据结构
2. 箭头函数
3. 对象新属性
4. promise、async、await
5. class

注意5，6会一起学习

7.代码管理工具

1. SVN
2. GIT

8.github，掘金搜索前端面试相关的面试题集锦，大量刷题，大量记忆(不要觉得low ,短时间内的高效方法)，但要理解搞懂

准备方向：

1. HTML
2. CSS
3. JS/ES6
4. Vue各种原理
5. webpack loader,plugin自定义
6. 常用排序算法
7. http协议，tcp握手，OSI7层网络模型，cookie/sesstion
8. event loop,宏任务，微任务
9. 跨域方式
10. 前端常用的设计模式
11. 性能优化
12. html,css是如何解析渲染的
13. js是如何执行的
14. 浏览器缓存

学习资源：

文档

https://www.w3school.com.cn/；

https://www.runoob.com/；

https://developer.mozilla.org/zh-CN/；

http://caibaojian.com/css3/；

https://v3.bootcss.com/css/；

https://es6.ruanyifeng.com/；

书籍：

1. 《JavaScript DOM 编程艺术 》
2. 《JavaScript高级程序设计》
3. 《你不知道的JavaScript 》
4. 《es6 阮一峰》
5. 《图解HTTP 》
6. 《高性能javascript》

书籍可以到XX多平台购买，虽是盗版的，但是纸张字迹都非常不错，物美价廉

网课：

腾讯课堂、网易课堂、bilibili、慕课网、极客学院 各大平台可以综合起来学习

遇到不懂的问题：

1. 多加前端技术qq群
2. 百度🔍

 

以上学习路径，是非常基础，全部学习完，0基础的朋友至少需要3个月；有编程经验的朋友，学习时间可以大幅缩减。

这个路径，主要面向快速学习，想马上工作的朋友；

在以后的工作中，需要不停学习，不断提高自己的技能