7 Cupos Disponibles Sede Presencial

DESARROLLO WEB CON IA DEL VIBE CODING AL DEPLOY (Copia)

El curso "Desarrollo Web con IA: del Vibe Coding al Deploy" ofrece una inmersión completa y práctica en la creación de sitios web modernos utilizando inteligencia artificial. A lo largo de sus cuatro módulos, los estudiantes aprenden desde los fundamentos de la anatomía web (HTML, CSS, JavaScript y React) y la configuración del entorno técnico hasta el manejo de gestores de paquetes como pnpm y herramientas de desarrollo. La propuesta metodológica se centra en el "vibe coding", enseñando a redactar prompts visuales precisos para que la IA genere interfaces responsivas, ensamble secciones profesionales y conecte funciones o APIs externas sin necesidad de programar manualmente cada línea. Asimismo, el programa aborda la depuración de errores a través de las DevTools, la optimización y compilación del proyecto mediante pnpm build y pnpm preview, la implementación de SEO básico con metaetiquetas y, como broche de oro, el despliegue en vivo en Vercel para obtener un dominio público accesible desde cualquier dispositivo.

Español

Basico

Temario de la MasterClass

Módulo 01

Anatomía Web, Glosario Esencial y Configuración del Entorno

HTML: La estructura de la página (textos, imágenes y contenedores)

CSS: Diseño y estética (colores, fuentes, márgenes y adaptabilidad móvil)

JavaScript: La interactividad y lógica (botones dinámicos, animaciones y comportamiento)

React: Librería moderna que nos permite construir páginas uniendo componentes reutilizables como piezas de LEGO

Glosario Web: Qué es Hosting, Dominio, Frontend, Backend, APIs y SEO explicados de forma sencilla

Glosario Vibe: Qué son los Prompts, qué es Producción y qué significa hacer un Despliegue (Deploy

Gestor de Paquetes pnpm: Instalación global y verificación de Node.js

Acceso a Antigravity: Inicio de sesión con cuenta de Gmail para la asignación de tokens y créditos de IA

Módulo 02

El Abecedario de PNPM y Vibe Coding

pnpm install: Descarga ultrarrápida de dependencias y herramientas del proyecto

pnpm dev: Inicialización del servidor de desarrollo local para ver cambios en tiempo real

Estructura del Proyecto: Entender dónde residen las imágenes, componentes y estilos dentro de React

Prompting Visual para Web: Cómo escribir instrucciones precisas a la IA para pedir layouts limpios, modernos y adaptables

Maquetación Responsive: Garantizar que la interfaz se adapte perfectamente a celulares, tablets y computadoras

Ensamblado de Secciones: Generación iterativa de secciones Hero, listas de servicios, galerías y botones a WhatsApp

Módulo 03

Integración de Funciones, Depuración y Prueba de Producción

Opciones de Desarrollador (DevTools): Uso de la consola e inspección de elementos en el navegador para detectar errores visuales y de código

Conexión de Funciones y APIs: Pedirle a la IA que integre datos externos o formularios dinámicos sin escribir código

Resolución de Errores Vibe Style: Copiar los mensajes rojos de las DevTools o la terminal y solucionarlos automáticamente con IA

pnpm build: Compilación y optimización de archivos finales (generación de la carpeta dist)

pnpm preview: Ejecución del servidor local simulando el entorno de producción para validar la web antes de publicar

Módulo 04

SEO Básico y Despliegue en Vivo con Vercel

SEO Básico con IA: Generación de Meta Tags, títulos optimizados, favicon y vistas previas para redes sociales (Open Graph) antes de publicar

Despliegue Directo en Vercel: Creación de cuenta, conexión y subida de la carpeta de producción

Dominio Público .vercel.app: Obtención del enlace oficial y prueba de acceso público en smartphones en tiempo real

Caja de Herramientas

Antigravity

React

Vercel

Cuenta de google

¿Qué incluye tu inscripción?

Coffe Break

Certificado por Artica group

Accesorios

Preguntas Frecuentes

¿Es obligatorio registrarse?

Sí. Para garantizar la seguridad de tus pagos y el acceso permanente a tus clases, debes crear una cuenta gratuita antes de realizar cualquier inscripción.