🎬 Movie Ratings Web App

📖 Descripción Breve

Movie Ratings es una aplicación web moderna y responsiva diseñada para explorar y calificar películas. Esta implementación demuestra técnicas avanzadas de desarrollo frontend utilizando Tailwind CSS para crear una interfaz de usuario atractiva y funcional.

✨ Características Principales

• 🎭 Catálogo Cinematográfico: Muestra películas con pósters, calificaciones y metadatos detallados
• 🔍 Búsqueda Interactiva: Campo de búsqueda integrado en el header para filtrado de contenido
• 📱 Diseño Responsivo: Optimizado para desktop, tablet y móvil con breakpoints personalizados
• 🎨 Tema Oscuro: Interfaz con paleta de colores oscura para una experiencia inmersiva
• 🖼️ Banner Destacado: Sección hero con película principal y overlay de gradiente
• 📋 Secciones Organizadas: "Up Next" sidebar y grid de películas mejor calificadas
• ⚡ Performance Optimizada: Carga eficiente con assets optimizados y CSS compilado

🖼️ Demo/Vistas Previas

Vista previa completa de la aplicación mostrando el header con búsqueda, banner destacado, sidebar "Up Next" y grid de películas en diseño responsivo.

Para ver la demo en vivo, abre index.html en tu navegador web preferido o visita la demo en vivo.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
	5	Estructura semántica y contenido de la aplicación
	3.4.17	Framework CSS utility-first para styling
	ES6+	Interactividad básica y manipulación DOM
	Latest	Procesamiento y compilación de CSS
	Latest	Gestión de dependencias y scripts

🚀 Instalación y Configuración

Este proyecto utiliza Tailwind CSS compilado, por lo que requiere configuración mínima. Solo necesitas un navegador web moderno.

Requisitos Previos

• Navegador web moderno (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• Node.js y npm (opcional, solo para desarrollo/recopilación)

Pasos de Instalación

1. Clona el repositorio:

   git clone https://github.com/Seb-RM/Tailwind_Css_Html_Js-Movie-Web-App.git
   cd Tailwind_Css_Html_Js-Movie-Web-App
   

2. Instala dependencias (opcional, para desarrollo):

   npm install
   

3. Compila Tailwind CSS (si modificas estilos):

   npm run build
   

4. Abre el proyecto:

   # En Windows
   start index.html
   
   # O simplemente abre index.html en tu navegador
   

Configuración Opcional

Si deseas modificar los estilos de Tailwind, edita tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {
      // Tus personalizaciones aquí
    },
  },
  plugins: [],
}

📚 Guía de Uso

Navegación Básica

• Header: Utiliza el campo de búsqueda para filtrar películas (funcionalidad visual)
• Banner: Muestra la película destacada con información detallada
• Sidebar "Up Next": Lista de películas próximas con miniaturas
• Grid Principal: Catálogo de películas mejor calificadas con hover effects

Interacciones Clave

• Hover en Películas: Efecto de escala y subrayado en títulos
• Botón "Load more": Simula carga de más contenido (estático)
• Enlaces del Footer: Navegación a secciones informativas

Personalización

Para adaptar el contenido:

1. Reemplaza imágenes en assets/ con tus pósters de películas
2. Modifica textos y metadatos en index.html
3. Ajusta colores en main.css (variables Tailwind)
4. Actualiza enlaces y navegación según necesites

⚙️ Explicación Técnica

📁 index.html

Propósito: Archivo principal que define la estructura semántica y contenido estático de la aplicación de calificaciones de películas.

Conceptos Clave:

• HTML semántico con secciones bien definidas (header, main, aside, footer)
• Integración de CDN para Tailwind CSS
• Atributos de accesibilidad implícitos
• Estructura de grid CSS para layouts responsivos

Fragmentos Destacados:

<!-- Header con navegación y búsqueda integrada -->
<header class="bg-zinc-900 py-6">
    <nav class="flex justify-between max-w-screen-xl mx-auto items-center">
        <div class="flex gap-5 items-center">
            <div class="text-yellow-500">
                <p class="text-lg">ALL ABOUT</p>
                <div><p class="text-lg font-bold">Movies</p></div>
            </div>
        </div>
        <div>
            <input type="text" class="input lg:w-96 rounded-md placeholder:bg-black placeholder:text-zinc-600 placeholder:text-xl lg:p-2 p-1 bg-black border-none" placeholder="Search">
        </div>
    </nav>
</header>

API/DOM:

• Utiliza clases CSS para manipulación potencial vía JavaScript
• Estructura preparada para event listeners en elementos interactivos
• Atributos alt en imágenes para accesibilidad
• Enlaces con href="#" preparados para routing futuro

📁 main.css

Propósito: Archivo de estilos personalizados que complementa Tailwind CSS con reglas específicas del proyecto.

Conceptos Clave:

• Directivas de Tailwind para importación de utilidades base
• Reglas CSS personalizadas para componentes específicos
• Media queries para responsividad avanzada
• Variables CSS implícitas a través de Tailwind

Fragmentos Destacados:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    overflow-x: hidden;
}

.banner-slider {
    background-image: url(assets/civil_war.jpg);
    min-height: 450px;
}

@media (min-width: 1280px) {
    .banner-slider {
        min-width: 850px;
    }
}

API/DOM:

• Define estilos para elementos con clases específicas (.banner-slider)
• Controla layout responsivo con media queries personalizadas
• Gestiona overflow y dimensiones de componentes clave
• Complementa utilidades de Tailwind con reglas específicas

📁 output.css

Propósito: Archivo CSS compilado generado por Tailwind CSS que contiene todas las utilidades utilizadas en el proyecto.

Conceptos Clave:

• CSS compilado con tree-shaking (solo utilidades usadas)
• Variables CSS custom properties para temas consistentes
• Sistema de grid y flexbox integrado
• Animaciones y transiciones predefinidas

Fragmentos Destacados:

/* Sistema de grid responsivo */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Utilidades de color para tema oscuro */
.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

API/DOM:

• Define selectores de utilidad para manipulación dinámica
• Controla estados visuales (hover, focus) de elementos interactivos
• Gestiona responsividad con media queries integradas
• Proporciona base para animaciones CSS

🎯 Arquitectura

Tailwind_Css_Html_Js-Movie-Web-App
├── index.html (Estructura y contenido principal)
├── main.css (Estilos personalizados + Tailwind directives)
├── output.css (CSS compilado de Tailwind)
├── assets/
│   ├── images/ (Pósters y recursos visuales)
│   └── icons/ (Iconos y elementos gráficos)
└── config/
    ├── tailwind.config.js (Configuración de Tailwind)
    └── postcss.config.js (Procesamiento CSS)

Patrones Implementados:

• Utility-First CSS: Uso extensivo de clases de Tailwind para styling
• Mobile-First Design: Breakpoints ascendentes con prefijo sm:, md:, lg:, xl:
• Component-Based Layout: Estructura modular con grid y flexbox
• Semantic HTML: Uso correcto de elementos semánticos para SEO y accesibilidad

---

Desarrollado con ❤️ para demostrar técnicas modernas de desarrollo web frontend con Tailwind CSS.