超棒的Web开发资源 ![Awesome][awesome-badge]
这是一个关于Web开发资源的超棒项目。⚡
资源会频繁更新!⚡
尽情享用!:)
如果你喜欢这个仓库,请务必给它一个⭐。
在提交新资源之前,请阅读贡献指南
。
目录
托管:
网站 | 描述 |
---|---|
https://netlify.com | Netlify 将整个现代工具和服务生态系统统一到一个简单的工作流程中,用于构建高性能网站和应用。 |
https://firebase.google.com | Firebase 帮助你构建和运行成功的应用。它得到Google的支持,并受到从初创公司到全球企业的应用开发团队的喜爱。 |
https://aws.amazon.com | Amazon Web服务提供广泛的全球云基础产品和服务,帮助组织更快地移动、降低IT成本并实现规模化。 |
https://pages.github.com | GitHub Pages是你和你的项目的网站。它直接从你的GitHub仓库托管。你只需编辑、推送,你的更改就会生效。 |
https://vercel.com | Vercel 将最佳开发者体验与对最终用户性能的执着关注相结合。它使前端团队能够做出他们最好的工作。你只需要开发、预览和发布。 |
https://surge.sh | Surge 是面向前端开发者的静态网站发布工具。它是简单的、单命令的网站发布。它可以免费发布HTML、CSS和JS,无需离开命令行。 |
https://render.com | Render 是一个统一的云平台,用于构建和运行所有你的应用和网站,提供免费的TLS证书、全球CDN、DDoS保护、私有网络和从Git自动部署。 |
https://docs.gitlab.com/ee/user/project/pages/ | GitLab Pages - 直接从GitLab仓库托管静态网站。要发布网站,可以使用任何静态站点生成器或任何纯HTML、CSS和JavaScript。 |
https://stormkit.io | Stormkit 可以轻松管理你的前端基础设施。它与你的git流程完美集成。它帮助你无缝地构建、部署和扩展你的web应用。 |
https://www.digitalocean.com/ | DigitalOcean 提供你需要的云计算服务,具有可预测的定价、强大的文档和可扩展性,以支持你在任何阶段的增长。它是一个更简单的云平台,让开发者更快乐,获得更好的结果。 |
https://www.000webhost.com/ | 000webhostapp 是零成本的网站托管,提供PHP、MySQL、Cpanel且无广告。其服务器使用先进的防火墙,并包括DDoS保护。 |
https://infinityfree.net/ | InfinityFree 是功能齐全的完全免费网站托管,提供PHP、MySQL且网站上没有广告。 |
https://pages.cloudflare.com/ | Cloudflare Pages 是一个JAMstack平台,供前端开发者协作和部署网站。它提供免费的无限带宽。 |
https://supabase.com | Supabase 是一个开源的Firebase替代品。使用Postgres数据库、身份验证、即时API、实时订阅和存储开始你的项目。 |
https://railway.app/ | Railway 是一个基础设施平台,你可以在其中配置基础设施,在本地使用该基础设施进行开发,然后部署到云端。 |
https://fly.io/ | Fly 是一个平台,用于在靠近用户的地方运行全栈应用和数据库。我们从2017年开始致力于这个项目,我们认为它非常棒。 |
https://kinsta.com/static-site-hosting/ | Kinsta 为web应用、数据库、WordPress站点和静态网站提供一体化云托管。从GitHub、GitLab和Bitbucket快速安全地部署到由Google Cloud Platform和Cloudflare提供支持的基础设施。 |
https://fleek.co/ | Fleek 使在新的开放网络上构建网站和应用变得容易:无需许可、无需信任、抗审查,并且没有中心化的看门人。 |
学习平台:
编程挑战平台:
自由职业平台:
远程工作:
照片:
视频:
插图:
图标:
字体:
YouTube频道:
播客:
代码编辑器:
调色板:
UI 灵感:
网站 |
---|
https://websitevice.com/ |
https://httpster.net |
https://www.awwwards.com |
https://dribbble.com |
https://onepagelove.com |
https://www.behance.net |
https://tympanus.net/codrops |
https://landings.dev |
文档:
动画库:
网站 |
---|
CSShake |
Animate.css |
AnimeJS |
GreenSock (GSAP) |
Magic Animations |
Hover css |
AniJS |
Wicked CSS |
Tuesday |
Mo.js |
AOS |
Velocity.js |
Popmotion |
Snap.svg |
Animista |
Lottie-Player |
Framer motion |
SwiperJS |
Motion One |
图表:
Chrome 扩展程序:
网站优化工具:
HTML/CSS/JavaScript 模板:
新闻通讯:
网站 | 主题 |
---|---|
Marko Tech Tips | 直接发送到您邮箱的实用技术提示。 |
Smashing Newsletter | 前端和用户体验。 |
Frontend Focus | HTML、CSS、WebGL、Canvas、浏览器技术等。 |
CSS Weekly | CSS。 |
JavaScript Weekly | JavaScript。 |
Accessibility Weekly | 无障碍性。 |
JAMstacked | JAMstack 生态系统。 |
UI Dev Newsletter | 用户界面开发。 |
Go Make Things | 每日原生 JavaScript。 |
CSS 生成器:
网站 | 描述 |
---|---|
毛玻璃效果生成器 | 使用毛玻璃效果生成器为您的项目创建令人惊叹的效果。 |
按钮生成器 | 一个在线画廊,包含 100 多种按钮设计,您可以轻松复制并在项目中使用。 |
Layoutit Grid | 快速设计网页布局,并获取 HTML 和 CSS 代码。通过我们的交互式 CSS Grid 生成器直观地学习 CSS Grid 并构建网页布局。 |
CSS 渐变编辑器 | 您可能只需要这个工具来创建 CSS 渐变和图案。 |
Hola SVG 加载器生成器 | SVG 加载器生成器,带有 Sass 和 SMIL 选项 |
Shape Divider | 一个免费工具,使设计师和开发人员更容易为他们的最新项目导出漂亮的 SVG 形状分隔器。 |
BEAUBUS 图案 | 150+ 免费 SVG 图案和 CSS 背景图像生成器 |
9elements - 花式边框半径 | 9elements 是一个小工具,帮助您创建自己的有机形状。当您在 CSS 中使用四个/八个值指定 border-radius 时,您可以创建看起来像有机物的形状。 |
Blobmaker | Blobmaker 是由 z creative labs 用 💕 制作的免费生成设计工具,可帮助您快速创建随机、独特和有机外观的 SVG 形状。 |
Toptal CSS3 生成器 | 一个免费的在线工具,用于快速生成 CSS3 代码片段,如效果、渐变和动画。 |
新拟物化 | 一个免费的在线工具,用于设计具有颜色、渐变和阴影的吸引人的用户界面。 |
Scrollbar.app | 一个简单的在线工具,用于为网页创建自定义滚动条。 |
Code Magic | 一个免费工具,通过生成 Tailwind 和 CSS 代码来简化 CSS 的使用,用于效果、渐变和输入 |
CSS 游戏:
网站 | 描述 |
---|---|
Flexbox 青蛙 | Flexbox 青蛙是一个互动游戏,帮助用户学习和练习CSS Flexbox 布局。 |
Flexbox 圆桌骑士 | 一系列挑战,我们必须使用Flexbox 属性来定位和对齐屏幕上的元素,以完成中世纪主题的游戏布局。 |
Grid 花园 | Grid 花园是一个互动游戏,帮助用户学习和练习CSS Grid 布局。 |
Grid 攻击 | 学习和练习CSS Grid 布局。 |
CSS 餐厅 | 学习如何使用 CSS 选择网页元素的有趣互动方式。 |
猜 CSS | 另一种学习 CSS 的有趣互动方式。 |
CSS 速通 | CSS 速通是一项挑战,看开发者只使用 CSS(层叠样式表)能多快完成一个任务。 |
在线工具:
网站 | 描述 |
---|---|
PRM | 项目和个人资料 Readme 制作工具:轻松创建 GitHub 项目和个人资料的精彩 readme |
二维码生成器 | 使用二维码生成器轻松为您的项目创建二维码。 |
谷歌分析检查器 | 扫描您的项目以确保正确设置了 Google Analytics 标签。 |
渐变艺术 | 一个高级的 CSS 渐变编辑器,具有分层、设计工具和免费云存储功能 |
JSONT | 一个简单而强大的 JSON 格式化工具 |
JSON Crack | 一个将 JSON 代码可视化为清晰树状结构的简单工具 |
Codepng | 将您的源代码转换为精美的可分享图片 |
tablebackend.com | 为您的简单项目提供后端,使用强大的基于画布的数据网格处理数百万行数据。 |
Markdown 工具 | 一套免费工具,用于在 HTML、CSV、PDF 和 Excel 文件与 Markdown 之间进行转换 |
OnlineInterview.io | 免费的面试平台,具有共享代码编辑器、绘图板和视频聊天功能。 |
UI 组件:
网站 | 描述 |
---|---|
Flowbite | 基于 Tailwind CSS 的开源 UI 组件库,具有暗黑模式和交互式元素 |
TailGrids | 300+ 免费和高级 Tailwind CSS UI 组件和部分 |
Ayro UI Bootstrap | 适用于现代 Web 应用的 Bootstrap UI 组件、代码片段和部分 |
uiverse | 使用 CSS 和 HTML 制作的开源 UI 元素,任何人都可以贡献。 |
shadcn/ui | 适用于 React 项目的开源 UI 组件,您可以轻松复制粘贴到您的应用中。 |
Headless UI | 完全无样式、完全可访问的 UI 组件,设计用于与 Tailwind CSS 集成。 |
Vue UI 库:
网站 | 描述 |
---|---|
Vuetify | Vuetify 是一个语义化的 Vue 组件框架。它旨在提供干净、语义化和可重用的组件,使构建应用变得轻而易举。利用 Vue、Material Design 和大量精心制作的组件和功能的力量,构建令人惊叹的应用程序。 |
Vue Material | 简单、轻量级,并完全按照 Google Material Design 规范构建。 |
BootstrapVue | BootstrapVue 为 Vue.js 提供了最全面的 Bootstrap v4 实现之一。具有广泛的自动 WAI-ARIA 无障碍标记。 |
Quasar 框架 | Quasar 是一个基于 MIT 许可的开源 Vue.js 框架。它使 Web 开发人员能够创建响应式++网站/应用,格式多样:SPA、SSR(+ 可选 PWA 客户端接管)、PWA、BEX、移动应用(Android、iOS 等)和多平台桌面应用(使用 Electron)。Quasar 的座右铭是"编写一次代码,部署为网站、移动应用和/或 Electron 应用"。它提供最先进的 CLI 和高效的 Quasar Web 组件,无需额外的重量级库如 Hammer.js、Moment.js 或 Bootstrap。 |
React UI 库:
网站 | 描述 |
---|---|
Material-UI | 简单且可定制的组件库,用于构建更快、更美观、更易访问的 React 应用程序。 |
Ant Design | 企业级 UI 设计语言和 React UI 库。 |
React Bootstrap | 使用 React 构建的 Bootstrap 组件。 |
Semantic UI React | Semantic UI React 是 Semantic UI 的官方 React 集成。 |
Chakra UI | 一个简单、模块化和可访问的组件库,为您提供构建 React 应用程序所需的构建块 |
NativeBase | NativeBase 是一个可访问、实用优先的组件库,帮助您在 Android、iOS 和 Web 上构建一致的 UI。 |
Prime React | 设计无关、灵活和可访问的 React UI 组件的终极集合。 |
Angular UI 库:
网站 | 描述 |
---|---|
Taiga UI | 一套强大的 Angular 开源组件 |
PrimeNG | Angular UI 组件库,具有优雅、高性能、可访问和完全可定制的 UI 组件。 |
Angular Material | Angular Material 是 Google 于 2014 年开发的 UI 库组件。 |
其他:
网站 | 描述 |
---|---|
MDB:Markdown 徽章 | 只需几次点击即可生成令人惊叹的 svg markdown 徽章 |
Markdown 预览 | 使用 GitHub CSS 的即时预览 Markdown 编辑器。 |
JavaScript 测验 | JavaScript 测验 - 通过有趣的方式检查您的知识。 |
CookieBubble | 轻松告知用户您的网站正在使用 cookie 的方法。 |
开发者更新 | 让您了解软件开发世界中发生的一切 |
Boxy SVG 编辑器 | SVG 编辑工具 - 在这里您可以轻松编辑和保存任何 SVG 文件 |
Cssrepo | 精选的优秀框架、风格指南和其他编写精彩 CSS 的酷炫资源列表 |
Web Searcher | 轻松创建 Open Graph、Twitter 和基本元标签 |
MakeMeta | 轻松生成您网站的元标签! |
PerfectBugReport.io | 一个简单的清单,列出了错误报告中应包含的基本项目。 |
Vue 速查表 | Vue、Vue Router 和 Pinia 的交互式速查表。 |