Saltar al contenido principal
septiembre 10, 2024

Construye tu propio sitio web personal y un juego de arcade espacial con la ayuda de GitHub

GitHub puede convertirse en tu mejor aliado si quieres iniciarte en el fascinante mundo del código. En este artículo, te adelanto las claves para crear una web de portfolio personal y un juego arcade espacial.

Además, al final te recomiendo uno de mis libros, que te ayudará a convertirte en un experto en GitHub en pocos días.

Empieza por tu portfolio personal

¿Por qué es importante empezar con un portfolio?

Un portfolio personal es una forma estupenda de mostrar tus habilidades, compartir tus proyectos y mostrar a posibles empleadores o colaboradores lo que sabes hacer. En el libro, te guiaré en la creación de un portafolio utilizando dos métodos: un simple archivo README y un sitio web completo construido con HTML, CSS y JavaScript.

Metodo 1: Crear un portfolio utilizando un archivo README

Un archivo README es una forma rápida y sencilla de crear una presencia online. Así puedes empezar:

  1. Crear un Nuevo Repositorio
    1. Ve a GitHub, haz clic en el icono «+» , y selecciona «New repository.»
    2. Nómbralo `your-github-username ` para alojarlo como sitio web.
  2. Añade tu README
    1. Mientras creas tu repositorio, haz clic en «Add a README file». Esta opción creará un nuevo archivo llamado `README.md`.
    2. En él podrás escribir una breve introducción, una lista de tus habilidades y un enlace a tus proyectos.
  3. Despliégalo como GitHub Pages
    1. Ahora puedes desplegar tu portfolio como una página web en vivo usando esta genial opción de GitHub llamada GitHub Pages.
    2. Ve a «Settings,» desplázate hasta «Pages,» y selecciona la rama principal. Clica en «Save,» y tu portfolio estará activo

Método 2: Construir una página web real con HTML, CSS y JavaScript

Para un portfolio más avanzado, te guiaremos paso a paso para construir una web completa usando HTML, CSS y JavaScript.

  1. Configura tu repositorio:
    1. Igual que antes, crea un repositorio llamado `your-github-username `.
  2. Crea tu archivo HTML
    1. Añade un nuevo archivo llamado `index.html` para empezar a construir tu página web. Este archivo será la columna vertebral de tu portfolio.   
  3. Añade algo de estilo con CSS
    1. Crea un archivo llamado `styles.css` y enlázalo a tu HTML. Este archivo contendrá todas las reglas de estilo para que tu web tenga un aspecto más atractivo.
  4. Mejórala con JavaScript
    1. Añade interactividad a tu web con JavaScript creando un archivo llamado`script.js`. Así aprenderás a hacer que tu web sea dinámica y atractiva.
  5. Despliega tu web
    1. De nuevo, utiliza GitHub Pages para alojar tu web. Ahora tienes un portfolio completo online que muestra no solo tus proyectos, sino también tus habilidades de desarrollo web.

Aprende GitHub contruyendo un juego de Arcade espacial

Después de configurar tu portfolio, te sumergirás en un proyecto aún más emocionante: ¡construir un juego de arcade espacial! Este proyecto te enseñará cómo manejar el control de versiones, gestionar los cambios en el código y colaborar con los demás, todo ello mientras te diviertes creando un juego.

  1. Comienza el proyecto
    1. El libro proporciona un proyecto de inicio para el juego. Inicia el repositorio para comenzar con tu versión.
  2. Usar Branches para añadir características
    1. Crea una nueva rama para añadir nuevas características al juego, como naves enemigas o mecanismos de puntuación. Esto te ayudará a mantener los cambios organizados sin afectar al código principal.
  3. Confirma tus cambios y haz un Pull Request
    1. Cuando estés satisfecho con tu nueva funcionalidad, confirma los cambios y crea un pull request para integrarlos en el juego principal.

Usa GitHub Copilot para mejorar tu código

A lo largo de estos proyectos, también aprenderás a utilizar GitHub Copilot, un asistente de codificación basado en inteligencia artificial que te ayuda a escribir mejor y más rápido:

  • Obtén sugerencias de código
    • Copilot proporciona sugerencias en tiempo real mientras escribes código, tanto si estás estilizando tu portfolio como construyendo tu juego.
  • Mejora tus habilidades
    • Te ayuda a entender los patrones de codificación, a escribir código limpio e incluso te sugiere formas de optimizar tus scripts.
  • Escribe pruebas unitarias
    • Descubre cómo Copilot puede ayudarte a crear pruebas para tu código, asegurándote de que funciona correctamente.

Un enfoque paso a paso para jovenes programadores

Si eres un aspirante a programador que quiere dejar huella, mi nuevo libro, GitHub for Next-Generation <Coders>, está pensado para ti. Este libro te enseña a usar GitHub mientras construyes dos proyectos emocionantes: un sitio web de portafolio personal y un juego de arcade espacial. Al final, tendrás una sólida comprensión de GitHub y las habilidades para crear y mostrar tu trabajo de codificación en línea.

Este libro está repleto de ejemplos prácticos, guías paso a paso y un montón de capturas de pantalla que te ayudarán a seguir el proceso. No sólo aprenderás GitHub, sino que también desarrollarás habilidades reales de programación para el desarrollo web y la creación de juegos.

¿Por qué son importantes estas aptitudes?

Saber utilizar GitHub, crear contenido web y colaborar en proyectos son habilidades clave para cualquier aspirante a desarrollador. Con este libro, obtendrás experiencia práctica de una manera divertida, atractiva y práctica. Al final, tendrás tu propio portafolio web y un juego jugable, todo alojado en GitHub Pages para que el mundo lo vea!

Consigue tu ejemplar de GitHub for Next-Generation <Coders> y empieza a construir tus proyectos. Aprende haciendo y observa cómo crecen tus habilidades mientras creas, colaboras y muestras tu trabajo al mundo!

Packt Publishing:
GitHub for Next-Generation Coders | Cloud & Networking | eBook (packtpub.com)

Amazon:

https://a.co/d/er7sliR

GitHub Repository:
PacktPublishing/GitHub-for-Next-Generation-Coders: GitHub for Next-Generation Coders, published by Packt

Autor
Igor Iric
Senior Azure Cloud Solutions Architect