Este proyecto consiste en resolver un reto de HTML y CSS dos veces, una utilizando el framework Bootstrap y otra utilizando TailwindCSS. El objetivo principal es crear dos versiones del mismo diseño, siendo lo más parecidas posible al diseño original.
Mobile Portrait (320px X 480px)
Tablet portrait (768px x 1024px)
Desktop(1024px)
https://dsaw-2024-1.github.io/css-frameworks-ValeRuizTo/
Mobile Portrait (320px X 480px)
Tablet portrait (768px x 1024px)
Desktop(1024px)
El reto de HTML y CSS implica crear una página web responsive utilizando diferentes frameworks de estilos. Las imágenes necesarias para el diseño se encuentran dentro de la carpeta assets, mientras que los diseños de la página están ubicados en la carpeta design.
- Resolver el reto dos veces, una vez utilizando Bootstrap y otra vez utilizando TailwindCSS.
- Asegurarse de que el producto visual sea lo más parecido posible al diseño original.
- La página debe ser responsive y verse bien en dispositivos móviles, tabletas y escritorio.
- Clonar este repositorio en tu máquina local.
- Utilizar el framework correspondiente (Bootstrap o TailwindCSS) para desarrollar la versión respectiva.
- Al finalizar, comparar ambas versiones con el diseño original para verificar la similitud visual.
El objetivo de este taller es hacer que la página que ya desarrollamos se vea correctamente en los 4 viewports presentados a continuación:
| Viewport | Dimensiones (ancho x alto) |
|---|---|
| Mobile Portrait | 320px x 480px |
| Tablet Portrait | 768px x 1024p |
| Desktop | +1024px |
| Aspecto | Puntuación |
|---|---|
| Diseño web con Bootstrap | 1.5 |
| Diseño web con Tailwind CSS | 1.5 |
| Adaptabilidad del diseño | 2 |
| Total | 5 |