h-96 es la altura máxima que nos deja usar tailwind, pero también podemos indicar la altura que queramos, como h-[36rem]
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,
Haciendo responsivo nuestro proyecto
23/29Recursos
¿Cómo empezar a hacer responsivo nuestro proyecto web?
Para comenzar a hacer nuestro proyecto web responsivo, el primer paso es identificar qué debe cambiar al pasar de una versión móvil a una versión de escritorio. Saca provecho de herramientas como Figma para visualizar y planear estas transformaciones de manera eficiente. En esta etapa, el objetivo es analizar detalladamente los elementos de diseño y funcionalidad que se comportan de manera distinta según el dispositivo.
¿Cuáles son los cambios más relevantes en el layout web?
-
Navbar en lugar de Tab-bar: Es crucial distinguir entre la tab-bar utilizada generalmente en dispositivos móviles y la navbar más típica de las versiones web. Esto implica no solo un cambio visual, sino también una diferente manera de navegación.
-
Desaparición de Search bar: La barra de búsqueda puede no ser tan prominente, o incluso desaparecer, dejando espacio para otros elementos como texto adicional.
-
Flexbox y estructura de elementos: Las recomendaciones y las tarjetas mantendrán su comportamiento, pero la disposición de elementos mediante Flexbox podría requerir ajustes para que el diseño sea responsivo.
Configuración de estilos para breakpoint 'large'
Para manipular estilos en la versión web, es útil encapsular tus cambios de forma organizada. Al trabajar con breakpoints, añade clases específicas para la versión 'large' de tu proyecto, lo cual asegurará que los elementos se comporten adecuadamente en pantallas más grandes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Project</title>
<style>
/* CSS simplificado con breakpoints */
@media (min-width: 1024px) {
.large-hidden { display: none; }
.large-visible { display: block; }
}
</style>
</head>
<body>
<div class="navbar large-visible">
<!-- Contenido de la barra de navegación -->
</div>
<input type="search" class="large-hidden" placeholder="Buscar">
<!-- Más contenido del sitio -->
</body>
</html>
Ajustes específicos en Flexbox y otros elementos
Para las imágenes y texto, asegúrate de usar propiedades como background-size: cover; y background-position: center; que garantizarán que las imágenes se muestren adecuadamente sin importar el tamaño de la pantalla. Considera reemplazar las imágenes con versiones que sean más adecuadas para escritorio si es necesario, como en el caso de una imagen diferente para San Francisco.
.img-container {
background-image: url('SanFrancisco-desktop.jpg');
background-size: cover;
background-position: center;
height: auto;
}
¿Cómo agregar un texto explicativo y posicionar elementos?
A medida que haces la transición de tu diseño, es importante añadir textos o botones que hayan sido diseñados para la experiencia de usuario en web. Por ejemplo, para incluir un texto como "encuentra más ubicaciones", asegúrate de que esté estilizado adecuadamente y posicionado para ser visible y legible en el entorno web.
Estilización y posicionamiento
El texto debe ser lo suficientemente grande y llamativo, pero también necesitas asegurarte de que no interfiera o se superponga con otros elementos en la pantalla.
<div class="info-text large-visible">
<p>Encuentra más ubicaciones como esta</p>
</div>
<style>
.info-text {
font-size: 4rem; /* Ajuste del texto explicativo */
margin-left: 16px;
color: #000;
}
</style>
Este enfoque sistematiza y facilita las modificaciones, asegurando que cada cambio sea visible y funcional. Obrar con preferencia de mobile-first y luego añadir modificaciones para pantallas más grandes mediante breakpoints resulta ser una de las prácticas más impactantes y organizadas para crear proyectos web responsivos.
Aportes 17
Preguntas 4
Ordenar por:
En determinado elemento se añade el prefijo lg: correspondiente a un min-width: 1024px seguido de la clase que tendrá para ese tamaño. Se puede añadir tantos breakpoints como se desee a cualquier elemento.
–
Por ejemplo en la sección home:
<div id="home">
<div class="w-full h-3/4">
<div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:pt-20 lg:justify-start">
<input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
<div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
<p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
</div>
<button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
</div>
<div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
<img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
</div>
</div>
</div>
Para reducir nuestro problemas en responsible trata siempre en lo posible de no romper el flujo normal del documento con position absolute si existen alternativas para conseguir lo mismo.
La verdad este curso ha sido totalmente una mala experiencia, llevando malas practicas, mal SEO, no se entiende el porque hace las cosas y los errores hacen notar que no hay nada de preparacion para estas actividades. Ademas por si lo notaron se hacen arreglos diferentes al figma todo porque no se empareja bien con lo que esta haciendo en el proyecto
Mi pregunta a todo esto, qué pasa si alguien viene con una tablet o da vuelta el celular?
Más que responsive design veo que estamos trabajando para dos pantallas predefinidas.
Alguno con más experiencia que puede comentar?
Gracias
Tanto costaba apretar alt z?
Hola a todos, acá les dejo el código del home haciendo que la sección del mensaje en la imagen del home y el botón se reposicionen en el centro aprovechando que el contenedor tiene la propiedad flex:
<div class="w-full h-3/4 lg:relative" id="home">
<div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:justify-center lg:h-full lg:pl-16">
<input class="text-primary outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:ring-primary focus:w-11/12 lg:hidden" placeholder="San Francisco" type="search" name="" id="">
<div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
<p class="text-4xl font-bold">Encuentra más ubicaciones como esta</p>
</div>
<button class="w-48 rounded-full bg-white text-lg text-primary shadow-sm font-semibold p-4 transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110">
Explorar
</button>
</div>
<div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
<img class="lg:hidden" src="../public/img/sanFrancisco.jpg" alt="">
</div>
</div>
Note que el texto de la parte del home no cambiaba de forma por mas que coloque font-bold , font-semibold o font-extrabold , esto se debe a que cuando copiamos la fuente Montserrat del Google Fonts no elegimos las opciones para esos tamaños de fuente.
aqui debajo dejo el link correspondiente a pegar para que se vea en negrita
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
si hago la parte de home de la siguiente manera. Habria alguna diferencia en cuanto rendimiento o seria mala practica? : \
```
\ \ \
```js
la maestra no sabe enseñar, denle cursos de oratoria antes de ponerla a hacer cursos...
la solucion a los textos que no se ven sobre los fondos de imagenes podria ser darle shadow al texto de color blanco
En lo personal, decidí dejar el texto en color blanco y posicionarlo en la tonalidad mas oscura a la izquierda de la imagen. Me pareció mas estético para mantener la armonía con el color del botón 🤓
Esta propiedad les puede ayudar a que texto sea más visible. Se le agrega una sombra al texto.
`drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,.8)]`
<https://play.tailwindcss.com/FsYvh7AoN3?size=780x1355>
bg-sanFrancisco lg:bg-sanFranciscoDesktop
Y este, en caso de que usen color negro de fuente.```js
drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,.8)]
```
Don’t use sm: to target mobile devices
<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class=“sm:text-center”></div>
Use unprefixed utilities to target mobile, and override them at larger breakpoints
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class=“text-center sm:text-left”></div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?