Así va quedando mi sitio, he seguido la idea del curso, pero he realizado algunas modificaciones más a mi gusto.
-> Versión desktop
-> Versión móvil
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Navbar
26/29Recursos
Aportes 16
Preguntas 0
Ordenar por:
Se que algunos como yo van a querer agregar el icono de la lupa en el input!! si quieren solo tienen que poner:
<input class="form-control " type="text" placeholder=" Search">
y cualquier icono se puede solo tienen que reemplazar el codigo unicode.
Es mi idea o es mas facil primero hacer el mobile first que desktop first?
Talwind no tiene su sistema de iconografía como Bootstrap basado en glifos?
- Aunque se puede integrar el sistema de iconos boostrap con Talwind. Talwind debería de tener su propio sistema.
Hasta ahora me ha gustado mucho el curso, aqui los avances que llevo:
Gente, les recomiendo cerrar las etiquetas para poder navegar más rápido, a este nivel ya es mucho texto y por no tener todo comprimido está uno dando mucho scroll.
Sé que algunos ya lo saben, pero solo comento. Saludos.
ami no se me desconfiguro…creo que me gusta asi
Le agregué este ícono al navbar:
Codigo:
Un link con todos los iconos de HTML:
https://www.toptal.com/designers/htmlarrows/symbols/
Este es un caso donde podríamos aplicar el `align-baseline` en la sección de filtros.
si no quieren poner el `ml-2` en cada elemento, pueden usar: `space-x-2`
Todo perfecto hasta ahora! Me gusta ese toque natural que le da Tailwind!
Genial, esta quedando muy cool
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?