Guía de estudio autodidacta. Ruta ordenada de recursos seleccionados para aprender la estructura, la forma y el movimiento de la web.
~200 h8 tramos53 katasSin requisitos previosEn construcción
形
La estructura sostiene. La forma seduce. El movimiento convence. Ninguna de las tres basta sola.
Códice del Tigre · Rollo de la Interfaz
道
En este Dojo usamos vocabulario propio: un Tramo es un módulo, una Kata es un capítulo y una Técnica es una sección. Nada más. Puedes consultarlo siempre al pie de la página.
Al terminar
Qué vas a poder hacer
No es una lista de tecnologías: es una lista de cosas que sabrás construir sin pedir ayuda.
Maquetar una página completa con HTML semántico y accesible.
Componer cualquier layout con Flexbox y Grid, sin trucos ni parches.
Hacer que una web funcione bien en un móvil y en un monitor de 27".
Escribir JavaScript que manipule el DOM y consuma APIs reales.
Montar un proyecto con Vite, linters y despliegue automático.
Construir interfaces por componentes, con o sin framework.
Medir y corregir el rendimiento y la accesibilidad de tu propio código.
Publicar un portafolio que aguante la mirada de un reclutador.
Antes de escribir una sola línea de código conviene entender dónde se va a ejecutar. Casi todo el mundo se salta este tramo y luego pasa meses arrastrando lagunas: no sabe por qué su página funciona al abrirla con doble clic pero se rompe al subirla, no entiende qué le está diciendo la pestaña Network, no distingue un error de red de un error de código.
Aquí no se aprende a programar. Se aprende el terreno: cómo viaja la información entre tu ordenador y un servidor, qué hace exactamente un navegador cuando recibe un archivo, y qué herramientas vas a tener abiertas cada día durante los próximos años.
Es el tramo más corto y el que más veces vas a agradecer. Cuatro katas, unas 12 horas. Las dos últimas son deliberadamente breves: Git y el método de estudio dan para cursos enteros, así que aquí sólo verás lo mínimo para arrancar y un enlace al anexo completo.
01 Cómo funciona la web
02 El entorno de trabajo
03 Git y GitHub — Quick Start
04 Cómo estudiar — Quick Start
Tramo 00 · Kata 01
Cómo funciona la web
Cliente y servidor, petición y respuesta. Cuando escribes una dirección y pulsas Enter se dispara una cadena de acontecimientos que conviene poder narrar de memoria: resolución DNS, petición HTTP, código de estado, descarga de recursos, construcción del DOM, pintado en pantalla.
No necesitas dominar el detalle de cada paso. Necesitas el mapa mental: saber en qué punto de esa cadena está ocurriendo lo que estás viendo. Con eso, la mitad de los errores futuros dejan de ser misteriosos.
Un editor, un navegador y una terminal. Poco más necesitas durante mucho tiempo, y conviene resistirse a la tentación de instalar veinte extensiones antes de haber escrito nada.
Lo importante de esta kata no es la instalación —eso lo resuelve cualquier tutorial en diez minutos— sino las DevTools del navegador. Inspeccionar un elemento, leer la consola, ver una petición de red: son las tres herramientas que vas a usar literalmente todos los días.
Curso oficial · MDN Web Docs · Instalación y navegadores
Tramo 00 · Kata 03
Git y GitHub — Quick Start
Git merece un sendero propio y lo tendrá. Es un sistema de control de versiones: guarda fotografías del estado de tu proyecto para que puedas volver atrás, probar cosas sin miedo y trabajar con otras personas sin pisaros el código.
Por ahora, con esto arrancas. No necesitas más durante los primeros meses.
Los cuatro movimientos base
Instalar Git y crear una cuenta en GitHub.
Crear un repositorio y clonarlo en tu ordenador.
El ciclo diario:add → commit → push. Guardar, describir qué has hecho, subirlo.
Publicar con GitHub Pages: tu primera web en internet, gratis, en dos clics.
Si ya usas Git a diario, o si prefieres volver a esto más adelante, puedes saltar esta kata sin perder el hilo del sendero. Nada de lo que viene después depende de ella.
Esta es la kata más personal del sendero y la única sin fuentes externas, porque no habla de tecnología sino del método. Aprender a programar de forma autodidacta tiene una dificultad que nadie avisa: el problema no es la falta de información, es el exceso.
El dojo no impone una forma de entrenar. Pero sí puede ahorrarte los cuatro errores que casi todo el mundo comete al principio.
Cuatro principios para empezar
Un recurso a la vez. Terminar un curso mediocre enseña más que empezar cinco excelentes.
Escribe el código, no lo copies. Teclear a mano activa algo que copiar y pegar no activa.
La documentación oficial no es para expertos. Es para ti. Cuanto antes te acostumbres a MDN, antes dejas de depender de tutoriales.
Construye cosas inútiles. Un proyecto propio y ridículo enseña más que diez ejercicios corregidos.
Si ya tienes un método que te funciona, ignora esto por completo. De las mil técnicas, uno entrena la que se adapta a él.
HTML es el esqueleto. Define qué es cada cosa, no cómo se ve: esto es un título, esto un párrafo, esto un formulario de contacto. La tentación del principiante es tratarlo como algo trivial que se despacha en una tarde para llegar cuanto antes a lo bonito.
Es un error caro. Un HTML mal estructurado condena todo lo que venga después: el CSS se llena de parches, la accesibilidad se vuelve imposible, el SEO no despega y el JavaScript tiene que pelearse con el documento en lugar de apoyarse en él. La mitad de los problemas que la gente atribuye a CSS son en realidad problemas de HTML.
Este tramo es corto en conceptos y largo en criterio. Siete katas, unas 25 horas. Cuando termines, sabrás elegir el elemento correcto en lugar de poner un <div> por defecto.
Libro · J. N. Robbins & A. Gustafson · O'Reilly · EN
Tramo 01 · Kata 01
Anatomía del documento
El DOCTYPE, el <head> y el <body>. Etiquetas, atributos, anidamiento y cierre. La gramática básica de un documento HTML se aprende en una tarde y se usa para siempre.
Presta atención a una idea que aquí parece menor y luego es central: el HTML no es una lista de instrucciones, es un árbol. Todo lo que hará después el CSS (heredar estilos, seleccionar descendientes) y el JavaScript (recorrer el DOM) depende de que entiendas esa estructura jerárquica.
Encabezados jerárquicos, párrafos, énfasis, citas, listas ordenadas y no ordenadas, listas de definición y tablas de datos.
Dos avisos que ahorran años: los encabezados h1–h6 son una jerarquía, no tamaños de letra —saltarse niveles rompe la navegación de un lector de pantalla—; y las tablas son para datos tabulares, nunca para maquetar. Ambas cosas parecen obviedades y ambas se incumplen constantemente en producción.
Tramo 01 · Kata 03
Enlaces, rutas y navegación
El enlace es el elemento que define la web: sin él sería un montón de documentos aislados. Rutas absolutas y relativas, anclas internas, enlaces de descarga, correo y teléfono.
Aquí aparece el primer punto donde mucha gente se atasca sin saberlo: la diferencia entre /carpeta/ y carpeta/. Entender bien las rutas relativas te evitará el clásico "en mi ordenador funcionaba".
Tramo 01 · Kata 04
Imágenes y multimedia
La etiqueta <img> y su atributo alt, imágenes responsivas con srcset y <picture>, vídeo y audio nativos, y una introducción a SVG.
El alt no es un campo opcional que se rellena por cumplir: es el texto que oirá alguien que no puede ver la imagen. Escribirlo bien es una habilidad en sí misma, y aquí empieza a practicarse.
Tramo 01 · Kata 05
Formularios y controles
Campos de texto, selecciones, casillas, botones, label, agrupaciones con fieldset y validación nativa del navegador.
Los formularios son la parte más subestimada de HTML y la que más valor aporta: el navegador ya trae validación, teclados adaptados en móvil, autocompletado y accesibilidad, todo gratis, si usas los elementos y tipos correctos. Cada vez que alguien reimplementa un desplegable con <div> está renunciando a todo eso.
Tramo 01 · Kata 06
Semántica y accesibilidad base
Los elementos de sección —header, nav, main, article, section, aside, footer— y qué significa cada uno realmente. Introducción a ARIA, orden del foco y navegación por teclado.
Esta es la kata bisagra del tramo. La accesibilidad no es una capa que se añade al final: se decide aquí, al elegir cómo se estructura el documento. Un HTML semántico correcto resuelve de entrada el 80% de los requisitos de accesibilidad, y ningún ARIA arregla un HTML mal construido.
Todo lo que vive en el <head> y nadie ve: title, meta description, viewport, idioma, canonical, favicon y las etiquetas Open Graph que deciden cómo se ve tu enlace cuando alguien lo comparte.
Es la kata menos vistosa del tramo y la que más impacto tiene en si tu trabajo lo encuentra alguien. Una web que nadie encuentra es una web que no existe.
形
Tramo 02
Forma — CSS
CSS tiene una fama injusta de lenguaje caprichoso. La realidad es que es un lenguaje profundamente sistemático cuyas reglas casi nadie se molesta en aprender: la gente memoriza propiedades sueltas, choca contra la cascada, y concluye que CSS "no funciona".
Este tramo invierte ese orden. Primero los mecanismos que gobiernan todo —cascada, especificidad, herencia, modelo de caja, flujo normal— y sólo después las herramientas de composición. Cuando entiendes por qué un estilo gana a otro, dejas de escribir !important para siempre.
Nueve katas, unas 45 horas. Es el tramo más largo y el que más diferencia marca entre alguien que maqueta y alguien que diseña en código.
Los cuatro mecanismos que deciden qué estilo se aplica cuando dos reglas compiten: origen, especificidad, orden de aparición e importancia. Y el quinto que casi nadie nombra: la herencia.
Si sólo pudieras estudiar una kata de todo el tramo, sería esta. Casi todo el dolor que la gente asocia a CSS nace de no entender la cascada.
Contenido, relleno, borde y margen. box-sizing, colapso de márgenes, contextos de formato, display en bloque y en línea, y cómo se posicionan los elementos antes de que toques nada.
El flujo normal ya hace mucho por ti. Buena parte de aprender CSS consiste en dejar de pelearse con él.
Espacios de color y notaciones modernas, fuentes web y su carga, escalas tipográficas, altura de línea, medida de columna y contraste.
Aquí el sendero se cruza con el diseño. No hace falta ser diseñador, pero sí conocer las decisiones que hacen que un texto se lea con comodidad: son reglas antiguas, anteriores a la web, y siguen vigentes.
El sistema de composición en una dimensión: una fila o una columna, con reparto flexible del espacio disponible. Es la herramienta que resuelve la mayoría de los componentes de interfaz: barras de navegación, tarjetas, botones alineados, centrados verticales.
Flexbox se entiende de golpe en cuanto asimilas que todo gira alrededor de dos ejes: el principal y el cruzado. Todas las propiedades son variaciones sobre esa idea.
Eje principal y eje cruzado
Todo en Flexbox se define respecto a dos ejes perpendiculares. Entender cuál es cuál en cada momento resuelve el 90% de la confusión inicial.
El contenedor: display, flex-direction, flex-wrap
Las tres propiedades que se aplican al padre y establecen las reglas del juego para todos los hijos.
Reparto a lo largo del eje principal y colocación respecto al eje cruzado. La fuente eterna de confusión, y también la razón por la que centrar dejó de ser un problema.
Los ítems: grow, shrink, basis, order, align-self
Propiedades que se aplican a cada hijo por separado. flex: 1 es un atajo que conviene saber desplegar mentalmente.
Patrones resueltos
Barra de navegación con logo a un lado y menú al otro, centrado perfecto, y el clásico holy grail.
Cuándo Flexbox y cuándo Grid
Regla práctica: si el contenido decide la distribución, Flexbox. Si la rejilla decide dónde cae el contenido, Grid.
Artículo de referencia · CSS-Tricks · Con diagramas y demos · EN
Tramo 02 · Kata 05
Grid
El sistema de composición en dos dimensiones: filas y columnas a la vez. Donde Flexbox resuelve componentes, Grid resuelve páginas enteras.
Grid tiene más vocabulario que Flexbox y una curva algo más lenta, pero recompensa: layouts que antes exigían mil líneas de trucos se expresan ahora en cinco declaraciones legibles.
Media queries, unidades relativas y fluidas, clamp(), imágenes adaptables y container queries.
"Mobile-first" no es una moda estética: es una disciplina de diseño. Empezar por la pantalla más restringida te obliga a decidir qué es esencial, y esa decisión mejora también la versión de escritorio.
Propiedades personalizadas (--var), convenciones de nomenclatura tipo BEM, capas de cascada y la idea de design token: un valor con nombre y significado, no un número suelto.
Es la kata que separa un CSS que funciona de un CSS que se puede mantener seis meses después. Todo el dojo que estás leyendo está construido sobre estos principios.
Guía de referencia · getbem.com · La convención de facto · EN
Tramo 02 · Kata 08
Transiciones y animación
Transiciones, transformaciones, @keyframes, curvas de aceleración y rendimiento del movimiento.
Dos criterios que conviene fijar aquí: anima sólo transform y opacity si quieres 60 fps, y respeta siempre prefers-reduced-motion. El movimiento debe informar, no decorar.
:has(), anidamiento nativo, clamp(), subgrid, capas de cascada, @container y las View Transitions.
CSS ha cambiado más en los últimos cuatro años que en los quince anteriores. Buena parte de lo que un tutorial de 2019 resolvía con JavaScript hoy se hace con tres líneas de CSS. Esta kata es la que más deprisa envejece: revísala cada cierto tiempo.
Doc oficial · MDN Web Docs · Referencia técnica · EN
動
Tramo 03
Movimiento — JavaScript
Aquí la web deja de ser un documento y pasa a ser un programa. JavaScript es el primer lenguaje de programación de verdad del sendero: variables, funciones, estructuras de datos, control de flujo, asincronía.
Es también el tramo donde más gente abandona, casi siempre por el mismo motivo: intentan aprender el DOM y frameworks antes de dominar el lenguaje. El orden aquí es deliberado — primero el idioma, después el navegador. Las seis primeras katas apenas tocan una página web.
Diez katas, unas 55 horas. Tómatelo con calma: este tramo es el que sostiene todo lo que viene después.
Tipos primitivos, variables (let, const), operadores, coerción de tipos, condicionales y bucles.
La coerción —esa manía de JavaScript de convertir tipos sin avisar— es la fuente de la mitad de las bromas sobre el lenguaje. Entenderla en lugar de temerla es lo que separa a quien usa === por costumbre de quien sabe por qué.
Manual · lenguajejs.com (ManzDev) · En español nativo · ES
Tramo 03 · Kata 02
Funciones, ámbito y closures
Declaración y expresión, funciones flecha, parámetros y valores por defecto, ámbito léxico, hoisting y closures.
Las closures son el concepto que más veces hay que estudiar dos veces, y el que más rendimiento da a largo plazo: están debajo de los módulos, del estado en React y de casi cualquier patrón elegante de JavaScript.
Seleccionar elementos, leer y modificar contenido y atributos, crear y eliminar nodos, y manipular clases.
Aquí vuelve el árbol del que hablábamos en el Tramo 01. El DOM no es "JavaScript": es una API que el navegador expone para que tu programa toque el documento. Distinguir esas dos cosas evita mucha confusión posterior.
addEventListener, el objeto evento, propagación y captura, y la delegación de eventos.
La delegación es una de esas técnicas que parecen un truco y son en realidad la forma correcta: un solo listener en el contenedor en vez de cien en los hijos. Este mismo sendero la usa para el índice.
El bucle de eventos, callbacks, promesas, async/await y manejo de errores asíncronos.
Comprender el bucle de eventos es el momento en que JavaScript deja de parecer impredecible. Merece la pena dedicarle el tiempo que haga falta: es el concepto más importante del tramo.
La API fetch, métodos y códigos HTTP, formato JSON, cabeceras, CORS y gestión de estados de carga y error.
Aquí se cierra el círculo que abrió el Tramo 00: ahora eres tú quien lanza la petición. También aparece CORS, que confundirá a todo el mundo exactamente una vez.
Doc oficial · MDN Web Docs · Referencia técnica · EN
Tramo 03 · Kata 10
Errores, depuración y DevTools
try/catch, tipos de error, puntos de interrupción, inspección del ámbito y perfilado básico.
Depurar es una habilidad independiente de programar y se entrena aparte. console.log resuelve el 70% de los casos; los puntos de interrupción resuelven el 30% que de verdad te bloquea.
Doc oficial · Chrome DevTools · Puntos de interrupción · EN
具
Tramo 04
El Taller — herramientas
Hasta aquí has trabajado con un editor y un navegador, y ha bastado. A partir de cierto tamaño de proyecto deja de bastar: necesitas un servidor de desarrollo, un empaquetador, reglas automáticas de calidad y una forma de publicar que no consista en arrastrar archivos por FTP.
Este tramo tiene una trampa conocida: el ecosistema de herramientas cambia cada dos años y es muy fácil perderse configurando en lugar de construyendo. La estrategia del dojo es deliberadamente austera — aprende la herramienta cuando el proyecto te la pida, no antes.
Seis katas, unas 25 horas.
01 Terminal y npm
02 Bundlers y servidor de desarrollo
03 Calidad automática: linters y formateo
04 Preprocesadores y utilidades CSS
05 Diseño y prototipado: Figma y tokens
06 Despliegue
Tramo 04 · Kata 01
Terminal y npm
Comandos básicos de shell, Node.js, package.json, dependencias y scripts, y el eterno debate npm / pnpm / yarn.
La terminal intimida hasta que descubres que usas siempre los mismos ocho comandos.
Qué problema resuelve un empaquetador, recarga en caliente (HMR), y configuración de un proyecto con Vite.
Vite es hoy la opción por defecto razonable: arranca en milisegundos y su configuración cabe en diez líneas. Si tu tutorial habla de Webpack y archivos de configuración de doscientas líneas, es probable que sea antiguo.
ESLint para detectar errores y malas prácticas, Prettier para el formato, EditorConfig para la coherencia entre editores.
La regla de oro: el linter opina sobre el código, el formateador sobre el aspecto. Mezclar ambos genera conflictos, y por eso existe eslint-config-prettier.
Doc oficial · Prettier · Incluye integración con ESLint · EN
Tramo 04 · Kata 04
Preprocesadores y utilidades CSS
Sass y PostCSS, y el enfoque de utilidades de Tailwind.
Aviso importante: a partir de Tailwind v4 ya no se combina con Sass. Tailwind es su propio preprocesador y hace por sí mismo el anidamiento, las variables y los prefijos. Casi todos los tutoriales anteriores a 2025 dicen lo contrario. Vale la pena leer directamente su página de compatibilidad antes de montar nada.
Llegados a cierto tamaño, una interfaz deja de organizarse por páginas y pasa a organizarse por piezas reutilizables. Ese cambio de mentalidad —pensar en componentes— es más importante que cualquier framework concreto.
Por eso este tramo empieza por los Web Components nativos antes de tocar React. No porque vayas a usarlos siempre, sino porque enseñan el concepto sin la magia de por medio. Cuando después veas React, entenderás qué está resolviendo en lugar de memorizar sintaxis.
Seis katas, unas 30 horas.
01 Pensar en componentes
02 Web Components nativos
03 React: JSX, props, estado
04 Hooks y efectos
05 Enrutado y estado global
06 El mapa de alternativas
Tramo 05 · Kata 01
Pensar en componentes
Descomponer una interfaz en piezas, decidir sus límites, distinguir estado de propiedades y diseñar la comunicación entre ellas.
Esta kata no tiene código propio. Es criterio, y se aplica igual en React, en Vue o en JavaScript puro.
Componentes como funciones, JSX, paso de propiedades, estado local con useState, renderizado condicional y listas.
La documentación oficial de React se reescribió por completo en 2023 y hoy es uno de los mejores materiales de aprendizaje que existen para cualquier tecnología. Empieza por ahí, no por un curso de vídeo.
useEffect, useRef, useMemo, useCallback, hooks propios y el ciclo de vida real de un componente.
Aviso: useEffect se usa mal en la mayoría del código que verás por ahí. La documentación oficial tiene una página entera titulada "puede que no necesites un efecto" — léela antes que ninguna otra.
Vue, Svelte, Astro, Next. Qué resuelve cada uno, en qué se diferencian y cómo elegir con criterio. También los modelos de renderizado: cliente, servidor y generación estática.
Saber cuándo no necesitas un framework es una habilidad tan valiosa como saber usarlo — este mismo dojo está escrito en JavaScript sin frameworks, y es una decisión, no una limitación.
Que algo funcione es el punto de partida, no la meta. Este tramo trata de lo que separa un proyecto de estudiante de un proyecto profesional: que sea rápido, que lo pueda usar cualquiera, que no se rompa al tocarlo y que no exponga a sus usuarios.
Es también el tramo que más te va a diferenciar en una entrevista. Mucha gente sabe montar una interfaz; bastante menos sabe medir por qué tarda cuatro segundos en cargar y arreglarlo.
Seis katas, unas 30 horas.
01 Rendimiento y Core Web Vitals
02 Imágenes, fuentes y carga
03 Accesibilidad real y auditoría
04 Seguridad frontend
05 Testing
06 PWA y Service Workers
Tramo 06 · Kata 01
Rendimiento y Core Web Vitals
LCP, CLS e INP: las tres métricas con las que Google mide la experiencia real de tus usuarios. Cómo medirlas con Lighthouse y con datos de campo, y cómo interpretarlas.
El rendimiento no es una optimización de última hora: es una funcionalidad. Y a diferencia de casi todo lo demás en este sendero, aquí hay números objetivos que te dicen si vas bien.
Formatos modernos, dimensionado, carga diferida, estrategias de carga de fuentes, preload y división del código.
En la mayoría de webs lentas el culpable es el mismo: imágenes enormes y fuentes mal cargadas. Esta kata es la de mejor relación esfuerzo/resultado de todo el sendero.
Artículo · web.dev (Google) · Cuándo NO diferir · EN
Tramo 06 · Kata 03
Accesibilidad real y auditoría
WCAG y sus cuatro principios —perceptible, operable, comprensible y robusto—, niveles de conformidad A/AA/AAA, navegación con lector de pantalla y auditoría con herramientas automáticas.
Retomamos lo sembrado en el Tramo 01, ahora con el estándar delante. Una advertencia: las herramientas automáticas detectan como mucho un tercio de los problemas reales. El resto se encuentra usando la web con el teclado.
XSS, sanitización de entradas, Content Security Policy, CORS y manejo seguro de tokens en el navegador.
Regla que resume la kata entera: nunca metas contenido de usuario con innerHTML. Usa textContent. Casi todo lo demás son variaciones de esa misma disciplina.
Este tramo no tiene biblioteca externa, y es deliberado. Aquí no se estudia: se construye. Tres proyectos de dificultad creciente que obligan a integrar todo lo anterior, y dos katas finales sobre cómo presentarte y cómo seguir aprendiendo cuando ya no haya un sendero que seguir.
Nadie contrata a alguien por los cursos que ha terminado. Te contratan por lo que has construido y por cómo lo explicas. Cinco katas, el tiempo que haga falta.
01 Proyecto I — estático
02 Proyecto II — dinámico con API
03 Proyecto III — aplicación con framework
04 Portafolio, GitHub y lectura de código ajeno
05 Fuentes vivas: mantenerse actualizado
Tramo 07 · Kata 01
Proyecto I — estático
Un sitio de varias páginas, semántico, responsive y accesible, desplegado con dominio propio. Sin JavaScript más allá de lo imprescindible.
Objetivo: demostrar que dominas HTML y CSS sin muletas.
Tramo 07 · Kata 02
Proyecto II — dinámico con API
Una aplicación que consume una API pública, gestiona estados de carga y error, guarda preferencias del usuario y funciona razonablemente con mala conexión.
Objetivo: demostrar que entiendes la asincronía y el manejo de datos reales.
Tramo 07 · Kata 03
Proyecto III — aplicación con framework
Una aplicación por componentes con enrutado, estado compartido, pruebas y despliegue continuo.
Objetivo: demostrar que puedes trabajar en un proyecto con la forma que tienen los proyectos profesionales.
Tramo 07 · Kata 04
Portafolio, GitHub y lectura de código ajeno
Cómo presentar tus proyectos, qué cuenta un perfil de GitHub, cómo escribir un README que alguien lea, y cómo leer código que no has escrito tú.
Esa última habilidad es la que más se usa en un trabajo real y la que menos se entrena en cualquier curso.
Tramo 07 · Kata 05
Fuentes vivas: mantenerse actualizado
Boletines, blogs, especificaciones, notas de versión de los navegadores y comunidades. Cómo distinguir una novedad relevante de un titular.
El sendero termina aquí, pero el camino no. La última técnica del dojo es aprender a decidir tú mismo qué merece tu atención. De las mil técnicas, uno entrena la que se adapta a él.
Vocabulario del Dojo:
Tramo = módulo ·
Kata = capítulo ·
Técnica = sección
Estado del contenido: ○ esbozo · ◐ en curso · ● completo. Este sendero crece de forma continua.