超硬核 Web 前端学霸笔记，学完就去找工作！

文章和教程

• Vue 学习笔记
• Node 学习笔记
• React 学习笔记
• Angular 学习笔记
• RequireJS 学习笔记
• Webpack 学习笔记
• Gulp 学习笔记
• Python 学习笔记
• Egret 引擎学习笔记
• 流处理，TCP 和 UDP，WebRTC 和 Blob 学习笔记

博客

• 前端回忆录 | 前端笔记本 - 一个前端博主记录的心得和总结
• Hasnode - Hashnode 是在您的个人域 free 上免费创建开发者博客并通过我们的全球开发者社区与读者联系的最简单方法！ ‍‍
• Dev.to - DEV 是一个由软件开发人员组成的社区，他们聚在一起互相帮助。
• Hackernoon - 一个独立的技术媒体网站

必须具有 Chrome 扩展程序

• DailyDev - 在 Chrome 默认标签中获取有关 Dev 社区的最新消息。
• WhatFont - 了解网站使用的是哪种字体。
• ColorPick Eyedropper - 只需放下笔，即可知道网站使用的是哪种颜色。
• Wappalyzer - 了解任何网站的技术栈
• Web Developer - 该扩展程序拥有大量工具。
• React Developer Tools - React 开发者工具是 Chrome DevTools 扩展，用于开源 React JavaScript 库。它使您可以检查 Chrome 开发者工具中的 React 组件层次结构。

---

前端性能分析工具

• PageSpeed Insights - PageSpeed Insights 能够针对移动设备和桌面设备生成网页的实际性能报告，并能够提供关于如何改进相应网页的建议。
• Lighthouse - Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
• Pingdom - 在线网站速度检测工具是由一家网站监测服务公司推出的网页速度检测工具，帮助用户找出影响网站速度的原因，并给出改善网页性能的可行性方案，对于有网站的用户来说非常实用。
• Sitespeed.io - Sitespeed.io 是一款开源的 Web 性能测试工具，用来衡量 Web 网站的综合性能，帮助开发和测试人员分析网页的加载速度和渲染性能。
• Calibre - Caliber 是一款多功能的性能监控套件，可帮助你监控和审核网站的性能。 它还允许你通过指定测试服务器的位置，管理模拟的广告首选项甚至模拟移动设备来模拟现实条件。 它还允许你设置预算，并通过为你提供性能下降来帮助你将预算保持在预算之内。
• SpeedTracker - SpeedTracker 是一个运行在 WebPageTest 之上的工具，可在你的网站上进行定期的性能测试，并直观显示各种性能指标随时间变化的方式。 这使你可以不断评估网站，并查看新功能如何影响网站的性能。 你还可以定义预算并通过电子邮件和 Slack 获取警报。

VS 代码必须具有扩展名

• Compile Hero - Compile Hero 是一款简单易上手用于一键编译 Less, Sass, Scss, Styl, TS, TSX, Jade, Pug 或 JS 等文件的编辑器工具。
• NPM - 此扩展名可帮助您管理 Package.json 并在未安装依赖项时提供警告，也会有所帮助与版本控制。
• Prettier - Prettier 是一种自以为是的代码格式化程序。它通过解析代码并使用自己的规则（考虑最大行长）重新打印代码，从而实现一致的样式，并在必要时包装代码。
• 彩虹括号 - 通过对环境中设置的每个支架进行颜色编码，可以轻松找到丢失的标签。
• VS 代码大图标 - 通过应用适当的图标集来按类型直观地识别文件，从而组织环境。
• 占位符图像 - 诸如 unsplash.it 和 placehold.it 之类的服务非常有用。现在，您可以通过直接在 VS Code 中添加占位符图像来节省时间
• Vetur - 官方 VueJS 扩展
• ESLint - 该扩展程序使用安装在打开的工作区文件夹中的 ESLint 库。
• 实时服务器 - 启动具有实时重新加载功能的开发本地服务器，用于静态和动态页面。
• Visual Studio IntelliCode - 此扩展程序会将最相关的完成建议移到顶部。
• Chrome 调试器 - 此扩展程序可让您从 VS Code 内部调试在 Chrome 浏览器中运行的 JavaScript 代码。
• Microsoft Edge 调试器 - 在 Microsoft Edge 浏览器中调试 JavaScript 代码
• Firefox 调试器 - 在 Firefox 中调试 Web 应用程序或浏览器扩展
• Bracket Pair Colorizer 2 - 可自定义的扩展程序，用于为匹配的支架着色

VS 代码主题

• One Dark Pro - Atom 的标志性 Visual Studio Code 的“ One Dark”主题
• 材料主题 - Visual Studio Code 现在最史诗般的主题
• 地平线主题 - 一个精美 ​​ 的 Visual Studio 代码双重主题

---

DOCS 和备忘单

• MDN Web Docs - MDN Web Docs 网站提供有关 Open Web 技术的信息，包括网站和渐进式 Web 应用程序的 HTML，CSS 和 API。
• DevDocs - 针对开发人员的快速，离线和免费的文档浏览器。在一个 Web 应用程序中搜索 100 多个文档。
• DEVHINTS - 少量的备忘单。
• FLEX-Malven - CSS Flex 布局的可视备忘单。
• GRID-Malven - CSS 网格布局的可视备忘单。

如何运作？

• 互联网如何运作视频 - 互联网如何运作？
• 互联网的工作原理简介视频 - 关于互联网如何工作的简要说明？
• DNS - DNS 如何工作？
• HTTPS - HTTPS 如何工作？

对于 HTML 和 CSS

• Layout Demo - 学习 CSS 页面结构布局
• freeCodeCamp - 学习 Web 开发的免费课程。
• Flexbox Froggy - 一款可帮助您学习 CSS Flex 的游戏。
• CSS 技巧-Flexbox - Flexbox 完整指南。
• Grid Garden - 一个学习 CSS Grid 的游戏。
• CSS 技巧-网格的完整指南 - CSS 网格的全面指南，着重于网格的所有设置父容器和网格子元素。
• Learn CSS Grid - Jonathan Suh 撰写的综合指南，可帮助您了解和学习 CSS Grid Layout。
• 我可以使用 - 最新的浏览器支持表，用于支持台式机和移动 Web 浏览器上的前端 Web 技术。
• HTML Dog - 简单明了。
• Marksheet - 无限数量的教程
• ODIN 项目 - 惊人的学习方式。
• CSS 效果 - CSS 动画。
• 关键帧 - 使用可视时间线编辑器创建基本或复杂的 CSS @keyframe 动画。
• Animista - 玩准备好使用 CSS 动画的集合。
• 难以上网 - 面向完整初学者的友好 Web 开发教程。
• BEM - BEM 命名备忘单。
• Autoprefixer - Autoprefixer 是一个 PostCSS 插件，可解析您的 CSS 并添加供应商前缀。
• CSS 格式化程序 - 在线 CSS 格式化程序，CSS Beautifier。
• 占位符 - 如何使用我们的占位符。只需在我们的 URL 后指定图像尺寸，您将获得一个占位符图像。

---

在线 IDE，编辑器

• goormIDE
• CodeSandbox
• CodePen
• Repl.it
• JSFiddle

图像资源

• Unsplash - 免费图片和照片。
• Pexels - 免费的图片。 -删除照片数据-在互联网上共享照片之前，先从照片中删除个人数据。
• LottieFiles - LottieFiles 是专为-Lottie 设计的动画集合-烦扰开发人员的日子已经一去不复返了。
• removebg - 删除图像背景。
• Pixabay - 免费图片或视频。

可及性

• 辅助功能博客-中 - 七个易于实现的准则-设计更易访问的网站的准则。
• 可访问性备忘单 - 通用设计的实用方法，使每个人都可以访问您的网站/ webapp。

Windows 的终端

• Windows 终端
• FluentTerminal
• 超级

YOUTUBE 频道

• Traversy Media
• freeCodeCamp.org
• 代码进化
• Fireship
• The Net Ninja
• Wes Bos

字体和印刷术

• Google 字体 - 免费和易于使用的网络字体的第一资源。
• FontPair - 字体对可帮助设计师将 Google 字体配对在一起。漂亮的 Google 字体组合和配对。
• Fontjoy - Fontjoy 帮助设计师选择最佳的字体组合。混合并匹配不同的字体以实现完美的配对。
• Fonts Arena - 免费字体，高级字体的免费替代品，针对您的研究成果。

插图

• unDraw - 浏览以找到适合您需要的插图，然后单击下载。
• freepik - 免费的图形资源。
• DrawKit - 手绘矢量插图和图标资源，非常适合您的下一个项目。

图标

• Font Awesome - 矢量图标和社交徽标。
• Ionicons - 开源且由 MIT 许可的图标包。
• icons8 - 以 PNG 和 SVG 下载免费图标。
• flaticon - SVG，PSD，PNG，EPS 格式或图标字体的免费矢量图标。
• 简单图标 - 1463 个流行品牌的免费 SVG 图标。

---

前端框架学习资源

JAVASCRIPT

• freeCodeCamp - 最好的免费资源，用于交互式学习 JavaScript。
• JavaScript.info - 实用 JavaScript 教程。
• JavaScript 设计模式
• MDN 的 JavaScript 参考
• Eloquent JavaScript - 这是一本有关 JavaScript，编程和数字奇迹的书。您可以在此处在线阅读。
• JavaScript30 - 30 天香草 JS 编码挑战。在 30 天内使用 30 个教程构建 30 件事。
• DOM 操作参考
• JavaScript 的工作方式
• JavaScript 事件参考
• 最充分的函数式编程指南 - 使用 JavaScript 进行函数式编程的出色入门。
• Functional-Light JavaScript - 本书探讨了将函数式编程（FP）应用于 JavaScript 的核心原理。
• 代码学校 - 从基础到最佳实践。与 JavaScript 相关的不同课程。
• 函数式编程 - 通过使用 map，filter，concatAll，reduce 和 zip 以交互方式学习函数式编程的基本原理。
• 在线学习 JavaScript - 带有间隔的重复性抽认卡应用程序的交互式 JavaScript 课程。
• Exercism JavaScript Track - Exercism 免费提供个人练习和基于导师的学习。

---

React

为什么要 React？

• Facebook 上的 JS 应用
• React：重新思考最佳做法
• React
• React 文档-快速入门部分 - 基本
• 学习 React 之路 - 基本

ES2015 +

• 学习 ES6（ECMAScript 2015) - 基本
• 探索 ES6 - 高级
• 探索 ES2016 和 ES2017高级

路由

• React Router Docs - 基本

状态管理

# Redux

• Redux 入门 - 基本
• 使用惯用的 Redux 构建 React 应用程序 - 高级

捆绑包

# Webpack

• Webpack 入门

建立东西

• 几个项目构想
• React-TodoMVC
• 引导 React 项目
• 建立天气应用
• React + Redux 中的 SoundCloud 客户端 - 关于 React 生态系统的入门知识：1，2和 3。
• 使用 JSON Web 令牌（JWT)身份验证构建 React / Redux 应用
• 想深入了解 React 吗？

---

API

• Quotes REST API - 他们说 So 在数据库中有超过一百万条报价，这是世界上最大的此类数据库。 Quotes API 提供了一种简单的方法来访问数据。
• OpenWeather - 来自 OpenWeatherMap 的简单，快速，免费的天气 API，您可以访问当前的天气数据，每小时，5 天和 16 天的天气预报。
• 公共 API - 面向开发人员的 1000 多种免费公共和开放 REST API 的汇总列表。
• SWAPI - 《星球大战》 API。
• JSONPlaceholder - 免费使用伪造的在线 REST API 进行测试和原型制作。

NODEJS

• Node.js 教程 - Net Ninja 的 Node.js 崩溃课程教程。
• 您不知道 Node.js
• Node 的艺术 - 涵盖基础知识的入门教程。
• NodeSchool - 您也可以自己进行互动的自助式讲习班。
• Node 模式 - 有关与 Node.js 相关的代码和网络模式的简短书籍。
• 学习 Node - 一个高级培训课程，用于学习如何使用 Node.js，Express 和 MongoDB 构建应用。
• Node Way - 存在用于编写可维护模块，可伸缩应用程序和易于阅读的代码的 Node.js 最佳实践和指导原则的完整哲学。
• Express.js 安全提示 - 如何保存和保护应用程序。
• Awesome Nodejs - 令人愉快的 Node.js 软件包和资源。
• nodebestpractices - 大量的构建 Node 应用程序的最佳实践。对于大型项目很重要。

学习 GIT

• Git 手册 - Git，GitHub，DVCS，天哪！了解 Git 的所有术语和基础知识。
• 备忘单 - 保持这些方便！参考表涵盖了 Git 命令，功能，SVN 迁移和 bash。提供多种语言。
• 学习 Git 分支 - 直接从 Web 浏览器尝试 Git 命令。拥有一些您即将成为收藏夹的功能：分支，添加，提交，合并，还原，挑选，重新设置！
• 可视化 Git - 看看引擎盖下！使用免费浏览模式和一些构建的场景，探索 Git 命令如何影响 Web 浏览器中存储库的结构。
• Git-It - 您已经下载了 Git，现在呢？将 Git-It 下载到您的计算机上，您将获得一个动手教程，该教程将教您直接在本地环境中使用真实存储库上的命令来使用 Git。

---

实战案例

• 用键盘 8 个键演奏一首蒲公英的约定送给自己或月亮代表我的心送给她
• 基于 Vue3.0 Composition Api 快速构建实战项目
• 大型前端项目要怎么跟踪用户行为和分析函数调用链追踪方案
• 微信小游戏跳一跳辅助
• 编写 React 和 Omi 单文件组件的 VSC 语法高亮插件
• 6000 万数据包和 300 万数据包在 50M 内存使用环境中求交集
• 大厂面试题分享：如何让(a=1&&a=2&&a===3)的值为 true?
• NodeJS 实现《你画我猜》小游戏
• 使用 PHP 的 CodeIgnitier 框架编写新闻客户端
• 极大提高国人开发效率超实用的 VSCode 插件
• 我如何用前端技术得到 XXOO 网站的 VIP
• 我如何用最简单的前端技术揭示那些灰色产业背后的原理
• 腾讯 Omi 框架和 Omil 使用文档
• iPhone X 的适配方案

准备面试（问题）

• 174 道 JavaScript 面试题，助你查漏补缺 - 有用的前端相关问题列表，可用于面试潜在候选人。
• 66 道前端算法面试题附思路分析助你查漏补缺 - 有用的前端相关问题列表，可用于面试潜在候选人。
• 104 道 CSS 面试题，助你查漏补缺 - 有用的前端相关问题列表，可用于面试潜在候选人。
• 《切图仔面试宝典》
• 前端程序员经常忽视的一个 JavaScript 面试题
• try catch 引发的性能优化深度思考
• 关于 Vue，React，Preact 和 Omi 等框架源码的解读
• CSS 的各种布局
• 深入浅出 Jest 框架的实现原理