前端学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️）

编程导航学习网站：学编程、做项目、拿 Offer！

企业高频面试题库：开始刷题，面试遇原题！

精选简历模板大全：1 分钟搞定简历！

AI 资源导航网站：获取最新 AI 黑科技！

1 对 1 模拟面试：随时随地提升面试能力

前端开发求职高频面试题：开始刷题

⭐️ 建议先观看鱼皮的视频导读：2025 年最新保姆级前端学习路线

开篇介绍

前端开发，简单来说就是 开发用户能看到、能交互的网页界面。从静态的展示页面，到动态的 Web 应用，再到如今的复杂单页应用（SPA）、移动端 H5、小程序、桌面应用，前端的应用领域越来越广，技术栈也越来越丰富。

为什么要学前端呢？

首先，前端是编程领域中最容易入门的方向之一，因为能立刻看到效果，写几行代码就能在浏览器里呈现出漂亮的页面，非常有成就感！其次，前端的岗位需求量大，无论是互联网公司还是传统企业，只要有网站、有 App，就需要前端工程师。第三，前端的技术生态非常活跃，新技术层出不穷，能让你保持学习的热情。

学好前端，你能做什么呢？

可以开发企业官网、电商平台、管理系统、移动端 H5 页面、微信小程序、桌面应用，甚至是游戏界面、数据可视化大屏等等，应用场景非常广泛。

特别是在 AI 时代，前端开发也有了新的机会！AI 应用需要友好的用户界面，需要前端工程师来开发 AI 对话界面、AI 内容生成页面等。而且现在有很多 AI 辅助编程工具，能大大提升前端开发效率（Vibe Coding），让前端专注于做更有挑战的工作。掌握前端 + AI，将会拥有更强的竞争力。想了解更多 AI 工具和资源，可以访问鱼皮的 AI 资源大全。

就业方向

学习前端开发后，常见的就业方向包括：

1. Web 前端开发工程师：负责网站前端页面开发，这是前端最主流的就业方向。工作内容包括还原设计稿、开发交互功能、前后端联调、性能优化等。需要熟练掌握 HTML、CSS、JavaScript 以及至少一个主流框架（Vue 或 React）。

2. 移动端 H5 开发工程师：专注于开发移动端 H5 页面，需要熟悉移动端适配、触摸事件、移动端性能优化等。一般需要掌握 Vue 或 React，以及移动端 UI 框架（如 Vant）。

3. 全栈开发工程师：既能做前端也能做后端，能够独立完成整个项目的开发。需要在前端的基础上，额外学习后端技术（Node.js、Java、Go 等）和数据库。关于 Node.js 的详细学习，可以查看 Node.js 学习路线。

4. 小程序开发工程师：开发微信小程序、支付宝小程序等。需要熟悉小程序框架（原生或 uni-app、Taro 等跨端框架）。

5. 前端架构师：在有丰富的前端开发经验后，可以往架构师方向发展，负责前端技术选型、工程化建设、性能优化、团队规范制定等。

6. 可视化工程师：专注于数据可视化、3D 可视化等方向，需要熟悉 ECharts、D3.js、Three.js 等可视化库。

7. 低代码平台开发工程师：开发低代码平台，让非技术人员也能通过拖拽组件来创建应用。需要深入理解前端工程化、组件化、编译原理等。

学习路线图

下面是完整的前端学习路线图，帮助大家理清学习脉络：

整体学习建议

1）相信自己有能力：前端是最容易入门的编程方向，不要被各种新技术吓到。相信自己有能力学会，那么你就真的会学会！

2）前端学习一定要以培养兴趣为主，不要一上来就啃理论。建议从实战开始，边学边做，看到自己写的代码在浏览器里呈现出效果，会很有成就感。

3）善用 AI 工具：AI 时代学前端太幸福了！可以让 AI 帮你生成 HTML/CSS 代码、解释 JavaScript 概念、Debug 报错、甚至生成整个页面 / 项目。特别推荐跟着鱼皮的 AI 程序员技术练兵场项目 学习如何用 AI 辅助前端开发。

4）多敲代码，多做项目：前端学习不能靠死记硬背，一定要多敲代码！建议跟着视频把每个例子都敲一遍，然后自己做一些小项目。忘了就查文档，不要强行记忆。

5）循序渐进，不要贪多：前端的知识点非常多，不要想着一下子全学会。按照路线一步步来，先打好基础、再学框架、再做项目、最后拓展视野。

阶段 1：前端入门（20-45 天，仅供参考）

这是前端开发的入门阶段，主要学习前端三件套：HTML、CSS、JavaScript。HTML 是网页的骨架，CSS 是网页的样式，JavaScript 是网页的灵魂。掌握这三个技术，你就能开发出基本的网页了。

学习目标

了解和实践前端三件套（HTML、CSS、JavaScript）的基础语法，并能使用开发工具独立开发一个留言板网站。

知识点

开发工具【必学】：

工欲善其事，必先利其器。

• 浏览器
  • Chrome【必学】
  • Edge【建议学】
  • Firefox【建议学】
  • Safari
• 编辑器
  • VS Code【必学】
  • WebStorm【建议学】
  • Sublime Text【建议学】
• 文档笔记
  • Markdown 语法【建议学】
  • Typora【建议学】
  • 在线笔记（语雀、腾讯文档、石墨文档等）

HTML【必学】：

HTML 用于定义网页的结构，是前端的基础。

• 基本语法【必学】
• 常用标签【必学】
  • 分区 div
  • 标题 h1 ~ h6
  • 段落 p
  • 图像 img
  • 列表 ul / ol
  • 超链接 a
  • 表单 form
  • 表格 table
  • 框架 iframe
• 属性【必学】
• HTML5 特性【建议学】
  • 语义化标签
  • 浏览器支持
  • 多媒体标签
  • Canvas 画布
  • 本地存储
    • localStorage
    • sessionStorage
  • Web Workers【可不学】
  • 应用缓存【可不学】

**CS