En esta sección del curso trabajaremos en la construcción de una página principal estructurada y funcional. Este será el flujo de trabajo:
Estructura de la página
- Cabecera: Incluye los menús principales.
- Sección destacada: Un espacio visual importante para resaltar contenido.
- Logotipos y pestañas de cursos: Secciones organizadas por relevancia.
- Banners y categorías principales: Diseñadas para agrupar contenido relacionado.
- Temas destacados y sección de negocio: Áreas adicionales con un enfoque temático.
- Footer: Personalizado para cerrar la estructura de la página.
Configuración inicial
Para comenzar, necesitamos instalar y configurar Tailwind CSS. Usaremos la versión CLI, que ya fue explicada en una clase anterior.
Instalación y configuración
- Directivas CSS: Añadiremos las directivas específicas que Tailwind necesita para generar estilos personalizados.
- Scripts en
package.json: Configuraremos un script watch para compilar los estilos dinámicamente.
Personalización
El objetivo es adaptar Tailwind para reutilizar componentes de manera eficiente:
- Colores personalizados:
- Crearemos colores específicos como "primary", "accent" y otros, basándonos en los esquemas de colores utilizados en la página.
- Se incluirán variantes como tonos oscuros y claros.
- Fuentes:
- Si las fuentes originales son propietarias, seleccionaremos alternativas similares como Roboto o Noto Sans.
- Configuraremos la jerarquía de fuentes para títulos y textos de párrafos.
- Anchos máximos:
- Definiremos un contenedor con un ancho máximo específico para mantener una estructura uniforme.
Implementación de estilos globales
En el archivo de configuración de Tailwind:
- Extendemos los valores predeterminados para incluir nuestros colores, fuentes y anchos máximos.
- Establecemos fuentes predeterminadas para el
html y otras etiquetas según sea necesario.
Próximos pasos
Con esta configuración base:
- Comenzaremos a construir la cabecera y las demás secciones en orden.
- Durante el desarrollo, podremos ajustar los estilos y la configuración según sea necesario.
Con estos fundamentos, estamos listos para crear una página principal funcional y adaptada a las necesidades del proyecto.
