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
En este video te doy la bienvenida y te muestro lo que vamos a construir en el curso.
En esta lección de 2 minutos te explico rápidamente las principales características de Tailwind CSS en mi opinión.
En esta lección exploramos las diferentes formas de comenzar con Tailwind CSS, incluidos Tailwind Play, custom builds y Vite.js.
En esta lección configuramos VS Code para que formatee y ordene las clases de Tailwind CSS de forma automatizada.
En esta lección empezamos a diseñar la barra de navegación y aprendemos las unidades de medidas de Tailwind CSS.
En esta lección continuamos con la navegación móvil agregando los botones y los íconos SVG..
En esta lección agregamos los links que se mostrarán únicamente en pantallas pequeñas.
En esta lección diseñamos los links que serán visibles únicamente en pantallas grandes.
En esta lección definimos la estructura de un artículo y agregamos las imágenes en la carpeta public.
En esta lección aprendemos a mantener el aspect-ratio de las imágenes utilizando las propiedades de objeto en CSS.
En esta lección terminamos la tarjeta, diseñando el cuerpo y el pie de la misma.
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.
En esta lección diseñamos el footer y agregamos links de redes sociales utilizando iconos SVG
En esta lección agregamos un nuevo archivo HTML para la página about y la diseñamos con Tailwind CSS
En esta lección diseñamos la página del blog con su respectiva paginación.
En esta lección utilizamos Tailwind Forms para diseñar la página el formulario de la página de contacto.
En esta lección utilizamos el plugin tailwind/typography para diseñar la página de detalle de un artículo.
En esta lección revisamos rápidamente cómo funciona y cómo configurar el modo oscuro en Tailwind CSS
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.
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.
En esta lección implementamos el dark mode en las tarjetas del blog
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
En este video agregamos soporte a la página de about guiándonos con la página del index
En esta lección agregamos soporte de dark mode para la pagina del listado de posts.
En esta lección terminamos con el soporte dark mode para todas las páginas de nuestro template.
En esta lección habilitamos el dark mode en la página de artículos individuales.
En esta lección utilizamos Javascript para permitir que el usuario pueda activar y desactivar el dark mode presionando un botón.
En esta lección permitimos que la plantilla se adapte a las preferencias del usuario del sistema operativo.
En esta lección agregamos un dropdown menu con 3 opciones para permitir que el usuario pueda seleccionar el tema de su preferencia.
En esta lección implementamos la funcionalidad de seleccionar cualquiera de las 3 opciones y dar el feedback al usuario en la UI.
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.
En esta lección permitimos que el tema seleccionado por el usuario persista a través de las páginas almacenándolo en localStorage.
En esta lección escribimos el código necesario para desplegar y ocultar el menú que aparece únicamente en pantallas pequeñas.
En esta lección configuramos Vite para posteriormente publicar nuestra plantilla utilizando Vercel.
En esta lección final del curso publicamos nuestra plantilla utilizando Vercel. Y con esto damos por finalizado el curso Fundamentos de Tailwind CSS
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.
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
