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

  • 2021 年 8 月 21 日
  • 筆記

文章和教程

博客

  • 前端回忆录 | 前端笔记本 – 一个前端博主记录的心得和总结
  • 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 网格布局的可视备忘单。

🌐 如何运作？

对于 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，编辑器

📷 图像资源

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

👓 可及性

Windows 的终端

📺YOUTUBE 频道

🖋 字体和印刷术

  • 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

⚡ React

为什么要 React？

ES2015 +

路由

状态管理

# Redux

捆绑包

# Webpack

建立东西

🎮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。

实战案例

准备面试（问题）

VirMach 便宜 VPS

QNews

QNews