¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo!

Usa clases que sabes como funcionan, ya es momento deja de dudar

5.00 (4 reviews)
Udemy
platform
Español
language
Web Development
category
instructor
48
students
10.5 hours
content
Jul 2021
last update
$24.99
regular price

What you will learn

El uso de Tailwind como herramienta para un desarrollo fácil y eficaz.

Description

Olvídate de escribir clases de librerías css, cruzar los dedos y esperar que funcionen, usa Tailwind y escribe clases que sabes cómo funcionan!

Ser desarrollador web es fascinante, css, sass, postcss, bootstrap, bulma, las opciones parecen ilimitadas, y en el momento del desarrollo no terminan de convencer.

Quizá mi historia te suene familiar, estás desarrollando un proyecto, tienes el diseño correcto y al momento de la implementación el css no funciona como debería, lo último que sabes es que te pasas un tiempo buscando una solución para un problema que no debía existir.

¿Pero si copie el componente de la página oficial? Lo sé también me ha pasado.

¿Te gustaría volver a disfrutar el desarrollo del diseño web? Transforma tu forma de trabajo, vuelve a sentir la sencillez y facilidad al implementar tus proyectos.

Desarrolla los componentes más utilizados de Bootstrap 5.

Implementa tooltips, dropdowns y popovers.

Diseña tus propios elementos accordion y collapse.

Claro también aprenderás a crear tu propio carousel.

Por supuesto no te olvides del modal.

Desarrolla formas responsivas.

Utiliza diversos breakpoints.

Aplica flexbox y grid.

Crea diseños espectaculares

Aplica tu aprendizaje y desarrolla dos proyectos completos, ahorra unos dólares.

Volverás a escribir estilos sin bloquearte.

Y sobre todo a diseñar con placer y fluidez.

Lo mejor es que tendrás completa seguridad de lo que haces al diseñar.


Inscríbete, tienes una garantía de 30 días, tu dinero esta seguro y si lo solicitas una devolución del 100%, sin preguntas.

Screenshots

¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Screenshot_01¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Screenshot_02¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Screenshot_03¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Screenshot_04

Content

Diseña y crea tu propio bootstrap.

Instalación
Diseño de componente alert
Diseño de componente alert variaciones
Diseño de componente alert con link integrado
Diseño de componente alert con título y texto con estilo
Diseño de componente alert con icono
Diseño de componente badge
Diseño de variaciones badge
Diseño de componente button
Diseño de componente button outline
Diseño de button en bloque
Diseño variación de button rounded
Clases para el manejo de imágenes
Diseño de componente card
Diseño de variación del componente card
Diseño de componente card con quote
Diseño de componente card solida
Diseño de button close
Diseño de componente lista
Variaciones de la lista
Agregar shadow a los componentes
Implementación de animaciones
Implementación de animaciones continuación

Crea asombros y responsivos layouts muy fácil con flexbox y grid

Flexbox fundamentos y crea un button group solid
Flexbox diseña un button group outline
Flexbox variaciones del button group
Flexbox diseño en columna
Flexbox diseña un componente card con imagen y texto overlay
Flexbox diseña componentes responsive
Flexbox diseña componentes responsive complemento
Flexbox diseña un compente lista responsive
Flexbox diseña componentes nav
Diseña formas: fundamentos
Diseña formas deshabilitadas
Diseña componentes textarea y variaciones de inputs
Diseña los componentes select
¿Y los input group?
Diseña variaciones del input group
Crea más variaciones del input group
Grid fundamentos
Grid diseña un forma responsiva
Conclusión de la unidad

¿Interactividad? Crea tus propios componentes dinámicos y aprende como funcionan

Crea un tooltip con la misma librería que usa bootstrap
¿Html en un tooltip? Por supuesto incluso un emoji
¿Y qué hay de los popovers? No solo los diseñes modifica sus características
Crea un drowpdown!
¿Dropdown abierto o cerrado? Lo sabremos ahora
Vamos a diseñar un collapse
Agrega más funcionalidad a tu collapse
Aprende como funciona un toggle collapse
Programa tu propio accordion
Pule el accordion que programaste
Reafirma lo que aprendiste y crea una variación de accoridon
El carousel no puede faltar, aquí lo programamos y diseñamos
Agrega las imágenes al carousel
Últimos detalles en el carousel
Haz responsivo tu carousel
Modal, haz que las cosas importante sobresalgan
Diseña tu propio modal al estilo de bootstrap
¿Modal? ¿Off canvas? Averigua cual de los dos
Conclusión de la unidad

Aplica lo aprendido y crea un atractivo proyecto personal

Degradados un efecto visual muy llamativo
Diseña para los mobiles primero
No olvides diseñar para el pc también
Agrega interactividad con hover y focus states
Crea un diseño completamente nuevo (casi)
Y si lo hiciste una vez puedes dos

Afina Tailwind, personaliza y clona un excelente framework

Vamos a crear el proyecto
Realiza cada paso desde el desarrollo hasta el ciclo de producción en un vídeo
¿Quieres aprender a personaliza tailwind? Entra aquí
Primero mobile primero la navegación
Después crea el main, la primera sección
Detalla la primera sección
Ahora crea la sección de instalación
Vamos a dar detallas a la sección de instalación
Presta atención a la sección jsDelivr, diseña código dentro del código
Los iconos no pueden faltar
Ya casi terminamos, diseñar el footer queremos
Detalles el footer debe tener
En el collapse está la fuerza

Ahora el proyecto será responsive

¿Comenzamos con el breakpoint?
Vamos ahora con la sección principal
Es hora de la sección main
Crea un container y modifica el footer
Afinando detalles
Proyecto para producción
Despedida

Charts

Price

¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Price chart

Rating

¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Ratings chart

Enrollment distribution

¿Tailwind CSS? Domínalo crea Bootstrap 5 y entiéndelo! - Distribution chart

Related Topics

4169634
udemy ID
7/7/2021
course created date
7/15/2021
course indexed date
Bot
course submited by