🎃 ¡Oferta de Halloween! Obtén 40% de descuento en nuestros cursos hasta el 31 de octubre 🎃

1d: 7h: 46m:42s'

Fundamentos de Tailwind CSS

Esta serie de videos aprenderemos a utilizar Tailwind CSS de forma práctica diseñando un template completo desde cero y paso a paso.

Fundamentos de Tailwind CSS

Resumen del curso

  • De principiante a experto
  • 2h 58m de video HD
  • 36 lecciones
  • Ejercicios prácticos
  • Acceso de por vida
  • Aprende a tu propio ritmo

Lecciones cortas, concisas y precisas.

No te quemes en búsquedas exhaustivas que te impiden lograr tus metas.

En Aprendible obtienes:

  • Lecciones que optimizan tu aprendizaje en menor tiempo
  • Audios y videos de alta calidad
  • Explicaciones paso a paso, sin rodeos, ni balbuceos.

Construye desde HOY tu camino como Desarrollador Web Moderno

Contenido del curso

2h 58m de contenido, 36 lecciones

1. Introducción al curso Fundamentos de Tailwind CSS
FREE
01:45

En este video te doy la bienvenida y te muestro lo que vamos a construir en el curso.

349
2. Qué es Tailwind CSS
FREE
02:16

En esta lección de 2 minutos te explico rápidamente las principales características de Tailwind CSS en mi opinión.

314
3. Instalación de Tailwind CSS
PRO
07:25

En esta lección exploramos las diferentes formas de comenzar con Tailwind CSS, incluidos Tailwind Play, custom builds y Vite.js.

287
4. Formateo y orden de clases automáticos
PRO
03:36

En esta lección configuramos VS Code para que formatee y ordene las clases de Tailwind CSS de forma automatizada.

251
5. Barra de navegación móvil
PRO
04:25

En esta lección empezamos a diseñar la barra de navegación y aprendemos las unidades de medidas de Tailwind CSS.

239
6. Cómo utilizar íconos SVG con Tailwind CSS
PRO
07:02

En esta lección continuamos con la navegación móvil agregando los botones y los íconos SVG..

196
7. Links de navegación móvil
PRO
05:30

En esta lección agregamos los links que se mostrarán únicamente en pantallas pequeñas.

158
8. Links de navegación escritorio
PRO
07:44

En esta lección diseñamos los links que serán visibles únicamente en pantallas grandes.

151
9. Estructura de un artículo
PRO
03:34

En esta lección definimos la estructura de un artículo y agregamos las imágenes en la carpeta public.

146
10. Trabajando con imágenes en Tailwind CSS
PRO
03:05

En esta lección aprendemos a mantener el aspect-ratio de las imágenes utilizando las propiedades de objeto en CSS.

139
11. Terminando el diseño de la tarjeta
PRO
03:00

En esta lección terminamos la tarjeta, diseñando el cuerpo y el pie de la misma.

132
12. Cómo utilizar grids adaptables
PRO
07:03

En esta lección aprendemos a utilizar grids o rejillas para organizar las tarjetas de los artículos de forma adaptable a los diferentes anchos de pantalla.

135
13. Diseñando el pié de página
PRO
08:06

En esta lección diseñamos el footer y agregamos links de redes sociales utilizando iconos SVG

119
14. Diseñando la página "About"
PRO
06:00

En esta lección agregamos un nuevo archivo HTML para la página about y la diseñamos con Tailwind CSS

108
15. Diseñando la paginación
PRO
09:58

En esta lección diseñamos la página del blog con su respectiva paginación.

108
16. Diseñando el formulario de contacto
PRO
06:38

En esta lección utilizamos Tailwind Forms para diseñar la página el formulario de la página de contacto.

101
17. Diseñando la página de detalle de un artículo
PRO
09:12

En esta lección utilizamos el plugin tailwind/typography para diseñar la página de detalle de un artículo.

91
18. Cómo funciona el Dark Mode en Tailwind CSS
PRO
02:59

En esta lección revisamos rápidamente cómo funciona y cómo configurar el modo oscuro en Tailwind CSS

103
19. Soporte Dark Mode para la navegación
PRO
04:41

En esta lección implementamos el modo oscuro en la navegación de escritorio y móvil, y también en el fondo de la página.

89
20. Cómo personalizar la configuración de Tailwind CSS
PRO
05:10

En esta lección agregamos un tono más oscuro que el nivel 900 para que el fondo de la página se integre mejor en el modo oscuro.

87
21. Soporte de dark mode para las tarjetas
PRO
01:50

En esta lección implementamos el dark mode en las tarjetas del blog

82
22. Soporte dark mode para el footer
PRO
02:16

En esta lección continuamos agregando soporte de modo oscuro para el pié de página y solucionamos un pequeño problema con el mismo

78
23. Soporte dark mode para la página de `about`
PRO
02:25

En este video agregamos soporte a la página de about guiándonos con la página del index

74
24. Soporte dark mode para la página blog
PRO
04:41

En esta lección agregamos soporte de dark mode para la pagina del listado de posts.

70
25. Soporte dark mode para la página `contact`
PRO
02:48

En esta lección terminamos con el soporte dark mode para todas las páginas de nuestro template.

74
26. Soporte dark mode para la página `article`
PRO
02:12

En esta lección habilitamos el dark mode en la página de artículos individuales.

62
27. Habilitando el botón para activar y desactivar el dark mode
PRO
04:54

En esta lección utilizamos Javascript para permitir que el usuario pueda activar y desactivar el dark mode presionando un botón.

82
28. Sincronización con el dark mode con el dispositivo del usuario
PRO
04:27

En esta lección permitimos que la plantilla se adapte a las preferencias del usuario del sistema operativo.

71
29. Menú para seleccionar el tema
PRO
05:56

En esta lección agregamos un dropdown menu con 3 opciones para permitir que el usuario pueda seleccionar el tema de su preferencia.

70
30. Menú para seleccionar el tema - Parte 2
PRO
09:51

En esta lección implementamos la funcionalidad de seleccionar cualquiera de las 3 opciones y dar el feedback al usuario en la UI.

61
31. Menú para seleccionar el tema - Parte 3
PRO
06:22

En esta lección activamos el dark mode si está activado en el sistema operativo o si ha sido seleccionado por el usuario en el menú de la plantilla.

58
32. Soporte para localStorage
PRO
02:10

En esta lección permitimos que el tema seleccionado por el usuario persista a través de las páginas almacenándolo en localStorage.

69
33. Implementando la funcionalidad del menú para móviles
PRO
03:54

En esta lección escribimos el código necesario para desplegar y ocultar el menú que aparece únicamente en pantallas pequeñas.

69
34. Configuración de Vite
PRO
03:39

En esta lección configuramos Vite para posteriormente publicar nuestra plantilla utilizando Vercel.

63
35. Deploy de un proyecto con Vite en Vercel
PRO
03:52

En esta lección final del curso publicamos nuestra plantilla utilizando Vercel. Y con esto damos por finalizado el curso Fundamentos de Tailwind CSS

81
36. Botones de crear, editar y eliminar
PRO
08:20

En esta lección BONUS vamos a corregir algunos detalles, como los títulos de las páginas, actualización de dependencias y a agregar unos botones a la interfaz.

21

Tu instructor

Jorge García

Jorge García Coello

Aprendible.com

Jorge García es creador de Aprendible.com yDesarrollador Certificado en LaravelA través de su plataforma de aprendizaje y de otras plataformas de estudio, desde 2015 ha ayudado a decenas de miles de desarrolladores a mejorar sus oportunidades dentro del Desarrollo Web.

Lo que opinan nuestros estudiantes

Miles de desarrolladores han transformado su carrera con nosotros
WOW! Cada vez me impresionas más! Excelente trabajo! Ahora a probarlo
Beto Vásquez
Beto Vásquez
Estos videos son impresionantes, no he visto nada mejor que ello. Un material muy limpio muy claro y profesional.
Kenneth Ruiz
Kenneth Ruiz
Excelente tutorial ! Mil gracias. Como siempre todo muy bien explicado y de una manera sencilla.
Dileydi Ramos
Dileydi Ramos
Muchas gracias Jorge, muy clara la explicación. Gracias por aprendible.com enserio AMO tus videos los AMO.
César Cruz
César Cruz
Más del 90% de nuestros estudiantes recomiendan Aprendible por la calidad de los cursos.