Web前端开发需要学习哪些知识？ 很多想学习前端的同学都会问这个问题，那么下面微信北大青鸟老师来为大家解答一下。
1. Web开发的基本工具和软件
· 计算机和操作系统：没有计算机和操作系统就无法编写代码。 要学习 Web 开发，您不需要任何高端计算机（如果您有一台，那就更好了......）。 您可以使用任何类型的中型笔记本电脑或台式机。 对于操作系统小程序云开发控制台高级操作，您可以使用任何适合您的操作系统（最新版本）或 .
文本编辑器/IDE：无疑适合大多数情况和大多数语言。 它具有良好的性能、出色的可扩展性、内置终端功能和大量功能。 也是 2019 年调查中开发人员的首选。 您还可以选择其他一些不错的选项，例如文本或原子。 如果我们谈论 IDE，是的（或 C#）和（Java）。 是一个不错的选择。
· Web 浏览器：大多数开发人员的首选是 或 。 它速度很快并且使用V8发动机（引擎）。 也取得了很大的进步，一些好东西并不在浏览器中。 这两种浏览器都有出色的开发人员工具来解决 Web 开发中的问题。
终端：您将使用一些系统命令通过 CLI 完成大量工作。 您可以为 Web 开发项目使用默认或第三方端点。 Bash、Zsh、Git Bash、这些是可以使用的选项。
· 设计（可选）：不是每个人都需要学习。 在公司里，有专门的团队来创建图像、徽标或草图，但如果您是自由职业者，您可能必须学习 XD、、、 或 。
2. 从 HTML 和 CSS 开始
HTML 和 CSS 是 Web 开发的基本构建块。 无论您的 Web 应用程序有多先进，或者使用什么框架和后端语言，您都必须使用 HTML 和 CSS 来构建前端应用程序。 所以，这是Web开发首先要学习的东西。
·（语义元素、属性、文档类型等）
· CSS基础知识颜色、字体、位置、盒子模型等。
· CSS 网格和对齐内容或创建列。
· CSS 自定义属性
3.响应式布局
您的应用程序应该可以在所有类型的设备上查看和使用，例如智能手机、平板电脑、台式机、iPad 或任何其他屏幕尺寸。 因此，了解创建响应式设计或布局非常重要。 让我们看看一些重要的主题。
· 了解如何设置视口
· 不同屏幕尺寸的媒体查询。
· 流体宽度
· Rem 单位
· 移动优先
4. 自定义可重用 CSS 组件
创建您自己的模块化、可重用的 CSS 组件以在您的项目中使用，而不是依赖大型 CSS 框架（例如 ）。 如果您构建自己的自定义设计，则无需导入完整的库。 您创建仅需要特定 UI 的组件。 最近还出现了一种新趋势，有助于更有效地编写 CSS 代码。 如果你已经了解CSS，那么你不需要花很多精力去学习Saas。 Saas 是 CSS 预处理器，可为标准 CSS 添加更多功能并使其更加高效。 您可以使用变量、嵌套和条件语句来减少 CSS 中的重复并提高效率。 您还可以为每个可重用组件创建单独的 Saas 文件。 Sass 确实节省了很多时间，所以 2020 年你绝对应该学习它。
5.CSS框架
学习 CSS 框架不像去年那么流行，但对于不擅长设计的开发人员来说仍然非常相关或有用。 有许多流行的 CSS 框架可用，下面列出了其中一些框架。
· 是最流行的CSS框架。 学习对于学习其他框架也有帮助。
CSS 是另一个越来越流行的框架，与其他框架几乎没有什么不同。 它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮完全不同的东西。 它们也是高度可定制的。
· 物化
·布尔玛
6.前端所需语言：
学习完 HTML 和 CSS 后，接下来需要学习的是。 对于开发人员来说，掌握基础知识非常重要。 您将经常使用像 PHP 这样的服务器端语言，或者如果您想将其与 Vue、Vue 或任何其他框架或库一起使用，那么学习该语言是非常有必要的。 以下是您应该涵盖的一些重要主题……
基础知识（变量、数据类型、函数、条件等）
· DOM（文档对象模型）
· JSON（对象表示法）
提取 API（请求/响应/Ajax）
· 如果您想迁移到 Vue 或其他框架，学习现代 JS (ES6) 概念很重要。
7.一些重要的工具
有一些工具将用于 Web 开发。 这些工具将帮助您调试、提高工作效率、管理代码、与其他开发人员协作等等。 让我们讨论其中一些工具。
· Git（版本控制）是2020年你一定会学到的最流行的工具。Git对于与其他开发人员协作和管理代码有很大帮助。 您还可以选择一些其他选项，例如 、 和一些其他选项。
· 学习如何使用浏览器开发工具。 或者，您应该知道如何使用不同的选项卡，例如元素选项卡、控制台、用于请求和响应的网络选项卡、应用程序选项卡以及其他用于不同目的的选项卡。
· 大多数 IDE 或文本编辑器都能够添加扩展或插件，这对于提高生产力和构建 Web 应用程序非常有帮助。 例如，代码中的扩展有助于下载实时服务器或实时 saas 编译器等扩展，以便与
是另一个很棒的工具，可让您非常快速地编写 HTML 和 CSS，这有助于提高开发人员的工作效率。
· 学习使用 NPM 和 Yarn 等包管理器。 如果您正在使用框架或库（例如），那么这些包管理器将被大量使用，但对于其他语言（例如或 Php），您将使用不同的包管理器。
· 如果要在前端安装 NPM 包，则必须使用 或 。 如果您想创建自己的模块，或者将一个文件放入另一个文件中，默认情况下您无法仅使用浏览器来完成此操作，因此您需要或捆绑它。
8. 基本部署
至此，一旦你知道了前端开发应该学习哪些工具或技术，你就需要知道如何在网络上部署前端网站。 如果您正在为小型企业构建一些小型应用程序、登陆页面或个人网站，您不需要学习 AWS 或仅仅因为它们闪亮且时尚。 你会让事情变得比简单更复杂。 2020 年，您需要学习一些部署工具和步骤。
· 域名注册（等）
托管（、、、等）
· 静态主机（、页面）
·SSL证书。
· FTP、SFTP（文件传输协议）非常适合小型应用程序。
· SSH（安全外壳），用于高级应用程序。
· CLI 和 Git。
到目前为止我们讨论的任何工具、技术趋势或步骤都是前端开发的一部分。 您还不知道该框架，但您可以为个人和小型企业构建网站以及适合移动设备的布局。 您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。 如果你想找工作的话，学习一些像Vue或者Vue这样的前端框架就好了。
9.前端框架和状态管理
框架允许您进行更高级的前端开发。 框架为您提供了许多优势，例如可重用的组件、更有组织的 UI 或页面交互。 这更有利于协作，也有助于编写干净的代码。 另外，了解状态管理。 每个框架都有不同的方法。 以下是 2020 年一些流行的框架和状态管理器。
：库是学习 Web 开发最流行的方式，与其他框架和库相比，它相当容易。 开发商还有很多工作要做。 您可以将 和 API 一起使用来进行状态管理。
Vue：Vue 也越来越受欢迎，开发人员更喜欢学习 Vue。 和 相比，Vue 是最容易学习的。 VueX 是一个为视图构建的状态管理器。
：该框架通常用于大型组织。 它有一个相当陡峭的学习曲线。 对学习也有好处。 它允许您使用可选的静态类型和支持的函数。 NGRX 和 NGRX 都是很好的状态管理器，值得学习这个框架。
可选学习：
· 如果您了解这三个框架之一，您也可以使用它，它是一个编译器，允许您生成纯原始 JS 代码并帮助您轻松构建用户界面。
· 了解服务器端渲染。 () 和 (Vue) 是允许您在服务器上运行 Vue 的框架。 两者都具有出色的功能，例如更好的 SEO、文件系统路由、自动代码分割、静态导出、JS 中的 CSS 等等。
· 静态站点生成器：（）和（Vue）
我们已经讨论了所有大多数前端开发工具和技术。 现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。
10.服务器端语言（选择一种）
您应该至少了解一种服务器端语言。 要在 2020 年选择一种语言，这里有一些选项......
·（不是语言，而是运行环境）
·（非常适合初学者）
· Java（适合大型组织）
· Php（适合自由职业）
· 红宝石（2020 年躁郁症较少）
· C＃
· 去
注意：无论您喜欢学习哪种服务器端语言，请确保您了解该语言中使用的数据结构和算法。 数据结构和算法将帮助您向用户呈现数据，并帮助您优化 Web 应用程序中的代码。 我们特别建议您专注于使用数组和字符串（最重要的是）。 您将使用这两种方法。
11.服务端框架（选其一）
一旦您学习了您选择的服务器端语言，您就可以使用其中一种语言框架。 您可以选择下面给出的选项之一...
· Node.js – 、Koa、.js、Nest.js
· :,,
Java：MVC，
PHP:,,,苗条
· 红宝石：红宝石
C#：ASP.NET MVC
去：
12.数据库（选其一）
大多数 Web 应用程序都需要一个存储数据的地方。 某些技术或某些语言在某些情况下可以很好地与某些数据库配合使用。 例如：在 Mern 堆栈中 M 代表，在 LAMP 堆栈中 M 代表，但这一切都取决于您要为应用程序选择哪个数据库。 我们将讨论 2020 年一些流行的数据库。
关系数据库：仍然是最受欢迎的。 最喜欢使用，MS SQL。
· :,,
云数据库：、DB、AWS
· 轻量级且可缓存：,, NeDB
当你学习数据库时，你还将学习SQL（结构化查询语言）、ORM（对象关系映射器）或ODM（对象数据映射器）。 ：（可选）您可以了解现在流行什么。 这是 API 的查询语言。 它具有简单的类似 JSON 的语法，并且相当容易实现。
13.CMS：内容管理
您绝对应该了解内容管理系统，特别是如果您是自由职业者。 CMS 用于向您的网站或应用程序添加内容。 对于客户来说能够更新自己的内容是件好事。
· 传统CMS：(PHP)、(PHP)、()、()
· 其他 CMS：、 CMS、.io、.
14. 部署和
托管全栈或后端应用程序比仅托管前端应用程序要复杂一些，特别是如果您有数据库的话。 确保您知道如何使用 CLI 进行部署。 了解以下有关部署应用程序的信息。
在大多数公司中，都有不同的团队在从事工作。 因此，了解它完全是可选的。 您可以了解您是否正在从事自己的项目。
· SSH（安全外壳）
· Web服务器环境：,
· 应用程序托管：、、AWS、、现在。
· 虚拟化：，
· 测试：单元、功能、集成等。
· 负载平衡、监控、安全。
以上所有技术工具足以让你成为前端、后端或全栈开发人员。 根据您的最终目标选择正确的工具和技术。