Bienvenido a mi colección de prácticas y proyectos. Este repositorio documenta mi progresión en el aprendizaje de tecnologías web, desde estructuras básicas HTML hasta diseños modernos con efectos visuales avanzados.

Tecnologías Utilizadas

Lenguajes:
Fuentes e Iconos: Google Fonts (Manjari) & Font Awesome.
Estilos: Flexbox, CSS Grid, Posicionamiento Absoluto/Relativo.
Diseño UI: Glassmorphism (Efecto cristal), Diseño Responsivo.

Proyecto Destacado: JocsMania

El trabajo principal de este repositorio. Una web moderna sobre videojuegos con estética Glassmorphism.

Ubicación: projecte-final/main/

Características Clave

Diseño Glassmorphism: Uso intensivo de backdrop-filter: blur para crear paneles de cristal semitransparentes.
Navegación Móvil: Menú hamburguesa totalmente responsive creado con CSS puro (Checkbox Hack).
Tarjetas Interactivas: Efectos de hover y transiciones suaves en la lista de juegos.

Archivo Principal	Descripción
`indexSAD.html`	Página de inicio con las "Top Ventas".
`videojocsSAD.html`	Catálogo completo de juegos.
`style.css`	Hoja de estilos principal con variables y media queries.

Colección de Prácticas (Ejercicios)

Evolución de ejercicios realizados durante el curso:

Actividad	Temática	Ruta
ACT 24	🎬 El Cinema Mini-web con fichas de actores y películas.	`/ACT24_sad`
ACT 27	🖌️ Katsushika Hokusai Biografía y galería de arte.	`/ACT27_sad`
ACT 25	🐶 Mascotas Estructura básica de blog.	`/ACT25_sad`
ACT 23	📝 Tablas Maquetación de datos y listas.	`/ACT23_sad`
ACT 21/22	🌑 Conceptos Básicos Primeros pasos con HTML/CSS (La Lluna).	`/ACT21_sad`

Notas de Aprendizaje (DevLog)

"Es buena práctica documentar lo que se aprende."

Glassmorphism

Efecto de tipo cristal opaco, popularizado recientemente por Apple y presente antiguamente en Windows Aero.

Nota: El uso excesivo de backdrop-filter puede impactar el rendimiento (batería) en móviles antiguos.

Etiqueta `<iframe>`

Se utiliza para incrustar documentos externos (mapas, vídeos).

Accesibilidad: Es crucial incluir el atributo title="..." para que los lectores de pantalla sepan qué contenido se está mostrando.

Cómo ejecutar el proyecto

Clona o descarga este repositorio.
Abre la carpeta en Visual Studio Code.
Recomendado: Usa la extensión Live Server para visualizar los cambios en tiempo real.
Abre projecte-final/main/indexSAD.html para ver el resultado final.

README.md

Portafolio LDM-ASIR: Desarrollo Web