Ejercicio de programación con TailwindCSS: Evaluación conocimiento Código Tailwind CSS
Código
Aprende a crear un layout adaptativo utilizando Tailwind CSS. Sigue este tutorial para diseñar una página web que se adapte a diferentes tamaños de pantalla.
Crea un archivo HTML con una instalación de Tailwind mediante CDN y utiliza Tailwind CSS para diseñar el layout solicitado. Asegúrate de seguir los requisitos y aplicar las clases de utilidad adecuadas para lograr este diseño:
- Encabezado: Con la etiqueta HTML
header:- Color de fondo azul
- Color de texto blanco
- Padding de 1rem por todos los lados
- Disposición flexible para alinear y distribuir el espacio entre elementos:
- Alineación de elementos al centro verticalmente
- Distribución del espacio entre el título y la navegación
- Título centrado con un tamaño de fuente grande y negrita
- Menú de navegación:
- Alineado a la derecha con la etiqueta HTML `nav`
- Lista horizontal con espaciado uniforme de 1rem entre elementos
- Opciones de menú interactivas con subrayado al pasar el ratón
- Contiene enlaces para "Inicio", "Sobre nosotros", y "Contacto"
- Contenido principal: Con la etiqueta HTML
mainy secciones internassection:- General del contenedor:
- Contenedor centrado con margen automático
- Padding de 1rem por todos los lados
- Rejilla que se adapta a los tamaños de pantalla, especificando el número de columnas para cada tamaño:
- Una columna para pantallas extra pequeñas
- Dos columnas para pantallas pequeñas
- Tres columnas para pantallas grandes o superiores
- Espacio entre columnas de 1rem
- Cada sección:
- Fondo blanco
- Padding de 1rem por todos los lados
- Sombra para efecto de elevación
- Bordes redondeados
- Título con tamaño de fuente grande y seminegrita
- Texto de contenido con color de texto gris oscuro
- General del contenedor:
- Pie de página: Con la etiqueta HTML
footer:- Color de fondo gris oscuro
- Color de texto blanco
- Padding de 1rem por todos los lados
- Texto centrado
- Contenido de texto con derechos de autor y el año, ejemplo: "© 2024 Mi sitio web. Todos los derechos reservados."
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
Proyecto
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Clases de bordes de Tailwind CSS
Código
Evaluación conocimiento Test Tailwind CSS
Test
Hover, focus y estado de Tailwind CSS
Código
Clases de colores y fondo de Tailwind CSS
Código
Clases de tamaño de Tailwind CSS
Puzzle
Instalación de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Proyecto blog de artículos con Tailwind CSS
Proyecto
Transiciones y animaciones de Tailwind CSS
Código
Fundamentos del sistema Utility-First
Test
Grid en Tailwind CSS
Código
Fundamentos del diseño responsive en Tailwind CSS
Código
Introducción a Tailwind CSS
Test
Tutorial para resolver este ejercicio de programación
TailwindCSS
Evaluación Código Tailwind CSS
Evaluación