Lección: 17 Ajustando el FRONTEND del SLIDE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK

17 Ajustando el FRONTEND del SLIDE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK

Duración: 10 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 17 de 18

Descripción

🎨 Lección 17: Ajuste del Diseño Frontend del Carrusel (Slide)

Esta lección avanzada se centra en perfeccionar la estética y estructura frontend del carrusel de películas (implementado con Slick Carousel), asegurando que el diseño sea atractivo y la organización del código más profesional.

1. 📂 Reestructuración del Código CSS [01:50]

Se aborda la necesidad de organizar los estilos para mantener la limpieza y escalabilidad del proyecto:

Problema: Los estilos CSS inline y el bloque <style> en el archivo HTML principal (Blade) se vuelven muy extensos y difíciles de manejar [01:50].
Solución: Se extraen todos los estilos a un archivo externo llamado estilo.css dentro de una nueva carpeta public/css [02:07].
Referencia en Laravel: Se utiliza la directiva {{ asset('css/estilo.css') }} para referenciar correctamente la hoja de estilos en el entorno Laravel, garantizando que los estilos sean cargados desde la carpeta public [02:32].

2. 📐 Ajustes de Contenedor y Diseño del Carrusel [01:13]

Se trabaja en la envoltura estructural del carrusel para darle un aspecto más profesional:

Envoltura del Carrusel: La sección del carrusel se envuelve en un nuevo container y dentro de una row de Bootstrap para aislarla del resto del contenido [01:34].
Ancho del Carrusel: Se ajusta el ancho del carrusel en CSS, incrementándolo gradualmente (ej. al 90%), para que las portadas de las películas se vean de un tamaño agradable sin ser excesivamente grandes [03:38].
Estilo de Fondo: Se le aplica un color de fondo oscuro al contenedor (distinto del Navbar) para distinguir visualmente la sección de películas del resto de la página [05:15].
Bordes Redondeados: Se utiliza border-radius: 10px para suavizar las esquinas del contenedor del carrusel, dándole un toque más moderno y menos cuadrado [07:42].

3. 🏷️ Categorización de las Secciones del Carrusel [05:00]

Se implementa una estructura jerárquica para organizar los carruseles por categoría:

Etiquetado del Título: Se añade un título (Los Más Vistos) dentro de una etiqueta <h3> con estilo en negrita (<b>) [06:21].
Centrado y Espaciado: El título se centra horizontalmente (text-align: center) y se le añade un salto de línea para separarlo visualmente del buscador [07:07].
Plantilla de Categoría: El contenedor (container) del primer carrusel (Los Más Vistos) se copia y se duplica. El segundo carrusel se etiqueta como Animación, estableciendo la plantilla para que, en el backend, cada carrusel cargue películas de su respectiva categoría [08:29].

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web