HTML describe contenido y estructura; CSS define apariencia; JavaScript responde a acciones y transforma datos. El navegador interpreta los tres. Un servidor puede entregar archivos y un backend puede procesar datos privados, pero tu primer proyecto funcionará sin backend. Esta separación reduce decisiones mientras aprendes el flujo completo.
Construiremos Focus Board: una lista de tareas para creadores. Podrás añadir una tarea, marcarla y borrarla. El almacenamiento local conserva tareas en ese navegador; no sincroniza dispositivos y puede borrarse. No lo uses para contraseñas, datos sensibles o información cuya pérdida sea crítica. La app de referencia es educativa y monousuario.
La IA puede proponer código que parece correcto y aun así falla. Tu trabajo es describir el comportamiento, revisar el cambio y comprobarlo. No necesitas memorizar cada API, pero sí identificar entrada, estado, transformación y salida. Mantén una copia funcional antes de cada cambio para poder volver atrás.
Ejemplo resuelto
Entrada: ‘Editar reel’. Estado: una lista de objetos con id, text y done. Transformación: añadir un objeto al enviar el formulario. Salida: una fila con casilla y botón de eliminar. Persistencia: serializar la lista como JSON en localStorage. Hosting: servir index.html por HTTPS.
Hazlo tú
Dibuja el recorrido desde que escribes una tarea hasta que reaparece al recargar. Explica qué cambia si abres la app en otro navegador.
CAPA | RESPONSABILIDAD | EJEMPLO EN MI APP HTML | | CSS | | JavaScript | | Almacenamiento | | Hosting | | LIMITACIONES DEL PROYECTO:
Puedes describir cada capa sin decir ‘la IA lo hace’. Reconoces que localStorage no es una base de datos compartida. Identificas dónde empieza y termina el alcance de esta app.