微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

该文章对前端开发人员来说是一个十分有价值的资源。它提供了一个集中的地位，帮忙开发人员发现和理解各种前端开发工具和资源。无论是初学者还是有教训的开发人员，都能够从这些列出的网站中受害。

Colors

首先是色彩。如果你已经因为无奈找到好的色彩组合而陷入我的项目窘境，这里有几个网站能够帮忙你解决问题。

Color Hunt 和 Muzli Colors 是两个生成配色计划的网站。

Color Hunt 展现了设计师们制作的手工调色板。调色板按类别组织，例如粉黑白、复旧色或深色。而后，能够轻松地将颜色代码复制到你的我的项目中，并保留以便未来再次查看。

Muzli colors 性能容许更多的自定义。能够输出特定的颜色代码或抉择一种色彩，以生成基于你的抉择的调色板。而后，该网站会显示调色板在应用中的示例。

Gradients

如果你选对了色彩搭配，突变成果能够让你的网站看起来很棒，但如果搭配不当，它们会让你的网站显得不业余。

WebGradients是一个网站，会集了超过180个手工制作的渐变色，让您能够轻松地将CSS复制并粘贴到您的我的项目中，使其怀才不遇！

Accessibility 无障碍性

当波及到色彩时，确保对比度和可拜访性在确定应用的色彩方面起着重要作用。

像 WhoCanUse 这样的工具能够让您输出文本和背景颜色代码，并可视化它们在不同视觉阻碍人群中的对比度，以及受其影响的人数。

它还展现了在直射阳光下和启用夜间模式时的色彩组合成果。这使得在你想要确保色彩调色板放弃易于拜访且放弃高对比度比率时更容易布局。

CSS 生成器

接下来，当你只是想要失去正确的暗影值或正确的动画关键帧时，重写雷同的CSS可能会很繁琐。以下是一些能够减速工作流程的工具：

动画

Animista是一个生成CSS动画的有用工具。您能够抉择各种动画，如淡入淡出、滑动和弹跳，并自定义持续时间和工夫，以创立独特的成果，为您的网站削减生机。

Effects

GetWaves，这个网站能够轻松地的设计创立SVG波浪。只需抉择方向和色彩，就可生成代码，这能够帮忙咱们在创立着陆页时拆散设计。

带有和不带有来自getwaves的SVG波浪的落地页示例：

接下来是 Neumorphism Generator：这是一个帮忙你创立在UI设计中风行的柔和暗影成果的工具。

这能够帮忙你的设计中的定价或用户材料卡片更加突出。

Hype4 Academy 还提供了一个生成玻璃成果的工具，能够让你的元素出现半透明的外观。如果你的背景与卡片组件类似，应用这个工具能够让卡片组件更加突出，十分实用。

如果你发现自己不得不重写雷同的HTML和CSS来创立常见的布局和元素，比方自定义按钮和切换按钮，那么你可能想要查看 UI Verse。

清单

在启动网站之前，须要实现各种各样的工作。无论是应用正确的字体格局还是重置你的CSS，很容易遗记关键步骤。上面这些网站提供了一个清单，涵盖了从可拜访性和性能到SEO和安全性的所有内容。

全面查看清单

Frontendchecklist.io 提供了一个工作清单，以确保在公布您的网站之前实现所有工作，以确保最终产品的完满。

这个清单依据工作的重要性进行色彩编码，并包含一些提醒，例如确保所有页面都有一个网站图标和应用最佳字体格局。

每个工作都蕴含资源，能够通过点击向上箭头来理解更多信息：

每个组件/页面的清单

Checklist.design 还提供了一个清单，列出了不同常见元素和页面（如文本字段或登录页面）中应蕴含的内容。

UI/UX

如果你在寻找设计用户界面的灵感方面遇到困难，这里有几个网站能够参考：

PageCollective 该网站展现了各种其余网站的设计，从落地页到定价页。

在风行网站上查看设计的长处在于你能够看到其余网站如何解决事实问题并确保功能性，而不仅仅关注美学。

还有Refero，它曾经从各种实在网站中编制了超过12,000个残缺页面截图。

User-Submitted

Dribbble 是另一个平台，这个网站有一个设计师社区，他们分享他们设计的截图。你能够从中找到对于布局、动画、插图等的灵感。Dribbble的不同之处在于，这些设计大多是模仿图，通常更重视好看。

图形

接下来，寻找收费应用的图形和图标可能会很艰难，无论是用来解释产品的插图，还是提供更好用户体验的图标。

Stock Photos

Unsplash提供超过3百万张收费高质量的库存照片供您应用。这些照片能够用于您的次要局部，填补空白处。

矢量图形和图标

另一方面，如果你须要为你的网站提供插图或图标，Freepik和Icons8提供矢量图形和图标。应用矢量图形的益处是你能够轻松定制色彩并调整它们的大小，而不会失去品质。

Icons8 提供了大量收费图标，约有 51 种格调可供选择，这使得在设计和网站中应用图标变得更加容易，而不用从头开始设计它们。

如果你更喜爱简略地复制和粘贴一些代码来加载你的图标，Font Awesome 是一个值得一看的网站。

他们提供了一些工具包，能够从中加载图标，只需将代码粘贴到HTML头部，或者应用CDN JS上的CDN。

动画

最初，LottieFiles 为你提供了可供选择的免费动画，您能够轻松地将这些动画增加到您的网站中，使其更加生动活泼。

字体

字体也是网站的重要组成部分，以下这些工具能够帮忙您抉择和抉择独特的字体，使你的网站怀才不遇。

收费字体

Google Fonts 提供了超过一千种收费字体供你抉择并在您的网站上应用。

要应用它们，首先抉择你须要的字体，还能够抉择所需的字体粗细。

要在你的网站上应用它们，只需复制此代码并将其粘贴到网站的头部即可。

当初你就能够通过在样式表中更改字体系列来开始应用该字体，Google字体提供了你须要更改的属性。

从这里开始，你能够像应用任何字体一样应用它，并相应地更改字体的粗细和大小。

生成字体搭配

在任何网站上，你通常也会想要应用大概两种字体，一种通常用于题目，另一种用于注释文本。Fontjoy 是一个能够帮忙你生成字体配对并让你可视化它们一起应用时的外观的网站。你能够抉择你心愿字体是类似的，均衡的，或者有高对比度的。

这些字体也能够从Google字体库中下载。

生成字体比例尺

如果你发现自己为字体大小调配随机值，但想要更加统一，typescale.com 提供了你能够实现的比例尺。

该网站也容许你抉择字体和字重。而后，你能够设置根底大小，它会主动生成你须要的大小。该网站还会生成你须要的CSS，因而你能够将其复制到你的样式表，你就会失去一个为你的题目标签筹备好的字体比例

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。