Curso de maquetación web de lo básico a lo avanzado
por Juan Fernando Urrego
Enseña a convertir diseños de Photoshop o Illustrator en páginas con HTML5 y CSS3, usando wireframes con cajas y un sistema de columnas propio adaptable.
Recomendado, valoración editorial 4 de 5
verificado 2026-09-08 — sigue siendo gratis en Udemy
Empezar en UdemyRespuesta rápida
Curso gratis de Diseño en Udemy impartido por Juan Fernando Urrego (2 h 31 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 8 de septiembre de 2026.
- Veredicto
- 4/5 · Recomendado
- Para quién
- Diseñadores gráficos o visuales que tienen sus diseños en Photoshop o Illustrator y quieren llevarlos a HTML5 y CSS3.
- Duración
- 2 h 31 min · 21 lecciones
- Precio
- Gratis en Udemy
- Autor
- Juan Fernando Urrego
- Plan sugerido
- 1 sem. · 5 h/sem.
- Verificado
- el 8 de septiembre de 2026
Nuestro veredicto
Recomendado, valoración editorial 4 de 5Curso corto y práctico para quien tiene diseños gráficos y quiere convertirlos en una web con HTML5 y CSS3. Destaca por su enfoque aplicado y el sistema de columnas propio. La información publicada sobre el detalle de las lecciones es limitada.
Puntos fuertes
- Enfoque práctico: parte de un diseño gráfico y lo convierte en una página maquetada.
- Incluye una carpeta descargable con el material necesario, según la descripción.
- Duración contenida (unas 2,5 horas en 21 lecciones), asumible en pocos días.
A tener en cuenta
- Los datos solo muestran un capítulo genérico, así que el detalle de cada lección es limitado.
- No consta el año de publicación; conviene comprobar que las técnicas sigan vigentes.
- La descripción no menciona ejercicios ni proyecto final más allá de la maquetación guiada.
De qué trata
Curso de Udemy de unas 2,5 horas y 21 lecciones, impartido por Juan Fernando Urrego, que enseña a maquetar sitios web con HTML5 y CSS3 partiendo de diseños creados en programas gráficos como Photoshop o Illustrator.
Se apoya en el método de las ayudas visuales y en la maquetación de cajas principales e internas para elaborar un wireframe correcto. Después integra los elementos gráficos para formar la estructura del sitio y termina con la creación de un sistema de columnas propio, al estilo de Bootstrap, adaptable a distintos dispositivos. Incluye una carpeta descargable con el material necesario.
- Pasar diseños de Photoshop o Illustrator a HTML5 y CSS3
- Método de las ayudas visuales
- Cajas principales e internas para el wireframe
- Integración de elementos gráficos
- Sistema de columnas propio al estilo Bootstrap
Para quién es este curso
- Diseñadores gráficos o visuales que tienen sus diseños en Photoshop o Illustrator y quieren llevarlos a HTML5 y CSS3.
- Emprendedores o personas que quieren construir su propia página web maquetando ellos mismos.
- Desarrolladores que quieren practicar la maquetación a partir de un diseño y crear su propio sistema de columnas.
Mejor busca otro si…
- Quien ya maqueta con soltura en HTML y CSS y busca frameworks modernos o JavaScript.
- Quien busque un curso largo y exhaustivo: dura unas 2,5 horas.
Antes de empezar
- Descargar el material de la carpeta que se encuentra en los recursos de la clase 1.
Qué sabrás hacer al terminar
- Pasar diseños hechos en Photoshop o Illustrator a HTML5 y CSS3.
- Aplicar el método de las ayudas visuales para maquetar.
- Maquetar cajas principales e internas para elaborar un wireframe correcto.
- Integrar los elementos gráficos para construir la estructura de un sitio web.
- Crear un sistema de columnas propio, al estilo de Bootstrap, que se adapte a distintos dispositivos.
Estructura del curso
- 01
Maquetación Web Básica
Único capítulo indicado en los datos, con 21 lecciones. Según la descripción, se usa el método de las ayudas visuales, se maqueta con cajas principales e internas para el wireframe, se integran los elementos gráficos y se crea un sistema de columnas con HTML5 y CSS3.
Capítulos del vídeo
- 01Maquetación Web Básica
Plan de estudio sugerido
1 semana · unas 5 h por semana
- 1.Sesión 1: descarga el material de la clase 1 y revisa las primeras lecciones sobre ayudas visuales; repite cada paso en tu editor.
- 2.Sesión 2: maqueta las cajas principales e internas y arma el wireframe a partir del diseño.
- 3.Sesión 3: integra los elementos gráficos y completa la estructura del sitio.
- 4.Sesión 4: crea el sistema de columnas adaptable y pruébalo en distintos tamaños de pantalla.
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Descarga la carpeta de recursos de la clase 1 antes de empezar, porque el curso trabaja sobre ese material.
- Escribe el código a la vez que el instructor en lugar de solo mirarlo, y pausa en cada lección para comprobar el resultado en el navegador.
- Cuando llegues al sistema de columnas, redimensiona la ventana para verificar que se adapta a distintos dispositivos.
- Al terminar, aplica el método a un diseño propio de Photoshop o Illustrator.
Antes y después de este curso
- Después de este cursoCurso de FlexBox desde 0Complementa la maquetación con CSS profundizando en una técnica de distribución de elementos.
- Después de este cursoAprende a crear animaciones y efectos interactivos con CSS3Siguiente paso natural para añadir animaciones y efectos con CSS3 a las páginas maquetadas.
Cómo lo presenta Juan Fernando Urrego
Aprende a maquetar sitios web de una manera fácil y efectiva en los lenguajes HTML5 y CSS3
¿DE QUÉ SE TRATA EL CURSO? Cuando diseñas páginas web, debes crear tus diseños en programas gráficos como photoshop o illustrator. La pregunta es ¿Cómo pasar mis diseños a un lenguaje de marcado HTML y a hojas de estilo CSS?. Si te has hecho esta pregunta, en este curso aprenderás a pasar tus diseños…
Extracto de la descripción original en Udemy.
Preguntas frecuentes
+¿Cuánto se tarda en completarlo?
El vídeo dura unos 151 minutos en 21 lecciones. El autor estima que se puede completar en menos de una semana, según tu ritmo y disponibilidad.
+¿Qué necesito antes de empezar?
El único requisito indicado es descargar el material de los recursos de la clase 1. No se especifican otros conocimientos previos.
+¿Qué se aprende exactamente?
A pasar diseños de Photoshop o Illustrator a HTML5 y CSS3, usar ayudas visuales, maquetar cajas para el wireframe, integrar elementos gráficos y crear un sistema de columnas adaptable.
+¿A quién va dirigido?
Según la descripción, a diseñadores gráficos y visuales, artistas, desarrolladores, empresas, emprendedores y cualquier persona que quiera tener una página web.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en Udemy, y revisado según nuestro método. El contenido del curso es obra de Juan Fernando Urrego; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Diseño
Creative Web Development with Three.js and Blender
Enseña a modelar una escena 3D en Blender y a llevarla a la web con Three.js, con raycaster, movimiento con GSAP y colisiones.
🔥Curso Completo de Edición de Video 2026 – Premiere Pro y After Effects Desde Cero a Experto +10 HR
Curso de edición de vídeo que recorre Premiere Pro y After Effects: capas, keyframes, máscaras, textos, cámara 3D y objetos GLB, con ejercicios prácticos de animación y montaje de un reel 3D.
Adobe Photoshop para principiantes - Segunda parte
Segunda parte de un curso de Photoshop: capas, tamaño y resolución, color, selecciones, retoque y creación de títulos en 21 lecciones.
AI & UX Ethics: decisiones con criterio humano
Enseña a usar IA en UX con criterio ético: riesgos, un framework para decidir qué automatizar y métricas para evaluar resultados en research, diseño y microcopy.