● Web Studio
Laboratorio de creación web

Aprendé construyendo cosas que funcionan.

Acá no venís solamente a escribir código. Elegís una idea, modificás HTML, CSS y JavaScript, la probás y ves el resultado inmediatamente.

① Elegí una idea② Construí③ Probá④ Guardá⑤ Mejorá

¿Qué aporta cada tecnología?

Una página web suele combinar tres piezas. Pensalas como estructura, apariencia y comportamiento.

HTML

La estructura

Define qué hay: títulos, textos, imágenes, botones, formularios, listas, enlaces y secciones.

CSS

La apariencia

Define cómo se ve: colores, tipografías, tamaños, espacios, bordes, tarjetas, columnas y adaptación al celular.

JAVASCRIPT

El comportamiento

Hace que la página responda: botones, cálculos, cambios de contenido, validaciones, menús, juegos e interacción.

Ideas para copiar, probar y modificar

No hace falta empezar de cero. Copiá un ejemplo en el editor correspondiente y preguntate: ¿qué pasa si cambio esto?

HTML · TarjetaUna estructura simple
<section class="card"> <h1>Mi proyecto</h1> <p>Estoy construyendo una web.</p> <button>Ver más</button> </section>
CSS · TarjetaConvertí una caja en diseño
.card { padding: 24px; border-radius: 16px; background: white; box-shadow: 0 8px 30px #0002; } .card h1 { color: #17633a; }
JavaScript · BotónAgregá interacción
const boton = document.querySelector("button"); boton.addEventListener("click", () => { alert("¡Funciona!"); });

Studio · construí tu proyecto

Ahora sí: tres espacios separados para entender qué estás escribiendo. La vista previa combina los tres y muestra el resultado.

Mi proyecto web
Listo para ejecutar
HTML · estructura
CSS · diseño
JavaScript · interacción
Vista previa · resultado del proyecto

Proyecto final · una web que haga algo

🎯 Desafío: Mi tarjeta interactiva

Construí una página sobre un tema que te interese: un proyecto escolar, un videojuego, un club, una banda, una materia o un emprendimiento.

  • HTML: título, imagen o emoji, descripción y al menos un botón.
  • CSS: colores, tipografía, tarjeta y diseño adaptable.
  • JavaScript: el botón debe cambiar algo de la página.
  • Extra: agregá un contador, formulario, modo oscuro o lista dinámica.
La meta no es copiar el ejemplo: es modificarlo hasta convertirlo en algo propio.

💡 ¿Qué más se puede construir?

  • Landing pages y sitios institucionales.
  • Portfolios personales y páginas de proyectos.
  • Calculadoras y herramientas pequeñas.
  • Juegos y simulaciones.
  • Dashboards y visualizaciones.
  • Formularios y aplicaciones web.
  • Interfaces que luego puedan conectarse a una API.
  • Proyectos más grandes, con backend y datos, en futuros laboratorios.

Este Studio empieza con tecnologías web básicas. Después Campus48 puede ofrecer otros lenguajes y entornos según el proyecto.

V2 Tecnologías Inteligentes · Campus48 · Laboratorio de creación