DEV Community

Cover image for Herramientas y recursos INCREIBLES para desarrollo web frontend
Yeison Stiven Builes Uribe
Yeison Stiven Builes Uribe

Posted on

Herramientas y recursos INCREIBLES para desarrollo web frontend

Si prefieres puedes ver directamente mi video sobre estas herramientas y saltarte la lectura: Youtube Video

Comencemos

Es excelente contar con herramientas y recursos que nos ayuden con un diseño y desarrollo del frontend de un proyecto web de forma rápida, intuitiva, moderna y eficaz. Por lo que les comparto estas 5 herramientas que me han ayudado mucho para un desarrollo mas ágil y estético

  1. ManyPixels: nos brinda un montón de ilustraciones totalmente gratuitas. Lo que mas me gusta de este sitio es que nos permite cambiar el color principal de las ilustraciones para que coincidan con nuestro proyecto además de permitir descargar en png o svg gratis y sin necesidad de registrarse en el sitio ni nada parecido. Tenemos todo tipo de ilustraciones a disposición, con diferentes categorías o temáticas.

  2. Indian doodle. Illustration pack: Este pack de ilustraciones es increíblemente estético y moderno, con unas ilustraciones adecuadas para cualquier tipo de proyecto, además de que nos permite descargar cada ilustración de manera gratuita. Super recomendadisimo.

  3. Boxicons: Es mi fuente de iconos preferido y que uso en todos mis proyectos, me gusta mucho porque brinda mas de 1000 iconos (1500 exactamente) y es muy fácil de implementar en un proyecto, hay muchas maneras de implementarlo pero mi favorita es para usar los iconos como fuentes ya que me permite con css manipular los iconos con font size, font weight color etc. Nos deja descargarlo en png, svg html, cambiar el tamaño, usarlo como web component o como yo lo uso: como fuente. Hay de todo tipo y categorías para usar.

  4. AOS Library: Nos permite crear animaciones al scrollear la pagina web de una manera extremadamente fácil, simplemente siguiendo la documentación. Tiene muchos tipos de animaciones y nos permite manipular la duración de cada animación, además es extremadamente fácil de instalar y de utilizar. Tengo un video en el que enseño como instalarlo en un proyecto angular: Aquí

  5. Responsively: Es un navegador web que nos permite visualizar nuestro proyecto en varias pantallas de diferentes dispositivos, esto nos ayuda a desarrollar proyectos mas adaptables pensando en todas las situaciones posibles, hay resoluciones desde iphones hasta androids y laptops. Nos permite también manipular que dispositivos mostrar y algunas configuraciones mas. Excelente herramienta para el desarrollo mobile first / responsive.

Eso es todo, ¿Qué tal te han parecido estas recomendaciones? ¿Las encontraste útiles?

Latest comments (0)