Les dejo una Cheat Sheet de Tailwind https://nerdcave.com/tailwind-cheat-sheet
Espero que les sirva para sus proyectos!
Introducción
Construye una tienda online con React
Enrutamiento y estructura base
Instalación de React con Vite y TailwindCSS
Análisis de rutas y componentes en React
Enrutamiento con React Router DOM
Componente Navbar
Componente de Layout
Componente de Card
Consumiendo la FakeStore API para pintar cards
Manejo de estado global con Context
Contexto global de la aplicación
Contador de productos en el carrito
Abriendo el detalle de cada producto
Reto: heroicons con TailwindCSS
Maquetando el ProductDetail
Mostrando productos en ProductDetail
Carrito de Compras
Agregando productos al carrito
SideMenu del carrito de compras
Componente OrderCard
Evitando productos duplicados en el carrito
Eliminar productos del carrito
Suma total de productos en el carrito
Checkout y Órdenes de Compra
Flujo para crear una nueva orden
Checkout de productos en el carrito
Página de MyOrders: lista de órdenes
Página de MyOrder: órden individual
Reto: órdenes de compra con TailwindCSS
Filtrando productos desde el frontend
Buscador de productos
Filtrando títulos con JavaScript
Filtrando categorías con JavaScript
Corrigiendo bugs de la aplicación
Próximos pasos
Deploy de React en Netlify
¿Preparada o preparado para un Laboratorio de React?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 36
Preguntas 4
Les dejo una Cheat Sheet de Tailwind https://nerdcave.com/tailwind-cheat-sheet
Espero que les sirva para sus proyectos!
Hola comunidad, les comparto mis apuntes en Notion sobre cards y llamado a API´s, espero les sean de utilidad.
Link aquí:
https://bg99astro.notion.site/Cards-y-llamado-a-API-s-b5be45bca26e48a99a25ffb9b650e383
Que genial curso, lo estaba esperando mas que nada para organizar la estructura de mis proyectos, los card o los componentes son importantes para ahorrar codigo y ser mas limpios
Si el div del ‘+’ es botón… debemos usar la etiqueta correspondiente.
Recordemos dar una buena semántica al HTML, obviamente esta etiqueta será clickable y para eso están los botones.
export const Card = () => {
return (
<div className="bg-white cursor-pointer w-56 h-60 rounded-lg">
<figure className="relative mb-2 w-full h-4/5">
<span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">
Electronics
</span>
<img className="w-full h-full object-cover rounded-lg" src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Headphones" />
<button className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1">
+
</button>
</figure>
<p className="flex justify-between">
<span className="text-sm font-light">Headphones</span>
<span className="text-lg font-medium">$300</span>
</p>
</div>
)
}
Asi va mi Card, decidi colocarle un bg al div de abajo y un box shadow al div de la card para ese efecto sombreado. ❤️
Comparto como me quedó
pueden utilizar rafce para crear la funcines flechas te ahorra un poquito de tiempo
Si quieren agregar iconos al proyecto se pueden instalar esta dependecia: https://react-icons.github.io/react-icons
Es muy facil de usar y tiene una amplia cantidad de iconos 😁
En los cursos de Teff de antes siempre tenia la muletilla de “Basicamente” jaja ahora veo que usa diminutivos todo el tiempo: tagsito, componentico, etc… No sé si antes también lo hacia, pero aquí lo he notado mucho xD
Con está página nomas toma captura o con la app recorte, seleccione lo que quiere, ctrl + c y pego en esta web:
Suba la imagen y luego copie la dirección de imagen
No cobra y es rapido de usar
Soy e único al que le cuesta adapatarse a Tailwind?
Creo que es muy cómodo, sin embargo, me cuesta que todo se haga con medidas tan especificas.
Personalmente me gusta jugar con valores muy específicos.
Tal vezsea solo yo que no se usar bien esta herramienta jajaja
Personalmente el agregar al carrito prefiero poner debajo y que sea accesible al usuario, creo que con el boton florante en la imagen se entiende que eso abrirá un modal para vista previa.
import React from 'react';
const Card = () => {
return (
<div className='flex flex-col w-60 rounded-lg overflow-hidden border border-gray-400 pb-2'>
<figure className='relative w-full h-40'>
<img
src='https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
alt='Product'
className='w-full h-full object-cover'
/>
<span className='px-2 absolute text-xs text-black bg-white/60 rounded-lg bottom-2 left-2'>Electronic</span>
</figure>
<section className='flex flex-col h-full justify-between p-2 gap-4'>
<div className='flex flex-row justify-between items-center'>
<h3 className='text-sm font-light'>Headphones</h3>
<p className='font-medium'>s/300.00</p>
</div>
<button className='bg-black text-white rounded-lg w-full py-2 font-medium hover:bg-black/95'>Add to Cart 🛒</button>
</section>
</div>
);
};
export { Card };
Así va quedando mi Card del curso, y estoy familiarizado con tailwindCSS ya desde unos meses atras y me encanta usarlo🤗
En mi experiencia, los estilos p y m en Tailwind funcionan mejor si introduces valores específicos (personalmente prefiero la escala vh), ejemplos:
p-[3vh]
m-[1vh]
py-[3px]
mx-[6rem]
pl-[12px]
mr-[14vh]
etc.
Unsplash tiene imágenes de buena calidad para utilizar:
https://unsplash.com/es
[](<a href=“https://ibb.co/d7txq8R”><img src=“https://i.ibb.co/d7txq8R/imagen-2023-05-08-103247395.png” alt=“imagen-2023-05-08-103247395” border=“0”></a>)
Todos vamos a hacer como que no vimos la Card con la imagen del Doom Eternal ahi ?
Teffi no es el tipo de persona que hay que hacer enojar evidentemente (?
Por aquí cómo quedó mi tarjeta, le estoy dando a la página un estilo neobrutalism
Chicos, aquí les comparto una librería llamada Circum Icons, muy buena para insertar iconos en nuestros proyectos con React o cualquier otro Framework. 🙂
https://circumicons.com
De maravilla, parece magia!
Y además al grupo que hizo este curso es claro y ordenado, facilitan las cosas mucho mas!
Que cosa tan loca con Tailwind jajajaja… este framework de CSS es muy interesante. Sigamos aprendiendo 😎
asi va mi Proyecto
Asi voy yo
👏👏👏👏👏👏
Les dejo mi card! Recién arranco con Tailwind y me parece que en muchos aspectos es super intuitivo. Está muy interesante.
Ese atún gratinado ergonómico, lo veo sospechoso
![](
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.