Web 前端的学习路线如何规划？

黑马程序员官方

于 2023-04-17 14:38:46 发布

阅读量1.1k

点赞数 2

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/itcast_cn/article/details/130199662

版权

每天自学6小时，5进度不错的话，6个月左右。时间安排如下：

HTML+CSS（移动端布局）：20-25天
JavaScript（基础到进阶）：20天
数据交互&异步编程（ajax、axios、async、promise）：15天
综合PC端实战项目（API接口、Bootstrap、Echarts、token、axios）：10天；
框架前置课（这里主要是了解Node.js）重点学习：模块化、npm、webpack大概10天；
掌握vue3.0框架技术：15-20天左右
结合上述内容可以写一个项目：12天
了解TypeScript基础语法：5天
小程序开发，最好结合项目直接学习：12天
如果可以完成TypeScript相关实战项目：12天
接下来就是做好面试相关准备，准备简历、面试15天。

有一个观点要纠正一下，前端找工作的标准不在于时间层面上学了多少。而是，技术层面上在掌握了哪些技术。

技术参考图

一、对标一下企业招聘需求

网易：

掌握HTML、CSS、Js，了解http协议以及相关开发调式工具
掌握一定的前端框架（React、Vue、Angular、jQuery等）
掌握基础数据结构的原理和应用

百度：

精通JavaScript，包括基本的对象以及操作、DOM操作、时间、Ajax、兼容性、ES6等；
深刻理解web标准，对语义化、可用性、可访问性等相关知识有实际的了解和实践经验
掌握MVVM框架的原理和使用，熟练使用React或Vue有限
了解业界情况，熟悉Redux、Node、小程序、Spark等

字节：

扎实的计算机基础知识、熟悉常用的数据结构、算法和设计模式，并且可以在日常研发中灵活使用；
深入理解web前端开发技术，包括HTML/CSS/JavaScript等
掌握至少一种主流前端框架，有实际项目研发经验
熟悉网站性能优化，了解浏览器实现原理
熟悉交互设计理论，能够将优秀的交互设计落地到产品中；
能够独立完成一个复杂模块或者项目的研发工作
具备较强的责任感、团队合作精神、逻辑思维能力和表达能力

二、前端应该掌握什么技术去找工作

上一个阶段给大家汇总一些大厂的招聘要求，我们把目标定的高一点，这样确保自己所掌握的知识是全面的。

前端学习课程分享：

新手入门： HTML5+CSS3+实战项目 → 移动web

JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 数据交互 & 异步编程Ajax\Git

VUE开发： 框架前置课Nodejs&es6 → Vue2+Vue3全套

React + 微信小程序： React → TypeScript → 微信小程序

黑马程序员前端：2023年Web前端开发学习路线图12 赞同 · 2 评论文章正在上传…重新上传取消

基础方面：

前端HTML+CSS+JavaScript是一定要牢固的，所有语法和知识点都要掌握。这些也是面试必问的问题，后面的话ES6以及新特性、原型链、Event Loop等等。这些知识，学习的时候一带而过，但是后期参与面试之前都需要反复去看，去刷题。

框架方面：

目前比较火爆的就是React、Vue、Angular，大家总是会说大厂用React多，其实不是，也会用vue的。没有什么绝对的，但是学的话，建议初学者和小白选择Vue，肯定是好入门一点。首先是纯中文的文档，而且有最佳解决方案。

简单分享学习步骤：先学基础语法—>高级用法—>掌握框架原理。

在框架的学习之中，实战肯定少不了。不管你是应届生还是转行。面试大厂还是小厂，都需要有实战经验。刚开始大家都会觉得自己做不了项目，没有全局概念。这些都很正常。

项目学习的步骤：找到培训机构项目课—>自己动手练习—>看书—>在GitHub找开源项目—>跑通。

三、前端自学方法

①都知道前端从三驾马车HTML+CSS+JavaScript开始，但是这三驾马车背后是碎片化的场景，不管是跨平台还是语言特性都会让初学者觉得很迷茫。所以大家在学习的要更注重最佳实践。

②都知道前端技术更新很快，语言基础很重要。但是也要注意：服务器端渲染、HTTP 3.0，使用 Lerna、yarn workspaces 构建 monorepo 项目，框架的原理、演进，框架间的对比和虚拟DOM，等等。

③ 前端工程化很重要，任何一个在职的前端都逃不开的工作就是【基础构建】和【项目架构构建】，所以课程中是否结合了webpack、Lerna 等工具，为大家还原一个真实的“基建”场景，深入项目组织设计，并落实代码规范工具设计。很重要！

④ 目标是大厂的同学们，要注意JavaScript处理各种数据结构，强化前端算法的理解和掌握！

四、前端全套笔记分享

HTML+CSS+项目

在基础到一些特性都学习结束之后，可以用一个大型的项目多页面的作为自己学习成果的检测。
HTML+CSS项目《品优购》完整笔记+源码（万字版可复制）：

JavaScript非常重要

基础部分（定义变量、函数、数组、字符串、内置函数、内置对象）——>面向过程的编程思想（在这里可以试着用自定义按钮、自定义播放器练习）——>面向过程编程思想（封装一些我们自己想的对象，提供有意义的接口）
笔记同样是为大家整理好了：

JavaScript最全拔高（更新中）

手把手教你学项目：