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.
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
FREE
01:45En este video te doy la bienvenida y te muestro lo que vamos a construir en el curso.
FREE
02:16En esta lección de 2 minutos te explico rápidamente las principales características de Tailwind CSS en mi opinión.
PRO
07:25En esta lección exploramos las diferentes formas de comenzar con Tailwind CSS, incluidos Tailwind Play, custom builds y Vite.js.
PRO
03:36En esta lección configuramos VS Code para que formatee y ordene las clases de Tailwind CSS de forma automatizada.
PRO
04:25En esta lección empezamos a diseñar la barra de navegación y aprendemos las unidades de medidas de Tailwind CSS.
PRO
07:02En esta lección continuamos con la navegación móvil agregando los botones y los íconos SVG..
PRO
05:30En esta lección agregamos los links que se mostrarán únicamente en pantallas pequeñas.
PRO
07:44En esta lección diseñamos los links que serán visibles únicamente en pantallas grandes.
PRO
03:34En esta lección definimos la estructura de un artículo y agregamos las imágenes en la carpeta public.
PRO
03:05En esta lección aprendemos a mantener el aspect-ratio de las imágenes utilizando las propiedades de objeto en CSS.
PRO
03:00En esta lección terminamos la tarjeta, diseñando el cuerpo y el pie de la misma.
PRO
07:03En 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.
PRO
08:06En esta lección diseñamos el footer y agregamos links de redes sociales utilizando iconos SVG
PRO
06:00En esta lección agregamos un nuevo archivo HTML para la página about y la diseñamos con Tailwind CSS
PRO
09:58En esta lección diseñamos la página del blog con su respectiva paginación.
PRO
06:38En esta lección utilizamos Tailwind Forms para diseñar la página el formulario de la página de contacto.
PRO
09:12En esta lección utilizamos el plugin tailwind/typography para diseñar la página de detalle de un artículo.
PRO
02:59En esta lección revisamos rápidamente cómo funciona y cómo configurar el modo oscuro en Tailwind CSS
PRO
04:41En 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.
PRO
05:10En 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.
PRO
01:50En esta lección implementamos el dark mode en las tarjetas del blog
PRO
02:16En esta lección continuamos agregando soporte de modo oscuro para el pié de página y solucionamos un pequeño problema con el mismo
PRO
02:25En este video agregamos soporte a la página de about guiándonos con la página del index
PRO
04:41En esta lección agregamos soporte de dark mode para la pagina del listado de posts.
PRO
02:48En esta lección terminamos con el soporte dark mode para todas las páginas de nuestro template.
PRO
02:12En esta lección habilitamos el dark mode en la página de artículos individuales.
PRO
04:54En esta lección utilizamos Javascript para permitir que el usuario pueda activar y desactivar el dark mode presionando un botón.
PRO
04:27En esta lección permitimos que la plantilla se adapte a las preferencias del usuario del sistema operativo.
PRO
05:56En esta lección agregamos un dropdown menu con 3 opciones para permitir que el usuario pueda seleccionar el tema de su preferencia.
PRO
09:51En esta lección implementamos la funcionalidad de seleccionar cualquiera de las 3 opciones y dar el feedback al usuario en la UI.
PRO
06:22En 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.
PRO
02:10En esta lección permitimos que el tema seleccionado por el usuario persista a través de las páginas almacenándolo en localStorage.
PRO
03:54En esta lección escribimos el código necesario para desplegar y ocultar el menú que aparece únicamente en pantallas pequeñas.
PRO
03:39En esta lección configuramos Vite para posteriormente publicar nuestra plantilla utilizando Vercel.
PRO
03:52En esta lección final del curso publicamos nuestra plantilla utilizando Vercel. Y con esto damos por finalizado el curso Fundamentos de Tailwind CSS
PRO
08:20En 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.
Tu instructor
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
Estos videos son impresionantes, no he visto nada mejor que ello. Un material muy limpio muy claro y profesional.
Kenneth Ruiz
Excelente tutorial ! Mil gracias. Como siempre todo muy bien explicado y de una manera sencilla.
Dileydi Ramos
Muchas gracias Jorge, muy clara la explicación. Gracias por aprendible.com enserio AMO tus videos los AMO.
César Cruz
Más del 90% de nuestros estudiantes recomiendan Aprendible por la calidad de los cursos.