¿Cómo usar proyectos en 3 pasos?

Aprende a sacarle provecho a /Proyectos, manda a revisión tus proyectos, recibe feedback y crece profesionalmente.

Humberto López

Humberto López

¿Cómo usar proyectos en 3 pasos?

Estás comenzando tu camino como Frontend Developer, quieres practicar, pero no encuentras proyectos que te reten /Proyectos es la solución aprende como usarlo siguiendo estos 3 pasos: escoge un proyecto, obtén el diseño y mándalo a revisión.


Escoge un proyecto

En /Proyectos tenemos una gran variedad de proyectos que puedes conocer aquí, para nuestro ejercicio usaremos el Portafolio de Elisa, antes de descargarlo tienes que aceptar los términos y condiciones.

Antes del tutorialAntes del tutorial

Una vez descargado el proyecto, búscalo en tu carpeta de descargas en tu computadora, un hack es tomar el nombre del proyecto desde el slug de la url para encontrarlo de manera rápida, una vez lo encuentres descomprímelo.

Buscando la carpeta de archivosBuscando la carpeta de archivos

Además de los archivos recibirás un mail con el status de cuantos proyectos tienes en curso y dándote la bienvenida a este nuevo proyecto.

Mail de bienvenidaMail de bienvenida

Obtener el diseño

Dentro de la carpeta viene el diseño en Figma y un README que te ayudará a guiarte.

Vamos a aprender a importar un diseño en Figma, para ello necesitas tener una cuenta ya creada, si aún no la tienes créala desde aquí.

Importando un diseño en Figma

  1. Da click en el botón de importar

  2. Al abrir tu explorador de archivos selecciona la carpeta, ábrela y busca el archivo .fig

  3. Selecciona tu archivo .fig y da clic en abrir, automáticamente comenzará el proceso.

Comenzando a importar el diseñoComenzando a importar el diseño

Te mostrará un modal para darte status de la importación, una vez termine de forma exitosa tendrás en tu espacio de trabajo el diseño importado.

Importando el diseñoImportando el diseño

Abre el diseño, está listo para que lo inspecciones, obtengas los assets y comiences a crear. Tenemos una clase para que aprendas a explorar un diseño en Figma.Link a la clase

Diseño importado exitosamenteDiseño importado exitosamente

Programa tu proyecto

Gato programadorGato programador

Prepara el release de tu proyecto

Ahora que ya has programado todo tu proyecto es momento de enviarlo a producción y subirlo a Github, el sistema control de versiones que usamos en /Proyectos.

Repositorio en GithubRepositorio en Github

1 Crea un repositorio público en Github para tu proyecto y sube todo el código generado.

crea un repositoriocrea un repositorio

2 Haz deploy de tu proyecto en Github pages, Netlify, Vercel o donde desees que genera una url para su posterior revisión funcional.

Github PagesGithub Pages

3 Crea un readme.md con la información relevante de tu proyecto (todos los proyectos cuentan con un readme base que puedes adaptar)

readme.mdreadme.md

4 Llena los datos de configuración de descripción corta, url y topics con tu stack de tecnología usado.

About settingsAbout settings
descripción, url, stackdescripción, url, stack

Mandar tu proyecto a revisión

En tu perfil puedes vincular tu cuenta de GitHub para mandar a revisión tus proyectos. Necesitarás tener un repositorio con tu código, seleccionar las tecnologías que usaste y su url de deploy.

  1. Entra a tu perfil en leonidasesteban.com/estudiante

  2. En tu perfil encontrarás el botón "Vincular GitHub", al dar click serás redirigido para autorizar la vinculación

  3. Cuando aceptes la autorización dando click en "Authorize LeonidasEsteban" serás redirigido a tu perfil.

  4. Al terminar este proceso tendrás tu username en tu perfil y podrás mandar a revisión tus proyectos.

Vinculación de GitHubVinculación de GitHub

Desde tu perfil puedes mandar a revisión tus proyectos una vez termines, los pasos son:

  1. Tendrás una card por cada proyecto que hayas empezado, escoge el que mandarás a revisión y da click en "Vincular repositorio"

  2. Aparecerá un modal con un buscador de repositorios, escribe el nombre de tu repositorio y selecciónalo

  3. Al escoger un repositorio te mostará su información como el stack, la url de deploy y su descripción, si todo es correcto da click en "Vincular repositorio".

Mandar a revisiónMandar a revisión

Una vez termines el proceso la card del proyecto te indica que tu proyecto está En revisión y te indicará cuando este aprobado o si requiere feedback. El proceso sigue en Discord, ahí llega una notificación al canal #proyectos y más estudiantes pueden darte feedback o comentar sobre tu proyecto.

Mandado a revisiónMandado a revisión

Al momento de la revisión puede surgir feedback, serás notificado en tu perfil y mediante correo electronico, una vez hayas hecho tus cambios puedes solicitar una nueva revisión.

Feedback de un proyectoFeedback de un proyecto

Una vez te haya aprobado Leonidas Esteban tendrás tu proyecto Completado y recibirás una notificación con un bonito mail.

Proyecto aprobadoProyecto aprobado

Esfuérzate por mandar todos tus proyectos a revisión, recuerda que puedes mejorarlos gradualmente y volverlos a mandar a revisión.

Ilustracion que representa como crece alguien profesionalmente

Entérate de las últimas novedades

Streamings, Noticias y Early Adopter bonus. Sé el primero en enterarte de todo.