学习 Web 开发：初学者的 7 个基本步骤

在 Web 开发领域开展职业生涯似乎非常棘手。有无数的语言和工具需要学习——对于初学者来说，甚至弄清楚从哪里开始学习似乎也很困难。

但在实践中，这个过程可能不会像您想象的那么复杂。一旦您了解作为入门级 Web 开发人员需要具备哪些技能，您将能够在短期内建立您的学术基础。

想知道如何学习网页开发？我们是来帮忙的。本文适用于任何有兴趣进入 Web 开发领域或希望提高现有技能的人。它将涵盖一些基本术语、Web 开发专业知识以及开发和管理网站所需的工具和技能。换句话说，它将带您了解启动您的职业生涯所需了解的一切。

让我们开始吧！

学习 Web 开发的 7 个步骤

我们将介绍您需要了解的有关 Web 开发基础知识的所有内容，从网站如何工作的基本细节到高级设计概念。

1. Web 开发 101：网站如何运作？

在最基本的层面上，网站是存储在连接到互联网的服务器上的文件和代码的集合。您可以通过浏览器（例如 Chrome、Firefox、Safari）加载网站来访问网站，也称为客户端。这对构成了“服务器-客户端模型”。

让我们考虑一下这是如何运作的：假设您的朋友向您发送了一个有趣视频的链接。当您单击该链接时，您的 Web 浏览器（客户端）会向视频网站（服务器）发送请求以获取视频文件。该网站的服务器接收请求并将文件发送到您的计算机。

客户端和服务器端分别称为“前端”和“后端”。前端 Web 开发人员专注于网站的客户端功能，而后端 Web 开发人员专注于网站的服务器端开发。全栈开发人员只使用“全栈”开发技术，并且精通前端和后端技术。

了解每一个之间的差异可以帮助您决定在您的职业生涯中您想专攻这三个领域中的哪一个。现在，让我们介绍一下前端、后端和全栈 Web 开发之间的区别。

什么是前端开发？

前端开发人员创建您在与网站交互时看到的内容。这包括可以在客户端机器上执行的视觉元素，例如菜单、按钮和动画。前端开发人员使用三种主要语言：创建网站结构的 HTML、改变网站外观的 CSS 和创建交互元素的 JavaScript。

什么是后端开发？

后端开发人员使用网站的服务器端。这涉及管理网络服务器、与数据库交互和使用数据分析——所有这些都是用户在与网站交互时看不到的功能。后端开发人员还可以使用 SQL 和 Python 等以数据为中心的技术来管理网站的功能。

什么是全栈 Web 开发人员？

全栈开发人员是网站相关技术“全栈”方面的专家。

如果您想知道成为一名全栈开发人员需要多长时间，请不要担心；担任这个多才多艺的角色比您想象的要容易。通过全日制训练营，专注的技术爱好者可以在短短三到六个月内积累就业技能。也就是说，那些喜欢正式学位所提供的全面性的人应该准备好预留四年或更长时间的教育时间。

全栈开发人员的职责和责任

全栈网络开发人员的任务是完成多项与网站相关的任务。这些通常包括但不限于：

• 开发前端网站设计
• 了解用户界面和用户体验设计
• 编写技术文档
• 设计网站架构
• 实施数据安全协议
• 创建服务器和数据库
• 确保移动设备的跨平台优化

---

---

2. 获取开始所需的工具

电脑基本规格 

您可以使用任何能够运行 Windows、macOS 或 Linux 的机器开始 Web 开发。编程的最低要求包括：

• 较新 Mac 上的 Intel i5/i7 处理器或 Apple Silicon 处理器
• 全高清显示器或内置笔记本电脑屏幕，最好是 1920×1080
• 8GB 内存

基本文本编辑器

您将需要一个文本编辑器来管理您编写的所有代码。值得庆幸的是，市场上有很多免费选项可以帮助您入门。

Sublime Text是一款适合初学者的优秀文本编辑器。VS code是适用于 Mac、Windows 和 Linux 的另一个绝佳选择。

web浏览器

你需要一个web浏览器来编码。鉴于您正在阅读本文，您可能已经有了一篇！也就是说，下载多个浏览器可以确保您的网站在网络上正确呈现，因此您应该有多个浏览器供您使用。流行的选项包括Chrome 、Safari 、Microsoft Edge 、Firefox 、Brave或Opera 。

本地web服务器

设置本地 Web 服务器可以让您在您的机器上测试您的代码，而无需将任何内容发布到 Internet。您可以在开发过程中测试布局、脚本和新功能。

例如，Nginx是一种可以在您的 Mac、Windows 或 Linux 机器上运行服务器的实用程序。

图形编辑器

图形编辑器可以帮助开发人员创建和编辑图形网站元素。Adobe Creative Suite是行业标准，但如果您是设计新手，它的月费可能会很高。对于替代方案，请查看GIMP（Adobe Photoshop 的免费版本）和Inkscape （ Adobe Illustrator 的免费版本，用于创建矢量图形）。

3. 学习前端开发基础

前端开发人员确定网站在客户端加载时的外观。他们负责创建和设计所有面向用户的网站元素。下面，我们列出了所有有抱负的前端开发人员在找到第一份工作之前需要了解的语言。

HTML 

超文本标记语言 (HTML) 允许编码人员定义网站的基本结构和设计。HTML 文件告诉浏览器要在设备屏幕上显示什么以及段落、列表和图像等元素的排列方式。

HTML 非常易于访问，可以为编码新手提供出色的介绍。它是 Web 开发人员工具包的重要组成部分，是所有网站的起点。现代网站利用 JavaScript 等强大的脚本语言来创建动态 Web 内容。然而，即使它是一种更古老的技术，HTML 仍然是这些网站的核心。

想了解有关这种“构建块”编码语言的更多信息吗？这是学习 HTML 的指南。

CSS

级联样式表 (CSS) 改变了 HTML 元素在屏幕上的显示方式。理解 CSS 可以让你在所有主流浏览器上创建美观的网页。您可以更改页面的布局、颜色和字体，以及向页面元素添加效果。

CSS 与 HTML 结合使用来创建和设置网页样式。它易于学习和理解，但也有很多深度。CSS 使您能够很好地控制 HTML 文档如何呈现给用户——因此，学习 CSS对于任何想要创建美观且响应迅速的网站的人来说都是至关重要的。

JavaScript

JavaScript 是前端 Web 开发人员工具箱中的另一个重要组件。根据HackerRank 的 2020 年开发人员报告（PDF，2.8MB），它是市场上最受欢迎的语言之一，也是招聘经理最需要的语言之一。

JavaScript 是一种客户端语言，与 HTML 和 CSS 一起用于创建动态的响应式网站。它易于上手且用途广泛，允许开发人员处理网站设计和功能的任何部分。许多与编写 JavaScript 相关的技能也可以应用于其他语言，如 Python 和 Java，使其成为编码的绝佳入门。

学习 JavaScript 对于任何想成为全栈或前端 Web 开发人员的人来说都是必不可少的。查看我们的JavaScript 初学者指南， 了解更多信息和学习这门重要语言的方法。

4. 需要学习的额外前端开发工具

前端开发工具有助于自动化和管理您的代码编写过程，因此最好在处理任何密集型编程项目之前确定潜在的支持来源。

包管理器

包管理器可以安装用于前端开发的库和其他依赖项（也称为包）。依赖项是解决问题或执行功能的第三方软件。例如，npm是一个包管理器，顾名思义，它可以帮助开发人员安装和管理新包。

构建工具 

构建工具可以自动化 Web 开发的某些方面。它们对于琐碎且容易出错的任务很有用，例如替换文件中的文本字符串以及移动或合并文件。下面，我们列出了一些有抱负的开发人员可能会觉得有用的内容。

gulp是一个任务运行器，可以自动执行 JavaScript 中的特定开发任务。您可以使用它来运行本地服务器、优化图像和预处理 CSS 文件。它功能强大，但需要一些努力来配置。

webpack是一个在 JavaScript 开发中经常使用的打包器。它为您的应用程序获取代码并使其在网络上可用，根据代码的使用方式将您的代码分开。这使得管理和调试变得更加容易。

Parcel与 webpack类似，因为它是一个捆绑器，但它需要较少的设置即可上手。

版本控制

版本控制系统管理您对代码所做的更改，并允许您在犯错或想要进行更改时恢复到以前的版本。

当您开始学习版本控制时，您可能最终会使用 Git。Git是一个行业标准的版本控制系统，在主要的 Web 开发公司中使用。它是任何前端开发人员工具包中的一个易于学习的组件。

GitHub 是 Microsoft 旗下的一家在线托管公司，可让您存储 Git 文件并与他人共享。将其视为程序员和 Web 开发人员的社交网络。许多大公司使用 GitHub 来管理项目的版本控制和代码更改——它也是您展示项目和构建作品集的绝佳场所。

响应式设计 

想一想您在日常生活中使用的所有设备——笔记本电脑、台式机、平板电脑和智能手机。您创建的每个网站都需要在用户可能拥有的每台设备上运行。

响应式设计是指网站应响应用户的行为和设备。响应式网站可在任何设备上使用，显示在从 32 英寸显示器到 5.5 英寸智能手机的所有设备上。随着越来越多的人主要在移动设备上访问网络，了解响应式设计对于现代网络开发人员来说至关重要。

JavaScript 框架

JavaScript 框架是包含可用于日常任务的预编写代码的库的集合。使用框架可以帮助您更有效地构建站点，因为您无需从头开始设计所有内容。

例如，假设您正在为本地企业构建一个“关于我们”网页，并希望在用户将鼠标悬停在员工头像上时触发动画。您可以使用框架来节省时间，而不是从头开始构建动画。

Bootstrap 是一个巨大的跨 CSS、HTML 和 JavaScript 的前端代码框架。有兴趣了解更多吗？查看我们的Bootstrap 指南！

其他需要检查的主要前端 JavaScript 框架包括React、Vue.js和AngularJS。

5. 学习 WordPress 基础知识

WordPress 是当今互联网上无数博客和网站的基础网络发布软件。任何人都可以免费下载和使用 WordPress，因此了解如何使用它是一项基本技能。您可能会在专业领域遇到 WordPress，因此了解它的工作原理可以在将来获得回报。

6. 学习后端开发的基础知识

后端开发涉及用户看不到的结构和任务——即服务器、数据库和数据分析。

使用服务器 

后端开发人员应该熟悉服务器以及如何管理它们。

第一种服务器是传统的集中式服务器。这是一台运行 Windows 或 Linux 并将其所有信息存储在一个地方的机器。大型企业公司通常使用集中式服务器架构，因为他们希望更好地控制存储和访问数据的方式。

但是，您不需要中央服务器；您必须购买自己的服务器并将其安装在自己家中的日子已经一去不复返了。阿里云等云托管公司可让您使用他们的服务器运行网站。

如今，许多公司已转向分布式或无服务器托管。使用此体系结构需要供应商为您的站点提供后端服务。无服务器有点用词不当——服务器仍然存在，但你不负责维护它。这种设置很受欢迎，因为它相对便宜、速度相当快并且易于扩展。

Amazon Web Services (AWS) 和Microsoft Azure等无服务器供应商为现代互联网的很大一部分提供基础设施。了解如何使用其中一个平台是当今后端开发人员的一项宝贵技能。

那么，您如何知道应该使用集中式服务器架构还是无服务器架构？首先，您需要考虑您的特定业务和技术需求。初创公司经常使用无服务器供应商，因为他们受益于平台的可扩展性和快速设置时间。但是，集中式服务器通常更适合长期承受高计算负载的大型公司网站。

编程语言 

后端开发人员还应该了解几种不同的编程语言，包括：

• Java：  Java 是一种通用编程语言，可用于客户端和服务器端应用程序。它已经存在了 20 多年，被认为是更容易学习的语言之一。Java 是一种开源语言，拥有庞大的开发人员社区和庞大的构建工具和资源库。 Java 的成熟使其成为一种健壮、可靠和可扩展的语言。大型企业公司经常使用它，因此接触这种语言会对您以后进入劳动力市场有所帮助。
• Python：Python 是后端开发中使用的另一种流行的编程语言。事实上，它是世界上 最流行的编程语言之一。Python 是另一种适合初学者的优秀语言，因为它直观、灵活且用途广泛；它经常用于后端开发、数据分析和数据科学。查看我们的Python 初学者指南了解更多信息！
• Node.js： 在最基本的层面上，Node.js使开发人员能够将 JavaScript 应用于后端编程。它是一个运行时环境，允许开发人员在服务器上执行 JavaScript 代码和脚本以创建动态网页。 许多著名的科技公司都使用 Node.js；其中包括贝宝、优步和微软。鉴于它在主要技术参与者中的普遍性，了解 Node.js 将使您作为专业人士受益匪浅。
• PHP：  PHP 是一种在服务器上运行的脚本语言。一般而言，PHP 用于从站点服务器请求内容，并使用户在他们的计算机上可以看到这些内容。 例如，一个 PHP 脚本可以使您最近的三篇博文自动出现在您网站的主页上。帖子本身存储在服务器上，并在用户访问您的主页时调用；无需重新加载页面。 了解 PHP 对于任何使用 WordPress 网站的人来说都是必不可少的，因为 PHP 是自定义 WordPress 主题和插件背后的引擎。
• Ruby：  Ruby 是在 20 世纪 90 年代中期作为一种灵活而全面的语言开发的。它在初创公司和小型企业中很受欢迎，因为使用 Ruby 启动项目只需很少的时间，并且您可以使用它快速制作应用程序原型。 Ruby 不像其他一些后端语言那样流行，但它仍然拥有强大的开发人员社区。对于初学者或任何想在创业环境中工作的人来说，这是一个很好的选择。

使用数据库 

数据库在后端开发中至关重要。您需要知道如何管理和访问数据才能成长为后端开发人员。

结构化查询语言 (SQL) 是一种在数据科学家和后端开发人员中流行的查询语言。它用于创建数据库、将新数据添加到现有数据库中以及修改数据库中的数据。SQL 允许开发人员从关系数据库查询数据——数据被组织成表的数据库。MySQL和Microsoft SQL Server 是一些广泛使用的选项。

（想了解更多信息？查看我们的SQL 指南。）

您还需要了解如何使用 NoSQL 数据库。这些数据库不以表、列和行的形式构建它们的数据。相反，这些数据库敏捷、灵活且直接。对于处理无法在传统表格中有效组织的大量数据的企业来说，它们是一个很好的选择。

了解 SQL 和 NoSQL 数据库可以为您提供更多的工作灵活性。毕竟，不同的业务有不同的需求，因此了解如何使用各种数据库类型可以帮助您在未来的职业生涯中。

如果不能分析数据就毫无意义，雇主寻找能够有效分析数据集的开发人员。我们的数据分析指南可以帮助您入门。

7. 网站架构和设计基础

到目前为止，我们讨论的所有内容都涉及网站的技术实现。作为 Web 开发人员，您还应该了解网站架构和设计的一些基础知识。

您需要对您的网站、您的用户和您的目标进行一些高层次的思考。你想让谁阅读你的网站？他们来自哪里？你想让他们做什么——购买产品、填写表格或做其他事情？您的网站不需要吸引所有人，但它应该吸引您的目标用户。

网站架构是指您网站内页面的布局和结构。这可以包括如下页面：

• 一个主页
• “关于”页面
• 着陆页
• “联系我们”页面

您需要的页面将根据您的网站应该做什么而改变。例如，电子商务网站可能会展示产品类别、产品页面和产品子类别。

考虑用户将如何浏览您的网站。一切都会集中在一个页面上吗？您是否希望您的用户浏览网站并了解有关您的公司或服务的更多信息？您需要确保您网站的架构传达了其目的并且易于浏览。

设计是另一个重要的考虑因素。作为网页设计师，您将管理网站的外观和布局。您网站的外观涉及整个网站使用的字体、颜色和图像。布局是指信息在每个页面上的结构和分类方式。这是让您展现艺术魅力的机会。

有效的网页设计更广泛地借鉴了设计原则。考虑：

颜色 

在颜色方面，您有很多选择，而颜色可以从用户的第一印象中推销您网站的故事。例如，自然博客可能希望使用大地色系的绿色、棕色和灰色。了解一些基本的色彩理论会有所帮助。

字体 

像颜色一样，您有大量的字体选择需要考虑——字体可以说明您网站的很多信息。不同的字体传达不同的信息，因此选择合适的字体至关重要。查看Google 的网络字体选择指南以了解更多信息。

布局

您网站的结构应遵循视觉层次结构。哪些想法对用户来说很重要，他们应该以什么顺序看到它们？大多数人以 F 形或 Z 形模式阅读网站。了解人们如何与网络交互可以帮助您设置页面。

开始考虑设计的一种方法是访问一些您最喜欢的网站。注意他们使用的颜色、字体和布局。这些元素让你感觉如何？他们传达了公司的哪些特征？注意各个组件的布局方式，以及颜色和字体的使用。这可以帮助您以新的方式查看您构建的网站。

要考虑的提示

• 定义你的目标：如果你没有计划，跳入 Web 开发的深处可能会感到不知所措。想想你想学什么，并制定一个时间表来实现你的目标。
• 超越教程：最好的学习方法之一就是将所学知识付诸实践——教程不会让你在一夜之间成为开发人员。制作真实世界的网站对您的学习至关重要。
• 参加训练营或课程：在 Web 开发方面有很多东西需要学习。参加专注于 Web 开发的编码训练营可以帮助您在一段紧凑的时间内组织学习，以便您可以快速开始构建网站。
• 永远不要停止学习：网络在不断变化——因此，网络最佳实践自然也是如此。今天学到的东西，五年后可能就不是标准了，所以要时刻保持学习的心态。
• 整理一个作品集：创建一个作品集可以让您在开始求职后向雇主展示一些东西。跟踪您的项目并向世界展示它们。

常见问题

建站需要学什么软件？

您需要一台装有Chrome 、Firefox或Safari 等网络浏览器的计算机。您还需要一个像VS code这样的文本编辑器来编写和管理代码，以及一个像nginx这样的本地 Web 服务器实用程序来在您编写网站时测试它们。

Web开发需要学位吗？

最简洁的答案是不。许多专业的 Web 开发人员在没有学位的情况下从事该领域的工作。如果你打算加入他们，你需要建立一个作品集来展示你的技能并传达你可以为潜在雇主带来的东西。如果您对这个过程感兴趣， 我们有一个关于如何成为网络开发人员的 指南。

我应该学习哪些 Web 开发语言？

您需要了解一些内容以帮助您了解网站的工作原理。例如，HTML、CSS 和 JavaScript 通常用于前端开发，而PHP、 Python、Java 和 Node.js 则非常适合从事后端开发的人员。

学习网络开发需要多长时间？

这个答案取决于您的技术背景和您可以投入学习的时间。对于之前有网络开发经验的人来说，周转时间可能短至三个月，而对于没有经验的人来说，周转时间可能在六个月到一年左右。完成编码训练营可以帮助您更快地掌握结构化课程。

我需要具备技术背景才能学习 Web 开发吗？

拥有技术知识可以加快这个过程，但这绝不是必需的。先前的编程语言经验可以帮助您掌握所涉及的概念，但许多编码语言和工具相对直观且易于掌握。如果您对快速启动编码教育有任何疑问，请联系我们！

浏览 Web 开发文章

从基础知识到更高级的 Web 开发教程。