Enlace al documento en Figma
https://www.figma.com/file/aPbr2Rhd5SCUjNYu6NRPPB/Platzi-Travel-Mockups?node-id=0%3A1
Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Maquetación del proyecto
10/29Recursos
Aportes 32
Preguntas 2
Ordenar por:
La forma de trabajar de la profesora usando Figma para tener una idea de como irán colocados los elementos me parece una de las formas más eficientes de hacerlo. Se use Figma o no lo importante es tener claro como vamos a construir nuestro layout para evitar problemas luego y tener que re-estructurar todo el código por una mala implementación inicial.
Creo que es mejor 1 div padre y 4 divs hijos y no 3 divs padres y dentro mas divs, son muchos divs.
play.tailwindcss.com/yj2I8z9H3F?size=526x934
estoy en lo correcto? 🤔
Yo en lo personal manejaría un contenedor principal con flex-col; dentro habrían 2 div y el contenido dentro del segundo div lo manejaría con grid de esa forma puedo manipular muy fácil esa organización de los 3 elementos con tamaños diferentes.
Estaria faltando la clase de grid, la profesora dice al pincipio “Ahora que ya conoces flexbox y grid” y solo vimos flexbox
En lo personal, a mi me gusta trabajar con flexbox, pero en este caso lo haría con grid
De forma general, se utilizará Flexbox en este proyecto.
Paleta de colores:
#8FA206#61EAC9#FFFFFF#000000#CC2D4A
Con un div padre y 4 divs hijos y utilizando GRID, mi solución es la siguiente:
En movil:
código utilizado:
<div class="flex h-auto min-h-screen w-full justify-center bg-gray-100">
<div class="grid h-auto w-full max-w-5xl grid-cols-1 gap-4 bg-gray-300 p-10 text-right sm:grid-cols-2 sm:p-20">
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-1 sm:col-end-3 sm:h-auto">div 1</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-1 sm:col-end-2 sm:row-start-2 sm:row-end-4 sm:h-auto">div 2</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-2 sm:col-end-3 sm:h-auto">div 3</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-2 sm:col-end-3 sm:h-auto">div 4</div>
</div>
</div>
Para no tener problemas con ver cambios en la web que vamos realizando. Pueden configurar en el archivo package.json. El siguiente comando
"scripts": {
"dev": "npx tailwindcss -i ./src/css/main.css -o ./public/css/tailwind.css --watch"
},
Posterior en la terminal se coloca el comando npm run dev
Les comparto el canal de Tailwind, por si quieren complementar el curso.
Otro curso que debo tomar. FIGMA se ve genial para hacer nuestros diseños!
Esta muy creativa la forma de hacer el Trending Stays así con flexbox, pero creo que con grid saldría mas rápido, fácil y sin tanto div y así quedaría mas limpio el código
Yo uso papel y lápices de colores para ir identificando la estructura, pero cambiaré a Figma jaja, excelente clase
Considero que es mejor pensar como si los elementos fueran una grilla
Naranja contenedor
Rojo los elementos
figma es nuestra guia me parece muy bien que en esta clase se vea un poco de figma ya que gracias a esto a la hora de tocar codigo estaremos haciendo las cosas de una forma fluida y no estaremos perdidos.
Pequeño aporte:
Soy yo o se saltó la clase con la explicación de Grid, creo que no la vi.
Yo utilizaría display grid con un solo contenedor padre, y ubico los hijos según el diseño. No se como se hace con tailwind o si siquiera se pueda hacer. Supongo que en las siguientes clases lo voy a averiguar.
Uso adobe XD
Para el diseño de este layout, utilizaría flex a través de divs anidados.
Les quiero compartir mi proyecto como quedo !
Link
<https://maikoldev.github.io/platzi-travel/>
Repo Publico
<https://github.com/maikoldev/platzi-travel>
<https://play.tailwindcss.com/sDVHFRzUXR?size=490x976>
Creo que grid es mas elegante en este caso. Incluso en la documentacion presentan este ejemplo.
<https://tailwindcss.com/docs/grid-row>
`
`
`
`
01
`
` 02
`
` 03
`
`
Tanto grid como flex son muy útiles. Se me ocurre que para resolver rápidamente la responsividad, es mejor grid.
Interesante!! la maquetación en Figma. Haré el curso de Figma … Gracias por la indicación!
10. Maquetación del proyecto
<body>
<section class="w-screen h-screen bg-gray-950 grid grid-cols-3 grid-rows-3 gap-4 p-4">
<div class="bg-neutral-950 col-span-3"></div>
<div class="bg-indigo-950 row-start-2 row-end-4"></div>
<div class="bg-red-500 col-start-2 col-end-4"></div>
<div class="bg-violet-950 col-start-2 col-end-4"></div>
</section>
</body>
si alguien desea usar grid para este proyecto: DOC --> https://tailwindcss.com/docs/display
Me parecería más apropiado usar grid en el último contenedor, usando 3 columnas y dos filas
Yo utilizaria grid con flexbox para el layout 😉
Personalmente me gusta más trabajar con flexbox que con css grid, aunque muchos prefieran en este caso trabajar con css grid
Buena clase! El ejemplo está muy claro!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?