# Más de 40 recursos gratuitos de alta calidad para Desarrollo Web

- Link: https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/
- Published: 2020-07-15T23:37:58-04:00
- Author: Juanito Ortega

Conoce más de 40 recursos gratuitos de alta calidad para Desarrollo Web. Si hubiera
conocido esto cuando empezaba en el desarrollo, que feliz hubiera sido yo, definitivamente
todo hubiera sido mejor.

Los recursos son extremadamente importantes para un desarrollador, ya que pueden
mejorar enormemente la productividad mientras se desarrolla un proyecto. Les traemos
un conjunto de herramientas que se han estado recopilando a lo largo de los meses.

Con suerte, serán tan útiles para ti como lo han sido para mí. ¡Sin más preámbulos,
aquí hay algunos recursos gratuitos y actualizados!

Tabla de contenidos:

 * [Ilustraciones](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#ilustraciones)
 * [Desarrollo](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#desarrollo)
 * [CSS](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#css)
 * [Tailwind](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#tailwind)
 * [Diseño](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#diseno)
 * [Productividad](https://creativa.dev/desarrollo-web/mas-de-40-recursos-gratuitos-de-alta-calidad-para-desarrollo-web/#productividad)

## Ilustraciones

## 󠀁[Error 404](https://error404.fun)󠁿

![Error 404](https://www.creativa.dev/wp-content/uploads/2020/07/resource.jpg)

Esta fuente es increíble para encontrar ilustraciones que puedes usar para tu página
de Error 404 de tu sitio web.

## 󠀁[Blush](https://blush.design)󠁿

![Blush](https://www.creativa.dev/wp-content/uploads/2020/07/resource-43.png)

Blush te permite descargar todas sus ilustraciones de forma gratuita para uso comercial
y personal. Es sorprendente, ya que presenta muchos estilos de ilustración que se
pueden componer para crear otros nuevos. Además, tienen un complemento de Figma 
para que pueda trabajar inmediatamente en ellos dentro de sus diseños.

## 󠀁[Smash Ilustrations](https://usesmash.com)󠁿

![Smash Ilustrations](https://www.creativa.dev/wp-content/uploads/2020/07/resource-
2.png)

Smash Illustrations presenta personajes modernos e ilustraciones simples de forma
gratuita para uso comercial y personal. Cuenta con más de 250 objetos y personajes,
y más de 20 escenas únicas para que puedas componerlas como quieras.

## 󠀁[Control](https://control.rocks)󠁿

![Control](https://www.creativa.dev/wp-content/uploads/2020/07/resource-3.jpeg)

Control presenta ilustraciones de alta calidad en estilo sólido y lineal de forma
gratuita. Son de uso gratuito en uso comercial y personal, sin embargo, están en
formato **.png**. Si necesita **SVG**, entonces tendrá que pagar $ 38, lo que no
es tan malo para las ilustraciones de esta calidad.

## 󠀁[DrawKit](https://www.drawkit.io/#browse-now-button)󠁿

![DrawKit](https://www.creativa.dev/wp-content/uploads/2020/07/resource-4.png)

DrawKit presenta más de 220 ilustraciones gratuitas. ¡Todos vienen en SVG para que
puedas crear composiciones increíbles! Además, ofrecen ilustraciones animadas con
[lottie](https://airbnb.io/lottie/#/), que es enorme para el desarrollo de sitios
web geniales y elegantes.

## 󠀁[Open Doodles](https://www.opendoodles.com)󠁿

![Open Doodles](https://www.creativa.dev/wp-content/uploads/2020/07/resource-5.png)

Si eres fanático de las ilustraciones incompletas, te encantará Open Doodles. Todas
las ilustraciones y descarga gratuita en formato SVG o PNG. Además, tienen una ruta
de composición y un generador para que puedas obtener los garabatos que necesitas.

## 󠀁[Free Illustrations](https://freellustrations.com)󠁿

![Free Illustrations](https://www.creativa.dev/wp-content/uploads/2020/07/resource-
6.jpeg)

Las ilustraciones gratuitas presentan muchos fondos de ilustración que son perfectos
para el desarrollo de la página de destino.

## 󠀁[Mixkit](https://mixkit.co/free-stock-art)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-7.jpeg)

Mixkit es el [Unsplash](https://unsplash.com) de las ilustraciones, o ese es su 
objetivo. Cuenta con muchas categorías de ilustraciones y también videos y música,
todo de forma gratuita.

## 󠀁[Delesign](https://delesign.com/free-designs/graphics)󠁿

![Delesign](https://www.creativa.dev/wp-content/uploads/2020/07/resource-8.png)

Delesign te ofrece muchas ilustraciones limpias de forma gratuita. Su principal 
punto fuerte es su diversidad.

## Desarrollo

## 󠀁[Majestic](https://github.com/Raathigesh/majestic)󠁿

![Majestic](https://www.creativa.dev/wp-content/uploads/2020/07/resource-9.png)

Majestic es una interfaz de usuario de configuración cero para Jest que hace que
sea más fácil ver la salida del registro de pruebas, en lugar de usar únicamente
el terminal. Se puede instalar globalmente o simplemente abrirse en cualquier repositorio
usando `npx majestic`

## 󠀁[Carbón](https://carbon.now.sh)󠁿

![Carbon](https://www.creativa.dev/wp-content/uploads/2020/07/resource-10.png)

Carbon es útil si desea compartir imágenes elegantes de fragmentos de código dentro
de un tweet o blog.

## 󠀁[Squoosh](https://squoosh.app)󠁿

![Squoosh](https://www.creativa.dev/wp-content/uploads/2020/07/resource-11.jpeg)

Comprimir sus imágenes tendrá una pérdida de calidad casi imperceptible. Además,
puede editar el tamaño de la imagen y cuánta calidad se pierde, por lo que es imprescindible
para optimizar las imágenes de tu sitio web.

## 󠀁[SVGOMG](https://jakearchibald.github.io/svgomg)󠁿

![SVGOMG](https://www.creativa.dev/wp-content/uploads/2020/07/resource-12.jpeg)

SVGOMG ofrece una interfaz gráfica de usuario para optimizar sus archivos SVG. Extremadamente
importante cuando se trabaja con SVG en un sitio web.

## 󠀁[Kite](https://kite.com/)󠁿

![Kite](https://www.creativa.dev/wp-content/uploads/2020/07/resource-13.png)

Kite es increíble para aumentar la productividad de tu código. Creo que en el futuro
la IA no tomará nuestros trabajos, pero se verá aumentada por herramientas como 
esta. Ofrece autocompletado en sus editores favoritos utilizando aprendizaje automático
apoyado con más de 2 millones de repositorios. Actualmente solo funciona con Python
y Javascript, pero en breve, habrá más lenguajes compatibles.

## 󠀁[DevDocs](https://devdocs.io/css/css_animations)󠁿

![DevDocs](https://www.creativa.dev/wp-content/uploads/2020/07/resource-14.png)

DevDocs es un agregador de documentación. Agrega múltiples bibliotecas y documentación
de API en un buscador con una interfaz limpia. Esto es enorme para el desarrollo
general, por lo que lo recomiendo encarecidamente.

## 󠀁[DevHints](https://devhints.io)󠁿

![DevHints](https://www.creativa.dev/wp-content/uploads/2020/07/resource-15.png)

Este sitio web presentaba hojas de trucos para muchas herramientas como bash, React,
go, sass y muchas más.

## 󠀁[Wappalyzer](https://www.wappalyzer.com/)󠁿

![Wappalyzer](https://www.creativa.dev/wp-content/uploads/2020/07/resource-16.png)

¿Quieres saber el lenguaje en que fue desarrollado tu sitio web favorito? No se 
diga más, Wappalyzer te permite saberlo con bastante rapidez. También tienen una
extensión para que puedas usarlo mientras viaja.

## 󠀁[iHateRegex](https://ihateregex.io)󠁿

![iHateRegex](https://www.creativa.dev/wp-content/uploads/2020/07/resource-17.png)

Este sitio es el santo grial para aquellos que no quieren crear su propia expresión
regular o buscar a través de google. Piense en ello como google para regex.

## 󠀁[LottieFiles](https://lottiefiles.com)󠁿

![LottieFiles](https://www.creativa.dev/wp-content/uploads/2020/07/resource-18.png)

¿Has oído hablar de [Lottie](https://airbnb.io/lottie/#/)? No lo hice hasta que 
encontré este sitio web. Lottie es una biblioteca que te permite acceder a animaciones
exportadas desde Adobe After Effects. Estas animaciones son hermosas y LottieFiles
alberga miles de estas de forma gratuita. Sin embargo, tenga en cuenta que la mayoría
de ellos tienen una licencia CC-BY 2.0.

## 󠀁[Shape Dividir](https://www.shapedivider.app)󠁿

![Shape Divider](https://www.creativa.dev/wp-content/uploads/2020/07/resource-19.
jpeg)

Shape Divider te permite generar divisores elegantes para tu sitio web sobre la 
marcha. Cuenta con una interfaz de usuario genial en comparación con otros sitios
y funciona muy bien.

## CSS

## 󠀁[Animista](https://animista.net)󠁿

![Animista](https://www.creativa.dev/wp-content/uploads/2020/07/resource-20.png)

¿Necesitas inspiración o fragmentos de animaciones CSS? Animista lo tiene cubierto.
Cuenta con muchos efectos CSS geniales que pueden acelerar tu desarrollo.

## 󠀁[Pattern.css](https://bansal.io/pattern-css#introduction)󠁿

![Pattern.css](https://www.creativa.dev/wp-content/uploads/2020/07/resource-21.jpeg)

¿Te encanta usar patrones en tu diseño? Entonces te encantará este. Es una biblioteca
CSS que pone a tu disposición distintas clases para crear patrones impresionantes
para tu sitio web.

## 󠀁[CSSeffectsSnippets](https://emilkowalski.github.io/css-effects-snippets/)󠁿

![CSSeffectsSnippets](https://www.creativa.dev/wp-content/uploads/2020/07/resource-
22.png)

Animaciones CSS ingeniosas para tu sitio web.

## 󠀁[98.css](https://jdan.github.io/98.css)󠁿

![98.css](https://www.creativa.dev/wp-content/uploads/2020/07/resource-23.png)

98.css permite que tus fantasías nostálgicas se hagan realidad. Si necesita crear
un sitio web o una aplicación electrónica con el estilo de Windows 98, **98.css**
le será de gran ayuda.

## Tailwind

## 󠀁[TailwindComponents](https://tailwindcomponents.com)󠁿

![Tailwind](https://www.creativa.dev/wp-content/uploads/2020/07/resource-24.png)

Los Tailwind son muy popular en estos días, y sitios como este muestran por qué.**
TailwindComponents** presenta cientos de componentes creados por la comunidad que
utilizan [tailwind.css](https://tailwindcss.com). Algunos de estos tienen una calidad
muy alta, ¡así que asegúrese de comprobarlo!

## 󠀁[Tailblocks](https://mertjf.github.io/tailblocks/)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-25.png)

Tailblocks presenta más componentes Tailwind de alta calidad. Sin embargo, proporcionan
una experiencia similar a bootstrap para que pueda crear un sitio web completo con
estos. Absolutamente imprescindible para acelerar el desarrollo.

## Diseño

## 󠀁[colors.lol](https://colors.lol)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-26.png)

¿Necesita paletas que sean demasiado descriptivas? Colors.lol es el lugar correcto
para encontrarlos. Cuenta con más de 10 de estas paletas que pueden hacer que su
diseño sea más vibrante.

## 󠀁[ColorMind](http://colormind.io)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-45.png)

Colormind genera esquemas de color utilizando el aprendizaje profundo. Puede bloquear
los colores y obtener otros que lo complementen.

## 󠀁[Ucraft Logo Maker](https://www.ucraft.com/free-logo-maker)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-46.png)

Esta es mi opción cuando necesito un logotipo rápido para un proyecto paralelo. 
Cuentan con miles de iconos que pueden ayudarlo a crear muchas combinaciones de 
logotipos. Para uso comercial y personal gratuito, le permiten descargar una versión
PNG de su logotipo.

## 󠀁[AppMockUp](https://app-mockup.com)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-27.jpeg)

AppMockUp te permite generar maquetas para Android y iPhone sin mucho trabajo. Si
eres un desarrollador móvil, asegúrate de probarlo.

## 󠀁[Webframe](https://webframe.xyz)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-28.jpeg)

Webframe tiene miles de diseños inspirados en sitios web reales.

## 󠀁[FontSpark](https://fontspark.app)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-29.png)

FontSpark te permite descubrir tu próxima fuente favorita generando diferentes hasta
que te guste.

## 󠀁[HackDesign](https://hackdesign.org/lessons)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-30.png)

¿Tienes mucho tiempo y quieres aprender diseño? Entonces HackDesign es para ti. 
Este sitio web presenta muchas lecciones que pueden enseñarte lo que necesitas para
convertirte en diseñador.

## 󠀁[Checklist Design](https://www.checklist.design)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-31.png)

Si está diseñando o creando un sitio web, estas listas de verificación pueden salvarle
la vida. Garantizan la accesibilidad y una excelente experiencia de usuario para
diferentes secciones de su sitio, como formularios, tipografía, botones y muchos
más.

## 󠀁[Remove BG](https://www.remove.bg)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-32.jpeg)

El título se explica por sí mismo. Esta herramienta hace que sea muy fácil eliminar
el fondo de sus imágenes para que pueda usarlo en sus diseños o sitio web.

## 󠀁[Unscreen](https://www.unscreen.com)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-33.png)

Al igual que remove.bg pero para gifs y videos.

## Productividad

## 󠀁[Sejda](https://www.sejda.com)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-34.png)

Sejda ofrece un elegante editor de PDF en línea. ¡Impresionante para editar tu CV!

## 󠀁[GetTerms](https://getterms.io)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-35.png)

GetTerms genera una Política de privacidad y Términos de servicio personalizados
para su aplicación. Esto es increíble para ahorrar tiempo al crear un producto web.

## 󠀁[Top Hunts Time Machine](https://timemachine.betamode.dev)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-36.png)

Esta herramienta le permite ver los productos más famosos que aparecen en Product
Hunt. Si desea encontrar recursos, asegúrese de revisar esto mensualmente.

## 󠀁[Notion](https://www.notion.so)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-37.png)

La idea es muy buena. Tan bueno que de hecho es mi plataforma de escritura diaria.
Me encanta lo limpio y eficiente que es para bloguear y tomar notas.

## 󠀁[Writty](https://iamcharlie.design/writty)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-38.png)

¿Necesita un editor súper delgado y elegante para escribir? Entonces te gustará 
Writty. Cuenta con un editor súper simple que guarda todo lo que escribes dentro
de tu navegador para que no tengas que preocuparte de que se exponga a Internet 
tan fácilmente. Además, es de código abierto, lo cual es una ventaja.

## 󠀁[Grammarly](https://www.grammarly.com)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-44.jpeg)

Esto es imprescindible para escribir cualquier cosa en Internet. Comparo esta herramienta
con ESLint, ya que le permite encontrar errores incluso antes de que los note. Los
desarrolladores pueden beneficiarse de esto siempre que escribamos un problema de
GitHub, o una pregunta en Stack Overflow…

## 󠀁[OpenSource Builders](https://opensource.builders)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-39.png)

OpenSource Builders ofrece muchas alternativas de código abierto a productos comunes
como Facebook, Slack, Shopify y muchos más.

## 󠀁[Wave](https://www.waveapps.com)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-40.jpeg)

Si es un profesional independiente o tiene su propio negocio, Wave puede ayudarte
con contabilidad, facturación y recibos gratis en tu web.

## 󠀁[Clockify](https://clockify.me)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-41.jpeg)

Un rastreador de tiempo verdaderamente libre para individuos y equipos. Clockify
le permite registrar el tiempo fácilmente y tiene muchas funciones para que pueda
administrar estos datos.

## 󠀁[Untools](https://untools.co)󠁿

![](https://www.creativa.dev/wp-content/uploads/2020/07/resource-42.png)

Untools presenta muchos patrones de pensamiento que pueden ayudarlo durante la programación.

## Conclusión

¡Esperamos que todos estos recursos puedan ayudarlo a crear mejores sitios web y
aplicaciones, ya que nos han ayudado a nosotros! Si tienes otro recurso favorito,
escríbelo en los comentarios.

**Fuente:** [Artículo](https://dev.to/jfelx/40-high-quality-free-resources-for-web-development-10o3)
original en inglés.