建议先看下鱼皮的两个视频 + 如何学习技术文章：

1. https://bcdh.yuque.com/staff-wpxfif/resource/rito86b49l53w1w2（前端 1 小时 - 1 小时 16 分钟）
2. https://www.bilibili.com/video/BV1nh411e7oG，超级详情的前端学习路线
3. https://bcdh.yuque.com/staff-wpxfif/resource/nxkhhu
4. https://www.bilibili.com/video/BV1Ax4y1m72q

下面分享一下，一个新人成为前端开发工程师的路线。可以将学习前端开发类比为建造一座房子。

课程特点：我会推荐视频教程和文字教程，这样无论是喜欢视频还是文字都可以无痛学习（我推荐在后面学习过程中渐渐转为文字教程）

学习目标：

1. 构建一个网站，并将其发布到网络上
2. 写出一份好的简历，并找到满意的工作

搭建前端开发环境

工欲善其事，必先利其器。所以搭建一个好的开发环境能让学习更加高效

编辑器：（推荐 vscode）

• Visual Studio Code：一款轻量级但功能强大的源代码编辑器，支持 Windows、macOS 和 Linux 平台。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并通过丰富的扩展生态系统支持更多语言和运行时环境。
• webStorm：WebStorm 是由 JetBrains 开发的一款强大的商业化集成开发环境（IDE），专为现代 JavaScript生态系统设计，支持如 React、Angular 和 Vue.js 等前端框架和库。它提供了诸如代码自动完成、重构、强大的调试器以及与各种构建工具和版本控制系统的紧密集成等高级功能，以提升 Web 开发的效率和体验。

游览器：（推荐 chrome）

• edge：微软的，基于 Chromium
• firefox：火狐
• chrome：最推荐，谷歌的

代码版本控制工具 Git 和 代码托管平台 Github

git 和 github 的关系，就像图书管理系统和图书馆，git 管理代码，GitHub 存储代码 在真正开始写代码之前，我建议先把 Git 和 Github 了解一下， 学习 Git 基础，掌握版本控制的概念和基本操作

1. 视频教程：https://www.bilibili.com/video/BV1HM411377j
2. 文字教程：https://www.bookstack.cn/read/git-tutorial/README.md

使用GitHub进行代码托管和协作开发：

1. 视频教程：https://www.bilibili.com/video/BV1hS4y1S7wL
2. 文字教程：https://docs.github.com/zh/get-started

如果有时间最好看一下这两个教程：

1. Linux 系统的登录工具 SSH：https://wangdoc.com/ssh
2. Linux 命令行 Bash 的基本用法和脚本编程：https://wangdoc.com/bash

为什么要先学会使用 git 和 github 的原因是： 学习的过程就是一个不断写代码的过程，那么有一个工具帮你记录你写的所有代码，这不仅仅有利于找工作中，别人能快速看到你的代码提交记录，还能让你每天提交代码后，能清晰感受到自己的进步，满满的成就感。

前端三大基石

HTML

构建网页的结构。类比于建造房子的框架

• 视频教程：https://www.bilibili.com/video/BV14J4114768/?vd_source=ce628a5bd43df277d141676215ef5ff3
• 文章教程：https://wangdoc.com/html/intro

相关资源：

1. MDN：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
2. 菜鸟教程 ：https://www.runoob.com/html/html-tutorial.html

从基础标签开始学习，一定要多敲代码，对每个标签都有一些印象，如果在开发中遇到问题？那推荐使用 AI 工具进行询问，推荐 AI 工具如下，后面不再重复：

1. 鱼聪明 AI：yucongming.com
2. devv.ai 更适合程序员的 AI 工具
3. 通义千问（他还有对应的 vscode 和 webstorm 插件）

CSS

网页样式设计，包括布局、颜色、字体等。类比于房子的内外装修

• 视频教程：https://www.bilibili.com/video/BV14J4114768/?vd_source=ce628a5bd43df277d141676215ef5ff3
• 文章教程：https://www.runoob.com/css/css-tutorial.html

相关资源：

1. 一份 css 规范和代码风格指导：https://github.com/chadluo/CSS-Guidelines

css 其实还是很复杂的，学习过程中，不需要把所有都记住，只要留个印象就好，后面遇到了知道使用哪种属性实现即可 如果你按照顺序学习完 HTML 和 CSS 后，那你可以稍作休息，检验一下是否真的掌握了这些知识，这里有两个任务：

1. 像玩游戏一样通关 freeCodeCamp中【响应式网页设计认证】关卡
2. 自己在不看视频教程的情况下，自己独立完成一个静态网站的开发（例如：仿京东 pc 端）。给大家看一下github star 很多的一个 纯 HTML + CSS 的网站：https://github.com/codewithsadee/vcard-personal-portfolio

完成这两个任务，我们要开始攀登第三座大山：JavaScript，也是编程语言排行榜常年前十的语言，有图为证：

JavaScript

实现网页交互的脚本语言，让网页“活起来”的魔法，类比于房子的电气和智能家居系统

• 视频教程：https://www.bilibili.com/video/BV1Y84y1L7Nn
• 文章教程：

1. 基础：https://wangdoc.com/javascript/
2. es6：https://es6.ruanyifeng.com/

相关资源：

1. mdn 学习 JavaScript：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript
2. freeCodeCamp JavaScript 通关：https://www.freecodecamp.org/chinese/learn/javascript-algorithms-and-data-structures-v8/

JavaScript 是前端核心技术，所以一定要多敲代码练习。遇到问题可及时询问 AI，或者其他人。如果有时间可以看以下书籍，提高 JavaScript 水平（非必需）：

• JavaScript 高级程序设计
• 你不知道的 JavaScript
• JavaScript 语言精粹
• Eloquent JavaScript
• JavaScript 权威指南

当学习完前端三件套后，这时候可以把之前做的静态作品添加上一些事件，让网站“活”起来。这时候如果你真的使用原始的技术（HTML，CSS，JavaScript）来做网站开发，你会发现开发好慢，尤其是开发一个复杂的网站的时候那就更慢，并且代码不好维护。那这时候就迫切需要提高效率的框架，那接下来就可以学习一套框架，来感受框架的魅力。

现代前端开发

必备环境：包管理工具

在学习框架之前，需要先学习一下包管理工具的知识，例如：npm ， yarn，pnpm 等等，要学习包的基本使用，包括安装、更新和管理依赖。学习过程中，你会发现你需要切换 node 版本 和 npm 镜像，推荐：

• node 版本管理：https://juejin.cn/post/7000652162950758431
• npm 镜像源切换：https://juejin.cn/post/7327937033321463820

前端框架

Vue（推荐学习）

学习 Vue 就学习 Vue3 就好，并且 Vue 2 也不再维护

• 视频教程：https://www.bilibili.com/video/BV1Za4y1r7KE
• 文字教程：https://cn.vuejs.org/
• 组件库推荐：element plus：https://element-plus.org/zh-CN/

vue 我觉得官网就是最好的教程，也是最好的文档，没有之一，vue 更容易上手，推荐学习 Vue

vue 服务端框架学习（非必需）：

nuxt：https://nuxt.com.cn/

有能力的请阅读英文文档：https://nuxt.com/，

因为文档更准确，是最新的

参考资源：

1. Vue 源码学习：https://juejin.cn/post/6925668019884523534
2. vue 社区两个大神：

• 尤雨溪：https://evanyou.me/
• antfu：https://antfu.me/

React（目前大厂使用最多的）

• 视频教程：https://www.bilibili.com/video/BV1ZB4y1Z7o8
• 文字教程：https://react.docschina.org/
• 组件库推荐：ant-design：https://ant.design/index-cn

新官方文档是 dan 大神重新写的，非常好，有条件的看英文版：https://react.dev/

react 服务端框架：

Next.js：https://www.nextjs.cn/ ，

有能力请阅读英文文档：https://nextjs.org/

参考资源

1. 阮一峰的 React 体系教程：https://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
2. 极客时间 React hooks 课程：https://time.geekbang.org/column/intro/100079901
3. dan 神：https://overreacted.io/

无论学习 Vue 还是 React ，学完后，都应该使用对应技术完成一个单页面应用，例如搭建自己的 blog，然后发布到互联网，哦对了，发布到互联网，并作为简历的个人项目。可以参考以下文章和视频教程：

1. https://www.bilibili.com/video/BV1rU4y1J785/
2. https://www.bilibili.com/video/BV1uK411p7Bp
3. https://zhuanlan.zhihu.com/p/554519860

构建工具和 CSS 预处理工具

构建工具

webpack（推荐学习）

• 视频教程：https://www.bilibili.com/video/BV14T4y1z7sw
• 文字教程：https://webpack.wuhaolin.cn/
• webpack 官网：https://webpack.js.org/
• 阮一峰的 webpack demo 代码：https://github.com/ruanyf/webpack-demos

vite

• 视频教程：https://www.bilibili.com/video/BV1Kd4y147gg
• 文字教程：https://cn.vitejs.dev/guide/

vite 是新一代打包工具，更快更简单，目前 vite 底层打包依赖于 gulp（打包工具），所以了解一下 gulp 对使用 vite 有帮助 学习目标：从 0 到 1 使用构建工具来打包发布一个项目，例如：写一个自己的脚手架，写一个自己 npm 包等等

CSS 预处理工具

less

• 视频课程：https://www.bilibili.com/video/BV1i54y1U7zY
• 文字教程：https://juejin.cn/post/6844903520441729037
• 官网：https://lesscss.org/

sass

• 视频课程：https://www.bilibili.com/video/BV1n94y1o7yS

学习课程的以下章

• 文字教程：https://www.ruanyifeng.com/blog/2012/06/sass.html
• 官网：https://sass-lang.com/

学习目标：使用预处理语言来重构项目，提高 css 编写效率

进阶学习

在前面学习中，你肯定会发现你有些知识没了解，例如：typescript，node.js，eslint，prettier 等等；这写知识现在也很重要，是开发大型项目必备的技能，接下来让我们开始吧！

TypeScript

• 视频教程：https://www.bilibili.com/video/BV1Xy4y1v7S2/
• 文字教程：https://wangdoc.com/typescript/

参考资料

1. 冴羽老师的 ts 课程：https://ts.yayujs.com/
2. ts 入门教程：https://ts.xcatliu.com/

学习目标：将项目使用 ts 进行重构

Node.js

• 视频教程：https://www.bilibili.com/video/BV1gM411W7ex

• 文字教程：https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction

参考：

1. 阮一峰的 node 教程（未完结）：https://github.com/wangdoc/nodejs-tutorial
2. node 极简教程：https://www.yuque.com/sunluyong/node

学习目标：写一个自己的脚手架，使用 node-puppeteer 来完成一些工作

css 框架

• tailwind css：https://tailwindcss.com/（实用优先的 CSS 框架）

• Bootstrap：https://getbootstrap.com/（前端开发框架，旨在确保网站应用具有响应性和移动友好性）

选择使用 Tailwind CSS 还是 Bootstrap 取决于项目需求和开发经验。Tailwind CSS 适合需要高度定制和独特样式的项目，而 Bootstrap 适合需要快速开发和标准化的项目。我们可以根据项目要求和团队特点选择最适合的框架。 学习目标：使用 CSS 框架简化样式编程，提高页面搭建效率

小程序开发

这里我就默认指：微信小程序，那无论是哪个技术栈都需要过一遍微信官方的小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

vue 技术栈：原生就是和 vue 很像

• 视频教程：https://www.bilibili.com/video/BV1oy4y1j75s/

• 文字教程：https://zh.uniapp.dcloud.io/resource.html

参考资料

1. https://juejin.cn/post/6899642866693423111

React 技术栈：Taro，大型小程序开发这是使用这个框架

• 视频教程：https://www.bilibili.com/video/BV1vM4m1R7K3

• 文字教程：https://docs.taro.zone/docs/

学习目标：做一个自己的微信小程序，并且上线微信小程序

设计模式

了解常见的设计模式能够写出更好，更容易维护的代码 参考资料：

1. https://juejin.cn/post/7306459858127732786
2. https://juejin.cn/post/7211026540129157180
3. https://github.com/lxj/javascript.patterns

前端工程化

代码质量工具（ESLint、Prettier，SonarLint）

eslint

• 视频教程：https://www.bilibili.com/video/BV183411r7YK

• 文字教程：https://juejin.cn/post/6990929456382607374

• 官网：https://eslint.org/

prettier

• 视频教程：https://www.bilibili.com/video/BV183411r7YK

• 文字教程：https://juejin.cn/post/6990929456382607374

• 官网：https://prettier.io/

SonarLint

非必需，我觉得很有帮助，一个能实时检测并高亮代码中的错误、漏洞和代码异味，帮助开发者提升代码质量。 学习目标：给项目添加 ESLint + Prettier 让项目保持统一的代码风格

前端性能优化

• 视频教程：https://www.bilibili.com/video/BV1Xy4y1f7gv

• 文字教程：https://godbasin.github.io/front-end-playground/front-end-basic/performance/front-end-performance-optimization.html

这里我也没有实践，从互联网找到了我觉得我未来会学习的资源，如果你有好的资源，感谢反馈 参考资料：

1. 入门前端工程：https://woai3c.github.io/introduction-to-front-end-engineering/

实战 & 参与社区开源

个人项目

• blog
• 其他

目标：做一个（多个）自己的项目，并且上线，写到自己的简历上

社区

• 给开源仓库提交 pr
• 发布文章到 掘金，思否，51CTO ，CSDN 等等

如果给知名开源仓库贡献代码，还可以写到简历上

自学（新人）可能会遇到的问题？

在我的自学中，曾经遇到了很多问题

HTML CSS 属性那么多记不住怎么办？前面学后面忘记怎么办？

前面学，后面忘记，是很正常的，那其实在最初学习的时候，就是要多写代码，留下相对深的印象，在使用的时候查询文档或者询问 AI 即可，不要说刚学习，即使一线前端开发，没有搜索引擎也是寸步难行（至少我是这样）

学习一段时间后没有热情怎么办？

创造一些有成就感的事情，记录，输出式的学习，学习本身是正反馈很少的，需要我们主动创建一些正反馈机制，那学习就会和打游戏一样快乐

遇到 bug 怎么办？学习遇到卡点怎么办？

1. 询问 Google
2. 询问 AI
3. 加入一些社区，例如编程导航知识星球，询问有前端经验的人

JavaScript 需要深入吗？

需要，但是一口吃不吃胖子，我觉得我 JavaScript 能力一般，如今框架为主的生态，JavaScript 即使能力一般，也能胜任日常工作。分享一个大佬的学习技术方法：“学会这门技术的基础，然后做一个项目，然后写一份对应工作的简历，入职后带薪学习”，我是认同的，因为工作会遇到很多场景，对技术提升是最快的，而且有压力，不得不学

如何准备面试

目前我理解的面试就是销售自己，那就是需要包装，需要渲染，让面试官觉得，我靠这个人我必须留下来，那面试前疯狂背八股文，刷算法，面试题等等都是需要的，面试和工作是两个事情 参考资料：

1. 程序员鱼皮的保姆级教程：https://bcdh.yuque.com/staff-wpxfif/resource/yvtiza4dmgumk3dt
2. 阮一峰的如何写一份有效技术简历：https://www.ruanyifeng.com/blog/2020/01/technical-resume.html
3. 简历的本质：https://github.com/Wscats/CV

后端如何快速入门前端？

我询问了我的后端搭档 松柏，问他如何快速入门前端，他的回答是： 我非常赞同，后端本身有编程基础，再学习一门语言是相对简单的，那前端 html + css 都是很简单的，JavaScript 又不是问题，那要学习的就是一个框架语言了，Vue 官方文档写的那么好，还有什么好说的呢！