CodeDragon | Aprende fácilmente HTML y CSS con este editor de código online
Publicado el 13 de junio de 2019 · Niwo
CodeDragon es una herramienta excelente para aquellos que están dando sus primeros pasos en la programación web, especialmente con HTML y CSS. La clave de su efectividad reside en su enfoque visual: permite comprender el funcionamiento del código a través de bloques gráficos que muestran cómo se abren y cierran las etiquetas. Esto facilita enormemente la comprensión tanto de HTML como de CSS para los principiantes.

Plantilla “Landing page with custom CSS” - CodeDragon
¿Cómo utilizar CodeDragon?
Como se puede apreciar en la imagen anterior, las etiquetas se organizan como piezas de un rompecabezas o un puzle. Esto facilita la orientación desde el principio, gracias a su sistema de colores intuitivo:
- Azul: Estructura
- Verde: Modificadores
- Morado: Estilos
- Amarillo: Texto
- Naranja: Tablas, Listas y elementos organizativos.
- Celeste: Formularios
- Rosado Oscuro: Multimedia (Imágenes, Vídeos, Audios)
Entendemos que la elección de colores es subjetiva. Para aquellos a quienes no les convenzan los colores asignados, se incluye una imagen donde se pueden apreciar con mayor claridad todos los colores tal como aparecen en el editor:

Bloques de código - CodeDragon
CodeDragon es particularmente útil para quienes están comenzando a trabajar con HTML, ya que ofrece una ayuda visual constante y evita la sensación de enfrentarse a un mar de código incomprensible. Además, incluye pequeños tutoriales que facilitan el aprendizaje específico tanto de HTML como de CSS. En resumen, CodeDragon proporciona una experiencia amigable e intuitiva para aprender HTML y CSS de forma sencilla.


