Soy un Frontend Developer y diseñador. Aprendo y enseño todo sobre Tecnologías y Diseño Web.

Costa Rica (GMT-6)

🇺🇸 Translate
InstagramTwitterYoutubeGithubLinkedInStackOverflow

Cómo crear un portfolio como desarrollador frontend sin experiencia

Freddy Montes - Frontend Developer, Designer and Teacher
Freddy Montes|

Cuando empiezas a buscar tu primer trabajo o incluso cuando quieres ser freelance, el primer muro con el que te topas es cuando la empresa te pregunta: "¿Puedes enseñarme algo de tu trabajo?" y tú como: "Este es mi primer trabajo. No tengo ningún trabajo que mostrar".

Pues bien, puedes (y debes) tener un portafolio. Deja que te enseñe cómo.

Create a portfolio

¿Qué es un portafolio?

Un portafolio muestra lo que eres capaz de hacer, y no tiene que tener 1500 proyectos terminados. Ningún reclutador mirará tantos de todos modos.

Puedes tener un portafolio con tres buenos proyectos, y eso está bien.

¿Qué puedo añadir a mi cartera?

Si estás buscando tu primer trabajo, significa que probablemente estás aprendiendo. Puede que estés en un bootcamp, haciendo cursos, tutoriales, o en la escuela.

Todos los buenos proyectos que construiste mientras estabas en este proceso DEBEN ESTAR EN TU PORTAFOLIO.

No es necesario que los incluyas todos, pero debes escoger los mejores y tenerlos en tu portafolio.

Hacerlos mejor

Una vez que elijas tus mejores trabajos, asegúrate de dar tu toque porque mucha otra gente está haciendo los mismos cursos, bootcamps y tutoriales que tú.

  1. Mejora el diseño: cambia el diseño, los colores, las fuentes, las imágenes, cualquier cosa para que se vea mejor y diferente

  2. Limpiar el código: Revisa el código para ver qué puedes mejorar. Puedes mirar el clean code repo para ver algunas recomendaciones.

  3. Crea algo nuevo: toma lo que aprendes haciendo el proyecto Pokemon, Rick y Morty, o cualquier otro y crea algo nuevo para ti. Aquí tienes una lista de APIs públicas y gratuitas para que las utilices.

Ideas para proyectos

Si no tienes nada, déjame dar tres ideas que puedes construir bastante rápido:

  1. Construir pequeños componentes con HTML, CSS y JavaScript, como una cabecera, un pie de página, una navegación, un acordeón, un diálogo, una tabla de listados, un formulario de contacto y una ficha de producto.
  2. Página completa del panel de control o una página de listado y detalle
  3. Construir una página de aterrizaje. Puedes obtener muchas ideas en onepagelove.com

¿Necesitas diseños?

Dirígete a dribbble.com busca, elige el que te guste y constrúyelo lo más parecido posible. Luego envíalo al autor para que te de su opinión, le encantará.

dribbble

Tengo algunos proyectos, ¿ahora qué?

Bueno, necesitas poner todo esto en línea, y para esto, tienes dos opciones:

  1. Crear una web de portafolio desde cero (recomendable)
  2. Utilizar diferentes servicios para publicar tu trabajo

Crear un sitio web de portafolio

Crear el tuyo propio es tu mejor opción porque tu portafolio termina siendo un proyecto para mostrar en sí mismo.

No necesitas una aplicación web muy compleja para tener un portafolio. Como ya sabes HTML y CSS, puedes construir un sitio web estático.

Tu portafolio necesita

  1. Tu bio: preséntate, a qué te dedicas, incluye una bonita foto tuya, mantenlo informal y trata de ser conciso.
  2. Tus proyectos: incluye una buena captura de pantalla, una breve descripción y es imprescindible añadir enlaces a la demo y al código.
  3. Página de contacto: No añadas tu correo electrónico (evita el SPAM). Si puedes construir un formulario de contacto, genial si no, deja tu cuenta de LinkedIn, Twitter, o cualquier otra forma en que los empleadores puedan contactarte.

NO añadas tu edad, nacionalidad, religión o cualquier otro dato que pueda dar lugar a discriminación. A las buenas empresas les importa tu trabajo y nada más.

Publicar tu portafolio

Necesitas publicar no sólo la web del portafolio sino las demos de tus proyectos. Hay varias opciones gratuitas en el mercado, pero te recomiendo estas dos:

Github Pages

Páginas de Github

Como desarrollador front-end, te recomiendo que tengas una cuenta de Github porque es una especie de estándar en el mercado para alojar tu código, y con Github Pages, puedes alojar tus páginas estáticas.

Github Pages te permite alojar tu página web e incluso añadirle un dominio de forma gratuita. Consulta su documentación.

Netlify

Puedes alojar tu sitio gratis con sólo arrastrar y soltar una carpeta con tus archivos HTML, CSS y JavaScript, y no puede ser más fácil que eso.

Utilizar servicios

Si no quieres o no tienes tiempo para crear un sitio web personalizado para tu cartera, no pasa nada. Hay varios servicios que puedes utilizar para mostrar tus proyectos. A mí me gustan estos tres:

Codepen

Codepen

Es un entorno de desarrollo social para diseñadores y desarrolladores de front-end. Funciona perfectamente para los proyectos que son en su mayoría HTML, CSS y JavaScript vainilla. Añade títulos, etiquetas y descripciones a tus "bolígrafos" para conseguir una mayor exposición.

Stackblitz

Un IDE en línea donde puedes crear proyectos de Angular, React, Vue, Typescript que están inmediatamente en línea, y puede sincronizar con tu cuenta de Github.

Codesandbox

Muy similar a Stackblitz pero tiene más tipos de proyectos y colaboración en tiempo real.

¿Y luego qué?

Una vez que tengas tus proyectos en cualquiera de estos servicios, puedes enviar los enlaces en tu solicitud, añadir alguna descripción y listo.

La importancia de un portafolio

Tener un portafolio puede no ser un requisito para conseguir tu primer trabajo. Sin embargo, si no tienes experiencia, necesitas una forma de mostrar a tu posible empleador lo que puedes hacer. Créeme, la mayoría de los otros candidatos tendrán un portafolio.

En resumen

  1. Utiliza tus proyectos de aprendizaje como elementos del portafolio
  2. Construye lo tuyo
  3. O utiliza servicios

Gracias por leer esta entrada del blog. Cualquier comentario o pregunta me puedes preguntarme en mi Twitter: @fmontes