Portafolio Tecnico 2026

Tema 1: La Estructura Invisible (HTML Semantico)

Una pagina profesional es robusta, facil de mantener y accesible. Esto se logra usando las etiquetas correctas de HTML5. Ya no usamos <div> para todo.

Por que? Le das un mapa a los motores de busqueda (mejora el SEO) y a los lectores de pantalla (mejora la accesibilidad).

Tema 2: Diseno Responsivo y Flexbox

La mayoria de los usuarios navega desde el celular. Para que los elementos se adapten y se alineen correctamente, usamos Flexbox.

.contenedor-padre {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  flex-wrap: wrap;         /* Permite que los elementos bajen si no hay espacio */
}

Demo de Flexbox:

Tema 3: CSS Grid (Layouts Profesionales)

Mientras Flexbox es ideal para alinear elementos en una sola fila o columna, CSS Grid es la herramienta definitiva para crear grillas y galerias en dos dimensiones (filas y columnas al mismo tiempo).

.galeria {
  display: grid;
  /* Crea 2 columnas del mismo tamano */
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; /* Espacio entre las cajas */
}

Demo de CSS Grid:

Tema 4: Estetica y CSS Moderno

El secreto de un diseno limpio es definir una paleta de colores usando Variables CSS en la raiz del documento.

:root {
  --color-texto: #333;
  --color-fondo: #FFF;
  --color-acento: #007bff;
}
body {
  color: var(--color-texto);
  background-color: var(--color-fondo);
}

Efectos como :hover y box-shadow le dan profundidad e interactividad a la interfaz.

Tema 5: Interaccion con JavaScript (El DOM)

JavaScript es el cerebro de la pagina. Nos permite leer interacciones del usuario (como clics) y modificar el HTML y CSS en tiempo real manipulando el DOM (Document Object Model).

// 1. Seleccionamos un boton del HTML por su ID
const boton = document.getElementById('miBoton');

// 2. Le agregamos un "escuchador de eventos"
boton.addEventListener('click', function() {
  // 3. Modificamos el estilo o las clases
  document.body.classList.toggle('dark-mode');
});

Asi es exactamente como funciona el boton del Modo Oscuro y el Carrusel de esta misma aplicacion web.

Tema 6: Flujo Profesional (Git y Deploy)

Control de Versiones con Git

Los programadores no guardan archivos como "proyecto_final_3.zip". Usamos Git para llevar un historial de cambios. El flujo de trabajo basico en la terminal es:

Despliegue (Deploy)