Search [Great Move to the World] on WeChat, and I will share with you the front-end industry trends, learning paths, etc. as soon as possible. This article GitHub github.com/qq449245884 ... has been included, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
Come and experience the ChatGpt plus version for free, we paid the experience address: chat.waixingyun.cn You can join the technical group at the bottom of the website to find bugs together, and the new version of the drawing artifact has been launched cube.waixingyun.cn/home
This article is a very valuable resource for front-end developers. It provides a centralized location to help developers discover and learn about various front-end development tools and resources. Both beginners and experienced developers can benefit from these listed sites.
Colors
The first is color. If you've ever been stuck with a project because you can't find a good color combination, here are a few websites that can help you out.
Color Hunt and Muzli Colors are two websites that generate color schemes.
Color Hunt showcases handcrafted color palettes made by designers. Palettes are organized by category, such as pastels, vintage, or dark. The color codes can then be easily copied into your project and saved to be viewed again in the future.
Muzli colors feature allows more customization. You can enter a specific color code or select a color to generate a palette based on your choice. The website then displays an example of the palette in use.
Gradients
Gradients can make your website look great if you pick the right color pairing, but they can make your website look unprofessional if done incorrectly.
WebGradients is a website that brings together over 180 handcrafted gradients that allow you to easily copy and paste CSS into your projects to make them stand out!
Accessibility
When it comes to color, ensuring contrast and accessibility play a big role in determining the colors to use.
Tools like WhoCanUse let you enter text and background color codes and visualize how they compare in different visually impaired people, and how many people are affected by them.
It also showcases how the color combination looks in direct sunlight and with Night Mode enabled. This makes for easier planning when you want to ensure that the color palette remains accessible and maintains a high contrast ratio.
CSS generator
Next, it can be tedious to rewrite the same CSS when you just want to get the correct shadow values or correct animation keyframes. Here are some tools that can speed up your workflow:
animation
Animista is a useful tool for generating CSS animations. You can choose from various animations like fade, slide and bounce, and customize the duration and timing to create unique effects that will jazz up your website.
Effects
GetWaves , a site that makes it easy to create SVG waves for your designs. Just choose the orientation and colors, and the code will be generated, which will help us separate the design when creating the landing page.
Examples of landing pages with and without SVG waves from getwaves:
Next up is the Neumorphism Generator : a tool that helps you create the soft shadow effects that are popular in UI design.
This can help your pricing or user profile cards stand out more in your design.
Hype4 Academy also provides a tool for generating glass effects that give your elements a translucent appearance. If your background is similar to the card component, using this tool can make the card component more prominent, which is very useful.
如果你发现自己不得不重写相同的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字体提供了你需要更改的属性。
从这里开始，你可以像使用任何字体一样使用它，并相应地更改字体的粗细和大小。
生成字体搭配
On any website, you'll also generally want to use about two fonts, one usually for headings and one for body text. Fontjoy is a website that helps you generate font pairs and lets you visualize how they will look when used together. You can choose whether you want the font to be similar, balanced, or have high contrast.
These fonts can also be downloaded from the Google Fonts library.
generate font scale
If you find yourself assigning random values to font sizes, but want to be more consistent, typescale.com provides scales that you can achieve.
The site also allows you to choose the font and weight. Then, you can set the base size and it will automatically generate the size you need. The site also generates the CSS you need, so you can copy that into your stylesheet and you'll have a font scale ready for your heading tags
The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I would like to recommend a useful bug monitoring tool, Fundebug .
comminicate
If you have dreams and dry goods, search [Daqian World] on WeChat to pay attention to this dishwashing wisdom who is still washing dishes in the early morning.
This article GitHub github.com/qq449245884 ... has been included, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.