完整路线图：如何开始前端开发？

你好世界！

今天，我们将逐步研究成为前端开发人员的完整路线图。

在上一篇博客中，我们讨论了在 2021 年从事 Web 开发职业是否仍然是一个不错的选择。我们讨论了为什么它对于对此感兴趣的人来说是一个不错的选择。我们还讨论了 Web 开发由前端开发和后端开发组成。以及对于一个完全的初学者来说，可以采取哪些快速步骤进入这些领域。

现在，在本文中，我们将深入探讨如何规划前端开发职业生涯的完整指南。

什么是前端开发？

作为一名初学者，我相信你肯定会问自己一个问题：什么是前端开发？前端开发人员做什么？

顾名思义，前端开发人员创建用户在任何网站或应用程序上看到的所有内容。

为了让您更容易理解和记忆，让我们列出前端开发人员处理的任务。

前端开发人员：

为网站/应用程序创建静态用户界面 (UI)。
负责添加和处理用户交互，例如单击按钮、填写表格等。
将后端团队共享的应用程序编程接口 (API) 与 UI 集成。
将网站/应用程序上的页面链接在一起，以便用户来回移动。

除此之外，作为一名小型团队的开发人员，你还需要完成其他任务，但这些任务可以由任何人处理或委托给他人。所以，我们先不讨论你不做什么，而是谈谈作为一名前端开发人员，你应该做什么。

作为初学者，如果您对职业生涯中取得任何成就所需了解的过程和途径有清晰的认识，这将非常有帮助。

Roadmap.sh进行了广泛的研究，并为我们以及每一位计划成为前端开发人员的初学者创建了完整的前端开发人员路线图。

成为前端开发人员需要学习的技能

现在，我们对您作为前端开发人员将要做的事情有了一些了解，让我们找出完成所有这些工作所需的技能。

您需要从三种技术开始：

HTML——超文本标记语言

HTML 是 Web 开发的基础。HTML 并非一种编程语言，而是一种标记语言，但这并不意味着它比 Python 或 JavaScript 等编程语言差。

您在网络上看到的几乎所有网页都是用 HTML 编写的。我们可以自信地说，HTML 是 Web 开发的 ABC。

HTML 由元素（也称为标签）组成。每个标签都有其含义和用途。借助 HTML，您可以创建网站的基本结构，并且元素应按照它们在网站上的显示顺序编写。
以下是一些学习 HTML 的最佳资源：

CSS - 层叠样式表：

编写完 HTML 元素后，CSS 可以帮助你设置网页样式。你可以在 CSS 文件中使用各种选择器来定位 HTML 元素，但最常用的是类、ID 和标签名。

在 CSS 文件中，您可以定义诸如颜色、文本和背景的大小、图像的大小、要使用的字体样式等属性以及许多其他属性。

在这里，您可以展示您的创造力并使网站尽可能美观，但要牢记网页的性能。

学习 CSS 的一些最佳资源：

JS-JavaScript：

JS 是目前最流行的语言。根据 StackOverflow 的调查（我们之前在博客《2021 年的 Web 开发职业》中也讨论过），JavaScript 已经连续 9 年占据主导地位。

这是因为 JavaScript 可以用于前端和后端开发。

但是作为初学者，您只需专注于适用于 JavaScript 的编程基本概念，这将成为您以后选择学习任何其他语言的垫脚石。

一些在线学习 JavaScript 的最佳资源：

为了理解这三者的用法，作为一个绝对的初学者，让我们举一个例子。

我们的身体就是我们必须构建的网站或应用程序。

为了创造我们的身体，我们需要骨骼、皮肤、各种身体器官等元素。

现在，就像我们身体的器官一样，我们使用 HTML 来创建网站的元素。我们按照在网站上使用的顺序创建它们。例如，网站的页眉位于顶部，页脚位于底部，等等。

我们已经创建了现在需要的元素，我们需要定义它们应该如何按照设计呈现以及应该放置在何处。

就像我们的身体通过各种发型、衣服等以不同的方式显得美丽一样。为了让我们的网站做到这一切，CSS 应运而生。

CSS（层叠样式表）定义了用户如何浏览我们的网站。我们使用 CSS 来定义网站上图片的尺寸、文本的颜色和背景。CSS 还帮助我们定义网站在不同屏幕尺寸下的显示效果。

到目前为止，我们已经创造了身体，包括所有结构、骨骼、肌肉、皮肤等等。但我们确实想要一个能够正常运作的身体，我们希望用脚来行走，用手来帮助我们写出这篇博客，让你可以用眼睛看到和阅读。

因此，对于这种互动，我们的大脑和神经系统帮助我们了解周围的世界并与之互动。

同样，JavaScript 在我们的网站上充当着大脑的工作。它告诉网站当用户点击登录按钮时打开什么，当用户点击注销按钮时执行什么操作。

JavaScript 还可以帮助我们获得用户阅读此博客后的反馈，并将其发布在下面的评论部分。

如果这个类比帮助您了解了一点 HTML、CSS 和 JavaScript，请在下面发表评论并查看 JavaScript 的实际运行。

当你完成以上三项的基础课程后，你将对这些技术在前端开发中的应用有所了解。

现在是时候继续学习前端开发人员应该了解的一些技术，并且必须在日常工作中使用它们。

了解网络如何运作吗？

How the internet works?

基本思想是浏览器发送请求，服务器返回响应，这就是我们在浏览器上看到网页的方式。

How do you get the data on hitting a URL in your browser and What is DNS?

我们的浏览器和服务器使用数字相互通信，它们被称为 IP 地址，例如 255.0.23.3，但作为用户，我们无法记住我们需要的所有网站的所有这些 IP 地址，这时 DNS（域名系统）就派上用场了，它将我们的域名映射yourdomain.com到它的 IP 地址。

了解客户端和服务器端编程之间的区别。

DOM——文档对象模型：

这代表包含网页和我们使用 HTML 创建的所有元素的页面。让我们这样理解，DOM 是由元素组成的文档，这些元素是具有属性和方法的对象。

Why do you need to learn DOM? you may ask!

因此，DOM 可以帮助您定位和抓取网站上的任何元素，并使用它或其属性来更改它或以任何您想要的方式在项目中使用它。例如，您想显示在按下按钮时在屏幕上弹出的模式，因此我们可以使用 DOM 来实现这一点。

CSS 预处理器，例如 LESS、SCSS：

LESS 和 SCSS 等专业处理器有助于创建更有条理且可重复使用的 CSS 片段。

预处理器包含混合、函数、变量等功能，以及使用多个文件并将其导入一个主文件的能力。

基本思想是，它可以帮助您编写可扩展、可重用且更少的代码。

版本控制系统：

当您开始从事一个项目时，您需要有一种方法来控制项目的不同版本，并清楚地了解您或与您在同一项目上合作的任何其他开发人员所做的代码更改。

因此，版本控制系统可以通过维护已发生的变更以及执行人员的历史记录来帮助解决此问题。GIT、CVS 和 SVN 是一些流行的开源版本控制系统，您可以使用它们来跟踪您的变更。

大多数公司使用基于 GIT 的 GitHub、GitLab 或 BitBucket 作为版本控制系统。对于初学者来说，学习 GIT 可能有点困难，但当你独自完成最初的几个项目时，只需记住这些命令就可以了。

git init- 它将 git 添加到您的新项目并为您的存储库创建一个主分支。
git status- 它检查项目的新变化
git add -p- 它会以小块的形式显示更改，以便您可以逐一检查和确认这些更改。还有另一个命令 (git add .)，它会将所有更改添加到 git 中而无需确认，我不建议这样做。
git commit -m "write your commit-change msg here"- 向 git 提交更改，并在-m之后的引号内写入有关更改的消息
git push origin remote-branch-name- 它将您的代码推送到您在命令中提到的远程分支。
git checkout branch-name- 它会带您到您结账的分行。
git checkout -b new-branch-name- 它会使用您提供的名称为您创建一个新分支并签出到该分支。
git pull- 这会将所有更改从远程分支拉到您的远程分支。

在项目中使用库的能力：

作为开发人员，您必须在项目中进行一些开发，这可能需要花费大量的时间和精力，但您也可以使用其他开发人员创建的库，并慷慨地开源供其他开发人员使用并从中受益。

你必须具备集成和使用开源库的经验。这些库可以用于任何用例，例如创建 UI，例如使用引导库或使用图像滑块库。

了解静态、动态网站和 SPA 之间的区别：

Static Websites

静态网站是指网站内容不经常变化或根本不变化的网站。

对于每个用户、一天中的时间和时区来说，它都是相同的。

静态网站通常不需要任何数据库设计，适合页面较少且更新周期较短的情况。构建静态网站只需要具备 HTML、CSS 和 JavaScript 知识。

Dynamic Websites

另一方面，动态网站的内容会根据其用户、时区等而经常变化。要开发动态网站，您必须有后端和数据库设计，因为动态网站大多是由数据库驱动的。

要构建一个动态网站，除了 HTML、CSS 和 JS 之外，你还需要具备相当多的后端知识，因为几乎所有内容都是服务器渲染的，你必须使用一些服务器脚本语言，例如 node.js、PHP、.Net 或 Python 来开发和填充网页内容。由于 SPA 的兴起，这种脚本语言如今并不那么流行和普及。

Single Page Applications

SPA或单页应用程序是开发 Web 应用程序的现代方式，它为用户提供应用程序生态系统的感觉，并且不会在每次页面加载时从服务器加载内容。

SPA 非常流行且需求旺盛，因为它们兼具动态网站的功能，并且像静态网站一样易于构建。用于开发 SPA 的流行框架包括 React.js、Angular.js、Vue.js 和 Svelte 等。

但还应该注意的是，静态网站的构建成本比动态网站或 SPA 更低，性能更快，因此了解项目需求并决定下一个项目应采用何种方法非常重要。

作为初学者，您可能会感到困惑，不知道下一个项目应该选择静态网站还是动态网站。

现在，当你对项目需求有了清晰的认识后，就可以更好地做出决定了。尝试找出以下问题的答案：

您需要登录功能吗？如果是：请选择 SPA
数据会更频繁地变化吗？如果是，请选择 SPA。
未来是否有可能添加更多页面和功能？如果是，请选择 SPA。
它将只是一个简单的公司登陆页面或一个投资组合 - 选择静态网站。
您需要一个电商类型的功能：选择 SPA。以上是一些场景，但在开始项目之前，请务必留出一些时间，并非常清楚地了解项目需求。

流行的 JavaScript 框架和库：

因此，您已经满足了所有要求，并得出结论，您必须为下一个项目开发单页应用程序，然后是时候学习一些流行的 JavaScript 框架和库了。

我个人偏爱 React.js，当然，你应该尝试并测试所有可用的选项，然后选择你最喜欢的一个。

如果你想学习 React.js，最好先看一眼React.js 官方文档。

应用程序编程接口 (API) 集成：

作为前端开发人员，您必须与后端团队联系并获取 SPA 的 API。API 将您的前端与后端和数据库连接起来，以获取用户需要查看和交互的数据。

作为前端开发人员，您的工作职责是将不同类型的 API 集成到前端，例如，如果用户想要发送一些有关其个人资料的详细信息，那么您需要连接适当的 API 来执行此操作，然后在个人资料页面上向用户显示相同的数据，您需要连接另一个 API。

同样，您必须借助 API 将应用程序的所有页面和操作与后端链接起来。

NPM 和 Yarn：

当您开始处理 SPA 时，您的前端代码将需要很多依赖项，而为了管理所有这些依赖项，您需要 npm 和 yarn。

NPM 是 Node Package Manager 的缩写，它可以帮助您管理项目中使用的包。

它会关注正在使用的软件包的版本号，甚至关注您在项目中使用的软件包的依赖项。

NPM 和 Yarn 都有相同的目的，哪一个更好是有争议的，但基本思想是，你应该只使用其中之一，并且你应该对两者有基本的了解。

要了解您的项目正在使用哪些包，请打开项目内的 package.json，您将看到包依赖项列表以及项目中使用的这些包的版本。

了解如何使用浏览器开发工具：

作为前端开发人员，无论您的经验水平如何，您都需要使用浏览器开发工具来检查您的网站元素、调试问题和修复与 UI 相关的问题。

浏览器开发工具在任何情况下都会成为你的好帮手。如果你能学会高效地使用开发工具，那对你来说会是一个加分项。

总结

最后要说的是，前端开发对于开发者来说是一个非常有前途的职业，机会无限。一旦你掌握了 Web 前端技术，并使用 JavaScript 框架创建了几个项目，就可以尝试学习一些能够帮助你构建移动应用程序前端的技术。

网络随着新技术的不断变化，因此，必须随时了解最新趋势和技术，并永不停止学习。

即使你已经积累了一些经验，最好还是清楚掌握基础知识，这样你就可以轻松掌握遇到的任何新技术。

暂时就这些，下次再见。

继续学习，继续编码......

干杯!

拉利特

文章来源：https://dev.to/shahilalit/complete-roadmap-how-to-get-started-with-frontend-development-m9p