Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en
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
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 18
Preguntas 1
Una extension para Chrome que hace algo parecido al navegador sizzy es https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb/related?hl=en
La web como la conocemos, hoy en día, no es una tecnología pensando en un UX o User Experience generando, desafortunadamente, que muchos de los sitio web no estén optimizados para los dispotivos móviles.
Definido por Ethan Marcotte, es una filosofía que responde a las necediades de los usuarios y a los dispositivos que estamos usando.
Como su nombre sugiere, significa que iniciaremos con el diseño de móviles y expandiendo éstas características para crear una verión en tableta o escritorio/web tradicional.
Cabe mencionar que esta filosofía no es sinónimo de limitación, por lo que tenemos que tener el mismo contenido tanto en escritorio como en móvil. Google describe las best practices en su sitio.
CSS posee diferentes tipos de paradigmas para abstraer un diseño, como BEM descrito por Tailwind en ésta sección:
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
Sin embargo, llega a ser muy complicado establecer un armonía entre desarrolladores-diseñadores si no hay una concesión de sintaxis o linter. Por ello, Tailwind establece su propio orden con el objetivo:
Como desarrolladores necesitamos herramientas que nos permita exlotar nuestra creatividad al máximo por ellos exiten algunas DevTools:
En texto para cortar y pegar XD
Responsive Design: Es una técnica para asegurar que la aplicación se vea bien en diferentes dispositivos.
Mobile First: Prioriza el desarrollo pensando en los dispositivos móviles.
Utility First Css: Construir componentes a partir de clases con nombres descriptivos
Tamaños en Tailwind
Esta es otra opcion de Sizzy, https://material.io/resources/resizer/
Tambien esta una alternativa a Sizzy, se llama Responsively. Es free y open source. 😉
Para los Opera Lovers como yo, https://addons.opera.com/es/extensions/details/responsive-web-design-tester/
con esta extensión podemos imitar un poco la funcionalidad de ese navegador que usa el profe
Browser for Developers:
https://blisk.io/
es una lastima que no pueda contratar sizzy (que me recuerda al personaje de La hora Pico), pero para esta aventura del front, me va a servir muchisimo
Yo recomiendo Polypane, se me hizo una herramienta muy buena.
https://polypane.app
Tambien pueden conseguir un año gratis con github student pack
Les soy sincero, estoy un poco perdido, pero tengo la fe que voy a aprender esto a como dé lugar.
Este programa te permite realizar la misma tarea de visualizar diferentes breakpoints de una página web.
Responsively
https://responsively.app/
Es una alternativa opensource a sizzy, funciona muy bien y ahorra muhco tiempo al ver al mismo tiempo como va quedando nuestra web en cada dispositivo
Responsively app es un navegador libre que cumple la misma funcionalidad que sizzy
Sizzy se ve como un muy browser…
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.