前端自学路线图之前端自学大纲

第一阶段：前端自学–HTML5 + CSS3

---

此阶段的学习目标：

能够独立把美工提供的PSD效果图还原成PC端静态代码页面。

此阶段的市场价值：

具备PC端静态网页开发的能力，还达不到企业用人标准。为后面学习网页编程阶段打下坚实基础。

此阶段的重点知识：

• 掌握 HTML5 常用标签；

• 掌握 CSS 语法及使用技巧；

• 掌握CSS3新增选择器；

• 掌握CSS3新增样式属性；

• 掌握 DIV+CSS 布局方式；

• 掌握常见网页布局技巧；

• 掌握企业级、电商级网页开发基本的流程、规范；

• 掌握语义化、模块化、兼容性的PC端网页开发；

• 掌握 Photoshop 切图以及插件切图；

• 熟练使用调试工具进行页面调试；

• 掌握基本的动画效果。

第二阶段：前端自学–移动Web网页开发

---

此阶段的学习目标：

能够独立开发移动端页面，并适配不同移动端终端。

此阶段的市场价值：

具备移动端页面开发，但是还不能达到企业的用人标准。为后面学习网页编程阶段打下坚实基础。

此阶段的重点知识：

• 掌握CSS32D、3D变换、动画效果；

• 了解移动端屏幕、移动端浏览器、操作系统的不同；

• 掌握主流移动端调试方法；

• 掌握常用移动端适配方案（流式布局、flex布局、rem适配）；

• 掌握主流移动端页面开发技术选型与解决方案；

• 掌握CSS预处理器less的使用；

• 掌握常用移动端框架使用方法；

• 掌握常见移动端页面开发流程与规范；

• 掌握响应式布局开发；

• 掌握Bootstrap开发响应式页面；

• 掌握适配不同终端的移动端页面开发。

第三阶段：前端自学–JavaScript网页编程

---

此阶段的学习目标：

能够使用JavaScript/jQuery开发网页特效/网页应用。

此阶段的市场价值：

具备网页开发的基础能力(网页布局和网页应用开发)，但是无法和服务器交互，还达不到企业用人的标准。

此阶段的重点知识：

• 掌握JavaScript基本语法；

• 掌握常见JavaScript算法；

• 掌握DOM的各种操作；

• 熟练使用面向对象思想进行DOM编程；

• 掌握JavaScript的高级语法；

• 熟练使用jQuery操作DOM；

• 熟练使用和编写jQuery插件；

• 独立完成电商网站的页面搭建（包括HTML结构、CSS样式、JavaScript特效）；

• 掌握应对业务编程的能力；

• 掌握JavaScript常见兼容性方案；

• 掌握团队合作开发流程。

第四阶段：前端自学–Node.js与AJAX

---

此阶段的学习目标：

能够具备开发具有简单交互能力的网站，能够使用源代码管理工具。

此阶段的市场价值：

具备基本的网站开发能力，满足企业对初级前端开发的要求。

此阶段的重点知识：

• 能够建立客户端服务器交互模型，熟悉网络通信相关概念；

• 能够使用Node.js进行Web服务端开发；

• 能够掌握JavaScript异步编程模型；

• 能够掌握JavaScript模块化编程方式；

• 能够使用Node.js操作MySQL数据库；

• 能够理解HTTP协议；

• 熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧；

• 能够基于jQuery的Ajax相关API熟练开发常见的前端功能；

• 能够独立开发基于后台接口的动态网站、Ajax数据交互的项目；

• 能够独立完成企业网站从前台到后台的基本开发工作。

第五阶段：前端自学–Vue.js项目实战

---

此阶段的学习目标：

• 使用Vue技术栈开发企业级项目

• 掌握前后端分离的开发方式

• 掌握项目的打包和发布

此阶段的市场价值：

理解Vue的开发理念、内部运行原理，梳理使用Vue组件开发常见功能。满足前端开发行业中的常见需求。

此阶段的重点知识：

• 掌握使用Vue技术栈进行项目开发；

• 掌握源代码管理工具的使用；

• 熟练掌握前后端分离开发模式；

• 掌握使用主流框架开发门户网站、管理系统、移动Web等客户端；

• 掌握Webpack项目构建配置流程；

• 掌握Web项目的部署与发布模式；

• 掌握常见网站业务模块开发。

• 掌握使用echarts/d3.js进行大数据可视化交互开发；

第六阶段：前端自学–微信小程序

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！