cursos.
← Programación
Ficha 005.255YouTubeGRATIS

CURSO DE CSS COMPLETO: De Principiante a Front-End

por Miguel Ángel Durán (midudev)

Recorre CSS desde cero: selectores, cascada, especificidad, modelo de caja, position, Flexbox y Grid, con ejercicios prácticos e introducción a animaciones.

Muy recomendado, valoración editorial 5 de 5

verificado 2026-09-08 — sigue siendo gratis en YouTube

Empezar en YouTube

Respuesta rápida

Curso gratis de Programación de nivel principiante en YouTube impartido por Miguel Ángel Durán (midudev) (6 h 26 min). Nuestra valoración: 5/5, muy recomendado. Comprobamos que sigue siendo gratis el 8 de septiembre de 2026.

Veredicto
5/5 · Muy recomendado
Para quién
Personas que empiezan desde cero en CSS y quieren una base sólida para maquetar páginas web.
Nivel
Principiante
Duración
6 h 26 min · 100 capítulos
Precio
Gratis en YouTube
Autor
Miguel Ángel Durán (midudev)
Publicado
2024
Plan sugerido
4 sem. · 5 h/sem.
Verificado
el 8 de septiembre de 2026

Nuestro veredicto

Muy recomendado, valoración editorial 5 de 5

Curso extenso y bien estructurado que recorre CSS desde los fundamentos hasta Flexbox, Grid y animaciones, con capítulos claros y ejercicios en la parte de Grid. Es una buena opción en español para quien empieza y quiere una base completa de maquetación.

Puntos fuertes

  • Cobertura amplia y ordenada, de los fundamentos a Flexbox y Grid, con unos 100 capítulos.
  • Incluye ejercicios prácticos en el bloque de Grid y recomienda herramientas para practicar.
  • Capítulos con marcas de tiempo que permiten volver a cada tema fácilmente.

A tener en cuenta

  • Es un único vídeo de más de 6 horas; requiere planificar sesiones.
  • Publicado en 2024: puede no incluir las novedades más recientes de CSS.
  • La lista de capítulos disponible termina al inicio de animaciones y transiciones, por lo que no se puede confirmar cuánto se profundiza en ese tema.

De qué trata

Curso en un único vídeo de unas 6 horas y media, organizado en unos 100 capítulos. Empieza explicando qué es CSS y la cascada, y avanza por colores, selectores, herencia, pseudoclases, especificidad y unidades.

Después aborda el modelo de caja, el desbordamiento, el posicionamiento y z-index. Dedica bloques amplios a Flexbox y a CSS Grid, con ejercicios prácticos, y termina introduciendo animaciones y transiciones.

  • Selectores, herencia, cascada y especificidad
  • Modelo de caja, overflow y position
  • Flexbox: dirección, espacio y alineación
  • CSS Grid: repeat, auto-fill y áreas
  • Introducción a animaciones y transiciones

Para quién es este curso

  • Personas que empiezan desde cero en CSS y quieren una base sólida para maquetar páginas web.
  • Quien ya conoce algo de HTML y busca aprender selectores, cascada, especificidad y maquetación con Flexbox y Grid.
  • Autodidactas que prefieren un curso largo en un solo vídeo con capítulos para saltar a cada tema.

Mejor busca otro si…

  • Quien ya domina Flexbox y Grid y solo busca contenido avanzado de animaciones, ya que los capítulos de animaciones aparecen al final.
  • Quien busque un curso de HTML o JavaScript: este se centra en CSS.

Antes de empezar

  • Los capítulos no detallan requisitos; el curso se presenta como CSS desde cero, aunque conviene tener nociones básicas de HTML.

Qué sabrás hacer al terminar

  • Entender qué es CSS, cómo funciona la cascada y cómo se calcula la especificidad.
  • Aplicar estilos con selectores de clase, ID, pseudoclases y selectores combinados.
  • Usar el modelo de caja, el posicionamiento (relative, absolute, fixed, sticky) y z-index.
  • Maquetar con Flexbox controlando dirección, espacio, orden y alineación de elementos.
  • Crear cuadrículas con CSS Grid, incluyendo repeat(), auto-fill/auto-fit y áreas de grid.

Estructura del curso

  1. 01

    Fundamentos de CSS y selectores

    Desde 0:00. Qué es CSS, la cascada, dónde poner los estilos, partes de una regla, colores, selectores de clase e ID, herencia, pseudoclases y selectores combinados.

  2. 02

    Cascada, especificidad y unidades

    Desde 1:02:52. Cascada, fallbacks, especificidad, estilos en línea, formas de saltarse la especificidad, unidades relativas y absolutas y reset CSS/Normalize.

  3. 03

    Modelo de caja, overflow y posición

    Desde 1:27:00. Modelo de la caja, sus propiedades, box-sizing, overflow, text-overflow, position (absolute, relative, fixed, sticky) y z-index.

  4. 04

    Flexbox

    Desde 2:27:34. display: flex, flex-direction, flex-wrap, control del espacio con grow/shrink/basis, orden, justify-content, gap y alineación en el eje cruzado.

  5. 05

    CSS Grid

    Desde 3:12:43. Qué es Grid y su comparación con Flex, columnas y filas, unidad fr, repeat(), auto-fill/auto-fit, ejercicios prácticos, posicionamiento por líneas, áreas y alineación.

  6. 06

    Animaciones y transiciones

    Desde 4:48:58. Introducción a animaciones y transiciones, con las dos formas de crear animaciones.

Capítulos del vídeo

  1. 0:00Introducción a CSS
  2. 3:04Qué es CSS?
  3. 6:43El significado de “Cascada”
  4. 7:45Recursos CSS que recomiendo y que no
  5. 11:23Dónde poner los estilos?
  6. 13:42Partes de CSS (selector, propiedad y valor)
  7. 18:23Colores
  8. 28:03Selectores - classes
  9. 29:45Selectores - ID
  10. 32:07Herramienta para practicar (recomendación)
  11. 32:35Herencia
  12. 37:48Valores especiales de la herencia
Ver los 88 restantes
  1. 42:17pseudo-clases
  2. 43:57border y contorno
  3. 45:58más pseudoclases
  4. 47:29simular estados (hover, visible, etc…)
  5. 48:28first-child, last-child
  6. 49:40Selectores combinados
  7. 55:34Operador - Afectar por primer nivel
  8. 59:10Operador ˜ (hermano siguiente)
  9. 1:01:04Operador plus
  10. 1:02:52Cascada
  11. 1:05:53fallbacks
  12. 1:08:04Especificidad
  13. 1:13:39Estilos en línea
  14. 1:14:25Forma de saltarse la especifidad
  15. 1:18:37Unidades relativas y absolutas
  16. 1:24:26Reset CSS y Normalize
  17. 1:27:00Modelo de la caja
  18. 1:34:40Propiedades de la caja
  19. 1:40:35box-sizing
  20. 1:42:25FLEXBOX
  21. 1:43:32Modelo de la Caja
  22. 1:49:55Desbordamiento: Overflow
  23. 1:54:45text-overflow
  24. 1:58:02Position
  25. 2:00:34Absolute y relative
  26. 2:05:22Centrar con absolute
  27. 2:07:14fixed
  28. 2:10:42sticky
  29. 2:13:57z-index
  30. 2:27:34Flexbox
  31. 2:32:02display: flex
  32. 2:33:36flex-direction
  33. 2:36:25direction
  34. 2:37:00writing-mode
  35. 2:38:07flex-wrap
  36. 2:42:35Atajo de flex-direction/wrap (flex-flow)
  37. 2:42:55Controlar el espacio de los elementos
  38. 2:49:58Atajo de flex-grow-shrink-basis
  39. 2:50:53Ejemplo de flex
  40. 2:53:25Cambiar el orden de cada elemento
  41. 2:55:59Posicionar elementos: Jusitify-content
  42. 3:00:05gap
  43. 3:01:04distribución en el eje cruzado
  44. 3:04:14align-items
  45. 3:04:46distribución en el eje cruzado 2
  46. 3:08:22los más usados
  47. 3:12:43GRID
  48. 3:16:33Qué es Grid?
  49. 3:20:30Grid vs Flex
  50. 3:22:37Grid en código
  51. 3:24:06Nuestra primer Grid
  52. 3:29:36Creando más columnas
  53. 3:30:23Unidad especial
  54. 3:36:42grid template rows
  55. 3:38:30Cuadricula vacia
  56. 3:40:11Filas automaticas
  57. 3:42:46Propiedad repeat()
  58. 3:47:36Ejercicio practico Excel (recomendado)
  59. 3:55:56Que no hacer + Ejercicio
  60. 4:03:19Auto-fill auto-fit
  61. 4:14:23grid-column-start/end
  62. 4:16:36grid-row-start/end
  63. 4:28:17Creando un Layout
  64. 4:33:00Grid áreas
  65. 4:39:32Alineación en línea de los elementos
  66. 4:43:17Alineación en bloque
  67. 4:48:58ANIMACIONES Y TRANSICIONES
  68. 4:51:332 formas de hacer animaciones
  69. 4:51:58Transiciones
  70. 4:53:47:hover
  71. 4:56:39propiedad transition-duration
  72. 4:57:58Error común sobre las transiciones
  73. 4:58:47Diferentes estados
  74. 5:01:19El problema del transition all
  75. 5:06:53cubic bezier + HACK
  76. 5:09:46Control de Tiempos en Transiciones CSS
  77. 5:15:31atajo transition
  78. 5:18:05Propiedades que podemos animar + Trucos
  79. 5:24:29Animaciones + ejemplos
  80. 5:43:45estado con animation-fill-mode
  81. 5:46:53atajo para las animaciones (animation)
  82. 5:51:42FPS
  83. 5:56:46Animaciones con Scroll
  84. 6:02:15animation timeline
  85. 6:06:33Galería de imágenes
  86. 6:08:47Creando navbar para animarlo
  87. 6:12:47Rango de las animaciones
  88. 6:16:10Animando galería

Plan de estudio sugerido

4 semanas · unas 5 h por semana

  1. 1.Semana 1 (0:00–1:27:00): fundamentos, selectores, herencia, cascada y especificidad; practica con una página HTML propia.
  2. 2.Semana 2 (1:27:00–2:27:34): modelo de caja, overflow, position y z-index; crea una cabecera fija y tarjetas superpuestas.
  3. 3.Semana 3 (2:27:34–3:12:43): Flexbox; reproduce una barra de navegación y una fila de tarjetas.
  4. 4.Semana 4 (3:12:43–final): Grid y animaciones; haz los ejercicios y un layout con áreas de grid.

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

  • Sigue el vídeo con el editor abierto y pausa en cada capítulo para probar la propiedad en tu propia página.
  • Repasa el bloque de cascada y especificidad (1:02:52–1:18:37) antes de seguir: explica muchos comportamientos inesperados.
  • En el bloque de Grid, dedica tiempo al ejercicio práctico (3:47:36) y al de qué no hacer (3:55:56).
  • Al terminar Flexbox y Grid, crea un layout que combine ambos para fijar cuándo usar cada uno.

Antes y después de este curso

Cómo lo presenta Miguel Ángel Durán (midudev)

Curso COMPLETO de CSS desde Cero para convertirte en Desarrollador Front-End y puedas crear tus propias páginas web 💻

Extracto de la descripción original en YouTube.

Preguntas frecuentes

+¿Necesito saber programar para empezar?

Se presenta como un curso de CSS desde cero. Los capítulos no indican requisitos, aunque unas nociones básicas de HTML ayudan a practicar.

+¿Cuánto tiempo hace falta?

El vídeo dura unas 6 horas y 26 minutos. Con pausas y práctica, un plan razonable son unas 4 semanas con unas 5 horas semanales.

+¿Qué cubre además de los selectores?

Cascada, especificidad, unidades, modelo de caja, position, z-index, Flexbox, Grid y una introducción a animaciones y transiciones.

+¿Qué puedo estudiar después?

Puedes seguir con JavaScript para añadir interactividad, o profundizar en Flexbox con un curso específico del catálogo.

Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en YouTube, y revisado según nuestro método. El contenido del curso es obra de Miguel Ángel Durán (midudev); si ves algún error, avísanos.

Guías para sacarle partido

Más cursos de Programación

Ficha 005.006YouTubeGRATIS

Agentic AI – Complete Course for Beginners

Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.036UdemyGRATIS

Aprende Accesibilidad Web paso a paso

Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.

Muy recomendado, valoración editorial 5 de 5Sergio Luján Mora, Ester Serna Berná, Olga Carreras, Armando Suárez Cueto, Antonio Ferrández Rodríguez, Cátedra Telefónica Universidad de Alicanteverificado 2026-10-01
Ficha 005.043YouTubeGRATIS

Aprende Godot - Curso completo desde cero

Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.050YouTubeGRATIS

Aprende JavaScript Ahora! curso completo desde cero para principiantes

Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.

Muy recomendado, valoración editorial 5 de 5HolaMundoverificado 2026-09-09