Empieza aquí — ruta de desarrollo web con JavaScript
Cómo usar esta biblioteca
Sección titulada «Cómo usar esta biblioteca»Si estás empezando, sigue un recorrido y construye algo pequeño en cada etapa. Si ya programas, busca el problema concreto, revisa los requisitos y compara el resultado con la sección de comprobación. Una receta ilustra una implementación; antes de copiarla, identifica en qué entorno corre y qué piezas debes adaptar.
No necesitas aprender todos los frameworks ni servicios. Elige uno para practicar y regresa a las alternativas cuando tengas una necesidad que puedas explicar.
Recorrido desde cero
Sección titulada «Recorrido desde cero»| Etapa | Lectura inicial | Ejercicio y criterio para continuar |
|---|---|---|
| 1. Entorno | Terminal y Node.js | Crear una carpeta, ejecutar un archivo e interpretar un error |
| 2. Documento | HTML | Página con encabezados, enlaces y formulario que tenga etiquetas |
| 3. Presentación | CSS | Adaptar esa página a móvil sin ocultar información necesaria |
| 4. Lógica | Primeros pasos con JavaScript | Leer entradas, transformar un array y actualizar texto con un evento |
| 5. Asincronía y red | Promesas y Fetch | Mostrar estados de carga, éxito, vacío y error |
| 6. Historial | Git | Guardar cambios pequeños, revisar un diff y recuperar una versión |
| 7. Contratos | TypeScript | Distinguir un error de tipos de un dato externo inválido |
| 8. Aplicación | Frontend y API con Node | Conectar una interfaz con una API local que valide entradas |
| 9. Datos | Fundamentos de bases de datos | Persistir datos y comprobar una restricción ante entradas duplicadas |
| 10. Calidad y entrega | Testing y CI/CD | Reproducir el proyecto desde cero, comprobarlo y explicar cómo desplegar y volver atrás |
Integra accesibilidad y seguridad desde los primeros ejercicios. No son fases que se añaden solo al terminar.
Proyecto conductor: una lista de tareas
Sección titulada «Proyecto conductor: una lista de tareas»Usa el mismo problema para reconocer conceptos entre categorías:
- En HTML/CSS, crea el listado y el formulario con un botón que se pueda activar por teclado.
- En JavaScript, añade tareas en memoria y muestra el estado vacío. Usa
textContentpara texto del usuario. - Con Fetch, consume la API de tareas. Diferencia un fallo de red de un error HTTP.
- Con TypeScript, modela la tarea y valida los datos que entran. Una anotación no impide recibir JSON incorrecto.
- Con una base de datos, persiste la tarea. Reiniciar el proceso ya no debe borrarla.
- Con autenticación, asigna un propietario desde la sesión del servidor. Cambiar un id en la solicitud no debe permitir editar tareas ajenas.
- Añade una prueba de creación válida, otra de entrada inválida y otra de acceso ajeno. Documenta el resultado de las tres.
El criterio de éxito es explicar dónde vive cada responsabilidad y reproducir el resultado. Copiar un ejemplo que funciona una vez no demuestra todavía que sepas diagnosticarlo.
Elegir la siguiente categoría
Sección titulada «Elegir la siguiente categoría»| Necesidad | Dónde continuar |
|---|---|
| Organizar módulos y evitar dependencias confusas | Arquitectura |
| Diseñar estados, formularios y componentes | UI / UX |
| Usar el sitio con teclado o lector de pantalla | Accesibilidad |
| Proteger sesiones, secretos y datos | Seguridad |
| Medir carga o consultas lentas | Rendimiento |
| Entender rastreo e indexación | SEO |
| Elegir herramientas del entorno | Aplicaciones |
| Encontrar material para practicar | Cursos y recursos |
| Estudiar proyectos reales | Hallazgos |
| Interpretar comparaciones sin elegir solo por un ranking | Benchmarks |
| Programar una función que usa un modelo | IA SDK |
| Trabajar con asistentes de programación | Agentes y IA Tools |
Si vienes a recordar una implementación
Sección titulada «Si vienes a recordar una implementación»Lee en este orden: objetivo, versión y requisitos, bloque relevante, comprobación y límites. Si un ejemplo importa un helper, abre su guía antes de inventar su comportamiento. Si dice «fragmento», intégralo en el archivo correspondiente; no lo ejecutes como un programa completo.
Mantén una pequeña nota al adaptar una receta: versión utilizada, decisión tomada y prueba que confirma el resultado. Así tu siguiente consulta recuperará también el contexto.