8 herramientas gratuitas de desarrollo web frontend que posiblemente no conocias🎨
Tags: css, htm, frontend, spanish
Published: 2021-08-16 13:54:57

#**Índice**   
1. [Introducción](#id1)
2. [bundlephobia](#id2)
3. [fontflipper](#id3)
4. [visbug](#id4)
5. [spinkit](#id5)
6. [flatuicolors](#id6)
7. [pexels](#id7)
8. [pixabay](#id8)
9. [iconfinder](#id9)
10. [Conclusiones](#id10)

# **Introducción**<a name="id1"><a/> 
A continuación les comparto algunas herramientas que uso dia a dia en mi trabajo como dev frontend, espero que sea de mucha utilidad para ustedes también.

## **1. [bundlephobia](https://bundlephobia.com/)**<a name="id2"><a/>
Esta web permite buscar paquetes en NPM brindándote información sobre su peso, ello para saber si dicho paquete vale la pena utilizarlo en nuestros proyectos o no. Es muy profesional no usar dependencias a lo loco, sino saber decidir bajo qué escenarios podemos considerar elegir usar paquetes de terceros.

![img](https://res.cloudinary.com/practicaldev/image/fetch/s--nvgAzYhJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab4znbbue11hxwnl8pio.png)

## **2. [fontflipper](https://fontflipper.com/upload)**<a name="id3"><a/>
¿Te cuesta elegir una fuente para tu proyecto? Hay tantas fuentes en Google Fonts que muchas veces se nos hace complicado seleccionar una sola, y es muy engorroso descargar muchas y testearlas para saber cual nos convence.
Fontflipper es una web que nos ayuda a testear un montón de fuentes sin necesidad de descargarlas.

![img](https://miro.medium.com/max/1400/1*EZ9susLDfgcwim3K2l_LXw.png)

## **3. [visbug](https://addons.mozilla.org/es/firefox/addon/visbug/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)**<a name="id4"><a/>

Es una extensión/complemento de Google Chrome y Mozilla que nos brinda un montón de herramientas en tiempo real para jugar con los estilos de nuestro proyecto. Desde posicionamiento con flex box hasta modificar colores o texto de la web sin tocar el código css.

![img](https://i.ytimg.com/vi/8tmN0_sxQqs/maxresdefault.jpg)

## **4. [spinkit](https://tobiasahlin.com/spinkit/)**<a name="id5"><a/>
Es un kit de diferentes spinners que podemos usar para dar un poco más de estilo a nuestros proyectos. Son más de 10 diferentes spinners listos para ser usados, solo tienes que copiar y pegar el código html y css.

![img](https://cdn-5ce4a003f911c80f50818892.closte.com/wp-content/uploads/2020/01/2.png)

## **5. [flatuicolors](https://flatuicolors.com/)**<a name="id6"><a/>
Esta página te proporciona paletas de colores completas y listas para ser usadas. Puedes usar los colores en formato hex, rgb o rgba completamente gratis.

![img](https://www.sketchappsources.com/resources/source-image/flatui-color-pallete.png)

## **6. [pexels](https://www.pexels.com/es-es/)**<a name="id7"><a/>
Banco de imágenes y videos gratuitos y libres de derechos de autor.
![img](https://cdn-images-1.medium.com/max/800/1*hCLxRgOtiWBy4ykQZ1toWQ@2x.png)


## **7. [pixabay](https://pixabay.com/es/)**<a name="id8"><a/>
Posiblemente mucho más conocida que la anterior, Pixabay es un banco de imágenes y videos de alta resolución que puedes usar libremente en proyectos comerciales sin tener que preocuparte de los derechos de autor.

![img](https://svgsilh.com/png-1024/2071080.png)

## **8. [iconfinder](https://www.iconfinder.com/)**<a name="id9"><a/>
Logos de paga y gratuitos para usar en prototipado.

![img](https://manuel.cillero.es/wp-content/uploads/2016/07/ICONFINDER-845x321.jpg?x30585)


## **Conclusión**<a name="id10"><a/>
* No reinventes la rueda, casi siempre hay mucho material y herramientas en internet que pueden facilitar enormemente nuestro trabajo como programadores. Úsalos con sabiduría.

---

![gif](https://media.giphy.com/media/dToLqyWr703rFSzxL3/giphy.gif)