Fundamentos de Tailwind CSS
0%
29 lecciones 2h 20m Nuevas lecciones cada semana
Esta serie de videos aprenderemos a utilizar Tailwind CSS de forma práctica diseñando un template completo desde cero y paso a paso.
FREE
01:451. Introducción al curso Fundamentos de Tailwind CSS
En este video te doy la bienvenida y te muestro lo que vamos a construir en el curso.
FREE
02:162. Qué es Tailwind CSS
En esta lección de 2 minutos te explico rápidamente las principales características de Tailwind CSS en mi opinión.
FREE
07:253. Instalación de Tailwind CSS
En esta lección exploramos las diferentes formas de comenzar con Tailwind CSS, incluidos Tailwind Play, custom builds y Vite.js.
FREE
03:364. Formateo y orden de clases automáticos
En esta lección configuramos VS Code para que formatee y ordene las clases de Tailwind CSS de forma automatizada.
PRO
04:255. Barra de navegación móvil
En esta lección empezamos a diseñar la barra de navegación y aprendemos las unidades de medidas de Tailwind CSS.
PRO
07:026. Cómo utilizar íconos SVG con Tailwind CSS
En esta lección continuamos con la navegación móvil agregando los botones y los íconos SVG..
PRO
05:307. Links de navegación móvil
En esta lección agregamos los links que se mostrarán únicamente en pantallas pequeñas.
PRO
07:448. Links de navegación escritorio
En esta lección diseñamos los links que serán visibles únicamente en pantallas grandes.
PRO
03:349. Estructura de un artículo
En esta lección definimos la estructura de un artículo y agregamos las imágenes en la carpeta public.
PRO
03:0510. Trabajando con imágenes en Tailwind CSS
En esta lección aprendemos a mantener el aspect-ratio de las imágenes utilizando las propiedades de objeto en CSS.
PRO
03:0011. Terminando el diseño de la tarjeta
En esta lección terminamos la tarjeta, diseñando el cuerpo y el pie de la misma.
PRO
07:0312. Cómo utilizar grids adaptables
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.
PRO
08:0613. Diseñando el pié de página
En esta lección diseñamos el footer y agregamos links de redes sociales utilizando iconos SVG
PRO
06:0014. Diseñando la página "About"
En esta lección agregamos un nuevo archivo HTML para la página about y la diseñamos con Tailwind CSS
PRO
09:5815. Diseñando la paginación
En esta lección diseñamos la página del blog con su respectiva paginación.
PRO
06:3816. Diseñando el formulario de contacto
En esta lección utilizamos Tailwind Forms para diseñar la página el formulario de la página de contacto.
PRO
09:1217. Diseñando la página de detalle de un artículo
En esta lección utilizamos el plugin tailwind/typography para diseñar la página de detalle de un artículo.
FREE
02:5918. Cómo funciona el Dark Mode en Tailwind CSS
En esta lección revisamos rápidamente cómo funciona y cómo configurar el modo oscuro en Tailwind CSS
PRO
04:4119. Soporte Dark Mode para la navegación
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.
PRO
05:1020. Cómo personalizar la configuración de Tailwind CSS
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.
PRO
01:5021. Soporte de dark mode para las tarjetas
En esta lección implementamos el dark mode en las tarjetas del blog
PRO
02:1622. Soporte dark mode para el footer
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
PRO
02:2523. Soporte dark mode para la página de `about`
En este video agregamos soporte a la página de about guiándonos con la página del index
PRO
04:4124. Soporte dark mode para la página blog
En esta lección agregamos soporte de dark mode para la pagina del listado de posts.
PRO
02:4825. Soporte dark mode para la página `contact`
En esta lección terminamos con el soporte dark mode para todas las páginas de nuestro template.
PRO
02:1226. Soporte dark mode para la página `article`
En esta lección habilitamos el dark mode en la página de artículos individuales.
PRO
04:5427. Habilitando el botón para activar y desactivar el dark mode
En esta lección utilizamos Javascript para permitir que el usuario pueda activar y desactivar el dark mode presionando un botón.
PRO
04:2728. Sincronización con el dark mode con el dispositivo del usuario
En esta lección permitimos que la plantilla se adapte a las preferencias del usuario del sistema operativo.
PRO
05:5629. Menú para seleccionar el tema
En esta lección agregamos un dropdown menu con 3 opciones para permitir que el usuario pueda seleccionar el tema de su preferencia.
