编程导航学习网站：学编程、做项目、拿 Offer！
企业高频面试题库：开始刷题，面试遇原题！
精选简历模板大全：1 分钟搞定简历！
AI 资源导航网站：获取最新 AI 黑科技！
1 对 1 模拟面试：随时随地提升面试能力
前端开发求职高频面试题：开始刷题
⭐️ 建议先观看鱼皮的视频导读：2025 年最新保姆级前端学习路线
前端开发，简单来说就是 开发用户能看到、能交互的网页界面。从静态的展示页面，到动态的 Web 应用，再到如今的复杂单页应用（SPA）、移动端 H5、小程序、桌面应用，前端的应用领域越来越广，技术栈也越来越丰富。
为什么要学前端呢？
首先，前端是编程领域中最容易入门的方向之一，因为能立刻看到效果，写几行代码就能在浏览器里呈现出漂亮的页面，非常有成就感！其次，前端的岗位需求量大，无论是互联网公司还是传统企业，只要有网站、有 App，就需要前端工程师。第三，前端的技术生态非常活跃，新技术层出不穷，能让你保持学习的热情。
学好前端，你能做什么呢？
可以开发企业官网、电商平台、管理系统、移动端 H5 页面、微信小程序、桌面应用，甚至是游戏界面、数据可视化大屏等等，应用场景非常广泛。
特别是在 AI 时代，前端开发也有了新的机会！AI 应用需要友好的用户界面，需要前端工程师来开发 AI 对话界面、AI 内容生成页面等。而且现在有很多 AI 辅助编程工具，能大大提升前端开发效率（Vibe Coding），让前端专注于做更有挑战的工作。掌握前端 + AI，将会拥有更强的竞争力。想了解更多 AI 工具和资源，可以访问鱼皮的 AI 资源大全。
学习前端开发后，常见的就业方向包括：
Web 前端开发工程师：负责网站前端页面开发，这是前端最主流的就业方向。工作内容包括还原设计稿、开发交互功能、前后端联调、性能优化等。需要熟练掌握 HTML、CSS、JavaScript 以及至少一个主流框架（Vue 或 React）。
移动端 H5 开发工程师：专注于开发移动端 H5 页面，需要熟悉移动端适配、触摸事件、移动端性能优化等。一般需要掌握 Vue 或 React，以及移动端 UI 框架（如 Vant）。
全栈开发工程师：既能做前端也能做后端，能够独立完成整个项目的开发。需要在前端的基础上，额外学习后端技术（Node.js、Java、Go 等）和数据库。关于 Node.js 的详细学习，可以查看 Node.js 学习路线。
小程序开发工程师：开发微信小程序、支付宝小程序等。需要熟悉小程序框架（原生或 uni-app、Taro 等跨端框架）。
前端架构师：在有丰富的前端开发经验后，可以往架构师方向发展，负责前端技术选型、工程化建设、性能优化、团队规范制定等。
可视化工程师：专注于数据可视化、3D 可视化等方向，需要熟悉 ECharts、D3.js、Three.js 等可视化库。
低代码平台开发工程师：开发低代码平台，让非技术人员也能通过拖拽组件来创建应用。需要深入理解前端工程化、组件化、编译原理等。
下面是完整的前端学习路线图，帮助大家理清学习脉络：
1）相信自己有能力：前端是最容易入门的编程方向，不要被各种新技术吓到。相信自己有能力学会，那么你就真的会学会！
2）前端学习一定要以培养兴趣为主，不要一上来就啃理论。建议从实战开始，边学边做，看到自己写的代码在浏览器里呈现出效果，会很有成就感。
3）善用 AI 工具：AI 时代学前端太幸福了！可以让 AI 帮你生成 HTML/CSS 代码、解释 JavaScript 概念、Debug 报错、甚至生成整个页面 / 项目。特别推荐跟着鱼皮的 AI 程序员技术练兵场项目 学习如何用 AI 辅助前端开发。
4）多敲代码，多做项目：前端学习不能靠死记硬背，一定要多敲代码！建议跟着视频把每个例子都敲一遍，然后自己做一些小项目。忘了就查文档，不要强行记忆。
5）循序渐进，不要贪多：前端的知识点非常多，不要想着一下子全学会。按照路线一步步来，先打好基础、再学框架、再做项目、最后拓展视野。
这是前端开发的入门阶段，主要学习前端三件套：HTML、CSS、JavaScript。HTML 是网页的骨架，CSS 是网页的样式，JavaScript 是网页的灵魂。掌握这三个技术，你就能开发出基本的网页了。
了解和实践前端三件套（HTML、CSS、JavaScript）的基础语法，并能使用开发工具独立开发一个留言板网站。
开发工具【必学】：
工欲善其事，必先利其器。
HTML【必学】：
HTML 用于定义网页的结构，是前端的基础。
CSS【必学】：
CSS（层叠样式表）用于设计网页的风格和布局，让网页变得美观。
JavaScript【必学】：
JavaScript 是前端的灵魂，具有函数优先的轻量级编程语言，用于实现网页的交互功能。
ES6+ 特性【建议学】：
ES6+ 是 JavaScript 的新语法特性，现代前端开发必须掌握。
1）重点是 JavaScript：HTML 和 CSS 相对简单，几天就能学会。JavaScript 是前端的灵魂，一定要多花时间学，多写代码练习。
2）善用浏览器开发者工具：学会使用 Chrome 开发者工具调试代码，能大大提升学习和开发效率。
在掌握了前端三件套的基本语法后，这个阶段要深入学习 JavaScript 的高级特性，并了解浏览器、HTTP、计算机基础等知识，为实战开发打下坚实的基础。
熟悉前端三件套语法（尤其是 JavaScript），并了解互联网、域名、浏览器、服务器等基础知识，扎实前端程序员的基本功，为进入实战开发做准备。
前端基础知识【建议学】：
计算机基础【建议学】：
这个阶段的重点是深入学习 JavaScript，包括 ES6+ 新特性、异步编程（Promise、async/await）、闭包、原型链等概念。建议看《JavaScript 高级程序设计》这本书，是前端必读经典。
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，主要目的是提高开发效率，减少不必要的重复工作。这个阶段你将学习主流前端框架（Vue 或 React）、脚手架、组件库、构建工具等，并能开发完整的前端项目。
至少学会一门主流的前端开发框架（Vue 或 React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线。
研发流程【必学】：
代码托管【必学】：
集中存储、备份你的代码，还能和团队成员协作开发。
Node.js【必学】：
一个开源和跨平台的 JavaScript 运行时环境，是前端开发的基础工具。
前端开发框架【必学】：
解决特定的问题，提高开发效率、简化代码复杂度。
前端封装库【建议学】：
脚手架【必学】：
快速生成新项目的目录模板，提升开发效率和开发舒适性。
前端架构设计【建议学】：
一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。
CSS in JS【建议学】：
用 JavaScript 来写 CSS。
CSS 预编译【建议学】：
使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。
开发调试【必学】：
本地开发时热更新，提升开发效率。
测试【建议学】：
代码质量【必学】：
构建工具【必学】：
CI / CD【建议学】：
通过在应用开发阶段引入自动化来频繁向客户交付应用。
部署【建议学】：
监控告警【建议学】：
1）必须学一个主流框架：Vue 或 React 二选一，建议新手从 Vue 开始学，因为 Vue 的学习曲线更平缓、中文资料更多。
2）做一个完整项目：学完框架后，一定要从 0 到 1 做一个完整的项目。强烈推荐跟着鱼皮的 前端项目教程 学习，涵盖 Vue 和 React 两个方向，从新手入门到企业级项目都有。
3）补充相关技术学习：前端工程化涉及很多技术栈，可以结合编程导航的其他学习路线系统学习，比如 TypeScript、Node.js、小程序开发、Next.js 等。
框架和组件库：
Node.js：
工具和架构：
部署相关：
相关学习路线：
做项目是学好前端的关键！学完框架后，要立即通过实战项目巩固所学知识。
通过实战项目巩固所学知识，积累项目经验，提升解决实际问题的能力，为后续的优化和求职准备优质的简历项目。
鱼皮原创前端项目（强烈推荐，按难度排序）：
新手入门项目（建议全部完成）：
企业级项目（选择 2 - 3 个）：
前端专项（进阶学习）：
免费项目合集（快速入门）：
1）建议按难度递进：先做新手入门项目（至少 2 个），掌握基本的项目开发流程，再挑战企业级项目。
2）每个项目都要完整完成：不要只看教程不动手，一定要自己敲代码、调试、上线。做完项目后，在阶段 5 可以对项目进行性能优化。
3）做完项目要总结：写项目总结文档，画架构图，准备好面试时的项目介绍。
4）适当优化和扩展：在原有项目基础上增加自己的想法，提升简历区分度。
前端优化是指通过各种分析和优化手段，提高网站的性能和用户体验。这个阶段可以将阶段 4 做的项目进行优化。
实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站和原网站进行对比，得到一些数据和体验上的明显提升。
性能优化【建议学】：
用户体验【建议学】：
兼容性【建议学】：
SEO【建议学】：
搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
安全【建议学】：
1）性能优化是面试重点：前端性能优化是大厂面试必问的内容，一定要系统学习。
2）从实际项目入手：学习性能优化最好的方法就是优化自己做过的项目。使用 Chrome 的 Lighthouse 工具分析项目的性能。
前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术，包括静态站点构建、移动应用开发、桌面应用、小程序、Serverless、云开发、低代码等。
能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、桌面应用等。
静态站点构建【建议学】：
大前端【建议学】：
前端技术的融合更加紧密，应用的领域也更加广泛，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。
Serverless【可不学】：
一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署。
云开发【可不学】：
云端一体化的后端云服务，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。
低代码【可不学】：
无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。
1）按需学习即可：前端生态的内容非常广（小程序、App、桌面应用、Serverless 等），不需要全学，根据你的兴趣和求职方向选择性学习。
2）小程序开发是很多公司的需求，建议学习一下。
相关学习路线：
求职是一个漫长的过程，建议拉长战线，尽早准备。这个阶段主要是准备简历、刷面试题、参加面试，最终找到理想的工作。
1）提前做规划：尽早做规划，明确自己的求职目标（Web 前端、小程序、全栈等），针对性地准备。建议至少提前 3 个月开始准备。推荐阅读鱼皮的 保姆级求职指南。
2）打磨简历：简历是你的第一张名片。前端是个看作品的行业，简历上一定要有 2-3 个拿得出手的项目，最好能部署上线，在简历上提供访问链接。建议使用 老鱼简历 制作简历，关于如何写好简历，推荐学习鱼皮的 保姆级写简历指南。
3）多刷面试题：使用 面试鸭 刷题，支持按公司、题型、难度筛选。前端的面试题主要考察 HTML、CSS、JavaScript 基础，框架（Vue/React），以及计算机基础、算法、项目经验等。
5）善用 AI 模拟面试：使用 AI 模拟面试 提前练习。
6）看面试题讲解视频：关注 面试鸭 B 站账号，有大量面试题讲解视频。
更多求职干货：编程导航求职干货分享
前端基础面试题：
前端框架面试题：
综合面试题：
大厂面经：
前端未来可能的发展趋势和热门技术，建议关注但不用急着深入学习。
关注前沿技术，持续进步。
前端未来趋势【可不学】：
保持对前端新技术的关注，但不要盲目追新，先打好基础，再根据实际需求学习新技术。
虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。
刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。
于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！
通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。
在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。
看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！
但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。
界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。
在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。
在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。
在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！
哦，写得渐入佳境，我都忘了，自己是一名后端工程师（笑）。所以本路线是结合了我的前端学习经历和大量资料整理而成的，希望能对大家有所帮助。
总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。
还有一个学任何编程技术都要注意的点：全程多敲代码！多敲代码！多敲代码！
初级前端工程师：能通过 Vue/React 框架完成公司的需求，比如还原设计稿、开发交互、前后端联调等。重点是要熟练使用框架和组件库，能独立完成功能开发。
中级前端工程师：除了能完成需求，还要能搭建项目架构、开发通用组件、进行性能优化、解决疑难问题等。需要熟练使用前端工程化工具（Webpack、Vite 等），了解框架原理。
高级前端工程师 / 架构师：要了解常用框架的运行原理和机制，能做技术选型、架构设计。最好有一个自己擅长的领域（如低代码、可视化、性能优化等），并且积极参加开源项目和技术分享。
前端开发是一个充满创造力和成就感的领域，能让你的想法快速变成现实。虽然前端的知识点很多、技术更新很快，但只要按照正确的路线学习，一步步积累，一定能成为优秀的前端工程师。
学习要点总结：
特别是在 AI 时代，前端开发有了更多可能性。AI 辅助编程能大大提升开发效率，AI 应用需要优秀的前端界面。掌握前端 + AI，将会拥有更强的竞争力。
希望这份学习路线能够帮助大家少走弯路，更高效地成为前端工程师。加油小伙伴们！💪
1）程序员学习交流圈：极客教程、实战项目、求职宝典
2）程序员面试八股文：实习/校招/社招高频考点、企业真题解析
3）程序员写简历神器：专业模板、丰富例句、直通面试
4）AI 知识资源大全：前沿技术、最新 AI 资讯、提示词大全
5）1 对 1 模拟面试：实习/校招/社招面试拿 Offer 必备
