[音乐]
在本视频中，我将指导您完成我的终极 Web 开发路线图
2021 年及以后，我们将涵盖大量
技术，但别担心，你不必学习
我们在此视频中讨论的所有内容都是 Web 开发的完整地图
大多数开发人员专注于此类的小部分
as ui ux design前端开发后端
开发 ci cd 和 devops 我希望这个视频能给
你对那里的一切有一个高级的了解
然后你可以决定你想走哪条路线
现在我不仅要向你展示所有的技术
但我也会告诉你如何以及在哪里可以学习它们
在下面的描述中有一个链接，您可以下载免费的 pdf
它将包含指向我们在此讨论的所有资源的链接
视频所以一定要下载pdf
如果我在此路线图中遗漏任何内容，请参考快速免责声明
在下面的评论中让我知道我试图考虑所有事情但我
确定我错过了一些东西所以让我们先深入了解你需要
要了解互联网的工作原理，您需要一个基本的
理解计算机如何通信
使用浏览器域名托管服务
http 和 dns 是一些很好的资源，可以帮助您入门
并且所有这些资源的链接都将在 pdf 文件中
下面的描述接下来我们将继续介绍基本工具
我们有我们的文本编辑器浏览器终端和设计工具
让我们从浏览器开始吧，浏览器是一个非常重要的工具
Web 开发人员，他们是最终用户的手段
将查看我们的应用程序 我更喜欢使用 chrome 作为我的主要应用程序
浏览器进行测试，但您需要安装所有主要浏览器
确保您的应用程序能够正常工作
所有这些都只是旁注任何你看到的带有紫心的东西
是我个人最喜欢的，所以我们有文本编辑器
文本编辑器是您需要了解的 Web 开发人员最好的朋友
它可以帮助您编写代码的一切
尽可能高效准确和快速我最喜欢的代码编辑器是 vs
代码，它是最受广大用户欢迎的
大多数开发人员我都有一个 vs code 播放列表，甚至还有一个
整个课程将帮助你成为一个 vs 代码超级英雄接下来我们有
终端，你需要习惯使用
终端有些人害怕它，但我保证它没有那么糟糕
每个操作系统都有一个终端，有很多终端选项
windows有命令提示符和powershell，你也可以使用windows
linux 或 wsl 子系统，它为您提供了一个 linux shell，但它是
设置起来不是最简单的事情，而且有一些限制
所以如果你在 Windows 上，我会推荐使用 git bash 这就是我
如果您使用的是 mac os 或 linux 或 unix，请使用
我会推荐 zish 或 zsh 然后我们有
设计 如果你想成为一个 ui ux 设计师，你需要学习设计
工具我更喜欢 figma 但 adobe xd 很棒
其他选项是草图插画师和 photoshop 任何东西
与设计相关的这些是两个 YouTube 频道
我去上设计课程，adrian twarg 好吧，回到我们的路线图
让我们看看下一个项目，即每个网页的 html
使用 html 它是网络的主要构建块
html 提供了网站的结构，它实际上不是一种编程语言
但是是一种标记语言，所以你需要学习基本的语法
赛门铁克 html 表单和验证可访问性 seo
和最佳实践，我有一个 html 速成课程，它将
现在教你基础知识继续前进
接下来我们有 css css 是每个网站的另一个重要部分
它提供了它的样式，使所有设备上的东西看起来都很好
并增加了过渡和动画的天赋
现在我不会撒谎 css 有很多
如果你打算成为一名前端开发人员，那么你很重要
学完基础就完全理解css
你会想要学习 flexbox 和 css 等布局功能
网格自定义属性相当于
其他语言中的变量，当然还有过渡和动画
真的很酷的动画可以用普通的
css 但是在你学习了 javascript 之后你就可以
查看像 gsap 和 animajs 这样的 javascript 库，这些库可以构建
复杂的动画超级简单之后一定要搞定
适应响应式设计，包括移动优先方法 rem
单位视口设置流体宽度和媒体查询，你可以
向 CSS 之王学习这一切
凯文鲍威尔现在你可以随时回到接下来的三个项目
这些不是必须学习的，但很好理解
一旦你掌握了所有这些，你就可以继续使用 css 预处理器
像 sas 或 post css 我真的很喜欢 sas 它给了你的 css 超能力
它允许您嵌套 css 并且您可以拥有函数和
混音，和它一起工作真是太棒了
现在，如果你开始学习 react，你很可能想要
要么学习样式化组件，要么学习 css 模块
这使得用 react 编写 css 变得容易多了
然后有一些人的 css 框架
跳过 css 直接进入框架
我强烈反对您需要对 css 有深入的了解
在学习一个框架之前，有很多框架
我认为2021年值得学习的两个框架
是顺风 css 和 bootstrap bootstrap 5 看起来非常好，我在等
为了发布它们，它们都在网络中占有一席之地
这里的开发是一些很棒的 css 资源
并且所有这些资源的链接都将在 pdf 文件中
下面的描述好了回到我们的路线图现在是
是时候选择一切了 在这一点上是时候了
选择你的道路你想成为前端吗
后端移动或桌面开发人员或现在使用机器学习和人工智能
重要的是我要注意，即使我确实将其分解为
不同部分前端和后端之间的线
devops 和所有这些不同的领域都变得模糊了我的
建议是挑选出最有效的技术
你感兴趣，无论他们走哪条路，都有公司看起来
对于专注于每条路径的很小部分的个人，请选择
某事并擅长它最好是
擅长一件事，而不是在每一件事上都做得很好
快速点击那个按钮来帮助我，如果你还没有订阅
让我们回到路线图，让我们进入下一部分
这是前端路径所以前端开发涉及
构建用户在浏览器中看到的界面
通常这包括 html css 和 javascript
您将主要与设计师和后端开发人员合作
设计师会告诉你它应该是什么样子以及它应该如何流动
并返回开发人员将提供对数据的访问，例如
将在网站上展示的产品
所以让我们往下移动，首先我们有 javascript
因此 javascript 是您将作为前端学习的第一种编程语言
开发人员它使网站做事
所以你需要学习基本的语法 dom 操作
fetch api json 和 es6 plus 功能，你应该花大部分时间
这部分的时间非常重要，你完全
在继续学习 javascript 的人之前先了解 javascript
像 react 或 view 这样的框架之前不要开始学习框架
你了解 vanilla plain javascript 这些
框架基于您需要的 javascript
这些知识首先是一些很好的资源，可以帮助您学习 javascript
好吧，我们有打字稿和
前端框架让我们先看看打字稿，所以它是一个超集
javascript 它允许静态类型和这个
帮助您发现错误并在此之前修复它们
当您使用打字稿时运行您的代码，它将被编译成
构建时使用常规 javascript，因此这是一个您可以随时学习的工具
使您的代码更好，打字稿也可以用于大多数
框架所以打字稿很高兴知道但事实并非如此
此时有必要，您可以随时返回并学习它
fireship 有一个关于打字稿基础知识的视频 好吧现在让我们看看
前端框架快速旁注我不会得到
进入框架与图书馆讨论某事是否是
从技术上讲，框架或库并不是那么重要，所以我只是
将把一切都称为框架，所以前端框架有很多
您可以构建强大的单页应用程序的优势保持
您的组件井井有条并轻松构建交互式用户界面
与团队合作很明显是多么容易
将应用程序分解为每个团队成员工作的组件
有很多框架可用，但是
我只会涵盖我认为的前四名
所以 React 是迄今为止我个人最喜欢的它很容易学习并且有一个
伟大的社区观点在我的名单上排第二，是
最容易学习的框架我在底部有角度，它非常
很受欢迎，但我个人不喜欢使用它，我认为它是
更适合非常大的应用程序或企业
应用程序我在这里也很苗条，因为我
认为它被低估了我不会将它用于每个应用程序
但它确实有它的位置，我计划在 2021 年更多地了解它
这里有一些很棒的资源来自我自己的 eric 程序
法拉第学院和穿越媒体接下来我们有状态管理
当您使用框架时，您很快就会意识到它的重要性
跟踪应用程序的状态
当您处理许多应用程序并尝试传递数据时
并在他们之间说明你会想要研究某种状态
管理所以为了反应，我们有带钩子的上下文 api
这是我个人最喜欢的，它是在此之前内置的
每个人都使用过 redux，这在今天仍然是一个不错的选择
我只是认为使用上下文 api 和钩子更容易
使用反应中包含的内容，然后我们有视图 x 用于视图
这里的 angular 内置服务是来自 deved 的一些重要资源
和 eric 一起编程，这些资源的所有链接都将在
下面描述中的 pdf 好吧接下来我们有静态站点
生成器和服务器端渲染静态站点
发电机在 2020 年变得非常流行并将继续
到 2021 年，这些将使构建简单的东西，例如
登陆页面如此简单，但它们不仅限于
ssgs 的常见用途是博客网站，因此使用静态
生成器你会得到更好的 seo 文件系统路由
以及来自社区的强大插件支持
有些使用 graphql 来获取数据，例如 gatsby
我认为最受欢迎的静态站点生成器
是用于反应的 gatsby 和用于反应的下一个 js
用于 vue 的 grid sum 和 nuxt js 然后我在这里扔了 11t 因为
我已经听说了很多关于它，但我还没有时间真正深入研究它
它看起来很酷，然后我们有服务器端渲染或
ssr 这提供了许多相同的好处
静态站点，但将所有渲染移动到服务器上
在我看来，这个领域的当前国王是 next 和 next js
你会注意到 next 和 next js 可以同时做
如果您需要灵活性，静态站点生成和 ssr 这些是很好的选择
我个人将在 2021 年深入研究下一个 js。
这里有一些来自 wavenfalk colby fayak 的重要资源
winfaraday 和 traversie 媒体好吧 让我们回到路线图这里
接下来我们将看看更多的工具
您需要学习更多工具，以下是主要工具
首先我们将看看包管理器包管理器允许您轻松添加
预先构建的包到您的应用程序中，这些包可帮助您完成
应用程序中的某些功能
我喜欢用 npm 其他人喜欢用纱线
我认为 npm 更受欢迎，所以这就是我的想法
但两者都很棒，然后我们有构建工具
在构建工具中，我们有任务运行器 linter 格式化程序和
模块捆绑器，因此对于任务运行器，这些将帮助您
开发以启动和运行您的环境，它们也会有所帮助
在构建阶段执行诸如摇树缩小之类的任务
代码优化图像等，以便您可以使用这些任务运行器
内置的 npm 脚本或者你可以使用像 gulp 和
这是来自 coder coder 的关于 gulp 的很棒的教程
然后我们有 linter 和 formatters 这些将帮助您识别
代码中的编码错误和格式错误
这些可以很容易地作为扩展添加到 vs 代码中
接下来我们有模块打包器前端框架使用
模块打包器来编译你写下的代码
对于常规的 html 和 css 以及 javascript，其中许多是内置的并且需要
您的配置很少，但很高兴了解这些
work webpack 和 parcel 是迄今为止最受欢迎的
我还包括了 roll up 因为我过去也用过
这里有一些来自免费代码营和 james q quick 的很棒的资源
接下来我们来看看版本控制 版本控制很重要
你必须学习 git 和 github，特别是如果你和一个团队一起工作
这些允许您跟踪更改项目协作
并且是cicd的一个组成部分，它是持续集成
持续部署，所以对于开源和 github 相关的一切
我期待 eddie jiled，我的频道上也有一些很棒的资源
接下来我们有你的浏览器开发工具
会经常使用浏览器的开发工具，所以一定要熟悉
凭借其功能，还有特定的浏览器扩展可以
帮助您对前端框架进行故障排除
就像反应那么我们有 vs 代码扩展有很多
可以帮助您使用各种技术的扩展程序，我有一个视频
如果你写了很多 html 和我最喜欢的扩展
css 你必须学会​​ emmet 它会加速
你的编码时间戏剧性地就像编码速记
imit 内置于 vs 代码中，您可以查看我的视频以获取
你开始了，如果你正在处理大量的数据提取
你可能想看看 axios，它是一个非常好的 javascript 库，它是
易于使用，而不是 javascript 中的标准 fetch api
当然，穿越媒体也有一个速成课程
接下来我们将看看我们将开始的一些其他技术
graphql graphql 是一种 API 查询语言
它在客户端使用来自您的 api 的数据
非常好，它内置于 gatsby 中，因此我们有了 apollo 客户端
接下来我们有渐进式网络应用程序和 pwa 是可靠的
和快速的应用程序，他们最出名的是他们的能力
像常规应用程序一样在设备上安装了quote unquote
但它们只是网络应用程序，并为用户提供本机应用程序体验，而无需
占用设备空间的主要功能之一是
使用服务工作者离线工作检查这个
来自网络忍者的精彩教程系列接下来我们有网络程序集
webassembly 允许您使用其他编程语言
浏览器还有其他语言比 javascript 快得多，但要保持
请记住，这不是 javascript 的替代品，因此如果您尝试
构建下一个级别的游戏或需要的非常复杂的工具
要处理大量数据，您需要查看 webassembly 和
可以与 webassembly 一起使用的几种语言
are cc plus plus c 锋利和生锈的买家有一个 100 秒的视频
webassembly，它将为您提供高级概述
我们将看看它有什么能力继续前进
jam stack 果酱堆栈中的果酱代表 javascript api 和
标记一个果酱堆栈的例子是 gatsby 的组合
遵守果酱堆栈指南的 io 站点高度
性能便宜且易于扩展它们也非常易于托管使用
netlify 或 vercelle 有关 jamstack 访问的更多信息
jamstack.org 和这里有一些很棒的资源
james q 顺便说一下，james 是果酱堆栈之王，我真的认为我们
应该将果酱堆栈更改为 james stack 的最后一部分
我这里的前端路径是语音识别所以语音识别
随着时间的推移只会变得更受欢迎
如此多的人习惯于与 alexa 或 google 交谈
或 siri 事实是人们更喜欢花钱
输入内容的时间更少，这就是语音搜索和
导航将在 2021 年变得更加流行，你可以
使用几种在您的应用程序中实现语音识别
技术有 html5 网络语音 api 有谷歌语音
文本，并且有一些 javascript 库
您可以安装在您的应用程序中，它将为您添加所有这些功能
好吧，比如allen ai，你可以看看
来自网络开发人员的本教程简化了如何集成 allen ai
进入你的应用程序，让我们继续我们路径的下一部分
让我们回到这里，我们将讨论背部
在这里作为后端工作的结束路径
开发人员涉及管理服务器部署
apis 数据库 devops ci cd
你要做的第一件事就是选择一种语言
所以有几个可供选择我们可以在后端使用 javascript 所以如果
您已经知道从前端开始这将是一个轻松的过渡
您可以为此使用 node.js 或 dino 库
我们也有 python rust c 锋利的 java php go 和 ruby​​ 那些是最重要的
在我看来，选择一种语言取决于
构建应用程序的目的，因此如果您正在使用非常大的
您可能想要使用 python 的数据集
如果你只需要一个简单的网络服务器并且你已经知道 javascript
如果你已经有了想要工作的公司，那就去 node.js
找出他们在背面使用什么
结束并学习，一旦你学会了
编程语言学习另一种更容易
不要太担心这里有一些很好的资源
来自遍历媒体的后端语言 caleb curry
和免费的代码营现在后端也有框架
学习后端框架时适用相同的规则
在跳入框架之前学习基础语言
对，所以对于这些框架，我们有 laravel for php spring for java
ruby on rails for ruby​​ express 和 koa for node.js
django 和flask for python 和blazer for c
尖锐的也有一些很好的资源来自遍历媒体
Free Code Camp dennis ivey 和 claudio bernesconi 继续前进
接下来我们拥有几乎每个站点都有的数据库
它需要保留数据示例的一些数据将是
销售产品或博客文章内容，主要有两大类
我猜数据库分为关系型和非关系型
但你也可以称它们为 nosql cloud
让我们先看看关系数据库，所以关系数据库很多
就像带有表格的电子表格，这些表格可以相互链接
使用唯一标识符和关系数据库更严格
并要求您提前定义每个表的列和类型
这些示例包括 postgres sql mysql azure cloud sql 和 microsoft sql
有一些很好的资源来自免费的 codecamp 和
遍历介质 nosql 和云数据库不一样
严格作为关系数据库，您可以定义它们的数据和类型
苍蝇 虽然理解很重要
这些差异并选择适合需求的正确数据库类型
您的应用程序可能没有 sql 和云数据库
一开始更容易启动和运行，您可能会遇到问题，因为
您的数据库增长，其中一些示例是 mongodb
airtable aws fauna db 和 firebase 有一些
来自穿越媒体的大量资源
我和这些资源的所有链接都将在 pdf 中
下面的描述好吧，接下来我们沿着这条线往下移动
有了 api，现在你有了数据库
下来你需要能够访问数据
从前端通过apis api是一个应用
编程接口是前端消费的一种方式
来自后端的数据你可以查看这个有趣的教程
如何从anyakubo 构建你自己的api，接下来我们有
身份验证，如果您的网站需要跟踪
您需要以最常见的方式实施身份验证的用户
这样做是通过使用 oauth 或 jwt 这是 javascript web
令牌让事情变得更容易，尽管你可以
使用身份验证提供程序，例如 auth0 或 firebase
这里有一些很棒的资源来自我自己和 webdev 简化
列表中的下一个我有区块链和加密货币
区块链实际上是一种数据库，但它不像典型的
数据库 它将数据存储在块中，然后链接
将它们按时间顺序放在一起，您可以将任何类型的数据存储在
块，它通常用作交易的分类帐，因此比特币
以去中心化的方式使用区块链，因此没有单一的
人可以控制去中心化区块链是不可变的
这意味着数据不能一次更改
交易被记录下来，它是永久性的，每个人都可以看到
这使得区块链非常安全你会看到区块链和加密货币
在 2021 年继续变得更受欢迎，以了解更多关于这些技术的信息
参观新波士顿和 Caleb Curry 好吧，我们接下来继续
有内容管理系统cmss
如果您是自由职业者，可以让您轻松管理您网站的内容
你肯定想得到一个好的 cms
您的客户，以便他们可以轻松更新
他们网站上的内容本身就是传统 cms 的例子
wordpress 和 drupal 以及在 2020 年无头的 cmss 变得非常
流行并将在 2021 年继续无头
cmss 允许你在前端使用任何你想要的
你不会被限制在前端使用他们的平台
这使您可以更自由地构建应用程序
无头 cmss 是 netlify cms wordpress sanity io 带状棱镜
内容丰富和故事情节，这里有一些很棒的
这方面的资源来自 adrian twarg james q quick jason
lanksdorf 和 traversie 媒体好吧
下一项是部署和开发的道路，这是一个
后端开发的很大一部分涉及了解如何创建
并管理环境以及将应用程序部署到 Web
所以你需要了解 ssh 如何连接到远程
您还需要了解负载的环境
平衡监控和安全性，并通过以下方式确保您的网站安全
安装 ssl 证书，然后 github 操作也可以提供帮助
使用ci cd 持续集成持续部署
这里有一些来自 devops 指令的关于这些项目的重要资源
开发人员中的 eddie jaud 和 ants 让我们向上移动到这里的顶部进行托管
所以你需要根据你的需要设置某种托管服务
您可能可以使用静态托管，例如 netlify 或 github pages
这些允许轻松部署并且可以与github集成
这样每次你更新你的 github repo 你的站点都会自动
如果您的应用程序需要真正的
您将要采用更传统的路线的后端环境
或传统的托管服务，例如 heroku
lenode aws azure 或versilles 接下来我们有网络服务器
所以你会想要熟悉 nginx apache
或 microsoft iis 这些是最受欢迎的
我认为网络服务器，接下来我们有必要进行测试测试
部署应用程序所需的测试类型和数量
取决于您的应用程序的复杂性
但是您应该了解这些不同的测试类型，例如
单元集成和功能然后我们有
无服务器有时被称为 faas
这代表无服务器服务功能
实际上并不意味着没有服务器它只是意味着你没有
要管理服务器，您只需要一台服务器来执行
次要功能这意味着更少
我认为供您管理的基础设施和顶级供应商
是实际使用 aws 的 aws lambda 和 netlify
lambda 在后端，所以这里有一些很好的资源
来自 eric 和 traversie 媒体的节目
然后我们有虚拟化，这使您可以轻松创建和部署
已设置的环境的容器或映像
准备好了，这方面的领导者是 docker，然后我们
拥有 kubernetes，它允许您自动化容器部署扩展
和管理，这就是后端的结束
开发人员路径让我们在这里向下移动，接下来我们是
去看看移动开发，所以传统的
构建移动应用程序的方法是使用诸如 swift 之类的语言
ios 开发和 java 或 kotlin 用于 android 开发
但如果你已经学过 html css 和 javascript
您也可以使用这些来构建本机移动应用程序
并且有几种在移动应用程序开发中很流行的技术
我们已经使用这个你可以轻松构建的本机反应
原生移动应用程序然后我们有 flutter，它实际上使用了编程
一种叫做 dart 的语言来构建原生移动应用程序
但你甚至可以编译你现有的用 dart 编写的 flutter 代码
进入一个带有 flutter for web 的网站，然后我们有了 nativescript
javascript typescript angular 或 vue 可以与它​​一起使用来创建原生
移动应用程序，然后我们有您可以构建的 ionic
带有离子使用的本机和混合移动应用程序
反应 vue 或 angular 这里有一些很棒
来自 william kandian flutter 的资源解释
taras Petra 和 robert brunich 接下来我们要看看桌面
开发您可以使用您的网络开发技能
使用电子电子构建跨平台桌面应用程序
javascript html 和 css 它在
后端，兼容 mac windows 和 linux 一些流行的
用电子构建的应用程序是可视化的
工作室代码抽搐松弛 figma 和不和谐好吧
让我们继续往下走，我们有机器学习和人工智能
人工智能和机器学习被广泛用于模仿人类智能
并执行简单和复杂的功能，如
学习和分析信息的能力收集数据
了解人类的情绪或解决复杂的业务挑战和问题
ai 无处不在，所以我们真的应该习惯它，它不会消失
在我看来，python 是这里的王者，但也有
很棒的 javascript 库，比如 tensorflow.js
和brain.js 你可以从python工程师那里找到一些很好的资源
patrick lober 我有一个最后一分钟的补充，我必须包括
因为我还没有在任何其他 Web 开发路线图中看到这一点
那是软技能和个人发展
这些非常重要 这些是经常被忽视的主题
软技能的更好名称是人际交往能力
这些是您应该投入精力开发的顶级技能
沟通团队合作注意细节问题解决
职业道德时间管理适应性人际交往能力创造力和
您需要投资于个人的领导力
发展这些东西会帮助你
任何工作角色你会遇到的另一个大问题是
缺乏动力和冒名顶替者综合症，你需要让自己包围
支持并理解您并不孤单的人
用于激励和处理冒名顶替综合症的惊人资源
丹尼汤普森在 youtube 和 twitter 上看看他吗
同样，这些资源的所有链接都将在 pdf 中
在下面的描述中，所以有一些技术没有包括在内
在路线图中，但仍应提及
所以首先是这个低代码没有代码的东西
有几个平台可以提供创建网站和
几乎没有 Web 开发的应用程序
知识，这些是吓唬人的平台
很多开发人员，让他们相信他们的工作可能会被占用
通过这些平台，我的建议是不要太担心这个
平台本身需要 Web 开发人员来构建和维护它们
这些平台针对的是需要非常
基本站点或应用程序，这些不需要任何高级定制
或任何复杂的编程要求，这些应用程序也不能很好地扩展
好吧，一旦公司走出困境
他们将要寻找的基本应用程序
帮助他们的实际 Web 开发人员的另一项技术是 br 和 ar 虚拟
现实和增强现实变得非常
流行他们还处于起步阶段，但他们会
2021 年继续增长，所以要注意那些
我们涵盖了一系列技术
这个视频所以如果你坚持到最后你的大脑一定被炸了
感谢您的观看 记住您不必学习
我们涵盖的所有内容都集中在您的应用程序中使用的技术上
当前工作或您有抱负的工作，因此如果您当前的雇主使用 angular
如果您正在面试的公司，请专注于角度
使用反应然后专注于反应之前
面试然后你可以在业余时间学习其他技术，如果
一旦你适应了，你就有了
javascript 并且你想在业余时间学习一些 python
那么这样做很难跟上技术和当前趋势
但要知道大多数公司并不总是使用最多的
最新技术关注新技术，但专注于
一次一个，学习新东西需要时间
擅长某事需要时间，所以请耐心等待
永远不要停止学习，永远不要放弃这就是这个视频
喜欢这个视频来帮助我，如果你还没有订阅
更多这样的视频
外国的