Web开发入门指南

第一部分：Web开发基础

第二部分：Web开发工作指南

第三部分：资源

结论

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

原文发布于Educative.io

你想成为一名网页开发者，却不知从何入手？你来对地方了！今天，我们将带你踏上完整的网页开发之旅。如果你想跳过阅读，直接开始网页开发，可以访问这门精彩的免费课程：《从零开始学习网页开发：超越语法》。

今天我们将讨论以下内容：

• 第一部分：Web开发技能和工具的基础知识

• 第二部分：网页开发工作指南

• 第三部分：练习和帮助资源

让我们直接进入正题！

您是网页开发新手吗？别担心！我们建议您在继续阅读之前先查看我们的网页开发者常见问题解答！

第一部分：Web开发基础

作为一名网页开发人员，我需要哪些技能？

任何人都可以成为网页开发人员。你不需要计算机科学方面的学位就能掌握这些技能，但在你开始在这个领域寻找工作之前，你需要学习一些东西。

1. 互联网和网站的基本工作原理
2. HTML、CSS 和 JavaScript 的基础知识
3. 库和框架，例如 jQuery、React.js 和 Bootstrap
4. 其他编程语言，例如 Python 和 Ruby（仅限后端 Web 开发人员）
5. Git 和 GitHub

别被这些知识吓到。这些技能都是环环相扣的，所以重要的是循序渐进地学习，打好基础。

好了，现在你知道接下来要做什么了。让我们开始学习吧！

基础知识

互联网由三个相互作用的功能组成。

• 网站：我们通过计算机和服务器访问的文件和信息的集合。

• 服务器：在庞大的网络中存储网站所有数据的计算机

• 浏览器：用于加载和显示计算机上内容的程序

每个网站都由前端（客户端）和后端（服务器端）组成。前端包含用户访问网站时直接看到和体验到的所有内容。后端则是在幕后运行的，负责信息的存储、发送和接收。

网站上的所有内容，比如你现在看到的这个网站，都是由 HTML、CSS 和 Javascript 文件组成的。这些是网页开发者最基础的工具，也是你用来创建网页的语言。那么，让我们来了解一下它们的作用吧！

什么是HTML？

HTML（超文本标记语言）是网页开发的基础编程语言。它提供了网站的基本结构，例如文字、标题和段落。HTML 由一系列预设的标签组成tags，这些标签代表不同的功能，最终将信息“转换”成屏幕上可读的内容。这些标签写在尖括号内。

例如，被 <b> 标签包裹的文本<b> </b>将加粗。<h1> 标签<h6> </h6>会将文本设置为最小的标题字号。

什么是CSS？

CSS（层叠样式表）是一种样式表，它主要描述HTML元素在网页上的显示方式。您可以使用CSS来控制网站的呈现方式、样式和格式，例如RGB值、边框颜色、背景图像等等。CSS文件声明了一组规则，这些规则定义了一组属性及其值。

例如：

<h4 style="color:Tomato;">Tomato Red</h4>

决定文本“番茄红”将以“番茄红”色显示。

什么是 JavaScript？

JavaScript 是控制网页行为的语言。如果你对 Web 开发感兴趣，就必须开始学习JavaScript 的基础知识。它是世界上最流行、应用最广泛的编程语言之一，入门门槛低，并且代码运行成功后能立即见效。JavaScript 通过操作各种 HTML 和 CSS 元素，使网站具有交互性。借助 JavaScript，用户可以点击按钮、滚动到页面底部，或者在动态轮播图中显示照片。

例如，这段代码规定，当按下“点击此处”按钮时，“大字体”一词变为 35px 大小。

<button type="button" 
onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button>

通过《从零开始学习 Web 开发：超越语法》免费开始学习 HTML、CSS 和 JavaScript 。

技术栈

好了，现在我们已经了解了 HTML、CSS 和 JavaScript 的基础知识。接下来，我们需要学习框架和库，它们都是技术栈的一部分。技术栈是指构建网站的软件、应用程序、编程语言和工具的组合，它们彼此相互叠加，最终构成你的网站。公司和 Web 开发人员会根据自身独特的需求和目标使用不同的技术栈。

那么，框架和库是什么？我们为什么需要它们？虽然理论上你可以不用这些工具制作网页，但如果没有它们，你很难成为一名优秀的网页开发者。

什么是框架？

你可以完全从零开始构建一个网页，但这非常耗时，尤其是在你想添加更多复杂功能的时候。这时，JavaScript 框架就派上用场了。框架就像一个预先打包好的、预先编写好的网站代码结构，它决定了程序之间的交互方式。

假设你想造一辆车。与其从零开始，不如直接购买一个现成的车架，这样既能节省时间，又能确保造出一辆真正能开的车。Web 开发中的框架与之类似。它提供内置的程序、插件和工具，你可以将它们安装到你的网站文件中。框架可以加快你的开发速度，而且它们是由其他开发者创建的，所以你知道代码已经过预先测试，并且有效。

后端框架和前端框架使用不同的编程语言。让我们来看几个比较知名的框架，帮助你入门。

后端框架

• Express JS：IBM 和 Uber 都在使用；设计极简；对初学者来说比较难。
• Django：被谷歌、Instagram 等公司使用；内置大量功能；基于 Python
• Spring Boot：易于使用；适用于大型云项目；基于 Java
• Ruby on Rails：SoundCloud 使用；适合小型项目；基于 Ruby
• Flask：Lyft 使用；易于设置；基于 Python

前端框架

• Ember：被 Netflix 和 LinkedIn 使用；适用于移动应用；基于 JavaScript
• React：易于操作 DOM；易于学习；基于 JavaScript
• Backbone：轻量级；有助于代码组织；基于 JavaScript
• Vue：渐进式框架；易于理解；基于 JavaScript
• Angular：适合单页应用程序；对搜索引擎优化 (SEO) 不友好；基于 TypeScript。

什么是图书馆？

库是一系列特定工具和功能的集合，您可以将其添加到网站以增强其功能。与框架不同，库本身不提供任何结构，而是实现网页上的各种行为和操作。

让我们回到汽车的比喻。如果框架是汽车的车架，那么库就是你添加到汽车上的各种功能和部件，以便根据你的需求进行定制，例如轮胎、空调或方向盘。

有很多不同的库，每个库的用途各不相同。让我们来看几个例子，了解一下它们的功能。

• jQuery：用于操作 HTML、DOM 和 CSS
• React.js：用于创建交互式用户界面
• Chart.js：用于使用 JavaScript 创建图表的工具
• Wow.js：用于在滚动时显示动画
• Scrolline.js：用于显示您在页面上的滚动距离

jQuery 和 React.js 可能是你目前最应该学习的库。它们非常流行，并且拥有数百种独特的功能，可以用来创建非常酷炫的东西。

什么是 Node.js？

Node.js是一款流行的开源服务器端工具，适用于全栈和后端开发人员。Node 是一个运行时环境，用于执行 Web 程序。它非常适合构建网络应用程序。Node 还自带丰富的 JavaScript 模块库，可以简化 Web 应用程序的开发流程。Node.js 的应用越来越标准化，甚至在企业级组织中也得到了广泛应用，因此掌握它是一项非常有价值的工具。

成为网页开发人员还需要哪些其他工具？

开始学习之前，拥有合适的工具能让你更快更高效地学习。幸运的是，你只需要三样基本工具就能入门：浏览器、文本编辑器和版本控制系统。

网络浏览器

这里将是你测试代码的地方。优秀的网页开发者应该能够熟练使用多种浏览器，但刚开始的时候，先用一种浏览器熟悉一下也无妨。下面列出了网页开发者最常用的浏览器。这份列表并不完整，随着你的研究和学习，你还会接触到其他浏览器。

• Mozilla Firefox：开源，原生支持所有平台，更新频繁
• Google Chrome：开发者工具方便排查 JavaScript 问题，但占用大量内存
• Edge：与 Windows 系统集成，缺点与 IE 类似。
• Brave：注重性能、安全性高，但插件支持较差
• Safari：优秀的开发者工具，但与 Windows 系统集成度不高。
• Opera：免费VPS服务，缺点与IE类似。

文本编辑器

这里是您编写代码的地方。文本编辑器有很多不同的选择。您的计算机可能自带一个，但我们建议您使用功能更强大的编辑器。Web 开发人员最常用的文本编辑器有：

• Atom：开源、跨平台，由 GitHub 创建，以速度快而闻名（免费）
• Sublime Text：跨平台，以其插件和快捷键而闻名（70 美元）
• VS Code：开源软件，由微软创建，交互式调试器（免费）
• Brackets：开源软件，由 Adob​​e 开发，具有实时预览功能（免费）

与浏览器不同，大多数网页开发者都坚持使用同一款文本编辑器。不妨尝试不同的编辑器，看看哪一款最适合你。使用得越多，你的肌肉记忆就越强。

内容管理系统（CMS）

内容管理系统（CMS）是一种用于简化编辑、创建和发布作品的软件。CMS 将网站的所有功能集成到一个易于访问的平台中，让您可以更好地掌控自己的内容。许多 CMS 系统都能帮助您进行内容管理、市场营销和内容分发。

内容管理系统（CMS）通常使用数据库（例如 MySQL 和 MariaDB），其中存储着以特定编程语言编写的程序和工具集合。这样，您就可以编辑和管理您的网站，而无需深入了解代码的细节。

选择内容管理系统 (CMS) 取决于诸多因素，例如用户数量、团队规模以及界面易用性。对于初学者来说，WordPress是一个不错的选择。它是一款免费的开源网站托管服务，用于构建和发布网站。WordPress 在博客圈非常流行，而且入门门槛低。凭借庞大的支持社区，您遇到的问题很可能都能很快找到答案。

其他一些值得注意的内容管理系统软件包括Drupal、Typo3和Joomla！

第二部分：Web开发工作指南

网页开发人员有哪些工作机会？

一旦你对自己的网页开发技能充满信心，就该真正开始找工作，将技能运用到实际工作中了。那么，从哪里入手呢？有哪些选择？接下来，我们将探讨你在寻找最适合自己的工作时需要考虑的三件事。

第一步：确定你想专攻哪种类型的网页开发。

寻找工作的第一步是确定你想成为哪种类型的网页开发人员。网页开发人员的工作大致可以分为三类：前端、后端和全栈。你可能还不清楚哪一类更适合自己，这没关系！随着你不断实践和探索，你会越来越清楚自己的方向。

前端开发人员负责网站的布局和视觉效果，使用 HTML、CSS 和 JavaScript 等语言。他们从事网页设计和用户体验方面的工作。这类开发人员适合喜欢精益求精的人。前端开发人员的薪资通常在 4.5 万美元到 7.5 万美元之间。

后端Web开发人员负责网站框架的开发，包括数据的获取和显示。他们使用Java、Python和Ruby等编程语言，并结合HTML、CSS和JavaScript等基础技术。这类Web开发工作适合那些更注重功能而非设计的人。后端Web开发人员的薪资通常在5.5万美元到8.5万美元之间。

全栈Web开发人员负责Web开发的各个方面。全栈开发人员的薪资通常在6万至11万美元之间。点击此处了解更多关于如何成为全栈Web开发人员的信息！

第二步：确定最适合你的工作环境

在正式开启职业生涯之前，你应该考虑一下网页开发人员可以有哪些不同的工作环境。你可以选择自由职业，也可以在大公司找到一份全职工作，加入创业公司，甚至可以从事教学工作。想想哪种环境最适合你的个人情况。这将决定你如何推销自己，如何设计作品集，以及在哪里寻找工作机会。

第三步：开始构建你的优秀项目和技能作品集

一份出色的网页开发作品集对于在这个领域找到工作至关重要。在这个网站上，你可以展示你辛辛苦苦积累的技能、精美的设计以及最优秀的网页项目。我们知道你刚刚起步，所以不要让这一步让你感到压力。随着你学​​习和实践的深入，你会逐渐积累作品集所需的一切。你的作品集甚至可以展示你早期的作品和练习项目！

有很多网站可以让你发布作品集。对于刚开始学习网页设计的朋友，这里有三个不错的选择。去看看吧，从其他网页开发者那里获得一些灵感：Github Pages、Repl、Carbonmade、Krop。

哪里可以找到招聘信息？

既然你已经了解了有哪些类型的工作，接下来就需要知道去哪里寻找它们。有很多求职资源，涵盖了从通用型到专业型的各种类型。

重要提示：了解招聘信息的最佳途径之一是加入 Web 开发社区。拓展人脉是了解工作机会、发现自己对哪类工作充满热情的关键。不要害怕参加各种聚会、会议和求职研讨会。

对于一般的招聘网站：
Glassdoor、Indeed和LinkedIn是进行广泛、全面的 Web 开发工作搜索的好去处。

适用于远程/自由职业招聘网站：

• Upwork：根据您的需求定制招聘信息
• Just Remote：专门针对技术类工作
• JobsPresso：多种工作选择
• FlexJobs：在各大媒体上亮相

针对技术类招聘网站：

• Mashable招聘板块：可按公司搜索
• 粉碎工作：极简界面
• Krop：专为网页设计师量身打造
• GitHub Jobs：庞大的用户社区

针对初创公司招聘网站：

• 创业者：特指湾区创业者
• 天使投资人：直接与创始人对话
• Hired：只提供经过审核的初创公司。

第三部分：资源

哪里可以学习更多关于网页开发的知识？

开始新事物既令人兴奋又令人忐忑。幸运的是，有很多资源可以帮助你不断学习和寻求建议。我们整理了一份最重要的资源、论坛和简报清单，助你轻松入门。

• Awwwards.com：浏览其他网页开发者的作品，从中汲取灵感。

• Codrops：一个面向网页开发者的博客，专注于最新趋势、教程和设计技巧。

• Codepen：一个用于构建和测试代码的平台

• CSS技巧：每日获取有关CSS、HTML和JavaScript主题的文章。

• 设计师交流会：用户体验设计师最活跃的社区

• DZone：面向网页开发初学者的在线教程和工具中心

• EdPresso：教育类在线词典，提供常见问题的快速解答。这些解答按标签分类，并配有实用的可视化图表，帮助您快速学习。

• GitHub / StackOverflow：开放访问的论坛和讨论区，全球程序员和开发者社区在这里分享代码、回答问题并对项目提供反馈。

• Meetup：一个本地活动搜索引擎，您可以按类别浏览。

• Smashing Magazine：一个国际博客和蓬勃发展的网络开发人员社区，他们讨论书籍、网络研讨会、网络开发折扣等。

• Webdevforums：一个可以获取项目反馈并提出SEO相关问题的论坛。

• Web开发者论坛：一个关于Web开发和程序相关问题的综合论坛，按前端和后端问题进行分类。

• Whatis.com：一个免费的在线词典，提供与编码和网页开发相关的术语。

结论

你已经走到这一步了！太棒了！你已经准备好开始你的Web开发之旅了。那么，从哪里开始呢？

我们与专家合作，精心打造了一套简单易用的入门课程，涵盖您所需的一切知识。我们的免费“从零开始学习 Web 开发”课程将带您拨开迷雾，通过实践操作、文字讲解和互动练习，循序渐进地引导您进入 Web 开发的世界。

前三节课将带你熟悉 Web 开发基础知识，并让你亲身实践这门新语言。

课程接下来会深入讲解编程接口，并教你如何修改你现在掌握的编程语言。完成课程后，你将能够运用所学知识开发功能齐全的Web模块，例如图片轮播图和待办事项应用。

本课程也是我们精心设计的学习路径的一部分。完成课程后，只需轻轻一点，您就能自动知道接下来要学习什么！

我们知道，对于初学者来说，学习网页开发本身就很难，所以我们认为，迈出第一步不应该给您带来任何额外的成本或压力。因此，我们完全免费提供“从零开始学习网页开发”课程！您将获得课程的终身访问权限，无需支付任何隐性订阅费用。您甚至可以立即开始学习！