🔥 2020 年完整的 Web 开发人员

1. 互联网的运作方式

2. 网络的历史

3. HTML

4. CSS

Bootstrap 和模板

CSS 网格和 Flex

开发者的职业生涯

JavaScript

高级 JavaScript

命令行

Git + Github + 开源

开发人员的一天

NPM 脚本

反应

HTTP/JSON/AJAX + 异步 JavaScript

蜜蜂

人脸识别项目

NodeJS + ExpressJS

数据库

部署

Github 精彩个人资料

作为我个人培训的一部分，我决定巩固我的 Web 开发知识，因此我购买了Andrei Neagoie的《2020 年 Web 开发者完全指南》（我个人认为是最好的课程之一），以下是我的笔记。这些笔记只是与我最相关的部分或资源，因此我建议您查看课程以了解更多详细信息。如果您想阅读原文，可以查看此链接。

1. 互联网的运作方式

2. 网络的历史

Tim Berners-Lee在欧洲核子研究中心工作，并于 1989 年创建了互联网WWW的第一个方法
40张地图解释互联网
速成计算机科学课程计算机的一些视频：网络、互联网和万维网。

3. HTML

MDN 官方资源，用于审查任何内容。
使用小黄鸭技术。
w3schools 的 HTML 测验
免费 codecamp 练习

4. CSS

一个很棒的网站，解释了字体类型的工作原理
最好的资源之一是CSS Tricks和CSS Tricks Almanacs。
在这个网站中您将了解平衡和补充颜色。
CSS 选择器：开始 *、类、id、元素、元素嵌套、大于、加
哪些选择器在级联中胜出取决于什么？特异性、重要性、来源顺序。特异性计算器。
游戏练习特殊性概念。
谷歌字体。
w3schools 的 CSS 测验。
CSS Minifier用于减少关键渲染路径。
关键渲染路径 MDN和关键渲染路径解释。
使用Froggy 来玩 Flexbox。
掌握过渡和变换。
通过“我可以使用”我们可以检查我们的属性是否被浏览器支持。
始终使用CSS、Javascript 和其他 Web 内容的 Playground。

Bootstrap 和模板

CSS 网格和 Flex

如果布局只有一个维度，那么 Flex 就非常有用；如果布局有两个维度（行、列），那么 CSS Grid 就非常有用。
尽管并非所有浏览器都 100% 支持 CSS 网格，但支持程度却在不断提升。我可以使用 CSS 网格吗？我可以使用 Flexbox 吗？
CSS 网格备忘单。
CSS 网格游戏。
CSS 网格练习 1 解决方案
CSS 网格练习 2 解决方案
为您的项目获取免费插图的网站。

开发者的职业生涯

JavaScript

Eloquent JavaScript 电子书
你不知道的 JavaScript 系列
JavaScript 现代教程
数据结构：数组、对象、Map、Set、WeakMap、WeakSet
Playgrounds Jsbin codepen
DOM === 文档。
文档选择器和性能
DOM 事件列表
你可能不需要 jQuery
关键字 this 表示对象位于其中。

高级 JavaScript

BabelJS
Sarah Drasner 的Array Explorer 及其示例
Sarah Drasner 提供的对象探索器及其示例
JavaScript 强制转换和JavaScript 相等性表。
迭代：数组和字符串
枚举：对象
JavaScript 引擎内存堆：有限内存（变量）
JavaScript 引擎调用栈：分配执行块和调用。
生成最大调用堆栈大小超出。

(function a() { a() })();
使浏览器崩溃：

let drunk = []; while(true) { drunk.push['🍻'] }
调用堆栈、Web API、回调队列、事件循环

命令行

Git + Github + 开源

拉取请求以成为 Github 组织中 ZTM 的贡献者。
拉取请求以在 ZTM Board Job 中添加我的个人资料。
从零到精通工作委员会。
从零到精通的资源。
通过@cobidev创建您的开发者作品集
Github Corner 徽标

开发人员的一天

NPM 脚本

语义版本计算器

反应

Web 组件的原子设计概念
虚拟 DOM 与 DOM
React 更新日志
创建 React 应用
Tachyons使用少量 CSS 创建快速界面
API机器人
React Fragment 和语义
Redux 用于管理状态、在容器之间共享数据以及可预测性使用 3 个原则。
3 Redux 原则：单一真实来源，状态是只读的，更改使用纯函数。
Redux 动作：用户执行的操作。
Redux Reducer：更新状态的纯函数（不可变）
Redux store：表示唯一真实来源的对象
基于架构 Flux 模式的 Redux
Redux 提供了一种替换状态并将其转换为组件的 props 的方法。
为了将 redux 与 react 连接起来，它实现了 HoF（高阶函数）
useState 性能和良好实践
React 路由器
RamdaJs，一个面向 JavaScript 程序员的实用函数库。
React Styled 组件，使用 ES6 和 CSS 的最佳部分轻松设置应用程序的样式。
React CSS 模块。
盖茨比，在各个重要方面都很快。
语义 UI，用户界面是网络的语言。
JavaScript 的ImmutableJS集合。
带有 React 的MDB

HTTP/JSON/AJAX + 异步 JavaScript

Http Status Dog和Http Status Cat以及Http Reference的精彩列表。
查询字符串与查询参数
为什么需要 HTTPS
JSON 格式和JSON参考
JSONP。
AJAX。
获取 API和响应对象。
Promises有 3 种状态：Fulfilled、Rejected、Pending
Async await 看起来像是语法糖。
ECMAScript 更新列表及示例

蜜蜂

人脸识别项目

NodeJS + ExpressJS

JavaScript 机器人和物联网
NodeJS 文档
NodeJS 全局变量
从 12.12.x 及更高版本开始，NodeJS 中的导入可以使用 ES6 方式，而不是 CommonJS。
NodeJS 中最常用的库：fs、path、http、nodemon
ExpressJS
快速请求中最常用的属性：主体、参数、查询、标题。
快速响应中最常用的属性：status、send
fs 最常用的方法：readFile、readFileSync、appendFile、writeFile、unlink
比赛每年十二月举行

数据库

关系型数据库：MySQL、PostgreSQL、Oracle、MSSQL、Sybase、Derby、SQlite
非关系型（NoSQL）：Redis、MongoDB、Cassandra、CouchDB、Apache HBASE、Rick
JavaScript 的 SQL 查询生成器

部署

Github 精彩个人资料

附言：你想学习更多类似的技巧吗？如果你是编程新手，我建议你加入 ZTM 社区，先学习“完整的 Web 开发人员”课程。

加油，继续学习！🍻

文章来源：https://dev.to/codesandtags/the-complete-web-developer-in-2020-321a