Plan de Formación — Desarrollo Web

Semana 1

Diseño UX/UI + Arquitectura web

3 clases · 6 h

Temas de la clase

¿Qué es la arquitectura web? Cómo se piensa un sitio desde cero
Jerarquía de páginas: home, servicios, blog, contacto
Mapa del sitio (sitemap): ejercicio práctico en papel y FigJam
Diferencias: sitio estático vs dinámico vs aplicación web
Flujo de navegación: cómo el usuario recorre el sitio

Herramientas

FigJam

Notion

Papel + lápiz

Al terminar esta clase podrás

Estructurar correctamente cualquier sitio web antes de diseñar o desarrollar una sola página, presentándole al cliente un mapa claro del proyecto.

Temas de la clase

Principios UX: jerarquía visual, affordance, flujo natural
Wireframes: qué son y cómo hacerlos en Figma
Moodboards: referencias visuales para presentar al cliente
User journey: cómo piensa el usuario cuando llega al sitio
Ejercicio: diseñar el wireframe de una home desde cero

Herramientas

Figma

Wireframe kit

Al terminar esta clase podrás

Crear wireframes profesionales y moodboards que le muestras al cliente antes de tocar una sola línea de código o diseño visual.

Temas de la clase

Principios UI: tipografía, colores, espaciado y contraste
Canva Pro: creación de paleta de marca, logos, banners para web
Kit de marca: fuentes, colores primarios y secundarios, íconos
Piezas gráficas para redes y web desde plantillas
Cómo exportar correctamente (PNG, SVG, WebP)

Herramientas

Canva Pro

Coolors

Google Fonts

Al terminar esta clase podrás

Crear el kit visual completo de un cliente (paleta, tipografía, piezas gráficas) listo para aplicar en el sitio web que van a construir.

Semana 2

WordPress + Divi · Introducción y construcción

3 clases · 6 h

Temas de la clase

Qué es WordPress y por qué domina el mercado
Instalación en hosting real desde cPanel (demo en vivo)
Panel de administración: páginas, entradas, usuarios, ajustes
Plugins esenciales: Yoast SEO, WP Super Cache, UpdraftPlus
Diferencia entre WordPress.com y WordPress.org
Introducción a temas: qué son y cómo se instalan

Herramientas

WordPress

Hostinger / cPanel

Plugins básicos

Al terminar esta clase podrás

Instalar WordPress desde cero en cualquier hosting, navegar el panel de admin con soltura e instalar y activar plugins esenciales para cualquier proyecto.

Temas de la clase

Qué es Divi y cómo funciona el editor visual
Secciones, filas y módulos: la lógica de construcción
Módulos esenciales: texto, imagen, botón, vídeo, formulario
Configuración de tipografía y colores globales en Divi Theme Customizer
Guardar y reusar secciones (Divi Library)
Ejercicio: construir una sección de hero desde cero

Herramientas

Divi Builder

Divi Library

Theme Customizer

Al terminar esta clase podrás

Construir y editar cualquier sección de un sitio web con Divi Builder, aplicando la paleta y tipografía de marca del cliente.

Temas de la clase

Menú de navegación: crear, ordenar y enlazar páginas
Menú sticky (que queda fijo al hacer scroll): configuración en Divi
Submenús desplegables: cuándo usarlos y cómo
Footer: secciones típicas (logo, links, contacto, redes, copyright)
Diseñar el footer en Divi con columnas y módulos
Enlazar redes sociales e íconos

Herramientas

WordPress Menus

Divi Footer

Iconos sociales

Al terminar esta clase podrás

Crear un menú sticky profesional y un footer completo con columnas, redes sociales y copyright, y aplicarlo a cualquier proyecto WordPress.

Semana 3

Landing page + Web completa

4 clases · 8 h

Temas de la clase

Qué es una landing page y en qué difiere de un sitio completo
Estructura ganadora: Hero → Problema → Solución → CTA → Social proof
Construir la landing completa en Divi desde cero
Call-to-action efectivos: botones, formularios, colores
Integrar formulario con email (SMTP + notificaciones)
Publicar y probar en móvil

Herramientas

Divi Builder

WP Mail SMTP

Mobile preview

Al terminar esta clase podrás

Diseñar y publicar una landing page completa con estructura persuasiva, formulario funcional y versión móvil optimizada.

Temas de la clase

Páginas esenciales: Home, Servicios, Sobre nosotros, Contacto
Home completa: hero, servicios, testimonios, CTA final
Página de servicios: cards, íconos, precios
Página de contacto: mapa, formulario, info de la empresa
Menú final conectado a todas las páginas

Herramientas

Divi Builder

Google Maps embed

Contact Form 7

Al terminar esta clase podrás

Construir un sitio web profesional de 4 páginas interconectadas, completamente funcional y listo para entregar a un cliente.

Temas de la clase

SEO básico: titles, metas, alt text, slugs con Yoast
Velocidad: compresión de imágenes, caché y CDN
Google Search Console: vincular el sitio a Google
Checklist de lanzamiento: SSL, 404s, formularios, móvil
Cómo presentar el sitio terminado al cliente

Herramientas

Yoast SEO

WP Super Cache

Search Console

Smush / TinyPNG

Al terminar esta clase podrás

Lanzar el sitio con SEO básico configurado, velocidad optimizada y el sitio indexado en Google, entregándolo con un checklist profesional al cliente.

Temas de la clase

Briefing con el cliente: preguntas clave y levantamiento de necesidades
Cómo crear propuestas y cotizaciones (plantilla editable)
Objeciones comunes: "es muy caro", "mi sobrino lo hace" → cómo responderlas
Cierre de negocios digitales paso a paso
Práctica: rol-playing de reunión con cliente real

Herramientas

Notion (propuesta)

Canva (deck)

Google Meet

Al terminar esta clase podrás

Hacer un briefing profesional, crear una propuesta con precio y cerrar negocios de desarrollo web con clientes reales.

Semana 4

Módulo WooCommerce · Tienda online

3 clases · 6 h

Temas de la clase

Qué es WooCommerce y cómo se instala en WordPress
Configuración inicial: moneda, país, métodos de envío
Crear productos: simples, variables y descargables
Categorías y atributos de productos
Páginas automáticas: tienda, carrito, checkout, mi cuenta

Herramientas

WooCommerce

Productos

Envíos

Al terminar esta clase podrás

Instalar WooCommerce, configurar la tienda y publicar los primeros productos con variantes de precio, talla o color.

Temas de la clase

Pasarelas de pago: PayU, Wompi, Stripe, MercadoPago
Integración de pasarela en WooCommerce (demo en vivo)
Gestión de pedidos: estados, notas, reembolsos
Cupones de descuento y promociones
Emails automáticos al cliente (confirmación de compra, envío)

Herramientas

PayU / Wompi

Pedidos WooCommerce

Emails automáticos

Al terminar esta clase podrás

Configurar una pasarela de pago real, gestionar pedidos y activar emails automáticos para tener una tienda completamente funcional.

Temas de la clase

Diseño de la tienda con Divi: página de productos, catálogo, filtros
Customizar la página de producto y el carrito
Home de la tienda con banners, ofertas y categorías
Proyecto final: construir tienda completa de un negocio real
Checklist de lanzamiento de ecommerce

Herramientas

Divi + WooCommerce

Product Filters

Launch checklist

Al terminar esta clase podrás

Entregar una tienda online completa: productos, carrito, pago, diseño de marca y lista para vender desde el primer día.

Semana 5

Code + Cursor IA · Webs en código real

3 clases · 6 h

Temas de la clase

Qué es Cursor: el editor de código con IA integrada
Instalación y configuración de Cursor + extensiones esenciales
Estructura de un proyecto web: index.html, style.css, script.js
Primeros prompts: "crea un hero con imagen de fondo y botón CTA"
Leer e interpretar el código que genera la IA
Cómo iterar: "cambia el color", "hazlo responsive", "agrega animación"

Herramientas

Cursor

HTML / CSS / JS

Claude / GPT-4

Al terminar esta clase podrás

Usar Cursor para crear secciones web completas con prompts, entender el código generado y modificarlo con instrucciones en lenguaje natural.

Temas de la clase

Prompts de sistema: dar contexto a la IA (marca, colores, estilo)
Generar una landing page completa con un solo prompt estructurado
Prompt para navbar sticky + footer responsive
Prompt para sección de testimonios, precios y FAQs
Cómo corregir errores con la IA ("el botón no aparece en móvil")
Biblioteca de prompts reutilizables para proyectos

Herramientas

Cursor Composer

ChatGPT / Claude

Librería prompts

Al terminar esta clase podrás

Crear una landing page completa en código puro usando prompts estructurados, con secciones reutilizables y diseño responsive.

Temas de la clase

Proyecto en vivo: construir un sitio web completo con Cursor + IA
Flujo completo: estructura → prompts → código → revisión → deploy
Publicar el sitio en Netlify o Vercel (gratis, en minutos)
Conectar dominio al deploy
Cierre del curso: portfolio del estudiante, próximos pasos y recursos

Herramientas

Cursor

Netlify / Vercel

Dominio propio

Portfolio

Al terminar esta clase podrás

Publicar un sitio web construido 100% en código con ayuda de IA, en un dominio propio, y contar con un portfolio que demuestre tu nivel como desarrollador.

Desarrollo Webde cero a profesional

Desarrollo Web
de cero a profesional