头图

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

JenK
English

自 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 DevToolsRedux 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 免费网页设计课程 2020Web 设计基础知识中最好的免费课程之一。🎓
在 Figma 中进行构建:设计一个响应迅速的网站该视频深入介绍了在 Figma 中使用自动布局的方法。🧐
查看建筑物选择颜色和 OpenType还没看过这个,但等不及要看一看。🧐
制定数据相关的设计决策关于大型品牌在设计或更改时如何考虑数据的如此有趣的网络研讨会。🧐
开发人员和设计师,共同构建设计系统我等不及要看了。真正有效的团队会在流程的早期阶段就设计与开发之间进行清晰的沟通。🧐
在 Figma 中进行构建:设计响应式网站导航有很多设计花絮和 Figma 技巧都支持到这个设计中。🧐

结尾

部分连接无法访问可联系我(可能需要一个免费的梯子)
更多问题欢迎加入前端交流群交流749539640

阅读 1.4k
avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

5.9k 声望
4.6k 粉丝
0 条评论
你知道吗?

avatar
JenK
北京中电兴发 前端工程师

理想的光芒很难照进现实

5.9k 声望
4.6k 粉丝
宣传栏