Para alguien que está tratando de incursionar en el desarrollo de software, no importa dónde mires (LinkedIn, tableros de consejos profesionales, tutoriales de youtube), el consejo es siempre el mismo: necesitas un portafolio. freeCodeCamp conoce este consejo, y es obligatorio crear uno para finalizar su Certificación de “Diseño Web Responsive”.
Se supone que la carpeta es un documento vivo. Terminas un proyecto, colocas a ese chico malo en tu portafolio para mostrárselo al mundo. Constantemente le agregas, mostrando tu trayectoria de crecimiento personal. Se lo da a posibles reclutadores y gerentes de contratación para agregar alguna dimensión a su currículum.
De los cinco proyectos para obtener esa certificación, yo puse la mayor parte del trabajo en mi portafolio. Si iba a ser mi primera impresión digital, quería asegurarme de que fuera la mejor que pudiera hacer.
El método de facto para completar los proyectos en freeCodeCamp es usar codepen.io. La versión gratuita le permite codificar en un panel HTML, CSS y JavaScript, y ver sus cambios a medida que los escribe en una ventana. Puede abrir la página en una vista completa, lo que elimina los paneles HTML, CSS y JavaScript, pero deja un banner negro en la parte superior. La URL es un hash, algo así como //codepen.io/cam-barts/full/ZPWpqo, que no es memorable, no da ninguna indicación sobre el contenido del sitio y, en mi opinión, no genera ningún impacto en un currículum. Además, a menos que pague una membresía con codepen, no puede cambiarla.
En el momento en que estaba terminando mi proyecto, las estrellas se alinearon y descubrí dos tecnologías que ayudarían a destacar mi portafolio: Github Pages y Google Lighthouse.
Github Pages te permite alojar un sitio web directamente desde un repositorio de GitHub. Ofrece una URL github.io bastante elegante, que me hizo cosquillas en la búsqueda de algo para poner en un currículum. Me permitiría tener un control total de lo que verían mis usuarios cuando navegaran al sitio (tan largo, banner negro), y no tendría que lidiar con el alojamiento propio o pagar por algún otro servicio de alojamiento.
Escuché sobre Google Lighthouse en el CodeNewbie Podcast con Frances Coronel. Audita su sitio web directamente desde Chrome Dev Tools para cinco áreas: rendimiento, aplicación web progresiva, accesibilidad, mejores prácticas y SEO. SEO, o optimización de motores de búsqueda, es lo que ayuda a que su sitio flote en la cima de los motores de búsqueda como Google, lo que le ayuda a ser encontrado. Además, ahora que iba a alojar mi sitio en Pages, quería asumir la responsabilidad del rendimiento de mi sitio y, para hacerlo de forma eficaz, tenía que tener al menos un punto de referencia.
Mi objetivo al escribir este artículo es ayudarlo a crear un sitio de portafolio de aspecto profesional increíblemente rápido sin costo para usted. Quiero que sea algo de lo que estés orgulloso de publicar en LinkedIn y pegarlo en la parte superior de tu currículum, y quiero aprovechar las páginas de GitHub y Google Lighthouse para hacerlo.
Para ir más lejos, he hecho algunas suposiciones. La primera es que tienes una cuenta de Github. Si aún no tiene uno, crear uno es fácil. La segunda es que tienes un conocimiento básico de git. Si es nuevo, hay muchos artículos excelentes sobre cómo comenzar. Este artículo asume que ha completado su portafolio en codepen. Finalmente, debería tener instalado Google Chrome.
Este artículo sigue mi portafolio personal. Puede encontrar el bolígrafo aquí, el código aquí y el producto final está en cam-barts.github.io.
Empezando
Configurar su sitio de Github Pages es bastante sencillo. La versión TL; DR es:
- Crear repositorio siguiendo la convención de nombres [Nombre de usuario de GitHub] .github.io
- Clonar localmente
- Cree archivos index.html , style.css , script.js dentro del repositorio
- Agrega código a esos archivos
- Confirmar y enviar a GitHub
- ¡Lucro!
Creas un repositorio con un título que sigue la convención [Tu nombre de usuario de Github] .github.io. Aquí está el mío: cam-barts.github.io. Cualquier código que se envíe a ese repositorio se muestra cuando navega a ese sitio.
Entonces, cuando haya clonado el repositorio localmente, ¿qué pones exactamente en él?
Debe comenzar con tres archivos, un archivo index.html , un archivo style.css y un archivo script.js . En cualquier editor que desee (yo uso Atom), debe comenzar con el siguiente fragmento de código en su index.html :
Están sucediendo muchas cosas aquí que pueden resultarle desconocidas si solo ha estado trabajando con codepen.io.
El dir atributo en la etiqueta html indica que el documento debe leerse L eft T o R vuelo. Eso solo garantiza que cuando aparezca su página, todos los elementos estén justificados a la izquierda, que es como leen los hablantes de inglés.
Las metaetiquetas en el encabezado indican metadatos sobre la página, lo que ayuda a los motores de búsqueda como Google a indexar su sitio.
En este punto, debe completar las metaetiquetas y la etiqueta del título. Tenga en cuenta que el contenido de la metaetiqueta de palabras clave debe estar separado por comas y debe incluir términos que le gustaría que la gente usara en Google para encontrar su cartera. Así es como se ve el mío:
El siguiente paso es copiar la sección HTML de su lápiz de cartera en la sección del cuerpo de su fragmento. Una vez que se haya completado, si se vinculó a cualquier CSS o JS externo en la configuración de su lápiz, como Bootstrap o Font Awesome, debe vincularlos en su index.html .
Cree más etiquetas de enlace para CSS y etiquetas de script para JavaScript y agregue los enlaces que están en la configuración a los atributos href y src , respectivamente. Para asegurarse de que aparezcan sus estilos y secuencias de comandos, asegúrese de colocarlos antes del enlace existente y las etiquetas de secuencia de comandos en el fragmento. Por ejemplo, vincular a Bootstrap y JQuery se vería así:
A continuación, debe agregar su propio CSS en su style.css , y si tiene JavaScript, agréguelo a su script.js .
Una vez que hayas hecho eso, puedes comprometer todo tu trabajo y enviarlo a Github. Inmediatamente después de hacer eso, puede navegar a [Su nombre de usuario de Github] .github.io y consultar su sitio web.
Optimización del sitio de su cartera
¡Felicitaciones por publicar su portafolio!
Los siguientes pasos implican optimizar su sitio. Para ello, usaremos Google Lighthouse. Es mejor hacer esto en una ventana del navegador privado para que cualquier caché o extensiones de Chrome que pueda tener no afecten los resultados. Cuando navegue a su sitio, abra Chrome Developer Tools (Ctrl + Shift + i) y haga clic en la pestaña Auditorías .
Las aplicaciones web progresivas están fuera del alcance de este tutorial, pero no hay nada de malo en ejecutar todas las auditorías. Cuando los ejecute, debería obtener una página que se ve así:
Lo mejor de estos informes es que le brinda "Oportunidades" para mejorar sus puntajes.
En la sección de rendimiento, le indica que sirva formatos de archivo de próxima generación como WebP frente a imágenes tradicionales .PNG, y sugiere una carga diferida de las imágenes.
En la sección de SEO, sugiere mejoras de SEO, como agregar una metaetiqueta de descripción y usar tamaños de fuente legibles. No solo hace estas sugerencias, sino que se vincula a artículos con ejemplos prácticos con cosas que cambiar en su código para optimizar para esas áreas.
Para mí, solo me tomó una hora obtener los puntajes de mi sitio en los 90 en rendimiento, accesibilidad, mejores prácticas y SEO. Puedes ver todos los cambios que hice aquí.
Ir más lejos
Los siguientes pasos para su sitio dependen de usted. Puede vincularlo a Google Analytics para ver cuántos visitantes recibe su cartera. Puede agregar secciones para sus premios para mostrar sus certificaciones de FreeCodeCamp a medida que las obtiene. ¡La evolución de su sitio está completamente en sus manos! Enlaces de comentarios a su cartera a continuación.