序
本文是针对初学者的关于Web开发基础的两章系列文章的第一部分。第二章将是“第二部分:后端”。
本指南分为两部分。今天我们就从第一部分——前端开发开始，给大家介绍一下这个领域最重要的语言和工具。
读完这篇文章，你会得到:
开始像网页开发者一样思考。解释什么是Web开发以及HTML、CSS和Javascript在创建Web内容中的作用。学习成为一名网站开发者需要知道的东西。什么是Web开发？
Web开发是软件工程的一个特定领域，重点是构建网页。或者Web应用程序是一个代码库，每当用户导航到一个网站地址时，它就会被下载并在我们的Web浏览器中运行。这不同于其他软件通常下载一次，在电脑或手机上作为独立应用程序运行。Web开发让你的职业生涯激动人心，因为Web开发周期通常要短得多，你可以更快地遍历软件。
Web的主要构件是HTML、CSS和Javascript。我们将讨论所有三种语言。我们也可以把Web开发分为两大类:前端和后端。我们将详细讨论前端。
术语前端是什么意思？
你在网络上看到的一切都被视为“前端”。前端就是你打开网页或应用时看到的。代码从服务器下载，并通过网络浏览器显示在屏幕上。我们与代码交互时发生的事情也被认为是前端。在软件开发术语中，这通常被称为“表示层”或“客户端”。
开发前端语言和工具
我们先从前端学习路线思维导图开始，它描绘了你至少应该知道的东西。
前端开发是指创建一个Web用户界面，即用户看到并与之交互的应用程序部分。前端开发牢牢地站在三个支柱上:HTML用于标记，CSS用于风格，Javascript用于逻辑和交互。虽然这三种技术经受住了时间的考验，但是基本的工具和框架是不断变化的。本节将为您提供一个开始探索前端生态系统的起点。
前端开发也与网页设计和用户体验密切相关，两者的边界在每个公司可能都不一样。通常前端开发者关注的是技术问题，而网页设计师关注的是审美和用户体验。
HTML:
HTML是一种超文本标记语言，可以构造显示给用户的信息。它是一个HTML文档，其中包含的元素的每个元素都由HTML标记表示，如标题、文本段落或文本输入字段。HTML文档也可以使用超链接链接到其他文档。每个标签都有自己的内容类型，具有特定的外观和附加行为。一旦你掌握了HTML，你就可以创建一个非常简单的静态HTML页面。
CSS:
CSS是一种风格语言，用于描述HTML元素的视觉外观。它可以用来控制各个方面，如元素的位置、大小、文本样式或颜色，或者网站的几乎任何其他视觉方面。样式被定义为一组规则，可以应用于页面上元素子集的单个元素。的最新CSS功能使您能够超越基本样式，控制更复杂的视觉效果，如动画。
Javascript:
Javascript是开发Web用户界面最常用的编程语言。它允许你在你的网站上添加自定义行为，比如响应用户事件，从web服务加载数据，在页面上显示或隐藏元素。它还允许您通过各种API与浏览器进行交互。您可以使用它来为您的网站添加单独的交互元素或创建复杂的web应用程序。
另一个与Javascript相关的术语，你可能也会碰到，就是ECMAscript，它实际上是Javascript的语言规范。在大多数情况下，它们可以被视为同义词。
框架:
Javascript是一种强大的语言，但如果你想创建一个复杂的应用程序，在没有框架的情况下使用它会导致大量复杂的样板代码。简单来说，有很多框架可以帮助实现基本功能，比如HTML操作、数据加载、整体应用架构等。目前最流行的三个框架是React、Angular和Vue.js
React是一个由脸书开发的用于构建用户界面的库。React基于创建可以输入参数来呈现HTML的组件。React组件是使用Javascript的扩展JSX编写的，这使得您可以轻松地将Javascript代码与HTML结合起来。可以组合组件来创建复杂的UI元素和整个应用程序。React本身不是一个框架，它只提供视图层，但是它丰富的工具和库生态系统提供了创建复杂应用程序所需的一切。React很容易上手，但是随着时间的推移，你会期望学习新的库来填补缺失的空白。angular——Google开发的面向组件的“带电池”框架。Angular应用程序通常用Typescript编写。它提供了构建Web应用程序所需的大部分功能，包括用于指导、开发和构建项目的CLI工具，以及用于管理表单、数据加载、路由等的库。虽然它提供了开箱即用的大部分功能，但是它具有更高的抽象性和复杂性，并且需要学习作为主要开发语言的Typescript，这使得最初的学习曲线更加陡峭。Vue.js是由尤雨溪开发的，它是一个模块化的、逐渐被采用的框架。您可以开始将其用作视图层，并根据需要添加其他库。与其他框架相比，最重要的库是由核心Vue.js团队维护的。组件库
库是可用于组装应用程序的组件的集合。其中一些实现了最常见的组件，如按钮和下拉菜单，而另一些则提供了用于创建复杂的响应性布局的实用程序。虽然他们每个人都有自己独特的视觉风格，但通常可以根据项目的设计和品牌进行定制。它们中的大多数都可以通过纯CSS和Javascript获得，但是，它们通常被移植到其他流行的Javascript框架中使用。一些受欢迎的库有:
Bootstrap是创建响应性Web应用程序的强大框架。它附带了大量用于创建布局和主题引擎的组件和实用程序。您可以向组件添加用户交互，比如下拉菜单，只需了解少量的Javascript知识。用Bootstrap搭建的现成网站主题也有很多选择。材质UI——Google材质设计的流行实现。根据谷歌的规定，它提供了一套关于应用程序外观的组件和准则。还有其他实现可以用于Angular或vanilla Javascript。其他包括蚂蚁设计，基础，布尔玛，纯和语义用户界面。
前端工具
前端生态系统以其许多有用的工具而闻名，每个工具都是为自己的目的而设计的。因为它们太多了，我们无法涵盖本指南中的所有内容。因此，我们将重点介绍入门的重要内容。
NPM:
Npm实际上意味着两件事:
1.一个软件注册表，包含数千个可以在项目中安装和使用的开源库和工具。
2.一种CLI工具，可用于从注册表中安装、更新和删除软件包。
使用npm允许您安装项目将使用的库，并将它们记录在JSON文件中。将该文件与代码库存储在一起意味着您可以显式声明项目的依赖项，并在不同的环境中快速安装它们。您还可以使用它来发布自己的库，并与其他开发人员共享。
NPCLI工具还允许您运行可用于执行测试、编译代码或执行代码分析的脚本。
npm的一个类似物是Yarn，它提供了一些性能改进和对库开发的更好支持，并且与npm包注册表兼容。
前端开发工具有哪些？
您可以直接在文本编辑器中编写代码。我推荐一些很棒的免费文本编辑器，比如VSCode，Atom，Sublime Text 3等。Webstorm也很不错，但是他收费。
Web开发人员面临的独特挑战是什么？
虽然为网络开发软件有许多优点，但它也有一些缺点。这些可能是Web开发人员面临的独特挑战。
装载时间。你有没有访问过一个网站，它需要永久加载？你对此有何反应？我们一般直接骂垃圾网站。事实上，大多数用户在15秒或更短时间内不加载就会离开网站！如前所述，连接速度是处理Web开发时需要克服的一大障碍。用户的速度可以从很快到很慢。作为Web开发人员，我们的工作是考虑所有用户。因此，我们学习了一些技巧，让用户在下载我们的代码时保持参与，并学会了保持代码较小，以便可以轻松下载。
不同的浏览器。我们不仅要担心加载时间，还要考虑浏览器技术的差异。手机浏览器不同于桌面浏览器。旧浏览器与新浏览器有很大不同，这给每个浏览器的开发带来了独特的挑战。最终，您将不得不做出牺牲，不支持某些浏览器，但是您应该能够为支持的浏览器编写代码。
辅助功能。如果你不是在网络上使用辅助设备开发软件的人，那么你可能不知道这些软件是否存在。屏幕阅读器、替代键盘/导航设备、听障设备、色盲、视障人士的字体大小，这些都是我们经常想不到的概念。作为一个网页开发者，你不仅要从人们礼仪的角度来考虑这些用户，还因为这些用户的市场份额微乎其微。还有一些法律问题需要可访问性。
这应该足够让你走上前端开发的轨道了。如果你觉得这是你想更详细了解的东西，那么你会有很多有趣的东西等着你。
在下一篇文章中，我将概述后端开发，并讨论我们在服务器端的功能。
感谢阅读
