2020-2021年之间165+开发资源整理

自 2020 年开始编写代码以来，我遇到了许多有用的资源。

我已经整理了大部分资源，部分资源还在整理中。希望它们对你也有帮助！

资源类型

🎓=主题完整课程
🧰=使开发更轻松的工具
🧐=主题上的单篇文章或视频

资源清单

• HTML

• CSS

• JavaScript

• React

• WordPress

• Git&CLI

• 资源托管

• 资源优化

• 数据库

• MISC Web 开发资源

• 职业资源

• 设计资源

HTML

标题	解释	类型
Alt Text	提供了替代文字的例子。	🧐
HTML：<!DOCTYPE>标记	对于初学 HTML 语法时特别有帮助	🧐
W3S HTML5 语义元素	很棒的简介，为什么一切都不应该放在里面<div>。	🧐
MDN HTML 元素参考	准备好进入下一个级别了吗？该指南在许多 HTML 元素中都有更深入的介绍。	🧐
HTML5 中的新结构元素	本指南确实帮助我了解了诸如<figure>和<figcaption>	🧐
HTML5 元素周期表	我喜欢这种互动方式，但简化了这种学习要素的方式。	🧐
script：异步，延迟	这教会了我将 JS 加载到 html 文件中的不同方法，从而大大提高了性能。	🧐
学习 HTML 和 CSS	参加了本课程，为训练营做准备。HTML 的精彩介绍。	🎓
学习高级 HTML 和 CSS	我真的很喜欢上面的初学者课程，并希望参加这一课程。	🎓
Derek Banas 教程	从技术上讲，不是 HTML，但可以肯定地可以帮助您高效地编写 HTML。期待观看本教程。	🧐
metatags.io	用于为多个社交媒体平台创建元标记的生成器之一。	🧰
链接和按钮的完整指南	在这篇深入的比较文章中，使用正确的工具完成正确的工作从未如此明显。	🧐
getwaves.io	这个工具可以生成 svg 波，为页面部分创建弯曲的分隔！	🧰

返回清单列表 🔝

CSS

标题	解释	类型
Bootstrap Documentation	即使我不使用该框架，我也喜欢使用它们的文档来启发常见的 Web 组件。	🧐
有关 CSS 特殊性的细节	CSS-Tricks 进行了详细的分类，并在末尾提供了精美的图形示例。	🧐
CSS 盒模型	盒模型如何工作的非常容易接近的示例。	🧐
惊人的 CSS 动画的 12 个技巧	在创建酷炫的动画并确保它们表现出色的过程中，有很多好的技巧。	🧐
CSS 布局和动画	还没吃完这个，但是等不及了。课程设计是一流的。	🎓
网络忍者 SASS 教程	关于 SASS 的第一门课程，至今仍不时参考。	🎓
在 20 分钟内学习 Sass	这对于 SASS 是什么的第一个入门非常有用。	🎓
BEM 和 SASS：完美匹配	介绍如何将 BEM 和 SASS 一起使用。	🧐
getbem.com	概述了流行命名约定的创建者。	🧐
CSS 技巧 BEM 101	我喜欢本文提供的有关如何使用 BEM 的按钮示例。	🧐
BEM 示例	关于 BEM 的这种解释确实很好，但是我尤其喜欢他们如何获得本文的简短和完整版本。	🧐
MDN display 文档	您可能想知道的有关强大 display 属性的所有信息。	🧐
Calc()的几个用例	calc() 是 CSS 中更强大的功能之一，本文展示了一些很好的用例。	🧐
Wes Bos cssgrid	您不能无休止地争论，Wes Bos 是那里最好的发展老师之一。	🎓
Wes Bos Flexbox	见上文，但这次是 Flexbox	🎓
CSSmatic	强大的 CSS 生成器集合，可用于渐变，边界半径，噪声纹理和框阴影。	🧰
CSS 关于 position 的技巧	如果我只能访问该 position 属性的一种资源，那就是它。	🧐
Can I Use xxx?	该站点使您知道浏览器对其中每个属性的支持。	🧰
yoksel Flex 备忘单	我喜欢这种布局及其可以直观地预览 flexbox 属性的方式。	🧐
您必须记住的 30 个 CSS 选择器	当我想进入 CSS 选择器的杂草时（对不起，BEM），这是我引用的文章。	🧐
CSS Lint	该工具将检查您的代码并突出显示任何错误。	🧰
系统字体堆栈	可以插入到项目中的预定义字体后备堆栈。	🧰
Neumorphism.io	该工具使元素看起来就像在页面表面之下。	🧰
高级 CSS 和 Sass：Flexbox，网格，动画等！	高级 css 和 scss 教程!	🎓
CSS 滚动阴影	此工具仅使用 CSS 即可生成基于滚动位置显示的阴影！	🧰

返回清单列表 🔝

JavaScript

标题	我的想法	类型
javascript.info	这是 JS 的完整且详细解释的概述之一。	🧐
代码美化	在进入 ESlint 之前，我真的很喜欢这个工具，以确保我的 JS 都是犹太洁食的。	🧰
真实与虚假：JavaScript 中的一切都不尽相同	对于所有可能将值视为 true 或 false 的实例，本文都是不错的参考。	🧐
事件循环到底是什么？	我还没有看过，但是很期待。	🧐
JavaScript 循环 视频	观看一个视频以了解常见的 JS 循环。	🧐
JavaScript 循环 文章	阅读一篇文章来理解常见的 JS 循环。	🧐
Codecademy JS 速查表	完全免费，并且包含了一些常见的 JS 元素和概念。	🧐
MDN js string	我想知道的所有关于字符串以及在何处使用它们的信息。	🧐
JSON parse VS JSON Stringify	这些 JSON 函数使我困惑不已。本文确实有助于解释这些差异。	🧐
Google 托管库 jQuery	收藏链接。:)它始终具有最新的 jQuery CDN 脚本。	🧰
公开 API	您可以在今天使用项目的公共 API 的好清单！	🧰
Javascript 事件委托	关于事件是什么以及事件委托如何工作的出色视觉呈现。	🧐
Var，Let 和 Const –有什么区别？	很好地介绍了不同的变量类型（以及为什么 var 是垃圾桶。）	🧐
箭头函数和常规函数之间的 5 个差异	我喜欢这如何揭露这两种函数类型的用法。	🧐
JavaScript DOM 速学课-第 1 部分	探索如何在 DOM 中选择要与 JS 一起使用的元素	🎓
JavaScript DOM 速学课-第 2 部分	了解如何遍历 DOM 的基础知识。	🎓
JavaScript DOM 速学课-第 3 部分	了解如何将附加事件附加到 DOM 元素。	🎓
JavaScript DOM 速学课-第 4 部分	根据最后 3 个视频构建一个小项目。	🎓
DOM 简介	这篇关于 DOM 的很棒的资源，这篇快速的文章将使您入门并开始工作。	🧐
异步 Javascript	直到现在我都没有为此添加书签。Net Ninja 提供的这门很棒的免费课程。	🧐
在线编码测验工具	这个很棒的主题培训工具可让您练习 Javascript 技能。	🧰
什么是 JavaScript 中的事件冒泡？	关于事件冒泡是什么以及如何利用它的另一个重要资源。	🧐
JavaScript 事件委托比您想象的要容易	了解如何正确触发和收听事件。	🧐
哪个 HTML 元素是事件的目标？	找出与哪个元素进行了交互。	🧐
了解 JavaScript 中的作用域	喜欢这个网站的设计，它在解释范围上做得很透彻。	🧐
用 JavaScript 编写函数的不同方式	关于如何编写“函数声明”函数的快速文章。	🧐
面向初学者的 JavaScript 图像滑块	这教导了如何使用 Vanilla JS 构建简单的图像滑块。	🧐
了解测试任何 JavaScript 应用程序的智能，高效方法	我还没有选这门课，但是很期待它，因为这是一个非常重要的主题！	🎓
JavaScript 算法和数据结构大师班	我不喜欢算法，所以这就是为什么我将这门课程加为书签！	🧐
AJAX 基础	您想知道的有关向 Web 服务器发出 AJAX 请求的所有信息。	🎓
如何使用 JavaScript 连接到 API	本文确实帮助我了解了如何在项目中使用 API​​ 调用。	🧐
JSON 教程：使用 JavaScript 或 PHP 请求 API 数据	看到 PHP 和 JavaScript 如何以不同方式处理 JSON 非常有趣。	🧐
JavaScript Reduce 方法的基础	这篇简短的文章非常出色地分解了这种强大的 JS 方法。	🧐
Axios 或 fetch（）：应该使用哪个？	我倾向于接触 Axios，但是本文在解释这两者方面做得很好。	🧐
学习 JavaScript 入门	我参加了这个 30 小时的课程，真是太神奇了。出色地解释了基础知识。	🎓
validatejs.org	出色的工具，可用于注册和登录表单，以确保用户数据正确无误。	🧰
面向初学者的 HTML5 画布教程	作为一名设计师，这是我为之兴奋的机会。	🧐

返回清单列表 🔝

React

标题	我的想法	类型
react 备忘录	在常见的 React 模式和片段上快速轻松地浏览备忘单。	🧰
如何使用 React.js 和 GraphQL 构建 Full Stack JavaScript 应用	当时的价格比 Udemy 少，但没有人像 Wes Bos 那样教书。希望很快就能购买到这一台。	🎓
React 开发人员工具	这使您可以直接在 Chrome DevTools 中查看道具，组件，渲染等	🧰
React 图标	这是我最喜欢的图标包之一，因为它几乎有每个主要的图标库。	🧰
React-完整指南（包括 Hooks，React Router，Redux）	我最喜欢的课程之一，已经使我为在 React 中编写代码做好了充分的准备。	🎓
useReducer Hook 的示例	本文/视频打破了一个非常酷的陷阱，使您无需下载库即可获得“类似 Redux”的商店。	🧐
MDX 文档	这种语法将 JSX 和 Markdown 结合在一起！	🎓
对设计师的 React	它提供了一些很棒的课程和初学者项目，以帮助您开始使用 React。	🎓
React Router 教程	将 React Router 导航的功能与 Bootstrap 的样式混合在一起。	🧰
React SEO	我真的很想学习这个软件包。它使您可以将 SEO 元标记添加到不同的“React 页面”	🧰
使用 React.lazy 和 Suspense 进行代码拆分	这确实有效！在我的网站上实施后，我的绩效得分有所提高。	🧐
33 个验证示例	很棒的 React 表单验证和演示代码集合。	🧐
37 ReactJS 基础知识 useRef Hook	关于如何使用 React 钩子的有用视频 useRef。	🧐
npm React 验证	强大的软件包来设置表单验证。需要更深入地研究一天，以学习它可以做的所有事情。	🧰
React 表单生成器	该软件包可让您构建自定义表单，并为您进行验证。	🧰
样式组件	React 用户的最爱，使您可以创建专注于 CSS 的自定义组件。	🧰
使用自定义 React Hook 响应内联样式和媒体查询	本文帮助我模仿了 JSX 环境中的响应式样式。	🧐
React Bootstrap	关于将 Bootstrap 与 React 结合使用的非常好的文档。	🧐
Redux 使用 hooks	使用 Redux 的现代 Hook 语法。这节省了我很多时间！	🧐
实际上，为什么我不能直接修改组件的状态？	这很好地解释了为什么必须使用 setState 更改类组件中的状态。	🧐
React ：组件之间的通信	深入研究 React 组件如何相互传递数据。	🧐
如何在 React 中识别和解决浪费的渲染	性能就是一切，这教会了如何正确使用渲染。	🧐
components props	对我而言，这是 React 文档中最核心且访问量最大的页面之一。	🧐
设置 Redux DevTools	Redux DevTools 对我来说并不是最简单的设置，但是这有助于很好地解释该过程。	🧐
React Redux 简易课程	尚未在 Redux 上观看过此入门课程，但听到了一些好消息。	🎓
gatsbyjs	非常高兴能很快使用此静态站点生成器。	🧰
MERN react nodejs 全栈	购买了本课程，但尚未参加。涵盖了这么多内容，我很高兴能尽快这样做。	🎓
React Native 实用指南	现在就开始学习，并热爱它所涉及的所有细节。	🎓

返回清单列表 🔝

WordPress

标题	我的想法	类型
如何创建自定义 WordPress 主题-完整课程	WordPress 中自定义主题的精彩介绍。	🎓
WordPress 基础	所有视频都很好地分解了。	🎓
适用于初学者的 WordPress	关于 WordPress 基础的另一个很棒的播放列表。	🎓
创建一个高级 WordPress 主题	尚未参加，但此播放列表中有很多有用的视频主题。	🎓
自定义 WordPress	对高级 WordPress 主题非常有用的播放列表。	🎓
WordPress 中级技能	我喜欢这门课程也涵盖了使用服务器的知识。	🎓
如何使用 MAMP（Mac）在本机上安装 WordPress	该视频教会了我如何在机器上本地使用 WordPress。	🧐
wphierarchy.com	该网站在解释 WordPress 中所有不同文件类型及其重要性级别方面做得非常出色。	🧐
在 WordPress 中使用 CSS 和 JavaScript	在 WordPress 中使用 CSS 和 JS 的文档。	🧐

返回清单列表 🔝

Git & CLI

标题	我的想法	类型
比较 Git 工作流	这对于理解每个团队需要有不同的 Git 工作流非常有帮助。	🧐
命令行高级	等不及要成为本课程的真正终端大师。	🎓
学习 Git 分支	该交互式课程对理解分支的工作原理非常有帮助。	🎓
GITHUB PULL REQUEST，分支，合并和团队工作流程	有关在 Git 工作流程中与团队合作的外观的概述。	🧐
掌握 markdown	对于查看通用的 Markdown 语法和升级 Git README 来说，这是一个很好的资源	🧐
add 和 commit 的区别	当我第一次开始使用 Git 进行版本控制时，此功能非常有用。	🧐
基本的 Git 命令	关于常见 git 命令的另一个很棒的备忘单。	🧐
GitHub 指南 Hello World	这篇非常用户友好的指南开始使用 Github。	🧐
Git 命令	常见 Git 命令的非常直观的方法。	🧐
短代码 Git 备忘单	可搜索的备忘单	🧐
命令行命令列表	Codecademy 在许多 CLI 终端命令上的超赞列表。	🧐

返回清单列表 🔝

资源托管

标题	我的想法	类型
Netlify 构建	Netlify 令人敬畏的过程，一旦更新了特定的分支机构，就会触发构建到实时站点的过程。	🧰
Netlify 教程	免费课程以使用 Netlify 托管来启动和运行	🎓
使用 Netlify 提交简单的联系表	关于如何将 Netlify 设置为邮件服务器的简单教程。	🧐
PHPStorm FTP 服务器到远程主机的连接	有关如何使用 PHPStorm 与 SFTP 或 FTP 连接的教程。（与 VS Code 相比，这很令人高兴）	🧐

返回清单列表 🔝

资源优化

标题	我的想法	类型
前端 Web 优化工作流程	等不及要学习 CDN 和优化资产	🎓
rel=canonical：最终指南	关于规范网址是什么以及在哪里使用它们的很好描述。	🧐
延迟加载 MDN	开始学习延迟加载的工作原理的好地方。	🧐
SEO Web 开发入门指南	关于什么是 SEO 以及如何使用 SEO 的精彩介绍。	🧐
MOZ 页面加载速度检测	这显示了大量检查页面速度不佳的区域。	🧐
调试的艺术	深入了解调试网站的过程和提供帮助的工具。	🧐

返回清单列表 🔝

数据库

标题	我的想法	类型
MongoDB 的 Mongoose 简介	本文彻底解释了什么是 MongoDB 以及为什么必须将 Mongoose 与之一起使用。	🧐
Restful Routes	在阅读本文之前，我还没有完全理解 RESTful API 调用。	🧐
HTTP 响应状态码	代码 418 是最好的。;）	🧐
Passport	用于全栈用户身份验证的出色工具	🧰

返回清单列表 🔝

MISCWeb 开发资源

标题	我的想法	类型
使用其他人编写的代码	如何探索新代码库的精彩技巧。	🧐
Markdown Table 生成器	这就是我在这篇文章中制作表格的方式;）	🧰
jest	用于测试驱动开发的行业测试框架之一。	🧰
电子邮件基础	这个框架使响应式 HTML 电子邮件的编码变得容易。	🧰
Zurb 电子邮件基础课程	以上电子邮件框架的绝佳课程。	🎓
NPM Dotenv	该软件包可让您保护项目中的敏感信息（如 API 密钥）。	🧰
typing 练字	我在进行训练营之前就使用了它，以便更快地练习键入代码。	🧰
Google Maps Platform 文档	在项目中使用 Google Maps 的 Api 文档。	🧐
什么是单点登录身份验证以及如何工作？	这在帮助我从高层次理解 SSO 的工作原理时非常有用	🧐
子域名与子文件夹：哪个更适合 SEO	关于如何构建松散相关的 Web 内容的非常有趣的文章。	🧐
favicon.io	这是我最喜欢的 Favicon 生成器（浏览器选项卡中的小图标），并且具有出色的界面。	🧰
Wes Bos Eslint 配置	下载 Wes Bos 用于整理他的代码的设置。	🧐
Emmet 备忘单	对多种语言的常用 Emmet 命令的超级有用参考	🧐
了解 Jetbrains PHPStorm IDE	这成为了我最喜欢的 IDE，并且热爱他们所有的资源，以了解如何正确使用它。	🧐
敏捷 Scrum 开发过程以及 UI / UX 设计如何适应	很好地概述了如何设置敏捷工作流。	🧐

返回清单列表 🔝

职业资源

标题	我的想法	类型
开发人员的黄金指南	关于准备招聘材料的令人难以置信的指南，例如简历简历和面试实例。	🧐
学习如何学习	等不及要学习这一点，学习如何做一个更好的“学习者”。	🎓
Glassdoor 常见面试问题	面试中可以问到的 50 个问题清单	🧐
如何解决您不知道该怎么办的事情	这是我最喜欢的文章之一，出于动机我经常回头参考。	🧐
白板面试实践	有用的链接和进行白板面试的指南。	🎓
在 Google 工作-编码/工程面试范例	看到 Google 的采访水平非常有趣。	🧐
Jobscan.co	有用的网站，可优化求职信和简历。	🧰

返回清单列表 🔝

设计资源

标题	我的想法	类型
快速网站原型制作	学习如何快速模拟特征思想，这涵盖了许多重要的方面。	🎓
树屋 UX 设计	本课程涵盖了许多重要的 UX 主题以及如何通过设计进行思考。	🎓
Flux 免费网页设计课程 2020	Web 设计基础知识中最好的免费课程之一。	🎓
在 Figma 中进行构建：设计一个响应迅速的网站	该视频深入介绍了在 Figma 中使用自动布局的方法。	🧐
查看建筑物选择颜色和 OpenType	还没看过这个，但等不及要看一看。	🧐
制定数据相关的设计决策	关于大型品牌在设计或更改时如何考虑数据的如此有趣的网络研讨会。	🧐
开发人员和设计师，共同构建设计系统	我等不及要看了。真正有效的团队会在流程的早期阶段就设计与开发之间进行清晰的沟通。	🧐
在 Figma 中进行构建：设计响应式网站导航	有很多设计花絮和 Figma 技巧都支持到这个设计中。	🧐

结尾