⚠️ EduCode Studio requiere JavaScript para funcionar. Por favor, habilitá JavaScript en tu navegador.

EduCode Studio Liceos / UTU

Auto-run

Velocidad: 0 WPM

Progreso: 0%

Lín 1, Col 1 HTML

Guardado

https://html.servicioti.com.uy En vivo

Explicación Pedagógica

Selecciona un ejemplo pedagógico para ver la explicación didáctica de la etiqueta o concepto CSS.

Consola Virtual 0 mensajes

Clic para abrir/cerrar

Listo para programar

Desarrollado por Andrés Franchi Ugartemendía — Para estudiantes de Liceos y UTU

⚠️ Restablecer Código

¿Estás seguro de que deseas restablecer el código a la plantilla inicial? Perderás cualquier cambio que no hayas descargado o guardado.

⚙️ Ajustes del Simulador de Escritura

Velocidad Base de Tipeo 35 ms/char

Probabilidad de Errores (Typos) 3%

Perfil de Teclado Mecánico

Atajos de Teclado del Editor

Ctrl + Enter

Ejecutar código y actualizar la vista previa

Ctrl + S

Guardar cambios en el navegador

Ctrl + F

Buscar texto en el editor activo

Ctrl + /

Comentar o descomentar línea seleccionada

Tab / Shift+Tab

Aumentar o reducir la sangría (indentación)

Galería de Recursos y Componentes

Copia o inserta rápidamente etiquetas de imagen optimizadas para tus páginas:

Paisaje de Montaña

800 × 400 px

Avatar de Usuario

200 × 200 px (Circular)

Laptop y Trabajo

800 × 400 px

Mascota (Perrito)

600 × 400 px

Copia la etiqueta HTML para incluir tipografías de Google Fonts:

Montserrat — Elegante y moderna <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

Outfit — Minimalista y limpia <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap" rel="stylesheet">

Playfair Display — Clásica con serifa <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&display=swap" rel="stylesheet">

Estructuras HTML listas para usar en tu proyecto:

🎴 Tarjeta de Presentación (Card)

<div class="card">
  <h3>Título de la Tarjeta</h3>
  <p>Descripción breve...</p>
</div>

🔘 Botón Estilizado

<button class="btn-demo">Hacer Clic</button>

📊 Tabla de Datos Formateada

<table><tr><th>Nombre</th></tr>...</table>