HTML Code Play: Learn HTML

Aprende desarrollo web modificando el código y viendo su funcionamiento. HTML Code Play combina lecciones de HTML, CSS y JavaScript con un editor de código móvil, ejemplos ejecutables, cuestionarios y juegos de programación. Úsalo para estudiar un concepto, practicarlo y llevar un registro de tu aprendizaje en el mismo dispositivo.
LEE, EDITA Y EJECUTA
Explora el catálogo de aprendizaje, abre un tutorial y lee su explicación junto con un ejemplo de código completo. Envía el ejemplo al editor, ejecuta el original, luego modifica una etiqueta, estilo o expresión y compara el resultado. Este flujo de trabajo práctico conecta la sintaxis que lees con la página o el comportamiento que crea.
El espacio de trabajo admite la edición de HTML, CSS y JavaScript con resaltado de sintaxis. Usa deshacer y rehacer mientras experimentas, busca texto, salta a una línea y ajusta el tamaño de la fuente del editor. Crea una página nueva o elige una plantilla disponible cuando quieras un punto de partida. Abre archivos HTML, guarda tu trabajo, usa Guardar como para crear otra copia o comparte un archivo de código a través de las opciones para compartir de tu dispositivo.
APRENDIZAJE Y PRÁCTICA GUIADOS
El catálogo abarca 11 temas de tecnología web, desde la estructura y el estilo de las páginas hasta la programación, los gráficos vectoriales, los diseños responsivos y los ejemplos interactivos. Busca lecciones por título o sección para acceder al material que necesitas. Guarda los tutoriales útiles para un repaso específico, añade tus propias notas y navega entre ellos con los controles Anterior y Siguiente.
Cada tutorial incluye explicación, sintaxis y un ejemplo práctico. Repasa el tema con un cuestionario o un ejercicio práctico. Los ejercicios prácticos te piden que completes el código que falta, con pistas y comentarios para ayudarte a identificar los detalles que pasaste por alto. Los resultados del cuestionario te permiten comprobar tu comprensión antes de volver a la lección.
SEIS FORMAS DE PRACTICAR
Elige un juego de programación para trabajar en una habilidad diferente:
- Creador de código: reordena bloques para reconstruir código funcional.
- Detective de salida: predice qué produce un fragmento de código.
- Cazador de errores: identifica una línea con errores.
- Completa el hueco: elige el token de código que falta.
- Laboratorio de correspondencias: relaciona términos con sus significados. - Preguntas rápidas: responde preguntas de verdadero o falso contrarreloj.
Los niveles de actividad registran los resultados y desbloquean el siguiente paso. Repite los niveles disponibles para mejorar tu puntuación o utiliza listas de reproducción de práctica mixtas a medida que estén disponibles.
MANTÉN TU APRENDIZAJE ORGANIZADO
La pantalla de progreso resume las lecciones, cuestionarios y prácticas revisadas por tecnología. Consulta tu mapa de habilidades y el plan de estudio sugerido, continúa una lección desde la página de inicio y acepta un desafío diario. Las rachas y las insignias de desafío hacen visible tu actividad. Los recordatorios de aprendizaje opcionales requieren permiso para recibir notificaciones y se pueden desactivar.
Tu progreso en las lecciones, notas y resultados de los juegos se almacenan en el dispositivo. Los controles de la pantalla de aprendizaje incluyen fuentes más grandes, alto contraste y menor movimiento. Las evaluaciones independientes de HTML, CSS y JavaScript ofrecen certificados de logros dentro de la aplicación; estos son registros de aprendizaje de la aplicación, no una titulación acreditada.
Las publicaciones de la comunidad en línea ofrecen otra fuente de código para explorar cuando estés conectado. El contenido respaldado por la red y los ejemplos que cargan recursos externos requieren acceso a internet; el almacenamiento local del progreso no proporciona sincronización en la nube.
Para principiantes, estudiantes y aprendices que estén repasando conceptos de desarrollo front-end, comiencen con un ejemplo, hagan un pequeño cambio y desarrollen la comprensión mediante la práctica.