Emmet abreviation div>(div>img)h2+p+div*2
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 10
Preguntas 1
Emmet abreviation div>(div>img)h2+p+div*2
Así quedó, tan sencillo como no me lo imaginé, increíble.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card /Producto </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="min-h-screen bg-gray-400 mx-4">
<div class="bg-white mt-4">
<img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
<h2>titulo</h2>
<p>descripcion</p>
<div>precio</div>
<div>Calificación /reseñas </div>
</div>
</body>
</html>```
Nice! No me sabioa lo de unspash
Buenisimo ese dato de unsplash
<!-- inicializar nuestro documento poniendo los estilos y clases bsicos con los cuales estaremos trabajando -->
<body class="min-h-screen bg-gray-400 mx-4">
<div class="bg-white mt-4">
<div>
<img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="Hamburger">
</div>
<h2>Titulo</h2>
<p> descripcion</p>
<div> precio</div>
<div> calificacion / reseñas </div>
</div>
Se logra apreciar mucho más el contenido y las herramientas del framework cuando se lleva a la práctica.
Primera vez programando mobile first y me encanta! Muy buena explicación!
Clara esta clase
Me esta encantando este curso!
Empezamos!
Excelente!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?