¿Qué es Tailwind CSS?
Clase 1 de 29 • Curso de Tailwind CSS 1
Contenido del curso
Conceptos básicos
Utilerías
- 6

Colores
04:25 min - 7
Cómo crear grids o columnas en Tailwind CSS
04:41 min - 8

Dimensiones y Espacios
08:57 min - 9

Cambiando las propiedades de la tipografía
04:59 min - 10

Ajustando el espaciado entre letras y líneas
04:37 min - 11

Display
04:42 min - 12

Flexbox
09:19 min - 13

Crea tus propias utilerías
04:04 min - 14

Entendiendo las variantes y las pseudo-clases
04:05 min - 15
¡Es hora de practicar!
01:40 min
Proyecto: PlatziFood
- 16

Creando una card
05:55 min - 17

Aplicando formato a la card
09:06 min - 18

Responsive design en la card
05:41 min - 19

Construye el header
07:32 min - 20

Crea el footer
09:46 min - 21

Crea un banner
06:32 min - 22

Cómo integrar una card
08:47 min - 23

Forms
10:02 min - 24

Directivas de Apply
02:57 min - 25

Extraer componentes
08:11 min - 26

Navbar
08:51 min - 27

Alpine JS
03:32 min - 28

Optimiza tu archivo: PurgeCSS y NanoCSS
03:56 min
Conclusiones
¿Quién es Victorio Ali y qué nos enseñará?
Victorio Ali, fundador de la empresa "Viento Digital," será nuestro guía en este viaje educativo. Con una trayectoria que comenzó a los ocho años en el mundo de la programación, Victorio ha trabajado con diversas tecnologías, pero es su pasión por Tailwind CSS lo que lo trae aquí a compartir su conocimiento. Esta herramienta, que se ha puesto muy de moda últimamente, se centra en una ideología de "utility-first," prioriza el diseño para dispositivos móviles como primer objetivo y promueve un diseño responsable. Estos son conceptos cruciales que exploraremos a fondo durante el curso.
¿Cuál es la importancia de Tailwind CSS?
Elegir una tecnología adecuada para desarrollar proyectos web es fundamental, y aquí es donde Tailwind CSS entra en escena. ¿Por qué Tailwind en lugar de otras herramientas CSS populares como Bootstrap o Bulma? Una de sus diferencias más notables es la ausencia de componentes prediseñados que puedas simplemente copiar y pegar. Al contrario, Tailwind te invita a crear tus propios componentes, dándote un control total sobre el diseño de tu proyecto. Esta libertad, aunque puede parecer complicada al inicio, puede ser increíblemente poderosa y, a menudo, más sencilla de lo que parece al acostumbrarse.
¿Qué diferencia a Tailwind CSS de otros frameworks?
- Sin componentes prediseñados: Te desafía a crear tus propios elementos de diseño.
- Enfoque en la utilidad y la personalización: Los estilos se definen en función de sus utilidades, facilitando la personalización.
- Diseño responsive prioritario: Pensado desde el inicio para adaptarse a dispositivos móviles.
¿Qué vamos a construir en este curso?
Este curso no es solo teórico; abordaremos la práctica al construir "Platzi Food," un proyecto web completo que abarcará múltiples aspectos del diseño y desarrollo web. A medida que avancemos, aprenderás cómo utilizar Tailwind CSS para crear un diseño totalmente responsive y funcional.
Elementos que vamos a desarrollar:
- Menú: Implementaremos un menú fácil de navegar y adaptativo.
- Banner: Crearemos un banner atractivo que llame la atención de los usuarios.
- Productos: Diseñaremos una sección para mostrar productos que sea visualmente agradable.
- Formulario: Aprenderás a construir formularios intuitivos y de fácil uso.
- Footer: Finalizaremos con un footer informativo y funcional.
¿Qué conocimientos previos necesitas?
Antes de sumergirte de lleno en este curso, es importante que tengas una base sólida en HTML y CSS. Si aún no los dominas, Victorio sugiere completar el curso de desarrollo web online y el curso práctico de HTML y CSS disponibles en Platzi. Estos conocimientos te servirán como los cimientos sobre los que construirás tus habilidades en Tailwind CSS.
¡Prepárate para un viaje inspirador y educativo donde no solo aprenderás a utilizar Tailwind CSS, sino que también desarrollarás un proyecto web completo desde cero! Te invito a embarcarte en esta emocionante experiencia de aprendizaje con confianza y curiosidad. ¡Nos vemos en la próxima clase!