2024 年成为全栈 Web 开发人员需要掌握的技能 #
大多数 Web 开发人员都经历了需求讨论，编写web代码，测试，上线所有阶段，也许刚开始对他们中的一些人来说可能会感到压力很大沮丧，但当他们看到他们的网站上线并且人们在世界各地使用它时，整体感觉真的很令人兴奋和惊叹。Web 开发人员负责许多任务，从收集需求到设计网站、处理其后端部分，以及使其为用户成功上线。
每年，各行各业都会出现新的技术和工具，以提高开发人员的生产力，并使网站更好地为用户服务。对他们来说，保持 Web 开发游戏的领先地位变得具有挑战性。今天，我们将讨论在 2024 年成为 Web 开发人员的完整指南。这将是各种开发人员（前端、后端和全栈）的实用指南。
什么是全栈 Web 开发人员？ #
全栈 Web 开发人员是在前端和后端 Web 开发方面具有专业知识的专业人士。他们通常非常熟练地使用语言和框架，如 HTML、CSS、JavaScript、React、Angular、Node.js、Ruby on Rails、Django、PHP、golang 等等，这使他们能够处理 Web 应用程序的各个方面，从设计用户界面到管理数据库和服务器端逻辑。全栈开发人员将技术专长和解决问题的能力相结合，通常对于开发提供完美用户体验的动态、适应性强的网站至关重要。
如何在成为全栈 Web 开发人员？ #
1. 首先确定你的目标或方向 #
我们将讨论很多技术、趋势和工具，但我们不希望你不知所措，所以你需要首先决定你为什么要成为一名 Web 开发人员，因为这将帮助你选择正确的工具和技术来学习。成为 Web 开发人员有很多不同的原因,比如:
- 你想以
Web开发人员的身份找到一份程序员的工作，这是最受欢迎和最常见的原因。 - 你想以自由开发人员的身份开展自己的业务，比如接私活。
- 当你技术很厉害的时候你可以成为其他公司的顾问。
- 你可以创建自己的应用程序来赚钱。
- 你想使用此技能成为内容创建者。
- 将程序编码作为一种爱好。
从上述感兴趣或目标的领域中，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，你可以选择前端开发的工具和技术。后端和全栈开发也是如此。
2. Web 开发的基本工具和软件 #
-
计算机和操作系统：如果没有计算机和操作系统，就无法编写代码。要学习 Web 开发，你不需要任何花哨的电脑。如果你有一台，你可以使用任何类型的中端笔记本电脑或台式机。对于操作系统，你可以使用 MacOS、Windows（最新版本）或 Linux，任何适合你的方式。
-
文本编辑器/IDE：毫无疑问，
VSCode适用于大多数情况和大多数语言。它具有良好的性能、出色的扩展、内置终端以及大量功能。根据 调查，VSCode也是开发人员的首选。你还有其他一些不错的选择，例如Sublime Text、Vim或Atom。Visual Studio（ASP.net 或 C#）、Eclipse和Netbeans（Java）也是不错的选择。 -
Web 浏览器：大多数开发人员的首选是
Chrome或Firefox。Chrome速度很快，它使用 V8 引擎（JavaScript引擎）。Firefox也取得了长足的进步，它的一些好东西不在Chrome浏览器中。这两种浏览器都有出色的开发工具来解决 Web 开发中的问题。其他需要熟悉的网络浏览器是Safari、Edge和Brave。 -
终端：你将使用一些系统命令在 CLI 上进行大量工作。你可以将默认终端或第三方终端用于 Web 开发项目。
Bash、Zsh、Powershell、Git Bash、iTerm、Hyper都是可以使用的选项。
3. 从 HTML 和 CSS 开始 #
HTML 和 CSS 是 Web 开发的基本构建块。无论你的 Web 应用程序多么先进，或者你使用的框架和后端语言如何，你都必须使用 HTML 和 CSS 构建前端应用程序。所以这是在 Web 开发中要学习的第一件事。
HTML5（语义标签、属性、文档类型等）CSS基础知识 颜色、字体、定位、盒子模型等。CSS Grid和Flexbox来对齐事物或创建列。- 动画效果对于前端开发人员来说非常重要。
响应式布局 #
应用程序应可在各种设备（如智能手机、平板电脑、台式机、iPad 或任何其他屏幕大小的设备）上查看和使用。因此，了解如何创建响应式设计或布局非常重要。让我们看看一些重要的主题。
- 了解如何设置视口
- 不同屏幕尺寸的媒体查询。
flex布局REM单元- 移动端布局
自定义可重用的 CSS 组件 #
如果你想避免像 Bootstrap 这样的 CSS 框架，最好创建自己的模块化、可重用的 CSS 组件来在你的项目中使用。如果你构建自己的自定义设计，则无需导入完整的库。你可以创建仅特定 UI 所需的组件。
Saas最近也出现了一种新趋势，有助于更有效地编写CSS代码。如果你已经了解CSS，那么你就不需要花太多精力来学习Saas。Saas 是一个 CSS 预处理器，它为标准 CSS 添加了更多功能并使其更加高效。你可以使用变量、嵌套、条件来减少 CSS 的重复并使其更有效率。
Saas 提供了变量、混合、函数、嵌套等。你还可以为每个可重用的组件创建单独的 Saas 文件。Saas 确实节省了很多时间，所以你绝对应该在 2024 年学习它。
CSS框架 #
学习CSS框架对于不擅长设计的开发人员来说非常重要和有用。有很多流行的CSS框架可供使用，下面给出了一些。
-
Bootstrap是最流行的CSS框架。学习bootstrap也有助于学习其他框架。 -
Tailwind CSS是另一个越来越受欢迎的框架，它与其他框架略有不同。它是一组实用程序类，因此你可以创建自己的按钮和其他看起来与其他按钮不同的东西。它们也是高度可定制的。 -
具体化 ：基于材料设计，该框架是
HTML、CSS和JavaScript的组合。这也是一个非常有用和流行的库，用于设计你的前端应用程序。 -
Bulma：模块化、轻量级的开源CSS框架。
JavaScript #
在学习了 HTML 和 CSS 之后，接下来你需要学习的是 JavaScript。对于开发人员来说，掌握 JavaScript 基础知识非常重要。你将在服务器端语言（如 PHP、Python 或 ASP.net）中使用大量 JavaScript，如果你想使用 React、Angular、NodeJS、Vue 或任何其他 JavaScript框架或库，则非常需要学习这种语言。
JavaScript基础知识（变量、函数、循环、数组、条件等）DOM（文档对象模型）- 数组方法
foreach、map、filter、reduce等。 JSON（JavaScript对象表示法）- HTTP 请求获取 API -
GET、POST、PUT、DELETE
学习工具和技术 #
你将在 Web 开发中使用一些工具。这些工具将帮助你进行调试、提高生产力、管理代码、与其他开发人员协作以及诸如此类的事情。让我们讨论其中的一些工具。
Git（版本控制）和GitHub是 2024 年你绝对应该学习的最受欢迎的工具。Git 在与其他开发人员协作和管理代码方面有很大帮助。你还有一些其他选项，例如GitLab、Bitbucket和其他一些选项。- 了解如何使用浏览器开发工具。无论是
Chrome还是Firefox，你都应该知道如何使用不同的选项卡，例如元素选项卡、JavaScript控制台、请求和响应的网络选项卡、应用程序选项卡以及其他用于不同目的的选项卡。 - 大多数 IDE 或文本编辑器都能够添加扩展或插件，这对提高生产力和构建
Web应用程序非常有帮助。例如，Visual Studio Code中的VSCode扩展有助于下载扩展（如live-server或live-saas编译器）以与React一起使用。 - 了解如何使用
JavaScript包管理器，例如NPM和Yarn。如果你使用JavaScript框架或库（如React），你将大量使用这些包管理器，但对于其他语言（如Python或PHP），你将使用不同的包管理器。 - 如果你想在前端安装
NPM包，那么你必须使用JS模块打包器，例如Webpack、Parcel或Rollup。如果你想创建自己的模块，或者你想将一个JavaScript文件带到另一个JavaScript文件中，默认情况下你不能只使用浏览器来做到这一点，所以你需要Webpack或Parcel来为你捆绑它。 - 你可能还想查看一些有用的文本编辑器扩展和帮助程序。
Linting（查找错误）、Prettier（格式化代码）、Live Server、Emmet（编写快速HTML和CSS代码）、片段等。
前端框架和状态管理 #
框架允许你进行更高级的前端开发。它为你提供了很多优势，例如可重用的组件、更有条理的 UI 或页面交互。因此，使用框架可以节省大量时间。
选择一个前端框架来提高你的技能，并尝试选择一个大多数公司在当前场景中使用的框架。此外，了解状态管理。每个框架都有不同的方法。以下是一些流行的框架和状态管理器。
-
React：
React库是 Web 开发中最受欢迎的学习库，与其他框架和库相比，它相当容易。React 开发人员也有很多工作可供选择。你可以将Redux和Context API与Hooks一起使用进行状态管理。 -
Vue：
Vue也越来越受欢迎，开发人员也可以更喜欢学习Vue。与React和Angular相比，Vue是最容易学习的。VueX是为视图而构建的状态管理器。 -
Angular：此框架通常用于大型组织。它有一个相当长的学习曲线。你必须学习
TypeScript才能使用Angular。它允许你使用可选的静态类型和对 ES2015 功能的支持。NgRx和Services是学习此框架的良好状态管理器。 -
Svelte：
Svelte基本上是一个编译器，在过去一两年中变得非常流行。它有一个非常简单的学习曲线，但是在使用一些较大的应用程序时，你可能会遇到一些困难。找工作也比其他框架更难一些。Svelte 有一个内置的上下文 API 来管理状态。
学习后端或服务器端语言 #
你应该至少了解一种服务器端语言。要在 2024 年选择一种语言，下面给出了一些:
NodeJS（不是一种语言，而是一种运行时环境）Python（适合初学者）Java（适合大型公司）Phpgolang
后端或服务器端框架 #
Node.js–Express、Koa、Adonis、Feather.js、Nest.js、Loopback- Java：
Spring、SpringBoot、SpringMVC - PHP：
Laravel、Symfony、Codeignitor、Slim - Ruby：
Ruby on Rails，Sinatra
数据库 #
大多数 Web 应用都需要一个位置来存储数据。在某些情况下，某些技术或某些语言与某些数据库相得益彰。例如：在 Mern 中，M 代表 MongoDB，在 LAMP 中，M 代表 MySQL，但要为你的应用程序选择哪个数据库完全取决于你。我们将讨论 2024 年的一些流行数据库。
- 关系数据库：RDBMS仍然是最流行的数据库。
PostgreSQL、MySQL、MSSQL仍然是最受欢迎的使用。 - NoSQL：
MongoDB、CouchDB、Elasticsearch - 轻量级和缓存：
Redis，SQLite