你是否在考虑从事网页开发的职业？如果是，那么你做出了一个绝佳的选择。网页开发是2024年市场上需求最旺盛的技能之一。拥有超过50.38亿互联网用户，网页开发有着光明的未来。
在本文中，我将向你展示开始网页开发所需的基本要素。我们将探索关键技术栈、适合初学者的项目创意、有用的资源以及一些额外的建议。
两年前，我写过一篇关于这个主题的文章。由于网页开发的需求仍然很高，我很高兴能以更详细的指南重新探讨这个话题。所以，请坚持看到最后。
目录
什么是网站？
网页是显示在网页浏览器（如 Chrome、Firefox 等）中的文档。它由文本、图像和其他交互元素组成。而网站是通过链接相互连接的一组网页。
网站运行在称为网络服务器的远程计算机上，并通过互联网访问。一些知名网站的例子包括维基百科、亚马逊和 YouTube。
注意：当我在本文中提到网络应用程序或 Web 应用程序时，我指的是与网站相同的东西。
Web 应用程序有两个组成部分，前端和后端。让我们理解它们之间的区别。
网站的前端与后端
前端是网站的用户界面（UI），基本上就是用户在屏幕上看到的内容。
后端指的是网站主要逻辑所在的服务器。它还包括数据库，所有应用程序的数据都存储在这里。
前端和后端通过交换数据进行通信。我们以社交媒体应用程序如Instagram为例。
当你上传一个帖子时，UI将帖子数据发送到后端，后端处理这些数据并将其添加到数据库中。然后下一次，当你加载网站/应用时，它从后端获取你所有的帖子并在屏幕上显示。
在接下来的两个部分中，我将展示如何开始前端和后端开发。
前端开发
正如我上面提到的，前端开发主要关注UI——即网站的外观。要开始前端开发，你需要学习以下三种基本工具：
HTML
HTML（超文本标记语言）用于编写由浏览器显示的网页。它定义了网页的结构和内容，使其成为每个网站的基础。
网页的内容包括标题、段落、链接、图片、列表等元素。HTML通过使用HTML 标签创建和结构化所有这些元素。浏览器则解释这些HTML代码并在你的屏幕上渲染。
freeCodeCamp的响应式网页设计认证在他们的免费课程中开始时教授HTML基础知识。你甚至会构建自己的照片应用程序。所以这是一个很好的起点，可以深入了解HTML。
如果你想要额外的练习，w3schools.com也是初学者的一个有用资源。它为每个概念提供清晰的逐步教程。他们还提供了一个交互式编辑器，让你练习使用HTML标签并查看输出网页（freeCodeCamp也是如此）。
专注于以下领域：
-
创建一个简单的网页
-
使用HTML标签渲染内容
-
创建表单
CSS
虽然HTML定义了网页的结构，但这还不够，因为它只是创建了网页的骨架UI。它仅仅定义了页面上存在哪些元素，而没有定义它们的外观。
CSS（层叠样式表）用于为网页添加视觉吸引力。它将一个简单、朴素的网页转变为一个设计良好的用户界面。
这是一个使用纯HTML的网站的样子：
而当你添加CSS时，它看起来是这样的：
好多了，对吧？它实际上看起来像一个合适的网页，与之前的骨架UI相比。这被称为“网页样式”。
CSS样式包括以下内容：
-
颜色、字体和元素背景
-
以各种布局（网格、弹性盒子等）组织内容
-
间距，即边距和内边距
-
过渡和动画（高级内容）
随着你在 freeCodeCamp 课程中的学习，你还会学习 CSS – 这是一条很好的学习路径。
你还可以参考 w3schools.com 的 CSS 教程。在他们的互动编辑器中玩弄每个 CSS 属性。
注意： HTML 和 CSS 不是编程语言。
JavaScript
HTML 和 CSS 只能创建静态网站 – 也就是说，你不能与仅使用 HTML 和 CSS 创建的网页上的任何元素进行互动。该网站不会更新或响应任何用户交互，如按钮点击或下拉选择。
JavaScript (JS) 是一种编程语言，使网站动态和互动。它为网站添加了以下功能：
-
处理用户交互，如点击、悬停、键盘按键、表单填写等。
-
动态更新网页内容
-
处理表单验证和提交
-
与后端服务器交互
JavaScript 还有许多其他功能，使您的网站对最终用户更具功能性和吸引力。在开始您的 JS 学习旅程时，建立概念的坚实基础是关键。最初，专注于以下领域：
-
基本的 JavaScript 语法
-
JS 函数
-
与 DOM（文档对象模型）交互
-
事件处理
-
JS 对象和数组
-
异步 JavaScript
请参考以下 JavaScript 资源：
- freeCodeCamp 提供免费的、深入的 JS 课程
-
w3schools.com 提供基本的 JavaScript 教程
-
JavaScript 面试准备手册 用于重要的 JavaScript 概念。
还有很多其他 JavaScript 资源，但我不会给你提供太多信息。这两个应该足以让你入门。
一旦你熟悉了 HTML、CSS 和 JavaScript，你就会知道如何创建一个简单的网页。通过构建不同的网页，如待办事项列表和表单，继续练习，并尝试实现 CRUD（创建、读取、更新、删除）功能。
学习前端框架和库
随着你的网站成长，JavaScript 代码变得越来越复杂，维护起来越来越困难。这会减慢开发过程，并使开发者面临真正的挑战。
为了解决这些问题，你可以使用框架和库。框架提供了一种更结构化的方式来构建 Web 应用，鼓励模块化设计和可重用性。
通过使用框架，你可以专注于构建实际功能，而不是处理 JavaScript 代码的复杂性，这有助于加快开发过程。因此，我建议学习一个 JS 框架/库，以开发更大的项目。
React.js – 一个不错的选择
React JS 是一个 JavaScript 库，使创建动态和互动网页变得简单。它将你的代码分成组件，使其易于阅读和维护。这减少了代码的复杂性并允许重用。
React 是我个人的建议，因为它的学习曲线相较于其他框架更为温和。它在前端角色中需求量很高，因为许多网络应用都是用 React 构建的。
要开始学习 React，你最好的资源是 React 文档。它们非常详细，并包含交互式代码编辑器供你练习。
freeCodeCamp 的 YouTube 频道也有一些有用的 React 课程，比如 Bob Ziroll 的这门课，而前端开发库认证也有一个 React 部分。
除了 React，还有其他 JavaScript 框架，如 Angular、Vue 和 jQuery 库。这些框架也依旧受欢迎，根据你所在地区对工具的需求，你可以专注于最能满足你需求的一个。
注意： 在跳入任何框架之前，确保你学习并完全理解所有基本的 JavaScript 概念。
学习响应式设计
在继续之前，让我们谈谈网页开发中的一项基本实践。
响应式设计是指一种设计方法，它可以根据屏幕大小的不同进行调整，适用于桌面电脑、平板和手机等各种设备。良好的响应式设计可以大幅减少为不同屏幕尺寸编写单独代码的需求。
有一个有趣的事实：手机在全球网络使用中占据了三分之二的份额。因此，为了确保良好的用户体验，您需要使网站在手机上看起来不错。
在这个简单指南中了解更多关于响应式设计的信息，并在这里阅读一些最佳实践。
以下是一些其他资源，可以帮助您在前端开发的旅程中：
-
WebDevSimplified – YouTube 频道
后端开发
后端开发涉及构建Web应用程序的服务器端。服务器端承载着网站的业务逻辑，支持一切在幕后发生的事情。它还负责管理数据库，并确保服务器与用户界面之间的数据流畅传输。
要深入了解后端开发，您首先需要学习一门编程语言。
为什么要学习一门编程语言？
学习一门编程语言为您提供了构建这些服务器端应用程序的基础。可以把语言看作是告诉服务器您希望它做什么的方式。
编程语言作为解决问题和创建强大、可工作的应用程序的工具。这些语言具有处理任务的各种能力，如存储和管理数据、与前端通信以及确保应用程序安全。
学习一门编程语言不仅仅是学习语法和编写代码。它还涉及理解如何创建驱动成功网站的系统。因此，熟悉一门编程语言是后端开发的关键部分。
有许多编程语言可供选择，每种语言都有其独特的特性。让我们了解一些选项：
Python
Python是后端开发的首选之一，因为它简单易用。它具有简洁且易读的语法，使其非常受欢迎。它为数据库连接和设置Web服务器提供了良好的功能。Python还拥有数据科学和机器学习的库。
Python有很多教程和良好的社区支持，使得入门变得容易。它对初学者友好，学习起来有趣，并且需求量大。
可以参考以下资源来学习Python：
-
GeeksforGeeks Python教程
-
YouTube上的Python初学者教程（印地语）
-
使用Python进行机器学习 – 免费CodeCamp认证
Golang
Golang（Go）因其简单性和高效性而日益流行。Go代码执行迅速且高效，非常适合高性能需求。这也导致了更快的开发时间。Go还对并发提供了卓越的支持，从而实现高效处理。
Go对初学者友好，语法简洁明了，易于阅读和维护。它还拥有丰富的标准库，提供许多内置函数和工具，使得项目的搭建变得轻松无忧。
由于其高效性，Go的受欢迎程度不断上升，许多公司正在将Go应用于他们的项目。这导致了对Golang开发者的需求不断增加，并预计将继续上升。
Go为初学者提供了丰富的资源和不断壮大的社区。要开始使用Go，请参考以下资源：
Java
Java是一种面向对象编程（OOP）语言，广泛用于后端开发。Java以其安全性和稳健性而闻名，是对需要高可靠性的应用程序（如金融和医疗系统）的首选。Java还提供了对并发的良好支持。
Java是初学者的一个不错选择，因为它拥有丰富的资源和庞大的开发者社区。这包括大量的教程和详细的文档，让初学者和有经验的开发者都能更轻松地学习。
Java已经存在一段时间，许多现有系统和企业应用程序目前都在运行Java。因此，大企业对Java开发者的需求非常大。
最后，在Java中编码时所学到的概念会伴随你，使你成为一个更好的开发者，即使你将来切换语言。
以下资源可以帮助您入门Java：
JavaScript
我们已经知道JavaScript在前端的作用，但它也可以通过NodeJS用于后端开发。
NodeJS是一个运行时环境，允许您在服务器端运行JS代码。这使得JavaScript可以同时用于前端和后端。
NodeJS遵循事件驱动架构和异步编程，这使得它能够在不停止单个任务执行的情况下处理多个任务（非阻塞I/O）。Node是单线程的，因此它不是创建多个线程来处理任务，而是通过排队任务逐个异步执行。
Node 还遵循模块化架构，这意味着您可以将应用程序拆分成更小、更易于管理的组件。它还包括 NPM（Node 包管理器），提供访问成千上万的开源库，以添加路由、身份验证或数据库处理等功能。
为什么使用 Node？
-
如果您已经熟悉 JavaScript，这是一个非常好的选择，因为您无需学习其他语言。
-
Node 快速高效，如果您想快速设置一个小服务器，这将非常简单。
-
Node 还通过 NPM 拥有一个庞大的库生态系统。
然而，Node 并不适合 CPU 密集型任务，因为它们可能会阻塞主线程，因为它是单线程的。
如何选择编程语言？
在众多可选项中，选择适合您的语言可能会感到困惑。每种语言都有其自身的能力，没有一种语言在客观上优于其他语言。
Python和Golang非常适合初学者，语法简单。因此，如果你重视温和的学习曲线，这两种语言都是不错的选择。Java以其可靠性和稳健性而闻名，许多企业级应用都是使用Java构建的。
至于就业机会，上述每种语言都有高需求，所以你可以选择任何一种。最重要的是培养你的问题解决能力，并理解如何构建可靠的软件。
从长远来看，语言的选择并不重要，因为核心基础知识是相同的。因此，我的建议是选择任何一种语言，学习它的语法和核心能力，并开始解决问题。你可以从以下内容开始：
-
学习特定语言的框架并开发项目（即将推出的部分）
后端开发框架
仅仅掌握编程语言不足以创建稳健和安全的应用程序。框架建立在这些语言的能力之上，使您能够创建这些强大的应用程序。通过提供路由和数据库处理等附加功能，它们作为一个平台来检验您的编码技能，同时加快开发过程。
根据您选择的语言，您可以学习以下框架：
-
Gin – Golang框架（您可以在不使用框架的情况下创建一个简单的Golang应用程序）
如果您感兴趣，可以了解更多信息。
数据库
数据库是一个结构化的数据集合，是后端开发中的关键部分。它在存储和管理应用程序数据方面发挥着重要作用。
数据库大致分为两种类型：
-
关系型数据库使用表格来存储数据并定义这些表之间的关系。示例包括MySQL、PostgreSQL、SQLite。
-
非关系数据库（NoSQL）旨在处理非结构化或半结构化数据，通常用于层次型或基于文档的数据存储。示例有MongoDB和Cassandra。
-
MongoDB：一种流行的NoSQL数据库，适用于灵活和可扩展的数据存储。
-
Cassandra：适合处理大量分布式数据。
-
要开始学习关系数据库，学习SQL（结构化查询语言）。SQL用于编写查询，以对数据执行各种操作，例如：
-
创建表并定义其结构。
-
读取使用SELECT语句的数据。
-
更新现有记录。
-
删除不必要或过时的数据。
请参考以下资源学习SQL：
-
GeeksforGeeks – 学习数据库概念的极佳资源
一旦你熟悉了基本的 SQL 语法并能够编写查询，探索 DBMS（数据库管理系统） 概念。这些将帮助你理解数据库是如何设计、管理和优化的。
作为初学者，我建议从关系数据库开始，因为它们在涉及表和表之间关系的 DBMS 概念中提供了坚实的基础。它们在企业中被广泛使用，学习这些概念将对你大有裨益。
这些概念可能需要一些时间来学习，但不要担心。慢慢来，同时继续进行开发相关的工作。随着你在数据库工作中积累更多经验，你将更好地理解这些概念。
API
API（应用程序编程接口）是后端开发的重要组成部分，它将后端逻辑暴露给外部世界。API是两种不同应用程序相互通信的一种方式。在 веб 开发的上下文中，前端通过 API 与后端服务进行交互。
当你构建一个 веб 应用程序时，前端通常需要从后端发送和接收数据。以登录功能为例，当用户登录时，前端通过 API 调用将其凭证发送到后端。后端验证该信息并返回结果。
要查看这些 API 调用，请访问任何网站并在开发者工具中打开网络选项卡。与网站进行交互，或者仅仅重新加载页面，你会看到在使用网站时发出的 API 调用。
阅读以下文章以了解更多关于 API 的信息：
到此为止，你已经知道如何开始前端和后端开发。如果你达到了这个阶段，恭喜你！你已经完成了大部分艰苦的工作。但在你开始开发项目之前，还有一件事需要学习。
Git和GitHub
Git是一个版本控制系统，用于跟踪软件项目中的更改。它允许多个人在项目上工作，而不会直接干扰彼此的工作。
GitHub是基于Git的远程仓库系统。它就像社交媒体，但用于你的代码。GitHub鼓励开发者之间的协作，并跟踪每个人的贡献。
GitHub让你分享你的项目代码，也可以查看其他开发者的代码。这促进了更多的合作和学习。我强烈建议在你开发旅程的开始阶段学习Git。
要开始使用Git和GitHub，请参考以下文章：
建立项目作品集
现在，您准备开始进行项目了。强大的项目作品集对于展示您的技能至关重要。它还帮助您应用到目前为止所学的知识，并提高您的问题解决能力。
考虑以下项目创意：
-
待办事项应用
-
电子商务应用
-
个人作品集网站
-
天气应用 – 使用公共API并创建简单的用户界面
-
费用跟踪器
你可以对这些想法进行更多研究，并从一些基本功能开始构建。根据你的目标，构建前端、后端或两者。将你的项目分享在GitHub上，以提高其可见性。
查看 GeeksforGeeks 获取更多项目创意。
部署和托管平台
一旦你开发了一个网页项目，你可以选择将其发布给公众。这意味着你的网站将可以在互联网上供公众使用。多么令人兴奋啊！
让我们理解上述术语。 部署 指的是将你的应用程序上传到远程系统或服务器的过程，以使其上线并可供用户使用。 托管 就像在互联网上租用一个空间来存储你的应用程序代码。它提供了一个空间来在服务器上保存你网站的数据，并在互联网上展示你的网站。
部署和托管应用程序主要遵循以下步骤：
-
应用程序代码被编写、在本地测试并优化以进行生产
-
所需的配置和密钥（密码、API 密钥等）被写成环境变量
-
代码被推送到像 GitHub 或 GitLab 这样的版本控制系统
-
代码会被扫描以查找任何安全漏洞，并运行自动化测试
-
托管平台从这些代码库中提取代码，并使其在互联网上可访问。
像 Netlify、GitHub Pages 和 Heroku 这样的托管服务提供免费和付费服务，易于初学者使用。Netlify 仅支持前端应用程序，而 Heroku 适合后端和全栈应用程序，并且与数据库的集成非常简单。GitHub Pages 允许您直接从代码库托管。
将您的网站发布给公众是一个向招聘人员和潜在合作者展示您工作的绝佳机会。
附加提示
-
不要在教程上花费太多时间，以免陷入“教程地狱”。教程对于理解核心概念很重要，但真正的学习发生在您动手实践时。因此，尽快开始构建，即使一开始只是小项目。
-
JavaScript 在开始时可能会让人感到不知所措，但从小做起并定期练习。不要急于一次性学习多个内容，逐个解决一个概念，并通过编码进行实践以便更好地理解。
-
最初尝试不同的框架，以找到适合你的一个。一旦选择了一个框架，就坚持使用它，直到你熟练掌握。
-
在跳入任何框架之前，确保你对编程语言的概念非常清晰。
-
如果你觉得某种编程语言不适合你，可以切换到其他语言，核心基础仍然是相同的。
-
作为初学者，了解前端和后端的基本知识是很重要的。之后，你可以选择专注于一个领域，或者选择同时关注两个领域，成为“全栈”开发者。
-
刚开始时你会面临挑战，所以不要灰心。保持练习，你会逐渐变得更好。
-
如果你遇到任何问题，可以尽量使用 Chat GPT、谷歌搜索、论坛和开发者社区，以及 Stack Overflow。我随时可以提供帮助。
-
最后，保持对网页开发最新趋势和技术的关注。始终寻找新的或改进的方法来解决问题。学习永无止境！
结论
网页开发分为两个部分：前端和后端开发。前端关注网站的外观，而后端则关注服务器端逻辑和数据库。
HTML、CSS 和 JavaScript 是前端开发的基础，构成了网站的支柱。在后端开发中，学习像 Python 或 Java 这样的编程语言是关键。前端和后端框架提供了额外的功能，使开发过程更快。
Git 是必备技能，因为它允许您分享工作并与其他开发人员协作。建立项目组合并在 GitHub 上分享可以展示您的作品，并让您成为更好的开发人员。最后，利用部署平台可以使您的网站对公众可用。
今天就到这里！希望这篇文章能帮助您开启网络开发之旅。告诉我您的想法。您的反馈总是受欢迎的！
请在 Twitter 上与我联系，以获取更多更新和讨论。如果您有任何问题或需要澄清，请随时联系我。感谢您的阅读，期待下次见到您！
参考文献：
Source:
https://www.freecodecamp.org/news/how-to-become-a-web-developer-beginners-guide/