Ejercicio de programación con TailwindCSS: Fundamentos del diseño responsive en Tailwind CSS

Código
Práctica
0h 15m

Aprende a implementar un diseño responsive utilizando breakpoints y clases utilitarias en Tailwind CSS 3.4.10. Adapta tu contenido a diferentes tamaños de pantalla.

  1. Crea un archivo HTML y enlaza Tailwind CSS desde un CDN.
  2. Añade un encabezado de primer nivel que sea visible en todas las pantallas pero que cambie de tamaño según el tamaño de la pantalla. En pantallas pequeñas un 2xl, en pantallas medianas un 4xl y en pantallas grandes un 6xl.
  3. Añade un párrafo que tenga diferentes márgenes según el tamaño de la pantalla. Un margen de 2 unidades en pantallas pequeñas, 4 unidades en pantallas medianas y 6 unidades en pantallas grandes.
  4. Añade una imagen que se ajuste al 100% del ancho en pantallas pequeñas y al 50% en pantallas medianas y mayores.
Empezar ejercicio de programación

Todos los ejercicios de programación de TailwindCSS

Evalúa tus conocimientos con ejercicios de programación en TailwindCSS de tipo Test, Puzzle, Código y Proyecto con VSCode.

Listado y formulario de productos en Tailwind CSS

Tailwind CSS
Proyecto

Flexbox en Tailwind CSS

Tailwind CSS
Puzzle

Contenedores y columnas en Tailwind CSS

Tailwind CSS
Código

Utilidades de espaciado y alineación en Tailwind CSS

Tailwind CSS
Puzzle

Clases de bordes de Tailwind CSS

Tailwind CSS
Código

Hover, focus y estado de Tailwind CSS

Tailwind CSS
Código

Fundamentos del sistema de Utility-First de Tailwind CSS

Tailwind CSS
Test

Clases de colores y fondo de Tailwind CSS

Tailwind CSS
Código

Conocimiento general de Tailwind CSS - Evaluación multirespuesta

Tailwind CSS
Test

Clases de tamaño de Tailwind CSS

Tailwind CSS
Puzzle

Instalación de Tailwind CSS

Tailwind CSS
Código

Tipografía y fuentes en Tailwind CSS

Tailwind CSS
Puzzle

Proyecto blog de artículos con Tailwind CSS

Tailwind CSS
Proyecto

Transiciones y animaciones de Tailwind CSS

Tailwind CSS
Código

Conocimiento general de Tailwind CSS - Evaluación código

Tailwind CSS
Código

Grid en Tailwind CSS

Tailwind CSS
Código

Introducción a Tailwind CSS

Tailwind CSS
Test

Certificados de superación de TailwindCSS

Supera todos los retos de TailwindCSS y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Frontend con Tailwind CSS

Frontend con Tailwind CSS

6h 0m

Tutorial para resolver este ejercicio de programación

Tailwind CSS

TailwindCSS

Fundamentos del diseño responsive en Tailwind CSS

Fundamentos

Otros tutoriales de programación con TailwindCSS

Introducción A Tailwind Css

Tailwind CSS

Introducción Y Entorno

Instalación De Tailwind Css

Tailwind CSS

Introducción Y Entorno

Fundamentos Del Sistema De Utility-first En Tailwind Css

Tailwind CSS

Fundamentos

Tipografía Y Fuentes En Tailwind Css

Tailwind CSS

Clases De Utilidad

Clases De Tamaño De Tailwind Css

Tailwind CSS

Clases De Utilidad

Utilidades De Espaciado Y Alineación De Tailwind Css

Tailwind CSS

Clases De Utilidad

Clases De Colores Y Fondo De Tailwind Css

Tailwind CSS

Clases De Utilidad

Clases De Bordes De Tailwind Css

Tailwind CSS

Clases De Utilidad

Hover, Focus Y Estado De Tailwind Css

Tailwind CSS

Clases De Utilidad

Transiciones Y Animaciones De Tailwind Css

Tailwind CSS

Clases De Utilidad

Contenedores Y Columnas En Tailwind Css

Tailwind CSS

Layout

Flexbox En Tailwind Css

Tailwind CSS

Layout

Grid En Tailwind Css

Tailwind CSS

Layout

Conocimiento General De Tailwind Css - Evaluación Multirespuesta

Tailwind CSS

Evaluación

Conocimiento General De Tailwind Css - Evaluación Código

Tailwind CSS

Evaluación