{免费} 2023 年前端开发的终极资源 + 赠品⚡ 600 多个免费设计资源博客您的旅程必备 Chrome 扩展程序 VS Code 必备扩展程序常规资源📝 在线 IDE、编辑器📷 图像资源👓 可访问性📄 WINDOWS 终端前端框架学习资源⚡ REACT 准备面试（问题）小创作者的货币化⚡赠品⚡ 帮助我

2025-05-26

{免费} 2023 年前端开发的终极资源 + 赠品⚡

600+ 免费设计资源

写博客记录你的旅程

必须有 Chrome 扩展程序

VS Code 必须有扩展

一般资源

📝 在线 IDE、编辑器

📷 图片资源

👓 无障碍设施

📄 Windows 终端

前端框架学习资源

⚡ 反应

准备面试（问题）

小型创作者的盈利方式

⚡赠品⚡

帮我

您只需要这篇文章即可成为前端开发人员，因为这篇文章拥有几乎无限量的各类资源，涵盖了您所需的一切。

600+ 免费设计资源

图片描述

资源。免费。学习。
我们让互联网变得更简单。

访问 - 600+ 免费设计资源

写博客记录你的旅程

  • Hashnode - Hashnode 是在您的个人域名🌏上免费创建开发者博客并通过我们的全球开发者社区与读者建立联系的最简单方法！👩‍💻👨‍💻
  • Dev.to - DEV 是一个软件开发人员聚集在一起互相帮助的社区。
  • Hackernoon - 独立科技媒体网站

必须有 Chrome 扩展程序

  • DailyDev - 在您的 chrome 默认选项卡中获取有关 Dev 社区的最新消息。
  • WhatFont——了解网站使用哪种字体。
  • ColorPick 吸管- 只需放下笔即可了解网站使用的颜色。
  • Wappalyzer——了解任何网站的技术栈
  • Web 开发人员- 此扩展程序具有数量惊人的工具。
  • React 开发者工具- React 开发者工具是针对开源 React JavaScript 库的 Chrome DevTools 扩展程序。它允许您在 Chrome 开发者工具中检查 React 组件的层次结构。
  • Visbug - 开源浏览器设计工具 使用 JavaScript 构建的开源网页设计调试工具：设计师专用的 FireBug。

VS Code 必须有扩展

  • NPM - 此扩展可帮助您管理 Package.json，如果未安装依赖项，则会提供警告，还有助于版本控制。
  • Prettier - Prettier 是一款规范的代码格式化程序。它会解析你的代码，并根据自己的规则重新打印，同时考虑到最大行长，并在必要时进行换行，从而强制保持一致的样式。
  • 彩虹括号- 通过对环境中的每个括号集进行颜色编码，轻松找到丢失的标签。
  • VS Code Great Icons - 通过应用适当的图标集来组织您的环境，以便按类型直观地识别文件。
  • 占位符图片- 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 Code 主题

  • One Dark Pro - Atom 的标志性 One Dark 主题，适用于 Visual Studio Code
  • Material Theme - 目前 Visual Studio Code 最经典的主题
  • Horizo​​n Theme - Visual Studio Code 的精美温暖双主题
  • Mayukai 主题- 基于 Ayu 主题、Andromeda 主题、Monokai、Material Colors、Original Gruvbox Darktooth Colors 和 Dracula Colors 的混合色板的深色主题。

一般资源

图像.png

学习资源📘

文档和备忘单😁

  • MDN Web Docs - MDN Web Docs 网站提供有关开放 Web 技术的信息，包括 HTML、CSS 以及适用于网站和渐进式 Web 应用程序的 API。
  • DevDocs - 面向开发者的快速、离线且免费的文档浏览器。一个 Web 应用即可搜索 100 多个文档。
  • DEVHINTS - 一份简易的备忘单集合。
  • FLEX - Malven - CSS 弹性布局的可视化备忘单。
  • GRID - Malven - CSS 网格布局的可视化备忘单。

🌐 它是如何工作的？

对于 HTML 和 CSS

  • freeCodeCamp - 学习 Web 开发的免费课程。
  • Flexbox Froggy - 一款帮助您学习 CSS Flex 的游戏。
  • CSS 技巧 - Flexbox - Flexbox 完整指南。
  • Grid Garden - 一款学习 CSS Grid 的游戏。
  • CSS 技巧 - 网格完整指南- CSS 网格的综合指南，重点关注网格父容器和网格子元素的所有设置。
  • 学习 CSS 网格- Jonathan Suh 编写的全面指南，帮助您理解和学习 CSS 网格布局。
  • 我可以使用- 最新的浏览器支持表，用于支持桌面和移动 Web 浏览器上的前端 Web 技术。
  • HTML Dog - 简单且切中要点的解释。
  • 成绩单- 无限量的教程
  • ODIN 项目——令人惊叹的学习方式。
  • CSS 效果- CSS 动画。
  • 关键帧-使用可视化时间线编辑器创建基本或复杂的 CSS @keyframe动画。
  • Animista - 使用一组可立即使用的 CSS 动画进行播放。
  • 上网很难- 适合完全初学者的友好型 Web 开发教程。
  • BEM -BEM 命名备忘单。
  • Autoprefixer - Autoprefixer 是一个 PostCSS 插件，它可以解析您的 CSS 并添加供应商前缀。
  • CSS 格式化程序- 在线 CSS 格式化程序、CSS 美化器。
  • 占位符- 如何使用我们的占位符。只需在我们的 URL 后指定图片大小，即可获得一个占位符图片。

📝 在线 IDE、编辑器

📷 图片资源

  • Unsplash - 免费图片和照片。
  • Pexels——免费图片素材。
  • 删除照片数据 - 在互联网上分享照片之前，请删除其中的个人数据。
  • LottieFiles - LottieFiles 是专为 Lottie 设计的动画集合 - 不再需要打扰开发人员了。
  • Remove.bg - Remove.bg 是一款新兴的在线图像背景去除在线工具，它使用人工智能，比市场上任何其他背景去除工具都要好。
  • Pixabay——免费图片或视频。

👓 无障碍设施

📄 Windows 终端

📺 YouTube 频道

🖋 字体和排版

  • Google Fonts - 免费且易于使用的网络字体的首选资源。
  • FontPair - Font Pair 帮助设计师将 Google 字体配对。精美的 Google 字体组合和配对。
  • Fontjoy - Fontjoy 帮助设计师选择最佳字体组合。混合搭配不同的字体，打造完美搭配。
  • Fonts Arena - 免费字体、高级字体的免费替代品、为您完成的研究文章。

🎨插图

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

💧 图标

  • Font Awesome - 矢量图标和社交徽标。
  • Ionicons - 开源且 MIT 许可的图标包。
  • icons8——下载PNG和SVG格式的免费图标。
  • flaticon - SVG、PSD、PNG、EPS 格式或 ICON FONT 的免费矢量图标。
  • 简单图标- 1463 个适用于流行品牌的免费 SVG 图标。

前端框架学习资源

⚡ JavaScript

⚡ 反应

为什么选择 React？

ES2015+

路由

状态管理

Redux

捆绑器

Webpack

构建东西

想深入了解 React？请访问React-Learning

🎮 API

  • Quotes REST API - They Said So 数据库中收录了超过 100 万条语录，是全球最大的此类数据库。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 Patterns - 有关与 Node.js 相关的代码和网络模式的简短书籍。

  • 学习 Node - 学习使用 Node.js、Express、MongoDB 构建应用程序的高级培训课程。

  • Node 方式- Node.js 的最佳实践和指导原则的完整哲学适用于编写可维护的模块、可扩展的应用程序和易于阅读的代码。

  • Express.js 安全提示- 如何保存和保护您的应用程序。

  • 很棒的 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，并在真实的存储库中使用命令。

  • 哦天哪，Git！？！ ——学习 Git 的神奇方法。

准备面试（问题）

  • 前端开发人员面试问题- 一份有用的前端相关问题列表，您可以用它们来面试潜在候选人、测试自己或完全忽略。
  • 前端面试手册- 本书助您从零开始成为前端面试高手。无需任何面试经验。
  • 前端开发人员面试问题- 一份有用的前端相关问题列表，您可以用它们来面试潜在候选人、测试自己或完全忽略。

杂项（以下评论者提供的资源）

小型创作者的盈利方式

点击此处了解更多。您可以加入“Buy Me A Coffee”
这个很棒的网站，获得支持；如果您是内容作者，还可以注册成为会员。

⚡赠品⚡

我将免费赠送你在 Udemy 上需要的任何课程。课程价格不限。
参与赠品活动的步骤

  • 对这篇文章做出反应
  • 回答一个简单的问题
  • 并填写此赠品表格加载中...

或者使用此链接填写表格。

获胜者将在一周后公布


我通常创作与科技、编程等诸多领域相关的内容。我为我的支持者提供精彩的内容和许多其他功能。您可以在这里支持我 ->支持我

感谢您阅读这篇文章。

如果您不喜欢这篇文章，请在评论区告诉我。

帮我

每周获取我本周发布的精彩文章以及一些优惠或公告的新闻简报。点击此处订阅


文章来源：https://dev.to/rahxuls/free-ultimate-resources-for-front-end-development-in-2021-giveaway-3838
Devto 翻译
PREV
MEAN / MERN Stack 100+ 学习资源 {免费} 学习 MongoDB 学习 Express 学习 React 学习 Angular 学习 NODEJS 🤩赠品🥂
NEXT
17 个你不知道的专业 JavaScript 技巧 600+ 免费设计资源 JavaScript：你应该知道的技巧