Busque [Great Move to the World] en WeChat y compartiré con usted las tendencias de la industria front-end, las rutas de aprendizaje, etc. lo antes posible. Se ha incluido este artículo GitHub github.com/qq449245884 ... y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.
Venga y experimente la versión ChatGpt plus de forma gratuita, pagamos la dirección de la experiencia: chat.waixingyun.cn Puede unirse al grupo técnico en la parte inferior del sitio web para encontrar errores juntos, y se ha lanzado la nueva versión del artefacto de dibujo cubo .waixingyun.cn/home
Este artículo es un recurso muy valioso para los desarrolladores front-end. Proporciona una ubicación centralizada para ayudar a los desarrolladores a descubrir y aprender acerca de varias herramientas y recursos de desarrollo front-end. Tanto los principiantes como los desarrolladores experimentados pueden beneficiarse de estos sitios enumerados.
Colores
El primero es el color. Si alguna vez se ha quedado atascado con un proyecto porque no puede encontrar una buena combinación de colores, aquí hay algunos sitios web que pueden ayudarlo.
Color Hunt y Muzli Colors son dos sitios web que generan esquemas de color.
Color Hunt exhibe paletas de colores hechas a mano por diseñadores. Las paletas están organizadas por categoría, como pasteles, vintage u oscuras. Los códigos de color se pueden copiar fácilmente en su proyecto y guardar para volver a verlos en el futuro.
La función de colores Muzli permite una mayor personalización. Puede ingresar un código de color específico o seleccionar un color para generar una paleta según su elección. Luego, el sitio web muestra un ejemplo de la paleta en uso.
Gradientes
Los degradados pueden hacer que su sitio web se vea genial si elige la combinación de colores correcta, pero pueden hacer que su sitio web se vea poco profesional si se hace incorrectamente.
WebGradients es un sitio web que reúne más de 180 degradados hechos a mano que le permiten copiar y pegar fácilmente CSS en sus proyectos para que se destaquen.
Accesibilidad
Cuando se trata de color, garantizar el contraste y la accesibilidad juegan un papel importante en la determinación de los colores a utilizar.
Herramientas como WhoCanUse le permiten ingresar códigos de color de texto y de fondo y visualizar cómo se comparan en diferentes personas con discapacidad visual y cuántas personas se ven afectadas por ellos.
También muestra cómo se ve la combinación de colores bajo la luz solar directa y con el modo nocturno habilitado. Esto facilita la planificación cuando desea asegurarse de que la paleta de colores permanezca accesible y mantenga una alta relación de contraste.
generador de CSS
Luego, puede ser tedioso reescribir el mismo CSS cuando solo desea obtener los valores de sombra correctos o los fotogramas clave de animación correctos. Aquí hay algunas herramientas que pueden acelerar su flujo de trabajo:
animación
Animista es una herramienta útil para generar animaciones CSS. Puede elegir entre varias animaciones como desvanecimiento, deslizamiento y rebote, y personalizar la duración y el tiempo para crear efectos únicos que animarán su sitio web.
Efectos
GetWaves , un sitio que facilita la creación de ondas SVG para sus diseños. Solo tienes que elegir la orientación y los colores, y se generará el código, que nos ayudará a separar el diseño a la hora de crear la landing page.
Ejemplos de landing pages con y sin ondas SVG de getwaves:
El siguiente paso es el Generador de neumorfismo : una herramienta que lo ayuda a crear los efectos de sombras suaves que son populares en el diseño de interfaz de usuario.
Esto puede ayudar a que sus tarjetas de precios o perfil de usuario se destaquen más en su diseño.
Hype4 Academy también proporciona una herramienta para generar efectos de vidrio que dan a sus elementos una apariencia translúcida. Si su fondo es similar al componente de la tarjeta, el uso de esta herramienta puede hacer que el componente de la tarjeta se destaque más, lo cual es muy útil.
如果你发现自己不得不重写相同的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字体提供了你需要更改的属性。
从这里开始，你可以像使用任何字体一样使用它，并相应地更改字体的粗细和大小。
生成字体搭配
En cualquier sitio web, por lo general querrás usar unas dos fuentes, una para los encabezados y otra para el cuerpo del texto. Fontjoy es un sitio web que lo ayuda a generar pares de fuentes y le permite visualizar cómo se verán cuando se usen juntos. Puede elegir si desea que la fuente sea similar, equilibrada o tenga un alto contraste.
Estas fuentes también se pueden descargar de la biblioteca de Google Fonts.
generar escala de fuente
Si se encuentra asignando valores aleatorios a los tamaños de fuente, pero quiere ser más consistente, typescale.com proporciona escalas que puede lograr.
El sitio también le permite elegir la fuente y el peso. Luego, puede establecer el tamaño base y generará automáticamente el tamaño que necesita. El sitio también genera el CSS que necesita, por lo que puede copiarlo en su hoja de estilo y tendrá una escala de fuente lista para sus etiquetas de encabezado.
Los errores que pueden existir después de que se implementa el código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedica mucho tiempo a la depuración de registros. Por cierto, me gustaría recomendar una herramienta útil de monitoreo de errores, Fundebug .
comunicar
Si tiene sueños y productos secos, busque [Daqian World] en WeChat para prestar atención a esta sabiduría de lavado de platos que todavía está lavando platos temprano en la mañana.
Se ha incluido este artículo GitHub github.com/qq449245884 ... y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.