Estructuras Semánticas HTML5
Las etiquetas semánticas de HTML5 describen su significado tanto para el navegador como para el desarrollador, mejorando la accesibilidad y el SEO.
<header>
Cabecera principal o de una sección. Contiene logos, títulos o navegación introductoria.
<nav>
Contiene enlaces de navegación principales del sitio.
<main>
El contenido principal y único del documento. No debe haber más de uno por página.
<section>
Agrupa contenido temático. Usualmente contiene su propio encabezado (h2, h3).
<article>
Contenido independiente y autocontenido (ej. un post de blog o noticia).
<aside>
Contenido tangencial o barras laterales (publicidad, enlaces relacionados).
<footer>
Pie de página. Contiene información de copyright, enlaces legales o contacto.
Flexbox y Grid
En esta pagina encontraras todos los conocimientos que debes de tener para Flexbox y css Grid
justify-content
align-items for column
align-items for row
Aprende CSS Jugando
Fundamentos Javascript
Profundiza en la programación del lado del cliente. Aprende a manipular el DOM, manejar eventos, asincronía y crear lógica interactiva.
const fetchData = async () => {
try {
const res = await fetch('/api/data');
const data = await res.json();
if (data.success) {
document.getElementById('result')
.innerHTML = data.val;
}
} catch (error) {
console.error("Error fetching data", error);
}
};
document.getElementById('btn')
.addEventListener('click', fetchData);
Variables & Datos
Guarda información en memoria para usarla después.
let edad = 25;
const nombre = "Ana";
let esMayor = true;
let puede cambiar su valor luego.
const es inmutable.
Lógica & Control
El cerebro que decide qué camino de código ejecutar.
if (edad >= 18) {
entrar();
} else {
esperar();
}
Usa if / else para condicionales y
for / while para repetir acciones.
Funciones
Bloques de código reusables (pequeñas fábricas).
function saludar(user) {
return "Hola " + user;
}
saludar("Jordy");
Reciben parámetros de entrada y devuelven
(return) un resultado.
Eventos
Escucha las acciones de quien visita tu sitio web.
btn.addEventListener(
'click', () => {
alert("¡Click!");
});Detecta clics, tecleos o scroll para activar el código exacto de respuesta.
DOM
El puente entre tu código JS y el HTML que ves.
document
.querySelector('h1')
.style.color = 'red';
Te permite buscar, crear y modificar elementos visuales dinámicamente.
Asincronía (Fetch)
Llama información del servidor por debajo de la mesa.
await fetch('/users')
.then(r => r.json());
Pide datos a APIs externas (como PokéAPI) sin congelar ni recargar tu página.
Aprende JavaScript Jugando
Elevator Saga
Desarrolla algoritmos en JS para optimizar el movimiento y la lógica de varios ascensores.
JSRobot
Controla un robot escribiendo scripts en tiempo real para recoger monedas y superar niveles.
Untrusted
Un desafiante juego roguelike donde debes modificar el código fuente en JS para sobrevivir.