2025年前端学习路线、网站推荐及开发快捷键记录（持续更新中）

在前端学习过程中发现了很多好用的网站、资源和Vscode开发快捷键，作为自己的一个查询备忘录也分享一下：

---

前端学习路线

非原创，觉得有用，从这里粘贴过来的，以便自己学习：@运楚鲸01 的 2025年新版黑马程序员前端学习路线图

1. 基础知识

• HTML（超文本标记语言）：理解语义化标签、表单元素、多媒体内容等。

• CSS（层叠样式表）：掌握选择器、布局模型（如Flexbox, Grid）、响应式设计、媒体查询等。

• JavaScript（JS）基础：熟悉变量、数据类型、控制结构、函数、事件处理、DOM操作等。

2. 深入JavaScript

• ES6+特性：学习新的语法糖，如箭头函数、解构赋值、模板字符串、模块化等。

• 异步编程：理解回调函数、Promise、async/await。

• 面向对象编程（OOP）：类与对象的概念，继承，封装，多态性。

• 函数式编程（FP）：纯函数，高阶函数，不可变数据结构。

3. 工具与构建

• 版本控制系统（Git/GitHub）：管理代码版本，协作开发。

• 包管理器（npm/yarn）：安装依赖库，发布自己的包。

• 构建工具（Webpack/Rollup/Vite）：打包优化，代码分割，热更新等。

• 任务运行器（Gulp/Grunt）：自动化任务，比如压缩图片、编译Sass等。

4. 框架与库

• React.js：组件化思维，虚拟DOM，状态管理和生命周期方法。

• Vue.js：渐进式框架，双向绑定，指令系统，插件生态。

• Angular：基于TypeScript的企业级应用框架，模块化架构，依赖注入。

• 其他热门库：如Lodash（实用函数库），Axios（HTTP请求），Redux（状态管理）。

5. 测试与调试

• 单元测试：使用Jest或Mocha编写测试用例。

• 集成测试：确保不同部分协同工作良好。

• 端到端测试（E2E）：模拟真实用户行为，验证整个应用程序的功能。

• 调试技巧：浏览器开发者工具的使用，断点调试，性能分析。

6. 用户体验（UX）与界面设计

• UI设计原则：颜色理论，排版，视觉层次，可用性测试。

• 图形设计软件：Figma, Sketch, Adobe XD等，用于创建原型和线框图。

• 可访问性（Accessibility）：遵循WCAG指南，使网站对所有用户友好。

7. 性能优化

• 加载时间优化：图片懒加载，字体优化，减少重绘和回流。

• 缓存策略：服务工作者（Service Workers），CDN利用。

• 网络性能：DNS预解析，TCP预连接，HTTP/2，SSL/TLS加速。

前端学习网站推荐

1. bilibili：

• 尚硅谷2024最新Web前端学习路线：https://www.bilibili.com/read/cv5650633/?from=search&spm_id_from=333.337.0.0
• 黑马程序员2024年web前端开发学习路线图：https://www.bilibili.com/read/cv10431130/

2. YouTub：

• freeCodeCamp.org，很多制作精良的技术类学习视频：https://www.youtube.com/@freecodecamp，可配合freeCodeCamp.org网站进行学习。
  

3. 前端开发可查的文档：菜鸟教程和MDN

4. 在线编程的scrimba网站

进行html、CSS和javascript项目的编写，同时上面也有很多优秀的Vue、React教程可供学习。是国外一个很不错的前端学习网站。

5. 一个js学习的网站推荐：https://zh.javascript.i nfo/

可以当技术文档来使用。

6. 前端面试题宝典：https://fe.ecool.fun/

7. 汪同学的学习笔记Gitee地址

汪同学的学习笔记，上面有很多这个大佬的学习笔记和资料，不仅仅是前端的，包括后端和算法也有相应的笔记，值得推荐。

8. 很好的面试题QA文档：面试官https://vue3js.cn/interview/

9. Git 学习 实操：Learn Git Branching

---

vscode前端开发快捷键

1. 快速修改相同对象（字母或单词）：双击需要第一个需要修改的字母或单词–>多次按住Ctrl+d–>键入需要批量修改的对象内容。

2. 标签名{$}*5：快速生成5个一样的标签，如

   div{$}*5
   

   
   回车就会快速生成一个自增的div
   

3. 快速输入css样式中的宽高和背景颜色：
   比如：宽500高500背景颜色>w500h500bgc
   回车就得到下面代码：
   
   边框：输入bd回车

持续更新中