👩🏻‍💻 Práctica HTML5 + CSS3 (Portfolio)

👤 Marta Vilaseca Foradada
💻 XVI Bootcamp Full Stack Web
📅 28 Enero 2024

🌳 There and back again - the Bilbo Baggins portfolio

Para la práctica he decidido crear un portfolio de uno de mis personajes ficticios favoritos, Bilbo Baggins (Bilbo Bolsón en la traducción española) de los libros y películas de El Hobbit y El Señor de los Anillos.

Versión mobile	Versión Desktop

Página desplegada en github pages aquí: https://marta-vilaseca.github.io/keepcoding-html-css-pra/

✅ Requisitos obligatorios

• Siguiendo las indicaciones recibidas, no se ha utilizado Javascript ni librerías CSS externas en toda la práctica
• Diversas hojas de estilo CSS, debidamente etiquetadas según su función o el apartado/sección al que corresponden
• Se ha comprobado que la página de visualice correctamente en las versiones actuales de Google Chrome, Mozilla Firefox y Microsoft Edge
• Se han tenido en cuenta las etiquetas HTML de contenido semnántico
• La web se ha maquetado siguiendo la estrategia mobile first

📃 Sección por sección

Archivos comunes o generales css
common.css	Estilos comunes y definición de variables
reset.css	Reset sencillo (referencia)

Header [header.css]

• Presente en index.html y en proyectos.html con las modificaciones de enlaces pertinentes
• Barra de navegación con enlaces a cada elemento del portfolio, visible sólo en versión no móvil
• Dichos enlaces tienen un efecto hover sencillo de cambio de color y aparición de una pastilla de color de fondo al hacer hover, suavizada con una transición
• OPCIONAL: menú burger con solo CSS y un input checkbox, activo sólo en versiones móbil. Dadas las limitaciones de usar sólo CSS, es necesario volver a clicar manualmente en el menú para cerrarlo una vez abierto.

Sección About + Sección Skills [about.css], [skills.css]

• Con una descripción sobre el personaje y un listado de habilidades mostradas en forma de barras de progreso
• Dichas barras de progreso están animadas con CSS (la animación se ejecuta una sola vez al cargarse la página)

Banner con imagen de fondo [banner.css]

• Con distintas imágenes y proporciones de tamaño para el mismo, en función de cada resolución

Formulario de Contacto [form.css]

• Con los campos requeridos Nombre, Apellidos, Teléfono (con validación de formato), Tag de github (con validación de formato) y Mensaje (textarea)
• Con los campos opcionales ¿Cómo me conociste? y Acceso a newsletter (checkbox)
• Y los dos botones Enviar/Guardar y Reset

Footer [footer.css]

• Presente en index.html y en [proyectos.html]
• Enlaces a cuentas oficiales relacionadas (con El Hobbit y los decorados de las películas como destino turístico) en Facebook, Twitter/X, Instagram y Youtube
• Con el añadido de un enlace extra (de aspecto ligeramente distinto en versión móvil y la no móvil) para volver arriba del todo de la página

Video + Proyectos [video.css], [projects.css]

• Ambas cosas en una nueva página que carga un vídeo (el primer trailer promocional de la primera película de la trilogía El Hobbit), con efecto fade in y autoreproducción
• El listado de proyectos se ha hecho en forma de grid, siguiendo las capturas de ejemplo para el diseño
• La cuadrícula tiene dos columnas, tres o cuatro en función de la resolución del dispositivo

OPCIONAL: Páginas de error [e404.css], [e500.css]

• Páginas de error de recurso no encontrado y de error interno de servidor, de libre diseño y con sus correspondientes hojas de estilo css (cada una con ligeros ajustes para hacerlas responsive)