Sección de FAQS

Curso Básico de Tailwind 2 y 3

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,

Recursos

¿Qué es una sección de FAQs y cómo crearla?

Las FAQ, o "Frequently Asked Questions", son una parte esencial de cualquier sitio web que desee ofrecer a los usuarios respuestas rápidas a preguntas comunes. El diseño y la implementación adecuada de una sección de FAQs pueden mejorar significativamente la experiencia del usuario al facilitar el acceso a la información importante. En el video exploramos cómo crear una sección efectiva de FAQs utilizando Flexbox para un diseño responsivo y bien estructurado.

¿Cómo estructurar la sección de FAQs en Figma?

Antes de pasar al código, es importante planificar el diseño utilizando Figma, una poderosa herramienta de diseño colaborativo.

Título de la sección: Empieza con un título claro, en este caso, "FAQs".
Organización de las preguntas: Cada pregunta debe estar bien separada y debe acompañarse de su respectiva respuesta.
Uso de Flexbox: Se recomienda usar Flexbox en columna para asegurar que todas las preguntas mantengan un espaciado uniforme y una presentación ordenada.

¿Cómo implementar la sección de FAQs en HTML y CSS?

La implementación de una sección de FAQs se puede realizar fácilmente con HTML para la estructura y CSS para el estilo. Aquí te guiamos paso a paso:

Estructura básica en HTML:

<div id="faqs" class="width-full height-full">
    <div>
        <h1 class="text-3xl text-primary font-semibold">FAQs</h1>
        <div class="faq-item">
            <p class="text-xl font-medium text-primary">Política de cancelación</p>
            <p class="text-md pt-2">Descripción de la política de cancelación...</p>
        </div>
        <!-- Agregar más preguntas de la misma forma -->
    </div>
</div>

Estilización con CSS:

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;  /* Espaciado entre preguntas */
}

Uso de Flexbox para el diseño: Integra Flexbox para asegurar un formato en columna:
```
#faqs {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;  /* Relleno en el eje X */
}
```
Ajusta el diseño para que cada sección mantenga el mismo espaciado y apariencia.

¿Cómo aplicar estilos consistentes?

Asegúrate de que los estilos en las FAQs sean consistentes con el resto del sitio:

Tipografía: Utiliza la misma tipografía y tamaños de texto que otras secciones para mantener la coherencia visual.
Colores: Mantén una paleta de colores que refleje la estética del sitio.

¿Por qué es importante Flexbox en la creación de FAQs?

Flexbox es crucial para el desarrollo de interfaces modernas debido a su capacidad para crear diseños responsivos y flexibles sin complicaciones. Facilita la alineación y distribución de elementos, un aspecto vital cuando trabajamos con listas de elementos como las FAQs.

¿Cómo garantizar que las FAQs sean útiles?

Contenido relevante: Incluye preguntas frecuentes que respondan a las necesidades del usuario.
Claridad y concisión: Asegúrate de que las respuestas sean directas y fáciles de entender.
Actualización constante: Revisa y actualiza las FAQs regularmente para reflejar cualquier cambio de política o funcionalidad.

Al integrar estos pasos, no solo crearás una sección de FAQs visualmente atractiva, sino también funcional y valiosa para los usuarios. Continúa explorando más sobre Flexbox y diseño web para seguir mejorando tus habilidades. ¡Buena suerte en tu viaje de aprendizaje!

Aportes 15

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan David Camayo Sastoque

hace 3 años

Contenido de FAQS en HTML

<div>
	<p class="">Política de Cancelación</p>
	<p class="">
		Para estancias menores a una semana es importante avisar con 3 días de
		anticipación, de caso contario será sancionado.
	</p>
</div>
<div>
	<p class="">Métodos de pago</p>
	<p class="">
		Aceptamos distintos métodos de pago: VISA, MasterCard, American Express,
		Paypal y Binance
	</p>
</div>
<div>
	<p class="">Mascotas</p>
	<p class="">El tema de las mascotas dependerá directamente del anfitrión.</p>
</div>
<div>
	<p class="">Información de Seguridad</p>
	<p class="">
		Todas nuestras estancias cuentan con seguro en caso de accidentes
	</p>
</div>
<div>
	<p class="">Estancias Largas</p>
	<p class="">
		Contamos con estancias de hasta 3 meses, en este caso es requerido un
		anticipo con un monto del 50% del valor de la renta
	</p>
</div>

Alexis Bacik

hace 2 años

Yo agregué otra card en “Rentas Destacadas” y cuándo empecé con FAQS me quedó así.
Lo resolví cambiando el “px-2 h-full w-full” por "px-2 h-auto w-full"
Así el largo se va ajustando automáticamente a medida que vayamos agregando cards (como en el width automático en la sección de “Recomendados”)

Platzinauta

hace 3 años

Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:

w-full → width: 100%;
h-full → height: 100%;
px-6 → padding-left: 1.5rem; padding-right: 1.5rem;
pt-2 → padding-top: 0.5rem;
mt-6 → margin-top: 1.5rem;
flex → display: flex;
flex-col → flex-direction: column;
space-y-4 → margin-top: 1rem;
text-3xl → font-size: 1.875rem; line-height: 2.25rem;
text-xl → font-size: 1.25rem; line-height: 1.75rem;
font-semibold → font-weight: 600;
font-medium → font-weight: 500;

Sección de FAQs en archivo index.html:


        <div class="w-full h-full px-6" id="faqs">
            <div class="w-full h-full flex flex-col space-y-4">
                <p class="text-3xl text-primary font-semibold mt-6">FAQs</p>
                <div>
                    <p class="text-xl font-semibold text-primary">Política de Cancelación</p>
                    <p class="font-medium pt-2">Para estancias menores a una semana es importante avisar con 3 días de anticipación, de caso contario será sancionado.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Métodos de pago</p>
                    <p class="font-medium pt-2">Aceptamos distintos métodos de pago: VISA, MasterCard, American Express, Paypal y Binance.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Mascotas</p>
                    <p class="font-medium pt-2">El tema de las mascotas dependerá directamente del anfitrión.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Información de Seguridad</p>
                    <p class="font-medium pt-2">Todas nuestras estancias cuentan con seguro en caso de accidentes.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Estancias Largas</p>
                    <p class="font-medium pt-2">Contamos con estancias de hasta 3 meses, en este caso es requerido un anticipo con un monto del 50% del valor de la renta.</p>
                </div>
            </div>
        </div>

–
Cabe mencionar que text-md no existe en Tailwind (al parecer es de Bootstrap), en su lugar se puede usar font-medium.

José Jesús Palacios

hace 3 años

Los que usen tailwind v3.
Ya no existe text-md cambiar a text-base

José Mauricio Lemús Rodezno

hace 3 años

Pequeño truco en visual estudio code si quieren generar todos los elementos rapidamente 😀:

(div>p{Payment Methods}+p{We accept VISA, MasterCard, American Express, paypal and Binance.})*4

Briam Flores Torres

hace 3 años

Cuando quieres agregar más de un elemento HTML puedes ocupar los snippets. Por ejemplo si necesitas 2 párrafos, solo tecleas (al final enter)

p*2

Y esto genera:

<p></p>
<p></p>

Jonathan Duarte

hace 2 años

No puedo ver el resultado de lo que la profe programa 😡 primer curso que estoy cursando en el que esto sucede

Owen Vassarotto

hace 2 años

<div id="faqs" class="py-10 px-5 h-auto w-full">
            <h2 class="text-2xl mb-5 text-primary font-extrabold">FAQs</h2>
            <div class="w-ful h-full flex flex-col space-y-5">
                <!-- question inits -->
                <div class="">
                    <p class="text-primary text-sm font-extrabold mb-2">Payment Methods</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Cancellation Policy</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
            </div>
        </div>

Jhon Steven Escobar Castro

hace 6 meses

Segun veo el SEO de este proyecto es terrible, no veo ningun uso de las etiquetas de titulo "h" por ningun lado y el uso de la etiqueta "div" es excesivo

Briam Flores Torres

hace 3 años

Para no estar haciendo el comando de npm run tw:build cada que se hacen cambios en el archivo de configuración, se puede agregar --watch al final y esto estará escuchando los cambios que se hagan y recargará los archivos. Quedaría algo así:

 "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"

Any Omaña

hace un mes

Creo que esta fue la sección que más rápido logré hacer <3 Como siempre, les dejo mi repo y el resultado <https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS> ![](https://static.platzi.com/media/user_upload/image-27a8e97a-76e8-4437-be38-4df2731d4f9d.jpg) ![](https://static.platzi.com/media/user_upload/image-4d49acb6-a946-494e-a0a2-73fee23ba226.jpg)

Jhon Steven Escobar Castro

hace 6 meses

Para los que tengan un error a la hora de amontonar con flex, el error esta en la medida de la anterior tarjeta, como tiene un h-full significa que tiene un height del 100% o 100vh mas no que vaya a ocupar el 100% del contenido, lo que significa que solo ocupara un pequeño espacio en comparacion al contenido para arreglarlo solo debemos colocar h-auto y eso aplicara el tamaño para la seccion de todo el contenido

Pablo Alejandro Figueroa

hace un año

<https://play.tailwindcss.com/oKgOHxOcgT?size=1344x955>

Nicolás García López

hace un año

**Para los que tal vez lo estén haciendo con algún framework o lo quieran migrar posteriormente, en mi caso use Astro, les puede servir esto:** ```js const faq = [ { question: "Payment Methods", answer: "We accept VISA, Mastercard, American Express, Paypal and Binance.", }, { question: "Cancellation Policy", answer: "Our cancellation policy varies depending on the type of reservation and the time of cancellation. Please refer to the specific terms outlined in your booking confirmation. Generally, cancellations made within 8 days of the check-in date may incur a penalty fee.", }, { question: "Long Stays", answer: "we offer special rates for extended stays. Please contact our customer support team or check our website for more information on long-term accommodation discounts.", }, { question: "Check-in and Check-out Times", answer: "Our standard check-in time is 12:00 pm and check-out time is 9:00 am. However, early check-in or late check-out may be available upon request and subject to availability. Additional charges may apply.", }, { question: "Amenities and Facilities", answer: "Our accommodations typically include amenities such as complimentary Wi-Fi, toiletries, and access to [list specific facilities such as swimming pool, gym, etc.]. Please refer to the accommodation details or contact us for specific information regarding amenities.", }, { question: "Pet Policy", answer: "We understand that pets are part of the family, and some of our properties may accommodate them. Please check the specific pet policy for the property you are interested in. Additional fees and restrictions may apply.", }, ]; --- <section class="w-full h-full px-10 " id="faqs"> <aside class="w-full">

FAQS

{ faq.map((item) => (

{item.question}

{item.answer}

)) } </aside> </section> ```A mi me ha quedao así, ahorrándome varias líneas de código al repetir las mismas secciones, así lo he venido haciendo igual con las cards: ![]() ![](https://static.platzi.com/media/user_upload/image-29dce08e-f997-4ca5-8f4f-81df069d76d6.jpg) **Así es un poco como igual se va viendo la UI del resto del proyecto** ![](https://static.platzi.com/media/user_upload/image-63f9842c-006d-4dda-98db-981b9597b4d8.jpg)![]()![]() ![](https://static.platzi.com/media/user_upload/image-4060b2a0-084a-4091-b2c0-ee2c50857982.jpg)

mateo rodriguez fierro

hace 3 años

para poder agilizar conla maquetacion de tus paginas, puedes usar el sistema emmet, que esta puesto en vscode, si por ejemplo necesitas poner:

enves de hacerlo a mano puedes hacer:

.pb-3{hola}

talves el ejemplo se vea no muy necesario, pero si son muchas mas clases que hay que poner es muy util y agiliza el trabajo.

les paso el link a su pagina si quieren aprender mas sobre este programa!

https://emmet.io/