大家好，这里是大家的林语冰。freeCodeCamp.org 是一个友好的国际开源社区，社区爱好者已经达成"百大成就"，您可以在免费参与学习编程。祂由非营利组织运营，旨在帮助数百万忙碌的成年人过渡到挨踢领域。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Front End Developer Roadmap。
我们刚刚在 freeCodeCamp.org 油管频道上发布了前端爱好者的技能树。我们策划了一大坨顶级教程，涵盖成为前端开发者必知必会的所有核心技术。您可以在我们的频道上免费观看祂们。
完备的学习路线高达 80+ 小时。
在本文中，我们将简要概述您将在前端开发者学习路线中习得的技术。
前端开发是什么鬼物？
前端开发就像设计网站或 App 的外观。这关于您使用某事某物时祂们的颜值和质感如何。
后端开发者确保一切在幕后正常运行，而前端爱好者则专注于您的所见所得和与之交互的内容，确保祂易用并且在所有设备上颜值都都很高。
简而言之，前端开发者将设计转变为人们可以使用的实时网站和 App。
前端开发的核心围绕三种主要技术：HTML、CSS 和 JS（JavaScript）。我们稍后将详细解释这些技术，但现在只需知道前端开发中几乎所有内容都围绕祂们进行。
作为前端爱好者，为了确保网站设计能够无缝衔接各种设备、用户友好且符合客户愿景，您扮演的角色乃重中之重。
成为前端开发者需要多久？
前端开发者成人之旅对每个人来说都独一无二。对于零基础的初学者而言，可能需要 6~12 个月的刻意学习和练习才能斩获入门级职位。对于那些拥有若干先验知识的人而言，时间成本可能会更少。
关键是持续实践、与开发者社区互动以及持续学习。
您应该学习此学习路线中涵盖的所有内容吗？
此前端学习路线涵盖了许多重要的工具和技术。并非本路线中的每一项对于进入该领域都是必需的。每项工作都独一无二，大多数工作都需要路线图上的技术子集。
最需要了解的内容是 HTML、CSS 和 JS。但请记住，科技世界在不断发展，与时俱进至关重要。此路线图将帮助您确定可能需要进一步探索的领域。
前端开发必知必会
因此，以下是您需要学习的核心技术。作为此前端学习路线的一部分，您可以在 freeCodeCamp.org 油管频道上观看每种技术的完整综合进程。
互联网基础
互联网是一个巨大的互联网络，彻底改变了我们的沟通、工作和生活方式。在进一步深入前端开发之前，必须掌握互联网如何运作的基本概念。
这些基础知识包括理解域、域名系统（DNS）、服务器和 HTTP/HTTPS 等协议。
此外，对于任何想要冒险进行网络开发的人而言，基本理解 web 浏览器、祂们的作用以及祂们渲染网页的方式乃重中之重。
HTML
HTML（即超文本标记语言）是 web 内容的基石。祂类似于网站的骨架，提供了构建其他所有内容的基本结构。
作为网页的标准标记语言，HTML 使用标签来定义元素和构建内容。从标题到段落、链接和图像，网页上所有可视化内容通常都使用 HTML 构建。
VSCode
在代码编辑器领域，Visual Studio Code（VSCode）一超多强，成为开发者的最爱。祂不仅仅是一个简单的编辑器；祂是一个让编码变得高效和愉快的强大工具。
VSCode 提供了一大坨功能，包括语法高亮、一大坨用于添加功能的扩展以及集成终端。其用户友好的界面和定制选项使其成为许多业内人士的首选。
CSS
如果 HTML 是网站的骨架，那么 CSS（层叠样式表）就是网站的皮肤。祂负责网站的视觉吸引力，决定从颜色、字体到布局的一切。
CSS 允许开发者创建适应不同屏幕尺寸和设备的响应式设计。祂确保网站不仅功能齐全，而且审美在线且用户友好。
JS
JS 让静态网页焕发生机。祂是一种动态编程语言，引入了交互性，使网站更具吸引力并以用户为中心。
从简单的动画到复杂功能，诸如表单验证和异步数据获取等，JS 发挥着关键作用。这是 web App 动态行为幕后魔法。
PE（Prompt Engineering，提示工程）
为了最大化开发者的工作效率，了解使用大语言模型的方法（比如 ChatGPT、Bard 等）非常重要。PE 的知识将帮助您了解如何从大语言模型中获得最有用的响应。
您或许知道"前端已死"：是的，即使诉诸 ChatGPT 等技术，未来仍然需要前端开发者。工作流可能会有所不同，但在可预见的未来需要人为因素。
版本控制：Git 和 GitHub
在软件开发领域，跟踪和管理变更至关重要。这就是版本控制系统（尤其是 Git）发挥作用的地方。
Git 允许开发者跟踪更改、无缝协作，并在需要时恢复到以前的版本。另一方面，GitHub 是一个托管 Git 存储库的平台，可促进协作、代码共享甚至部署。
包管理器
随着项目的成长和发展，管理软件库和依赖可能成为一项挑战。包管理器是为应对此挑战而设计的工具。
npm 或 yarn 等流行的包管理器可帮助开发者无缝管理、安装和更新软件库。祂们确保项目具有正确的版本依赖，使开发过程更加丝滑。
粉丝福利
有一说一，语冰墙裂安利 pnpm。
Bootstrap 5 和 SASS
使用正确的工具可以简化设计响应灵敏且吸睛的网站。Bootstrap 就是这样一个拥有网页设计革命的框架。
Bootstrap 提供预设组件和网格系统，使响应式设计变得轻而易举。SASS 是一个 CSS 预处理器，允许使用高级样式技术、变量和嵌套规则，从而增强样式处理过程。
JS 框架（React、Vue、Angular 等）
现代 Web App 需要效率、可扩展性和可维护性。JS 框架和库提供预先编写的代码来支持这些要求。
React、Vue 和 Angular 等框架都有自己的理念和方法，但旨在简化复杂任务、提高代码复用性并优化性能。祂们在构建单页应用程序和动态 Web App 中扮演关键角色。
Tailwind CSS
Tailwind CSS 已经成为 CSS 框架领域的游戏规则改变者。祂采用工具优先的方法，允许快速 UI 开发。
Tailwind 提供了实用工具类，可以组合这些实用工具类来创建自定义设计，而不是提供预定义的组件。这种方法提高了灵活性并减少了对自定义 CSS 的需求，从而缩短了开发周期。
粉丝福利
有一说一，语冰墙裂安利 UnoCSS。
构建工具（Vite 等）
随着 Web App 越来越复杂，对高效构建工具的需求应运而生。这些工具优化、打包和服务代码，确保 App 丝滑运行。
举个栗子，Vite 是下一代前端工具解决方案，提供更快的构建时间。此类工具可处理转译、压缩和模块打包等任务，确保代码针对生产进行优化。
测试 JS（Jest、Cypress 等）
确保 Web App 的可靠性和功能性至关重要。这就是 JS 测试工具的用武之地。
专为单元测试而设计的 Jest 和专为端到端测试而定制的 Cypress 等工具可帮助开发者确保其代码按预期运行。定期测试可以减少 bug 并提高 Web App 的整体质量。
粉丝福利
有一说一，语冰墙裂安利 Vitest。
TS（TypeScript）
虽然 JS 动态且灵活，但在某些情况下，更结构化的方法是有益的。TS 是 JS 的超集，引入了静态类型。
TS 提供类型注解、接口和强化工具，生成更鲁棒的代码。祂有助于在编译时捕获错误，确保潜在隐患在运行前得到解决。
网络安全（OWASP）
在当今的数字时代，网络安全至关重要。保护用户数据并确保 Web App 的完整性是首要任务。
开放 Web App 安全项目（OWASP）提供了确保 Web App 安全的指南和最佳实践。熟悉常见漏洞及其缓解措施对于任何前端开发者都至关重要。
GraphQL
传统的 RESTful API 存在局限性，尤其是在处理复杂的数据结构时。GraphQL 作为一种强大的替代方案出现，为查询数据提供了更大的灵活性。
GraphQL 允许客户端仅按需请求数据，减少过度请求（over-fetching）。祂为传统 REST API 提供了更高效、更强大、更灵活的替代方案。
Next.js
使用正确的框架可以简化构建服务端渲染的 React App。 Next.js 是首选，祂提供了优化性能和 DX（开发者体验）的功能。
Next.js 提供自动代码拆分、服务端渲染和一大坨丰富的功能集，使构建可扩展的 React App 变得轻而易举。
粉丝福利
有一说一，如果您是 Vue 爱好者的话，语冰墙裂安利 Nuxt。
Astro
为了追求最佳性能，Astro 等新框架正在突破界限。Astro 引入了一种独特的方法来构建更快的网站。
Astro 允许开发者默认交付更少的 JS，从而加快加载时间。祂提供部分水合作用（partial hydration），并与各种现代框架集成，确保灵活性和性能。
性能最佳实践
一个精心设计的网站不仅仅关乎颜值；性能在 UX（用户体验）和搜索引擎跑分中至关重要。
遵循最佳实践（比如优化图像、利用浏览器缓存和最小化服务器响应时间等）可以显著优化网站性能。使用 Google Lighthouse 等工具定期测评可以提供见解和建议。
React Native
世界变得移动端优先，开发者需要工具来有效地构建跨平台的移动端 App。React Native 是一个允许诉诸 React 开发原生移动端 App 的框架。
借助 React Native，开发者只需编写一次 App 的大部分代码即可在 iOS 和 Android 上运行。祂提供了一大坨丰富的组件集和原生模块，确保 App 天然原生态。
完结撒花
前端开发是一个充满活力且不断发展的领域。随着技术爆炸和最佳实践的发展，与时俱进和顺水推舟是关键。此路线图提供了基础，但学习和探索的旅程永无止境。
参与社区，尝试新工具，并始终追求卓越。前端开发的世界提供了无限的可能性，借助正确的工具和知识，您可以打造卓越的 Web 体验。
请在 freeCodeCamp.org 油管频道上观看学习路线（> 85 小时）。
友情赞助
您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~