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
Empezar con el desarrollo de un proyecto web puede parecer abrumador, pero desglosar cada sección facilita su creación. En este caso, visualizaremos nuestro diseño y desglosaremos las partes esenciales del proyecto: desde el desarrollo de una barra de navegación (navbar) hasta la creación de secciones importantes como "home" y "recomendaciones". Es vital entender el flujo y estructura de estas secciones para limpiar el camino hacia un diseño más efectivo y funcional.
El primer paso consiste en configurar el marcado del proyecto, principalmente usando divs e identificadores para cada sección. A continuación, presento cómo puedes estructurar lo básico del proyecto utilizando HTML:
<!-- Navbar no visible en móvil -->
<nav>
<!-- Aquí vendría el contenido de la navbar -->
</nav>
<!-- Tab Bar para versión móvil -->
<div id="tab-bar">
<!-- Aquí el contenido del tab bar -->
</div>
<!-- Sección Home -->
<section id="home">
<!-- Contenido de la sección Home -->
</section>
<!-- División para rentas recomendadas -->
<div id="recomendadas">
<!-- Tarjetas deslizables para recomendaciones -->
</div>
<!-- División para estancias destacadas -->
<div id="destacadas">
<!-- Tarjetas para estancias destacadas -->
</div>
<!-- Footer del proyecto -->
<footer>
<!-- Contenido del footer -->
</footer>
Navbar y Tab Bar:
Home y secciones visuales:
Recomendaciones y estancias:
Preguntas frecuentes y footer:
Este es solo el principio del desarrollo y planificación de tu proyecto web. ¡No dudes en experimentar y personalizar cada sección para satisfacer tus necesidades específicas! A medida que avances, notarás cómo estas partes individuales crean un sistema cohesivo y funcional, ofreciéndote la oportunidad ideal para mejorar tus habilidades en diseño y codificación. ¡Adelante, sigue aprendiendo y mejorando!
Aportes 6
Preguntas 0
No olviden agregarle semantica a su HTML
<body>
<header>
<nav></nav>
<div id="tabBar"></div>
</header>
<main>
<section>
<div id="home"></div>
<div id="recommendations"></div>
<div id="featured_rentals"></div>
</section>
</main>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../public/css/tailwind.css">
<title>Gogo Travel</title>
</head>
<body>
<nav></nav>
<div id="tab_bar"></div>
<section>
<div id="home"></div>
<div id="recomendadas"></div>
<div id="rentas_destacadas"></div>
<div id="faq"></div>
</section>
<footer></footer>
</body>
</html>
Copia y pega en html
Pega esto y da enter
nav+div#tab_bar+section+footer
Dentro de section mete esto:
div#home+div#recomendandos+div#rentas_destacadas
Tarann…
<nav></nav>
<div id="tab_bar"></div>
<section>
<div id="home"></div>
<div id="recomendandos"></div>
<div id="rentas_destacadas"></div>
</section>
<footer></footer>
<nav></nav>
<div id=“tab_bar”></div>
<section>
<div id=“home”></div>
<div id=“recomendadas”></div>
<div id=“rentas_destacadas”></div>
</section>
<footer></footer>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?