Manual de Usuario 📘 Editor Interactivo de HTML/CSS
🎯 ¿Qué es este editor?
Este editor es una herramienta interactiva que te permite escribir código HTML y CSS, y ver los resultados inmediatamente en una vista previa. Es perfecto para aprender, practicar y
experimentar con diseño web sin necesidad de instalar ningún programa en tu computadora.
🖥️ Descripción de la Interfaz
El editor está dividido en tres secciones principales:
1. Código HTML
(esquina superior izquierda - fondo verde claro)
2. Código CSS
(esquina inferior izquierda - fondo azul claro)
3. Vista Previa
(lado derecho completo - fondo gris)
💡 Nota importante:
Los colores de fondo en cada editor (verde para HTML, azul para CSS) están diseñados para facilitar la lectura y reducir la fatiga visual. El texto en cada sección tiene un color que contrasta
bien con su fondo.
✏️ Cómo Escribir Código HTML
Paso 1:
Haz clic dentro del área de
Código HTML
(la sección con fondo verde claro en la parte superior izquierda).
Paso 2:
Escribe o modifica tu código HTML. Por ejemplo:
<h1>Mi Primer Título</h1> <p>Este es un párrafo de ejemplo.</p> <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>
💡 Consejo:
Puedes borrar todo el código de ejemplo que viene por defecto y empezar desde cero, o simplemente modificarlo según tus necesidades.
🎨 Cómo Escribir Código CSS
Paso 1:
Haz clic dentro del área de
Código CSS
(la sección con fondo azul claro en la parte inferior izquierda).
⚠️ Importante:
El CSS que escribas aquí se aplicará directamente al HTML que hayas escrito en la sección superior. Asegúrate de que los selectores CSS correspondan a los elementos HTML que quieres estilizar.
▶️ Cómo Visualizar tus Cambios
Hay dos formas de actualizar la vista previa con tus cambios:
Método 1: Botón RUN
Paso 1:
Después de escribir o modificar tu código HTML y/o CSS, busca el botón
RUN
que se encuentra debajo del editor de CSS.
Paso 2:
Haz clic en el botón
RUN
.
Paso 3:
Observa cómo la
Vista Previa
(lado derecho) se actualiza instantáneamente mostrando tu código renderizado.
Método 2: Atajo de Teclado (Ctrl + Enter)
Opción rápida:
Mientras estás escribiendo en cualquiera de los editores (HTML o CSS), puedes presionar
Ctrl + Enter
para actualizar la vista previa sin necesidad de hacer clic en el botón RUN.
💡 Consejo profesional:
Usa
Ctrl + Enter
para trabajar más rápido. Es especialmente útil cuando estás haciendo muchos cambios pequeños y quieres ver los resultados inmediatamente.
🌓 Cómo Usar el Modo Oscuro
Una característica importante de este editor es la capacidad de probar cómo se ve tu diseño en fondos claros y oscuros.
¿Por qué es importante probar en modo oscuro?
Muchos usuarios prefieren navegar en modo oscuro para reducir la fatiga visual.
Un buen diseño debe verse bien tanto en fondos claros como oscuros.
Te ayuda a identificar problemas de contraste en tu código CSS.
Cómo activar/desactivar el modo oscuro:
Paso 1:
Busca el botón de alternancia en la barra de título de la
Vista Previa
(esquina superior derecha del panel de vista previa). El botón dirá
🌙 Oscuro
o
☀️ Claro
.
Paso 2:
Haz clic en el botón para cambiar el fondo:
Si dice
🌙 Oscuro
, al hacer clic cambiará el fondo a oscuro
Si dice
☀️ Claro
, al hacer clic cambiará el fondo a claro
Paso 3:
Observa cómo se ve tu contenido con el nuevo fondo.
⚠️ Muy Importante:
El modo oscuro
SOLO cambia el color de fondo
de la vista previa. NO modifica automáticamente los colores de tu texto o elementos. Esto es intencional para que puedas ver cómo se comporta TU código CSS en diferentes fondos.
🔍 Problema común:
Si tu texto desaparece o se vuelve difícil de leer cuando cambias a modo oscuro, significa que necesitas ajustar tus estilos CSS para que funcionen en ambos modos. Por ejemplo, si usas texto
negro (
color: black;
) sobre fondo blanco, ese mismo texto negro será invisible en fondo oscuro.
Ejemplo de CSS que funciona en ambos modos:
/* ❌ Mal ejemplo - solo funciona en fondo claro */ p { color: black; } /* ✅ Buen ejemplo - usa colores que contrastan con ambos fondos */ p { color: #333; /* Gris oscuro para fondo claro */
} /* O mejor aún, define estilos específicos para elementos */ .caja-importante { background-color: white; color: black; padding: 20px; border: 2px solid #ccc; }
💡 Mejor práctica:
Cuando diseñes tu contenido, asigna colores de fondo y texto a tus elementos importantes (como cajas, tarjetas, o secciones) en lugar de depender solo del fondo general del body. Así tu diseño
se verá bien independientemente del modo.
🤖 Botón IA
El botón
IA
que aparece junto al botón RUN abre una ventana emergente con un asistente de inteligencia artificial que puede ayudarte con preguntas sobre HTML, CSS o tu código en general.
💡 Uso del botón IA:
Si tienes dudas sobre cómo hacer algo en HTML/CSS, o si algo no funciona como esperabas, puedes hacer clic en este botón para obtener ayuda adicional.
📋 Flujo de Trabajo Recomendado
1.
Escribe tu estructura HTML en el editor superior izquierdo.
2.
Presiona
Ctrl + Enter
o haz clic en
RUN
para ver el resultado básico.
3.
Escribe tus estilos CSS en el editor inferior izquierdo.
4.
Actualiza la vista previa (
Ctrl + Enter
o
RUN
).
5.
Prueba tu diseño en modo oscuro haciendo clic en
🌙 Oscuro
.
6.
Ajusta tu CSS si es necesario para que funcione bien en ambos modos.
7.
Repite los pasos 3-6 hasta que estés satisfecho con el resultado.
❓ Preguntas Frecuentes
¿Puedo copiar y pegar código de otros lugares?
Sí, puedes copiar código HTML o CSS de cualquier fuente y pegarlo en los editores correspondientes.
¿Se guarda mi código automáticamente?
No, este editor funciona solo en tu navegador. Si cierras la página o recargas el navegador, perderás los cambios. Asegúrate de copiar tu código a un archivo o documento si quieres guardarlo.
¿Puedo usar este editor en mi teléfono o tablet?
Sí, el editor está diseñado para ser responsivo y funcionar en dispositivos móviles, aunque la experiencia es mejor en computadoras de escritorio o laptops debido al espacio de pantalla.
¿Qué hago si mi código no se muestra correctamente?
Verifica lo siguiente:
Asegúrate de haber presionado el botón
RUN
o
Ctrl + Enter
Revisa que tu HTML esté correctamente escrito (etiquetas abiertas y cerradas)
Verifica que tus selectores CSS coincidan con los elementos HTML
Si usas modo oscuro, verifica que tus colores tengan buen contraste
¿Puedo agregar imágenes o enlaces externos?
Sí, puedes usar URLs completas para imágenes (por ejemplo:
<img src="https://...">
) y enlaces externos funcionarán normalmente.
✅ Resumen Rápido
Panel verde
= Escribe tu HTML
Panel azul
= Escribe tu CSS
Panel gris
= Vista previa de tu código
Botón RUN
= Actualiza la vista previa
Ctrl + Enter
= Atajo para actualizar
Botón 🌙/☀️
= Cambia entre fondo claro y oscuro
Botón IA
= Obtén ayuda adicional
🎓 Consejos Finales para Principiantes
Experimenta sin miedo:
Este editor es un espacio seguro para probar cosas. Si algo no funciona, simplemente modifica el código y vuelve a ejecutar. Aprenderás más experimentando que leyendo teoría.
Prueba siempre en ambos modos:
Acostúmbrate a verificar tus diseños en modo claro y oscuro. Es una buena práctica profesional y te ayudará a crear diseños más accesibles.
Comienza simple:
Si eres nuevo en HTML/CSS, empieza con estructuras simples y ve agregando complejidad gradualmente. No intentes crear algo muy elaborado en tu primer intento.
Usa los comentarios:
Tanto en HTML (
<!-- comentario -->
) como en CSS (
/* comentario */
) puedes agregar notas para recordar qué hace cada parte de tu código.