如何成为专业的😎前端开发人员💻

你是前端开发者新手吗？那么本指南正适合你。你将了解所有必要的方面和步骤。🤩

什么是前端开发人员？

通常，前端 Web 开发人员使用 HTML、CSS 和 JavaScript 等编程语言来执行 Web 设计，这些语言可以在开放 Web 平台上运行，也可以作为非 Web 平台环境（例如 React Native）的编译输入。某种程度上，前端 Web 开发人员负责实现用户在 Web 应用程序中可见并交互的视觉元素。

但现在情况已大不相同。如今，前端开发人员不再局限于特定领域。你可以在任何地方看到他们的成果——导航、布局，甚至网站在手机上的显示效果（这得益于移动优先或响应式设计）。

现在，让我们先来看看路线图。

下面的图表展示了成为专业前端开发人员的途径。该图表由Kamran Ahmed制作。Kamran 的工作非常出色，所以请务必启动代码库并订阅他的新闻通讯，以支持他的努力。

注意：这份路线图将帮助您大致了解行业概况，并在您不确定从哪里开始或下一步学习什么时为您提供指导。最终，这取决于您的经验，因为您会逐渐理解为什么某种工具在某些情况下比另一种更适合。方便又流行的工具并不一定总是完美的。所以，浏览一下路线图，开始开发吧。

Sneat 是一款令人印象深刻的Bootstrap Admin，它为您提供了 10 个有用的应用程序，使您能够更快地开始和构建应用程序。

此外，它还提供 5 个 Niche管理面板，使其可用于多种用途。

成为前端开发人员的路线图：

如果您认为路线图可以改进，请打开 PR 并发布任何更新，并在 Kamran 的GitHub repo上提交任何问题。

现在，我们来详细讨论一下。

1. 互联网及其工作原理？
2. 基础：HTML、CSS 和 JS
3. 通用发展技能
4. 样式：CSS 预处理器和架构
5. 熟悉工具
6. CSS框架
7. 前端框架
8. 测试你的应用
9. 服务器端渲染
10. 静态站点生成器
11. 移动应用程序
12. 桌面应用程序
13. WebAssembly
14. 持续学习

资源

1. 互联网及其工作原理？

众所周知，互联网正在统治世界。因此，了解互联网的基础知识及其运作方式至关重要，这是每个开发人员都应该掌握的关键知识。

互联网是一个由相互连接的计算机组成的全球网络，通过一组标准化的协议进行通信。

i. HTTP：网页通过互联网传输的标准协议。

您可以在这里查看一些详细的博客。

• 深入 HTTP
• HTTP/3：过去、现在和未来
• 什么是 HTTP/3 – 基于 UDP 的快速新协议

ii. 浏览器：用于访问万维网上信息的软件应用程序。

• 浏览器是当今时代非常重要的一部分。何乐而不为呢？它真的把整个世界带到了你的指尖。所以，了解一些关于浏览器的知识对你来说很重要，因为你每天都在使用它们……！对吧？

• 这是一篇非常详细的文章：《浏览器的工作原理：现代网络浏览器的幕后故事》，作者是Tali Garsiel和Paul Irish。你一定会发现这篇文章非常精彩，而且很有帮助。

iii. 域名

• 域名是定义互联网中管理自治、权限或控制范围的标识字符串。它们用于标识一个或多个 IP 地址

• 有关更多详细信息，请查看有关如何为您的网站注册域名的文章。

iv. 网站托管

• 网络托管是由公司（网络主机商）提供的一种服务，这些公司出售或租赁服务器空间，您可以在该服务器上存储文件，从而使您的网站可以在互联网上访问。

• 有关网络托管的详细信息，您可以查看“什么是网络托管”这篇文章

DNS（域名系统）：互联网的基本组成部分之一

• 这是有关 DNS 的有用指南：一张图片中的 DNS

查看最佳的Tailwind 组件库

2. 基础知识：HTML、CSS 和 JS

前端 Web 开发人员使用三种主要编码语言来编写由 Web 设计师创建的网站和 Web 应用程序设计：

• HTML
• CSS
• JavaScript

i. HTML：这是 Web 开发人员的第一支柱和最重要的技能，因为它为网页提供了结构。

• 学习 HTML 基础知识
• 做几页作为练习

您可以查看HTML教程。

ii. CSS：Web 开发的第二大支柱，用于设置网页样式，使其看起来美观。

• 学习上一步中 CSS 样式页面的基础知识
• 使用网格和弹性框构建页面

您可以查看CSS教程。

iii. JS 基础：Web 开发的第三大支柱，用于使您的网页具有交互性。

• 熟悉语法 学习 DOM 的基本操作
• 学习 JS 的典型机制（提升、事件冒泡、原型设计）
• 进行一些 AJAX（XHR）调用了解新功能（ECMA Script 6+）
• 此外，熟悉 jQuery 库

您可以查看JavaScript教程

查看Materio Bootstrap 5 HTML 管理模板

这是用于开发响应式 Web 应用程序的最佳Bootstrap 模板。

3. 通用开发技能

以下是您需要的一些技能，通过学习这些技能，您将能够轻松地开始作为前端开发人员的旅程。

• 学习 GIT，在 GitHub 上创建一些存储库，与其他人分享你的代码
• 了解 HTTP(S) 协议和请求方法（GET、POST、PUT、PATCH、DELETE、OPTIONS）
• 不要害怕使用谷歌，用谷歌进行强力搜索
• 熟悉终端，并配置你的shell（bash、zsh、fish）
• 阅读一些关于算法和数据结构的书籍
• 阅读一些关于设计模式的书籍。
• Git 和版本控制

Git 是一个用于保存代码并创建不同版本的工具，方便您与其他开发人员协作。GitHub 是存储代码和协作开发开源软件的首选平台。

• 从 GitHub 学习 Git
• 排名 Git 教程
• Git Complete：Git 的权威分步指南

这是一篇关于如何让Skiils 成为前端开发人员的精彩文章。

4. 样式：CSS 预处理器和架构

CSS预处理器

CSS 预处理器是一个程序，它允许您从预处理器自己独特的语法生成 CSS。预处理器可以使 CSS 代码更有条理。

- Sass/CSS
- PostCSS
- Less
- Stylus

ii. CSS 架构

- BEM
- CSS 模块
- Atomic
- OOCSS
- SMACSS
- SUITCSS

以下是一些有关 CSS 架构的好文章，您可能会觉得有用。

- CSS 架构
- CSS 模块化架构
-现代 Web 应用样式

iii. JS 中的 CSS

CSS-in-JS 是一系列使用 CSS 解决复杂问题的方案。它不是一个特定的库，不同的库可能会解决不同的问题子集，并根据其实现细节使用不同的方法。

-风格组件
-镭
-情感
- JSS
-阿芙罗狄蒂

你应该读一读这篇文章：JS 中的 CSS 到底是什么。它会帮助你更好地理解它。

5.熟悉您将要使用的工具。

要成为一名前端开发人员，您应该花一些时间学习作为 Web 开发人员将使用的工具，例如构建工具、单元测试工具、调试工具等。

用户会通过网络浏览器与您的网站进行交互。您的网站在这些浏览器上的呈现方式将在很大程度上决定您的工作是否成功。因此，了解一些可以帮助您开发令人满意的应用程序/网站/产品的工具将大有裨益。

所有现代网络浏览器都配备了开发者工具。这些工具允许您在浏览器中以特定于浏览器解释代码的方式测试和微调页面。

以下是一些有用的工具：

i. 包管理器

- npm
- yarn
- pnpm

ii. 任务运行器

- npm 脚本
- gulp
- Webpack
- Rollup
- Parcel

iii. 模块化构建器

- Webpack
- Parcel
- Rollup

v. Linter 和格式化程序

- Prettier
- JSlint
- ESlint -
JSHint - JSCS

想要了解更多精彩的 Formatter 和 Linter，请查看2020 年每个开发人员都应该使用的最佳 VS Codes 扩展

6. CSS框架

CSS 框架是一个代码库，它抽象了常见的 Web 设计，使开发人员更容易在其 Web 应用中实现这些设计。简而言之，CSS 框架是一组已准备好并可立即使用的 CSS 样式表的集合。

- Bootstrap
- Materialize、Material Design Lite
- Bulma
-语义 UI

要了解更多出色的框架，您可以查看有关2020 年最佳 CSS 框架的综合指南以获取详细信息。

7.框架

这些软件包包含预先编写的标准化代码，存放在文件和文件夹中。它们为您提供了构建的基础，同时又能灵活地调整最终设计。通常，前端框架包含以下组件：

• 网格可让您轻松组织网站的设计元素
• 根据其功能定义不同的字体样式和大小（标题和段落的字体不同等）
• 预建的网站组件，如侧面板、按钮和导航栏

以下是一些最常用的前端框架

Vue.js ：渐进式 JavaScript 框架

• Vue.js 是一个开源模型-视图-ViewModel 前端 JavaScript 框架，用于构建用户界面和单页应用程序。

您可以在VueJS官方网站上查看指南。

此外，还有一篇关于流行 VueJS UI 组件库和框架的详细文章，您会发现它很有用。

• 看一下Vuexy Vuejs 管理模板。

它是目前最好的开发人员友好且高度可定制的Vue 模板之一

另外，检查Materio – Vuetify Vuejs 3 管理模板

另外，在Laravel Admin版本中可用：

ii. React：用于构建用户界面的 JavaScript 库。

React 是一个开源的前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 以及由个人开发者和公司组成的社区维护。

您可以在React.js官方网站上查看教程。您还可以查看ReactJS 开发者路线图，详细了解如何开始使用 ReactJS。此外，还有一篇关于最佳ReactJS UI 框架和组件库的文章，希望对您有所帮助。

查看使用 React 和 Next js 制作的Materio MUI React Next js 管理模板。

也请查看Sneat MUI React NextJS 管理模板。

基于 Next js 并支持 TypeScript 的最佳Next js 模板。

iii.角度

Angular 是一个基于 TypeScript 的开源 Web 应用程序框架，由 Google 的 Angular 团队以及个人和企业社区领导。

您可以在Angular官方网站上查看教程

查看使用 Angular 制作的现代管理员 - Angular 10+ Bootstrap 4 管理仪表板模板和Apex Angular Admi 模板。

如果您正在寻找支持 Angular 的Bootstrap 主题，那么值得一试。

8.测试你的应用

前端测试是一种测试技术，用于测试Web应用程序或软件的图形用户界面（GUI）、功能和可用性。前端测试的目标是测试整体功能，以确保Web应用程序或软件的呈现层在持续更新过程中没有缺陷。对于任何开发人员来说，这都是一项至关重要的技能。

i. 单元测试

单元测试通常是指以手动或自动方式对单个代码“单元”执行一组测试的过程。

它主要以单元形式测试代码的独立部分。这些单元通常以方法、属性、UI 元素操作等形式出现。这种方法最快，成本也最低。

-笑话
-酶
-西农
-摩卡
-柴
- AVA
-胶带

ii. 端到端测试

在 E2E 测试中，开发人员会一起测试整个应用程序，并像用户一样进行测试。

基本上，开发人员会从头到尾测试应用程序的工作流程。目的是复制真实的用户场景，以验证系统的集成度和数据完整性。

以下是一些有用的工具：

- Selenium
- Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js

您可以查看有关端到端测试的详细指南。

iii. 集成测试

集成测试确保应用程序的各个部分能够协同工作。它是至关重要的测试之一。

- Karma
- Cypress
- Nightwatch
- WebDriver.io

有关详细信息，请查看有关前端测试的文章。

9.服务器端渲染

服务器端渲染 (SSR) 是指应用程序通过在服务器上显示网页而不是在浏览器中渲染网页来做出贡献的能力。服务器端将完全渲染的页面发送到客户端；客户端的 JavaScript 包接管并允许 SPA 框架运行。

• Next.js
• After.js
• 流氓

如果您喜欢服务器端渲染，请尝试使用我们的Next js 模板构建您的应用程序

10. 静态站点生成器

静态网站生成器是一种发布工具，本质上是一套基于一组输入文件构建静态网站的工具。它们将数据和内容应用于模板，并生成可供网站访问者使用的页面视图。

以下是一些最佳的静态站点生成器：

• 盖茨比
• Jamstack
• 静态站点生成器
• Nuxt.JS
• 雨果

这里有一篇关于什么是静态站点生成器以及找到最佳站点生成器的 3 种方法的详细文章。

11. 移动应用程序

• 移动应用程序的前端开发

在这里，前端直接与用户交互，包括线框、模型、缓存和数据库同步等设计元素。它能够在各种屏幕尺寸和方向上提供流畅的用户体验。

• 以下是一些有助于移动应用程序开发的框架。

- Flutter
- React Native
- Nativescript
- Ionic

• 前端开发的技术方面

i. 原生应用开发
ii. 跨平台移动应用程序开发

原生和跨平台移动应用各有优缺点。原生应用在界面、性能、可靠性和速度方面更胜一筹。而跨平台应用则在市场、成本和可复用性方面更具优势。然而，选择哪个平台取决于您自己，也取决于您的业务。

有关更多详细信息，请查看这篇关于移动应用程序开发终极指南的精彩文章。

12.桌面应用程序

• 虽然手机和平板电脑有便捷的优势，但你也不能忽视PC和桌面应用，因为仍然有很多用户更喜欢用PC来浏览应用和网站。只是桌面应用也有自己的优势而已……！不是吗……！？

• 因此，以下是您可以使用的桌面应用程序开发的有用框架。

-电子
- NW.js
-质子
- Neutralino.js
- DeskGap

您可以查看这篇关于用于前端开发的桌面应用程序的有用文章。

13. WebAssembly

• WebAssembly是一个开放标准，它为可执行程序定义了一种可移植的二进制代码格式和相应的文本汇编语言，以及用于促进此类程序与其主机环境之间交互的接口。

• 它对 Web 平台有着巨大的影响。它提供了一种在 Web 上以接近原生速度运行多种语言编写的代码的方法，并且客户端应用可以在 Web 上运行，而这在以前是无法实现的。

• 您可以访问以下文章以了解更多详细信息。

- Webassembly
-什么是 webassebly - 下一代 Web 平台

14. 持续学习

所以，读完本指南后，你肯定可以开启你的前端 Web 开发者之旅了。然而，学习才是成功的唯一关键。为此，你必须坚持练习和学习。

我们上面提到了一些相关文章，您可以参考它们来了解详细信息和一些基础知识。我们强烈建议您仔细阅读这些文章。

这是一份完整的指南，您可以阅读《2019 年前端开发人员手册》 - 学习整个 JavaScript、CSS 和 HTML 开发实践！

以下是一些适合前端开发人员的优秀课程：

• 成为前端 Web 开发人员

• 初学者 Javasript

• 从头开始的现代 JavaScript

• 高级 Javascript

• 面向 Web 开发人员的 HTML、CSS、JAVASCRIPT

• React — 完整指南（包括 Hooks、React Router、Redux）

• React 初学者指南

• Angular 完整指南

结论：

好了，这就是关于如何成为专业前端开发者😎💻的指南。它确实非常详细，但你们中的许多人很可能已经了解了大部分内容。即使你不了解，也不必被这份路线图弄得不知所措；你可以从小处着手，然后逐步完成。

成为前端开发者的方法有很多，积累经验，你就能达到卓越。所以，从这份路线图开始，看看如何成为一名专业的前端开发者。

关于我们：

在ThemeSelection ，我们提供精选的高质量、现代设计、专业且易于使用的高级Bootstrap 模板、Next js 模板、Django 模板、Laravel 管理模板、管理仪表板和UI 工具包。

此外，不要忘记在Linkedin和Twitter上关注我们，以获取更多与前沿网页设计和开发相关的文章和内容。

作者：@abhidave001