2021年自学前端的总结，送给正在自学的你们！

我是从不分HTML和HTML5，不懂CSS2和CSS3开始学的。然后学了一段时间后试着重构天猫淘宝，但是没有一次完整做出来的。页面写道轮播图就写不下去了。js更是碰都没有碰过。看书看到js，闭包什么的以为自己懂了，一做题就出错。做的最好的东西就是跟着黑马的小课做的一个小程序。

一度要放弃，因为学的太乱了。还好坚持下来了，我要把我学习的坑分享给大家。希望每一个学习前端的人都能看到本篇内容~

学习路线：

• 基础：HTML+CSS页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发；
• 核心：web前端核心技术Javascript，ecnmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级算法，
• 高级：html5+高级Javascript开发，大数据可视化，webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装
• 框架：bootstrap，vue、react、angular、sass企业开发应用；

看下图：

先来给大家推荐一本书，不是说最好的书，但是很适合入门。我建议大家的学习方法是，先看书理解概念，然后根据概念学习模块。看视频+敲代码；在这就多说两句，我是搜了好多家视频，什么关注公众号总推荐小课，我就花个几块钱报名集训营开始学，还找了慕课，w3c，还有千锋的各种课程，还有腾讯课堂上面的一些小机构的各种课，好多时候上个集训营就要被忽悠报大额课了，后来在B站找到好多很全的前端课。我下面都会分享出来的。一定要边看边写，最好是ipad看课，电脑敲代码。这样学习进度非常快，最好加一些靠谱的交流群，不然好多时候找不到自己的问题所在。

回归正题：

这本书，每天看个两个小时，大概一个月就可以看完了，他都是概念+案例+习题，有一些避坑大家理解就好。

第一个边学边理解边敲代码阶段：html5+css3；

课程：前端小白零基础入门HTML5+CSS3 

在这个阶段主要学习的知识点：

• 浏览器与浏览器内核、语法以及使用、常用标签、语义化、表单元素、HTML、新增标签；
• CSS基本语法规范、常用的选择器用法与技巧、复合选择器使用、数职与单位、文字文本样式、CSS新增选择器
• CSS盒子模型、CSS背景技巧、圆角/阴影/过度、定位和浮动、伪类和伪元素、Chrome调式工具、CSS高级技、CSS常见布局技巧大全、网页开发规范以及流程、CSS企业级网页开发、网页开发常见问题以及解决方案、CSS常见兼容性问题以及解决方案、Css3新增属性、photoshop切图、cutterman插件的使用；
• 代码组织原则、电商类复杂的页面布局规范、CSS初始化技术比如Normalize.css使用、复杂的网页结构排版技巧、常见动画过度特效等；

上述阶段学习的话，建议学习一个月的时间，其实之前我不喜欢用学习时间规范内容，因为我觉得个人学习程度不一样。但是小伙伴们切勿像我一样，有的学习时间过长，知识点补来补去，有的时候又过短并不扎实。

第二个阶段：Javascript高级程序设计

• 课程：Javascript教程精讲（知识点精讲+贪吃蛇项目） 
• 课程：Javascript全面深入教程
• 课程：6天玩转Javascript基础教程

在这个阶段重点学习内容：

• 原生Javascript交互功能开发项目、面向对象进阶与ES5/ES6引用项目，还有工具库的自主研发项目；
• 基本的输入输出方法，变量、数据类型、类型转化、运算符、流程控制语句、数组、函数等等；
• 获取获取页面元素的常见方法、页面中事件和时间机制、操作元素样式和属性、新增元素和移除元素、BOM操作大全‘
• 常见的网页特效；JQuery的优势和选择器等内容；
• 另外就是建立面向对象是想，创建对象，Javascript的对象深入理解，闭包原理和使用场景。

说点容易理解的，其实这个阶段就是我们输入账号密码之后是否匹配成功，还有一些网页的弹框和页面点击的特效，浏览器的前进后腿还有缓存是怎么实现的。JS+算法，学明白了就是一名合格的前端。推荐书籍：《JavaScrip DOM编程艺术精讲》《Javascript高级程序设计》；

第三个阶段PC端全栈项目开发之后学习移动端全栈

• 课程：实战商城开发完整视频
• 课程：前端与移动开发基础入门到精通

在这个全栈阶段重点学习内容：

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

移动端项目开发重点学习内容：

(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

项目实战这个阶段是可以放在前面学习的，毕竟找点满足感。

第四个阶段NODE.JS与AJAX学习阶段：

• 课程：Vue.js + Node.js-构建音乐播放器新玩法 
• 课程：AJAX视频教程

本阶段是可以构建客户端服务器交互模型熟悉网络通信相关概念；能够使用Node.js进行web端开发，基于Node.js开发web应用；Express·RESTFul API，原声AJAX、Jquery的AJAX相关API使用，跨域请求以及解决方案；前端模板引擎；

第五阶段：REACT.JS项目实战

• 课程：Reactjs入门教程
• 课程：Reactjs精品教程 

小程序开发、ReactNative、各类混合应用开发。

第六阶段：Vue.JS项目实战

课程：Spring Boot+Vue.js+FastDFS实现分布式图片服务器 

第七阶段：微信小程序

课程：6天从入门到实战玩转微信游戏小程序 

小程序其实要是学，大概商城的课很多。真的去找的话，也有好多好玩的小程序，简单的有跳一跳，难一点的有人脸识别的小程序。

以上就是前端学习路径，下面说一下需要准备的东西。首先就是浏览器，Chrome和火狐，简易版编辑器还有webstorm编辑器，visualstudio code编辑器，photoshop，Git开源的分布式版本控制系统、集成环境软件WampServer、MySQL、微信开发者工具、Postman；

学习之前你应该有的手册就是html和css手册，还有js手册所有你需要学的，都可以去找手册帮助学习。

另外git和github，需要会一点，不一定有多精通。可以翻翻墙，看看github，学会用google输入关键字。自学的话，学完上面内容怎么也要八个月了。只要坚持！对以后工作什么的，现在养成的自学习惯都非常好的。