Fundamentos de Tailwind CSS

Fundamentos de Tailwind CSS

0%
14 lecciones 1h 10m 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.
Introducción al curso Fundamentos de Tailwind CSS
FREE
01:45

1. 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.
Qué es Tailwind CSS
FREE
02:16

2. 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.
Instalación de Tailwind CSS
FREE
07:25

3. 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.
Formateo y orden de clases automáticos
FREE
03:36

4. 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.
Barra de navegación móvil
FREE
04:25

5. 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.
Cómo utilizar íconos SVG con Tailwind CSS
PRO
07:02

6. 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..
Links de navegación móvil
PRO
05:30

7. Links de navegación móvil

En esta lección agregamos los links que se mostrarán únicamente en pantallas pequeñas.
Links de navegación escritorio
PRO
07:44

8. Links de navegación escritorio

En esta lección diseñamos los links que serán visibles únicamente en pantallas grandes.
Estructura de un artículo
PRO
03:34

9. 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.
Trabajando con imágenes en Tailwind CSS
PRO
03:05

10. 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.
Terminando el diseño de la tarjeta
PRO
03:00

11. Terminando el diseño de la tarjeta

En esta lección terminamos la tarjeta, diseñando el cuerpo y el pie de la misma.
Cómo utilizar grids adaptables
PRO
07:03

12. 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.
Diseñando el pié de página
PRO
08:06

13. Diseñando el pié de página

En esta lección diseñamos el footer y agregamos links de redes sociales utilizando iconos SVG
Diseñando la página "About"
PRO
06:00

14. 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

Otros cursos que te pueden interesar

Fundamentos de Tailwind CSSFundamentos de Laravel 9Aprende Laravel Livewire desde ceroDesarrollo de una API con LaravelAprende Laravel IntermedioDesarrollo de paquetes para Laravel & PHPAprende Laravel desde ceroConstruyendo una red social con Laravel & TDDConstruyendo un SPA con Vue.js & LaravelMastering AuthenticationDesarrollo de un blog con manejo de roles y permisosNotificaciones