Introducción a GitHub y pequeña Guía para el perfil de GitHub

¡Bienvenido a esta guía completa de GitHub! Esta documentación te ayudará a dar tus primeros pasos en el mundo del desarrollo colaborativo y el control de versiones.

📚 ¿Qué encontrarás en esta guía?

🌟 Introducción a GitHub: Qué es, para qué sirve y por qué es esencial para desarrolladores
🚀 Creación de cuenta: Proceso paso a paso para crear tu cuenta y empezar
⚡ Fundamentos de Git: El sistema de control de versiones que potencia GitHub
📝 Tutorial completo de Markdown: Desde lo básico hasta integraciónes con HTML y Mermaid
💼 Optimización de perfil: Cómo crear un perfil profesional que destaque y atraiga oportunidades
📚 Recursos adicionales: Videos, tutoriales, cursos y herramientas para profundizar en Git y GitHub

Tip

Esta guía está diseñada tanto para principiantes como para usuarios que quieran perfeccionar sus conocimientos de Markdown y GitHub.

Note

Si esta guía te resulta útil, puedes apoyarme dándole una ⭐ a este repositorio y siguiéndome en @ema28pro. ¡Tu apoyo me motiva a crear más contenido! 🙏

¡Comencemos por lo primero!

¿Que es GitHub?

GitHub es una paltaforma que te permite almacenar, compartir y colaborar en código con otros usuarios.
La plataforma GitHub simplifica el proceso de colaborar en proyectos y proporciona un sitio web, herramientas de línea de comandos y un flujo global que permite a los desarrolladores y usuarios trabajar juntos.
Está basado en Git, un sistema de control de versiones de código abierto que rastrea los cambios en los archivos a lo largo del tiempo.
GitHub proporciona una ubicación centralizada para tu código, conocida como repositorio, donde puedes administrar y rastrear cambios, revisar código y colaborar sin preocuparte por conflictos.

Como su nombre indica, la web utiliza el sistema de control de versiones Git diseñado por Linus Torvalds. Un sistema de gestión de versiones es ese con el que los desarrolladores pueden administrar su proyecto, ordenando el código de cada una de las nuevas versiones que sacan de sus aplicaciones para evitar confusiones. Así, al tener copias de cada una de las versiones de su aplicación, no se perderán los estados anteriores cuando se va a actualizar.

Y que es un Repositorio?

Un repositorio contiene todos los archivos de tu proyecto y el historial de revisiones de cada uno de ellos. Es una de las partes esenciales que le ayuda a colaborar con personas. Puede utilizar repositorios para administrar el trabajo, realizar un seguimiento de los cambios, almacenar el historial de revisiones y trabajar con otras personas.

Como crear una cuenta de GitHub

Primero buscamos en nuestro navegador prefierdo 'GitHub'

Oh vamos directamente a su sitio web en 'github.com'

Y nos dirigmos a la ezquina superior derecha en 'Sing up' o Inscribirse/Registrarse

Para luego rellenar la informacion que nos piden

Y luego de verifiar tu correo, oficialmente ya tendrias tu cuenta de Git Hub

  ¿Listo para empezar a construir? Crea un repositorio para una nueva
  idea o incorpora uno existente para seguir contribuyendo.

¿Por donde empezar?

Introducción a GitHub

1 h 39 min. 8 Unidades

Introducción a Git

31 min. 6 Unidades

Hello World

Git

Qué es Git?

_{From FreeCodeCamp.}

Git es un software de control de versiones gratis y de código abierto. Fue creado por Linus Torvalds en 2005. Esta herramienta es un sistema de control de versiones que fue inicialmente desarrollado para trabajar con varios desarrolladores en el núcleo de Linux.

Esto significa básicamente que Git es un rastreador de contenido. Así que Git puede ser utilizado para almacenar contenido — y se usa principalmente para almacenar código debido a otras características que proporciona.

Los proyectos de la vida real generalmente tienen múltiples desarrolladores trabajando en paralelo. Así que necesitan un sistema de control de versiones como Git para asegurarse de que no hay conflictos de código entre ellos.

Además, los requerimientos en este tipo de proyectos cambian constantemente. Así que un sistema de control de versiones permite a los desarrolladores revertir y regresar a una versión anterior de su código.

El sistema de ramas en Git permite a los desarrolladores trabajar individualmente en una tarea (Por ejemplo: una rama -> una tarea O una Rama -> un desarrollador). Básicamente, se puede pensar en Git como una aplicación de software pequeña que controla tu código base, si eres un desarrollador.

Repositorios Git

Si queremos empezar a usar Git, necesitamos saber dónde alojar nuestros repositorios.

Un repositorio (o "Repo" para abreviar) es un proyecto que contiene múltiples archivos. En nuestro caso un repositorio contendrá archivos basados en código.

Hay dos maneras en que puedes alojar tus repositorios. Uno es en línea (en la nube) y la segunda es fuera de línea (auto-instalado en tu servidor).

Hay tres servicios de alojamiento popular de Git: GitHub (propiedad de Microsoft), GitLab (propiedad de GitLab) y BitBucket. Usaremos GitHub como nuestro servicio de alojamiento.

Antes de usar Git debemos saber por qué lo necesitamos.

Git facilita la contribución a proyectos de código abierto Casi todos los proyectos de código abierto utilizan GitHub para gestionar sus proyectos. Usar GitHub es gratis si tu proyecto es de código abierto, e incluye un wiki y un rastreador de problemas que facilita la inclusión de documentación más detallada y recibir retroalimentación sobre tu proyecto.

Si quieres contribuir, simplemente bifurcas (obtienes una copia de) un proyecto, realizas tus cambios, y luego envías un Pull Request al proyecto utilizando la interface web de GitHub. Este Pull Request es tu manera de decirle al proyecto que estás listo para que revisen tus cambios.

Documentación

Utilizando GitHub, facilitas la obtención de excelente documentación. Su sección de ayuda y las guías tienen artículos para casi cualquier tema relacionado a Git en el que puedas pensar.

Opciones de Integración

GitHub puede integrarse con plataformas comunes como Amazon y Google Cloud, con servicios como Code Climate para rastrear tus comentarios y puede resaltar la sintaxis en más de 200 lenguajes de programación diferentes.

Rastrea cambios en tu código a través de versiones

Cuando varias personas colaboran en un proyecto, es difícil mantener el seguimiento de las revisiones — quién cambió qué, cuándo, y dónde están almacenados esos archivos.

GitHub se ocupa de este problema manteniendo un seguimiento de todos los cambios que se han enviado al repositorio.

Al igual que cuando se usa Microsoft Word o Google Drive, puedes tener un historial de las versiones de tu código, de manera que las versiones previas no se pierden con cada iteración. Es fácil regresar a la versión previa y contribuir a tu trabajo.

Muestra tu trabajo

¿Eres un desarrollador que desea atraer a reclutadores? GitHub es la mejor herramienta en la que puedes confiar para esto.

Hoy, al buscar nuevos reclutas para sus proyectos, la mayoría de las compañías miran los perfiles de GitHub. Si tu perfil está disponible, tendrás mayores posibilidades de ser reclutado incluso si no eres de una gran universidad o colegio.

Markdown

Antes de comenzar a documentar nuestros proyectos en GitHub, es importante conocer Markdown, un lenguaje de marcado ligero que se utiliza ampliamente para dar formato a archivos de texto, como el README.md. Markdown permite agregar títulos, listas, enlaces, imágenes, fragmentos de código y más, de forma sencilla y legible. Es la herramienta principal para escribir documentación clara y estructurada en GitHub, sin necesidad de conocimientos avanzados en HTML.

Algunos tutoriales:

Qué es Markdown

Markdown es un lenguaje de marcado con el que puedes agregar formato a documentos de texto plano. Fue creado por John Gruber en el año 2004, siendo a día de hoy uno de los lenguajes de marcado más famosos. Su popularidad se debe a que es sencillo, ligero y fácil de aprender por parte de aquellas personas que no tienen un perfil técnico.

Este es un ejemplo de los Titulos

Markdown	Viewth
# Esto es un titulo ## Esto es un titulo ### Esto es un titulo #### Esto es un titulo ##### Esto es un titulo ###### Esto es un titulo	Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo

y como tambien lee html se puede hacer con las etiquetas h1...h6

Markdown	Viewth
<h1> Esto es un titulo </h1> <h2> Esto es un titulo </h2> <h3> Esto es un titulo </h3> <h4> Esto es un titulo </h4> <h5> Esto es un titulo </h5> <h6> Esto es un titulo </h6>	Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo Esto es un titulo

Formato de Texto

En Markdown puedes aplicar diferentes formatos al texto de manera sencilla:

Markdown Resultado

**Texto en negrita**
*Texto en cursiva*
***Texto en negrita y cursiva***
~~Texto tachado~~
`Código inline`

### También con HTML:
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>
<u>Texto subrayado</u>
<mark>Texto resaltado</mark>

### Subíndices y Superíndices:
H<sub>2</sub>O (agua)
E = mc<sup>2</sup> (Einstein)

Texto en negrita
Texto en cursiva
Texto en negrita y cursiva
~~Texto tachado~~
Código inline

También con HTML:

Texto en negrita
Texto en cursiva
Texto subrayado
Texto resaltado

Subíndices y Superíndices:

H₂O (agua)
E = mc² (Einstein)

Listas

Markdown soporta tanto listas ordenadas como no ordenadas, pero también puedes usar HTML para más control:

Markdown Resultado

### Lista no ordenada
- Elemento 1
- Elemento 2
  - Subelemento 2.1
  - Subelemento 2.2
- Elemento 3

### Lista ordenada
1. Primer elemento
2. Segundo elemento
   1. Subelemento 2.1
   2. Subelemento 2.2
3. Tercer elemento

### Lista de tareas
- [x] Tarea completada
- [ ] Tarea pendiente
- [ ] Otra tarea pendiente

### Lista HTML no ordenada
<ul>
  <li>Elemento con <strong>negrita</strong></li>
  <li>Elemento con <em>cursiva</em></li>
  <li>Elemento con <code>código</code>
    <ul>
      <li>Subelemento anidado</li>
      <li>Otro subelemento</li>
    </ul>
  </li>
</ul>

### Lista HTML ordenada
<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento con sublista:
    <ol type="a">
      <li>Subelemento A</li>
      <li>Subelemento B</li>
    </ol>
  </li>
</ol>

### Lista HTML con diferentes estilos
<ol type="I">
  <li>Romano I</li>
  <li>Romano II</li>
</ol>

<ol type="A" start="5">
  <li>Letra E (empezando desde 5)</li>
  <li>Letra F</li>
</ol>

### Lista de descripción (HTML)
<dl>
  <dt><strong>Término 1</strong></dt>
  <dd>Definición del término 1</dd>
  <dt><strong>Término 2</strong></dt>
  <dd>Definición del término 2</dd>
  <dd>Una segunda definición para el término 2</dd>
</dl>

Lista no ordenada

Elemento 1
Elemento 2
- Subelemento 2.1
- Subelemento 2.2
Elemento 3

Lista ordenada

Primer elemento
Segundo elemento
1. Subelemento 2.1
2. Subelemento 2.2
Tercer elemento

Lista de tareas

Tarea completada
Tarea pendiente
Otra tarea pendiente

Lista HTML no ordenada

Elemento con negrita
Elemento con cursiva
Elemento con código
- Subelemento anidado
- Otro subelemento

Lista HTML ordenada

Primer elemento
Segundo elemento
Tercer elemento con sublista:
1. Subelemento A
2. Subelemento B

Lista HTML con diferentes estilos

Romano I
Romano II

Letra E (empezando desde 5)
Letra F

Lista de descripción (HTML)

Término 1: Definición del término 1
Término 2: Definición del término 2; Una segunda definición para el término 2

Enlaces

Puedes crear enlaces de diferentes maneras:

Markdown

Resultado

[Texto del enlace](https://www.ejemplo.com)
[GitHub](https://github.com)

[Enlace con título](https://www.ejemplo.com "Título del enlace")

<https://www.ejemplo.com>

[Enlace a archivo local](./README.md)

Texto del enlace
GitHub

Enlace con título

https://www.ejemplo.com

Enlace a archivo local

Bloques de Código

Para mostrar código puedes usar diferentes métodos:

Markdown

Resultado

```javascript
function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}

console.log(saludar("Mundo"));
```

```python
def saludar(nombre):
    return f"¡Hola, {nombre}!"

print(saludar("Mundo"))
```

function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}

console.log(saludar("Mundo"));

def saludar(nombre):
    return f"¡Hola, {nombre}!"

print(saludar("Mundo"))

Tablas

Las tablas en Markdown se crean usando barras verticales |, pero también puedes usar HTML para más control:

Markdown Resultado

### Tabla básica en Markdown
| Columna 1 | Columna 2 | Columna 3 |
|-----------|-----------|-----------|
| Fila 1, Col 1 | Fila 1, Col 2 | Fila 1, Col 3 |
| Fila 2, Col 1 | Fila 2, Col 2 | Fila 2, Col 3 |

### Con alineación
| Izquierda | Centro | Derecha |
|:----------|:------:|--------:|
| Texto | Texto | Texto |
| Más texto | Más texto | Más texto |

### Tabla con HTML (más control)

<table>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>Negrita</strong></td>
      <td><em>Cursiva</em></td>
      <td><code>Código</code></td>
    </tr>
    <tr>
      <td rowspan="2">Celda combinada</td>
      <td>Celda normal</td>
      <td>Otra celda</td>
    </tr>
    <tr>
      <td colspan="2">Celda que ocupa 2 columnas</td>
    </tr>
  </tbody>
</table>

Tabla básica en Markdown

Columna 1	Columna 2	Columna 3
Fila 1, Col 1	Fila 1, Col 2	Fila 1, Col 3
Fila 2, Col 1	Fila 2, Col 2	Fila 2, Col 3

Con alineación

Izquierda	Centro	Derecha
Texto	Texto	Texto
Más texto	Más texto	Más texto

Tabla con HTML (más control)

Encabezado 1	Encabezado 2	Encabezado 3
Negrita	Cursiva	`Código`
Celda combinada	Celda normal	Otra celda
Celda combinada	Celda que ocupa 2 columnas

Imágenes

Para insertar imágenes en Markdown tienes varias opciones:

Markdown

Resultado

### Imagen básica
![Texto alternativo](./img/miku.jpeg)

### Imagen con título (tooltip)
![GitHub](./img/kasane_teto.jpeg "Tutorial de GitHub")

### Imagen con enlace
[![Texto alternativo](./img/gato.jpeg)](https://www.ejemplo.com)

### Imagen redimensionada con HTML
<img src="./img/miku.jpeg" alt="Miku" width="200" height="200">

### Imagen centrada con HTML
<div align="center">
  <img src="./img/kasane_teto.jpeg" alt="Miku centrada" width="300">
</div>

### Imagen con borde y sombra
<img src="./img/gato.jpeg" alt="Miku" width="250" 
     style="border: 2px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">

Imagen básica

Imagen con título (tooltip)

Imagen con enlace

Imagen redimensionada con HTML

Imagen centrada con HTML

Imagen con borde y sombra

Citas

Para crear citas o destacar texto importante:

Markdown

Resultado

> Esta es una cita simple.

> Esta es una cita
> que continúa en
> múltiples líneas.

> ### Cita con título
> Este es el contenido de la cita
> con un título incluido.

Esta es una cita simple.

Esta es una cita que continúa en múltiples líneas.

Cita con título

Este es el contenido de la cita con un título incluido.

Anotaciones Especiales (GitHub Callouts)

GitHub soporta callouts especiales para resaltar información importante:

Markdown Resultado

> [!NOTE]
> Esta es una nota informativa.

> [!TIP]
> Este es un consejo útil.

> [!IMPORTANT]
> Esta es información importante.

> [!WARNING]
> Esta es una advertencia.

> [!CAUTION]
> Esta es una precaución crítica.

> [!NOTE]
> ### Puedes usar títulos dentro
> Y también **formato** *especial* y `código`.
> 
> - Listas
> - También funcionan

Note

Esta es una nota informativa.

Tip

Este es un consejo útil.

Important

Esta es información importante.

Warning

Esta es una advertencia.

Caution

Esta es una precaución crítica.

Note

Puedes usar títulos dentro

Y también formato especial y código.

Listas
También funcionan

Desplegables (Collapsibles)

Usa <details> y <summary> para crear secciones desplegables:

Markdown Resultado

<details>
<summary>Click para expandir</summary>

Este contenido está oculto hasta que 
el usuario haga click en "Click para expandir".

Puedes incluir:
- **Formato** de texto
- `Código`
- [Enlaces](https://ejemplo.com)
- ![Imágenes](img/miku.jpeg)

  ```javascript
  console.log("¡Incluso código!");
  ```


</details>

<details>
<summary><strong>Título con formato</strong></summary>

### Puedes usar Markdown aquí también

> [!TIP]
> Los callouts también funcionan dentro de desplegables.

| Columna 1 | Columna 2 |
|-----------|-----------|
| Dato 1    | Dato 2    |

</details>

<details open>
<summary>Desplegable abierto por defecto</summary>

Usa `open` para que aparezca expandido inicialmente.

</details>

Click para expandir

Este contenido está oculto hasta que el usuario haga click en "Click para expandir".

Puedes incluir:

Formato de texto
Código
Enlaces

console.log("¡Incluso código!");

Título con formato

Puedes usar Markdown aquí también

[!TIP] Los callouts también funcionan dentro de desplegables.

Columna 1	Columna 2
Dato 1	Dato 2

Desplegable abierto por defecto

Usa open para que aparezca expandido inicialmente.

Líneas Horizontales

Para crear separadores visuales:

Markdown	Resultado
--- *** ___

Emojis

GitHub soporta emojis usando códigos:

Markdown	Resultado
:smile: :heart: :thumbsup: :rocket: :fire: :computer: :books: :bulb: :star: :octocat:	😄 ❤️ 👍 🚀 🔥 💻 📚 💡 ⭐

Alineación y Dimensiones con HTML

GitHub permite usar algunas etiquetas HTML para controlar la alineación y dimensiones de elementos:

Markdown

Resultado

### Alineación de texto
<div align="left">Texto alineado a la izquierda</div>
<div align="center">Texto centrado</div>
<div align="right">Texto alineado a la derecha</div>

### Alineación de imágenes
<div align="center">
  <img src="./img/miku.jpeg" alt="Centrada" width="200">
</div>

### Dimensiones específicas
<img src="./img/kasane_teto.jpeg" 
     alt="Imagen personalizada" 
     width="150" 
     height="150"
     align="left">

### Imagen con dimensiones y estilo
<img src="./img/gato.jpeg" 
     alt="Con estilo" 
     width="250" 
     height="200"
     align="right"
     style="border-radius: 10px; margin: 10px;">
     
### Tabla con dimensiones
<table width="80%" align="center">
  <tr>
    <th width="30%">Columna 1</th>
    <th width="70%">Columna 2</th>
  </tr>
  <tr>
    <td height="50">Celda alta</td>
    <td>Contenido normal</td>
  </tr>
</table>

Alineación de texto

Texto alineado a la izquierda

Texto centrado

Texto alineado a la derecha

Alineación de imágenes

Dimensiones específicas

Imagen con dimensiones y estilo

Tabla con dimensiones

Columna 1	Columna 2
Celda alta	Contenido normal

Diagramas con Mermaid

GitHub soporta diagramas Mermaid para crear flujogramas, diagramas de secuencia y más:

Markdown

Resultado

```mermaid
flowchart TD
    A[Inicio] --> B{¿Es usuario?}
    B -->|Sí| C[Mostrar dashboard]
    B -->|No| D[Mostrar login]
    C --> E[Cargar datos]
    D --> F[Verificar credenciales]
    F -->|Válidas| C
    F -->|Inválidas| G[Mostrar error]
    G --> D
    E --> H[Fin]
```

```mermaid
graph LR
    A[GitHub] --> B[Crear repo]
    B --> C[Escribir código]
    C --> D[Commit]
    D --> E[Push]
    E --> F[Pull Request]
    F --> G[Review]
    G --> H[Merge]
```

```mermaid
sequenceDiagram
    participant U as Usuario
    participant G as GitHub
    participant R as Repositorio
    
    U->>G: git clone
    G->>R: Obtener código
    R-->>G: Código fuente
    G-->>U: Repositorio local
    U->>U: Hacer cambios
    U->>G: git push
    G->>R: Actualizar código
```

flowchart TD
    A[Inicio] --> B{¿Es usuario?}
    B -->|Sí| C[Mostrar dashboard]
    B -->|No| D[Mostrar login]
    C --> E[Cargar datos]
    D --> F[Verificar credenciales]
    F -->|Válidas| C
    F -->|Inválidas| G[Mostrar error]
    G --> D
    E --> H[Fin]

graph LR
    A[GitHub] --> B[Crear repo]
    B --> C[Escribir código]
    C --> D[Commit]
    D --> E[Push]
    E --> F[Pull Request]
    F --> G[Review]
    G --> H[Merge]

sequenceDiagram
    participant U as Usuario
    participant G as GitHub
    participant R as Repositorio
    
    U->>G: git clone
    G->>R: Obtener código
    R-->>G: Código fuente
    G-->>U: Repositorio local
    U->>U: Hacer cambios
    U->>G: git push
    G->>R: Actualizar código

Consejos adicionales

Saltos de línea: Para crear un salto de línea, termina una línea con dos espacios
Escape de caracteres: Usa \ antes de caracteres especiales para mostrarlos literalmente
HTML: Markdown soporta HTML, así que puedes usar etiquetas HTML cuando necesites más control
Comentarios: 
Compatibilidad: Los lectores de Markdown varían en sus características. GitHub Flavored Markdown soporta muchas funciones avanzadas (como callouts, Mermaid, tablas HTML), pero otros editores como VS Code, Obsidian o lectores básicos pueden no mostrar todo correctamente

[!IMPORTANT] Compatibilidad entre plataformas: No todos los lectores de Markdown interpretan las funciones de la misma manera. Lo que funciona perfectamente en GitHub puede no funcionar en otros editores. Siempre prueba tu contenido en la plataforma de destino.

Recursos útiles

¿Cómo mejorar mi perfil de GitHub?

Tu perfil de GitHub es tu carta de presentación profesional en el mundo del desarrollo. Un perfil bien optimizado puede abrirte puertas laborales y ayudarte a conectar con otros desarrolladores.

📝 README del perfil personalizado

GitHub permite crear un README especial que se muestra en tu perfil principal:

Cómo crear tu README de perfil:

flowchart LR
    A[Crear repo con tu username] --> B[Hacerlo público]
    B --> C[Agregar README.md]
    C --> D[¡Aparece en tu perfil!]

⚙️ Editar Perfil

Luego de ir a nuestro perfil se nos dará la opción de editar los siguientes campos:

Name: Tu nombre completo o nombre profesional
Bio: Una descripción breve y atractiva sobre ti, quien eres y a que te dedicas (máximo 160 caracteres)
Pronouns: Tus pronombres preferidos (él/ella/elle)
Company: La empresa donde trabajas actualmente
Location: Tu ubicación geográfica (ciudad, país)
Display current local time: Mostrar tu zona horaria actual
Email: Tu correo electrónico profesional (público o privado)
Website: Tu sitio web personal, portfolio o blog
Social Accounts: Hasta 4 redes sociales (Twitter, LinkedIn, etc.)

💡 Consejos para optimizar tu perfil:

[!TIP] Bio efectiva: Menciona tu especialidad, años de experiencia y tecnologías principales

[!IMPORTANT] Foto profesional: Usa una imagen clara, de buena calidad y que te represente profesionalmente

[!NOTE] Consistencia: Mantén la misma información en todas tus redes profesionales

📁 Crear el repositorio de tu perfil

Paso 1: Crear el repositorio

Primero vamos a la esquina superior derecha y buscamos el +, le damos "Create new" → "New repository".

Lo siguiente es poner como nombre de repositorio tu username de GitHub (exactamente igual), designarlo como público y añadir el README así como muestra la imagen. Luego darle "Create Repository".

📝 Cómo editar el README

Para trabajar con repositorios tenemos dos formas:

Opción 1 (Local): Instalar Git + un editor de código y clonar el repositorio para trabajarlo localmente
Opción 2 (Web): Usar el editor de GitHub directamente (más fácil para principiantes)

Usaremos la Opción 2 por facilidad:

Nos aparece la siguiente ventana al lado de nuestro repositorio y le daremos en "Edit README" o en el ✏️.

Se nos abrirá la siguiente ventana de edición del README.md:

💾 Cómo guardar los cambios (Commit)

[!IMPORTANT] ¿Qué es un Commit?: Un commit es como "guardar" los cambios en tu repositorio. Es una foto instantánea de tu código en ese momento.

Para guardar tus cambios:

Escribe tu contenido en el editor de README
Ve a la esquina superior derecha de la página donde dice "Commit changes"

Escribe un mensaje descriptivo sobre lo que cambiaste
- ✅ Ejemplo bueno: "Agregué sección de tecnologías y contacto"
- ❌ Ejemplo malo: "cambios" o "update"
Opcionalmente agrega una descripción más detallada
Selecciona "Commit directly to the main branch"
Haz clic en "Commit changes"

📁 Cómo subir archivos al repositorio

Existen dos formas de agregar imágenes u otros archivos:

Método 1: Desde el editor (donde estás ahora)

En la barra lateral izquierda del editor, busca el ícono +
Haz clic en el + para agregar archivos
Archivo nuevo creado, arriba podras ponerle nombre y la extension correspondiente para escribir en el nuevo archivo.

Método 2: Directamente en el repositorio

Ve a tu repositorio en GitHub (sal del editor)
Haz clic en "Add file" → "Upload files" (no "Create new file")
Arrastra y suelta tus archivos o haz clic en "choose your files"
Organiza tus archivos (recomendado crear carpeta img/ para imágenes)
Escribe un mensaje de commit descriptivo
Haz clic en "Commit changes"

[!TIP] Carpetas organizadas: Crea carpetas como img/, docs/, assets/ para mantener tu repositorio ordenado

[!NOTE] Formatos recomendados: Para imágenes usa PNG, JPG o SVG. GitHub soporta muchos formatos de archivo.

🎨 Elementos que debes incluir tu README de perfil

1. Saludo y presentación

# ¡Hola! 👋 Soy [Tu Nombre]

### 🚀 Desarrollador Full Stack apasionado por la tecnología

Soy un desarrollador con [X años] de experiencia, especializado en...

2. Tecnologías y herramientas

## 🛠️ Tecnologías y Herramientas

![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)
![Python](https://img.shields.io/badge/-Python-3776AB?style=flat&logo=python&logoColor=white)
![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/-Node.js-339933?style=flat&logo=node.js&logoColor=white)

3. Estadísticas de GitHub

## 📊 Estadísticas de GitHub

![Estadísticas de GitHub](https://github-readme-stats.vercel.app/api?username=tuusuario&show_icons=true&theme=radical)

![Lenguajes más usados](https://github-readme-stats.vercel.app/api/top-langs/?username=tuusuario&layout=compact&theme=radical)

4. Proyectos destacados

## 🚀 Proyectos Destacados

### [📱 Nombre del Proyecto](https://github.com/usuario/proyecto)
Descripción breve del proyecto y tecnologías utilizadas.

- **Tech Stack:** React, Node.js, MongoDB
- **Características:** Lista de funcionalidades principales

5. Contacto y redes sociales

## 📫 ¿Cómo contactarme?

[![LinkedIn](https://img.shields.io/badge/-LinkedIn-0077B5?style=flat&logo=linkedin&logoColor=white)](https://linkedin.com/in/tuusuario)
[![Twitter](https://img.shields.io/badge/-Twitter-1DA1F2?style=flat&logo=twitter&logoColor=white)](https://twitter.com/tuusuario)
[![Email](https://img.shields.io/badge/-Email-D14836?style=flat&logo=gmail&logoColor=white)](mailto:[email protected])

🏆 Mejores prácticas para tu perfil

✅ Lo que SÍ debes hacer:

Foto de perfil profesional: Una imagen clara y profesional
Bio descriptiva: Resumir quién eres en pocas palabras
Repositorios organizados: Nombres claros y descripciones útiles
README detallados: Documentar bien tus proyectos
Commits regulares: Mantener actividad constante
Contribuciones a open source: Muestra tu colaboración

❌ Lo que NO debes hacer:

Repositorios vacíos sin contenido
Códigos sin documentación
Proyectos abandonados sin README
Información personal sensible en el código
Commits con mensajes poco descriptivos

[!TIP] Aprende de otros perfiles: Visita perfiles de desarrolladores que admires. Puedes ver su README y archivos haciendo clic en el repositorio con su username. ¡Es la mejor forma de conseguir ideas creativas y aprender nuevas técnicas!

Puedes visitar mi README, ver como esta construido y tomar los elementos que te gusten. Podras encontrar Badges, Stats, ASCII art y inspiración

🎯 Ideas creativas para tu perfil

1. Widgets dinámicos

<!-- Música que estás escuchando -->
[![Spotify](https://novatorem-kyzbk7wxl.vercel.app/api/spotify)](https://open.spotify.com/user/usuario)

<!-- Actividad reciente de blog -->
### 📝 Últimos posts del blog
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

2. Gráficos de contribución

![Gráfico de contribuciones](https://github-readme-activity-graph.cyclic.app/graph?username=tuusuario&theme=dracula)

3. Trofeos de GitHub

## 🏆 Trofeos de GitHub
![Trofeos](https://github-profile-trophy.vercel.app/?username=tuusuario&theme=darkhub)

🌟 Herramientas y recursos útiles para crear tu perfil

🏷️ Generadores de badges e insignias:

Shields.io - Generador de insignias personalizadas
Skill Icons - Iconos de habilidades y tecnologías animados
Colored Badges - Badges coloridos para tecnologías
Awesome Badges - Colección de badges increíbles
Profile Technology Icons - Iconos de tecnologías para perfiles
Markdown Badges - Badges para tecnologías en Markdown
Simple Icons - Iconos simples de marcas y tecnologías
Tech Stack Generator - Generador visual de stack tecnológico
Skill Icons Dev - API para generar iconos de habilidades
Badges4 README Profile - Badges para perfiles README
Badges4 README Dynamic - Badges dinámicos

📊 Generadores de estadísticas y métricas:

GitHub Readme Stats - Estadísticas personalizadas
GitHub Profile Trophy - Trofeos y logros
Metrics - Generador avanzado de métricas para GitHub
GitHub User Stats - Estadísticas detalladas de usuarios
Profile README Development Stats - Acción para estadísticas automáticas
AOC Badges Action - Badges para Advent of Code
Awesome GitHub Stats - Generador de estadísticas personalizadas

🔧 Generadores de README:

Profile README Generator (ES) - Generador en español
GitHub Profile README Generator - Generador completo de README

🎨 Emojis y elementos visuales:

Emojis para GitHub - Lista completa de emojis compatibles
Lista de emojis completa - Gist con todos los emojis disponibles
SVG Banners - Banners SVG personalizados para tu perfil
Typing SVG - Gif de texto, repo.

💡 Inspiración y ejemplos:

Awesome GitHub Profile README - Colección de perfiles increíbles

📚 Documentación y tutoriales:

Guía oficial de GitHub sobre perfiles - La documentación oficial de GitHub
Markdown para GitHub - Guía completa del formato Markdown para GitHub
MiduDev Como crear tu perfil de GitHub con Readme - Tutorial completo en español

💡 Consejos adicionales

[!TIP] Mantén tu perfil actualizado: Revisa y actualiza tu perfil regularmente

[!IMPORTANT] Calidad sobre cantidad: Es mejor tener pocos proyectos bien documentados que muchos abandonados

[!NOTE] Sé auténtico: Tu perfil debe reflejar realmente quién eres como desarrollador

Ejemplo de perfil completo

graph TD
    A[Foto profesional] --> B[Bio atractiva]
    B --> C[README personalizado]
    C --> D[Proyectos destacados]
    D --> E[Estadísticas GitHub]
    E --> F[Tecnologías]
    F --> G[Contacto]
    G --> H[¡Perfil exitoso! 🎉]

🎯 Resumen final

¡Felicidades! Ahora tienes todos los conocimientos necesarios para crear un perfil de GitHub profesional y atractivo. Recuerda:

✅ Pasos completados:

⚙️ Perfil básico: Foto, bio y información personal
📁 Repositorio especial: Creado con tu username
📝 README personalizado: Con contenido atractivo y profesional
💾 Commits: Guardando cambios correctamente
📁 Archivos organizados: Imágenes y recursos bien estructurados
🛠️ Herramientas: Conoces recursos para mejorar tu perfil

🚀 ¡Tu perfil está listo para impresionar!

[!SUCCESS] ¡Enhorabuena! Tienes todo lo necesario para destacar en la comunidad de desarrolladores de GitHub

📚 Recursos para aprender Git y GitHub

🎥 Videos Utiles

freeCodeCamp.org Git and GitHub for Beginners - Crash Course	freeCodeCamp Español RECOMENDADO Aprende Git y GitHub - Curso desde Cero	Soy Dalto CURSO de GIT y GitHub (desde cero)
MoureDev by Brais Moure RECOMENDADO Curso COMPLETO de GIT y GITHUB desde CERO para PRINCIPIANTES	midulive RECOMENDADO Curso de GIT y GITHUB DESDE CERO Para Aportar a Proyectos	midudev RECOMENDADO CREA tu Github README Profile paso a paso y añade GitHub Actions 🐙😺Blog
FaztTech ¿Que es Git?	FaztTech ¿Por qué Git Fue inventado?	FaztTech Git y Github \| Curso Práctico de Git y Github Desde Cero
TodoCode PLAYLIST 🤓 Curso GIT y GITHUB - Tutorial desde CERO 🚀 2025	de Nikorasu Def PLAYLIST CURSO de GIT y GitHub (desde cero)	Fireship Git explicado en 100 segundos
Traversy Media Git & GitHub Crash Course For Beginners	Traversy Media Git & GitHub Crash Course 2025	deivchoi Aprende Git en 15 Minutos
Cameron McKenzie Git and GitHub Crash Course For Beginners \| Complete Tutorial [2024]	SuperSimpleDev Git and GitHub - 0 Experience to Professional in 1 Tutorial (Part 1)	SuperSimpleDev Git and GitHub - 0 Experience to Professional in 1 Tutorial (Part 2)
Programming with Mosh Git Tutorial for Beginners: Learn Git in 1 Hour	Kevin StratvertGit explicado en 100 segundos Git and GitHub Tutorial for Beginners	Nick White Git Tutorial For Dummies

🌐 Plataformas interactivas de aprendizaje

🎯 Plataforma	📝 Descripción	🔗 Enlace
GitHub Skills	Cursos oficiales interactivos de GitHub	💪 Practicar
Learn Git Branching	Aprende Git de forma visual e interactiva	🌿 Interactua
Explain Git with D3	Visualizador interactivo de comandos Git	👁️ Explorar
Git Immersion	Tutorial paso a paso para dominar Git	📚 Aprender
Oh My Git	Recomendado por AkiraYumoto	🎮 Jugar
Git by example	Aprende Git con ejemplos prácticos	🚀 Descubrir

📚 Guías y documentación oficial

📖 Recurso	🌐 Descripción	🔗 Enlace
Pro Git Book	Libro oficial de Git (gratuito)	📕 Leer
DataCamp Guide	Guía completa para aprender Git	📊 Estudiar
FreeCodeCamp Guide	Guía para principiantes y desarrolladores	💻 Consultar

🎓 Cursos en LinkedIn Learning

🎯 Curso	⏱️ Nivel	🔗 Enlace
Git from Scratch	Principiante	📘 Tomar curso
Git Essential Training	Básico-Intermedio	📗 Tomar curso
Learning Git and GitHub	Principiante	📙 Tomar curso
Git Branches, Merges, and Remotes	Intermedio	📕 Tomar curso
Git Intermediate Techniques	Avanzado	📔 Tomar curso

📖 Artículos y guías escritas

📝 Recurso	🌐 Descripción	🔗 Enlace
FreeCodeCamp	Guía completa para principiantes de Git y GitHub en español	📖 Leer guía
Ykigai	Tutorial paso a paso de Git y GitHub para principiantes	📖 Leer tutorial

🛠️ Repositorio de práctica recomendado

📦 Hello Git - Curso práctico de MoureDev

Repositorio perfecto para practicar
Ejercicios prácticos y ejemplos reales para dominar Git desde cero

🌟 ¡Apoya este proyecto/articulo!

Si esta guía te ha sido útil, puedes apoyarme de las siguientes maneras:

⭐ Dale una estrella a este repositorio

¡Haz clic en la ⭐ en la parte superior de esta página!

👨‍💻 Sígueme en GitHub

@ema28pro

[!TIP] Tu apoyo me motiva a crear más contenido educativo y mantener esta guía actualizada. ¡Gracias! 🙏

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
img		img
README.md		README.md

ema28pro/GitHub-Guide-Profile

Folders and files

Latest commit

History

Repository files navigation

Introducción a GitHub y pequeña Guía para el perfil de GitHub

📚 ¿Qué encontrarás en esta guía?

¿Que es GitHub?

Y que es un Repositorio?

Como crear una cuenta de GitHub

Primero buscamos en nuestro navegador prefierdo 'GitHub'

Y nos dirigmos a la ezquina superior derecha en 'Sing up' o Inscribirse/Registrarse

Para luego rellenar la informacion que nos piden

Y luego de verifiar tu correo, oficialmente ya tendrias tu cuenta de Git Hub

¿Por donde empezar?

Introducción a GitHub

Introducción a Git

Hello World

Git

Qué es Git?

Repositorios Git

Antes de usar Git debemos saber por qué lo necesitamos.

Documentación

Opciones de Integración

Rastrea cambios en tu código a través de versiones

Muestra tu trabajo

Markdown

Algunos tutoriales:

Qué es Markdown

Este es un ejemplo de los Titulos

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

y como tambien lee html se puede hacer con las etiquetas h1...h6

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

Esto es un titulo

Formato de Texto

También con HTML:

Subíndices y Superíndices:

Listas

Lista no ordenada

Lista ordenada

Lista de tareas

Lista HTML no ordenada

Lista HTML ordenada

Lista HTML con diferentes estilos

Lista de descripción (HTML)

Enlaces

Bloques de Código

Tablas

Tabla básica en Markdown

Con alineación

Tabla con HTML (más control)

Imágenes

Imagen básica

Imagen con título (tooltip)

Imagen con enlace

Imagen redimensionada con HTML

Imagen centrada con HTML

Imagen con borde y sombra

Citas

Cita con título

Anotaciones Especiales (GitHub Callouts)

Puedes usar títulos dentro

Desplegables (Collapsibles)

Puedes usar Markdown aquí también

Líneas Horizontales

Emojis

Alineación y Dimensiones con HTML

Alineación de texto

Alineación de imágenes

Dimensiones específicas

Imagen con dimensiones y estilo

Packages