Desafío integrador

Crea una página de “Portafolio personal” aplicando layout, selectores, pseudo‑clases, pseudo‑elementos, opacidad y efectos visuales.

Objetivo

Diseña una landing de portafolio (una sola página) con una navbar, un hero, una sección de proyectos y un footer. Debe verse bien en móvil y escritorio, ser accesible al teclado y demostrar dominio de los temas vistos.

Requisitos funcionales y técnicos

1) Estructura y navegación

  • Incluye una barra de navegación semántica con logo o nombre a la izquierda y enlaces a la derecha (usa Flexbox). Marca el enlace activo con .active o aria-current="page".
  • En móviles, la navbar debe adaptarse: wrapping o columna.
  • Estados :hover y :focus visibles en enlaces para accesibilidad.

2) Layout y posicionamiento

  • Usa Flexbox y/o Grid para organizar tarjetas de proyectos (mínimo 4) de forma responsive.
  • Demuestra al menos un uso claro de position: relative/absolute (por ejemplo, una “etiqueta” de estado en una tarjeta).
  • Evita float para layout principal (puedes usarlo si lo justificas para envolver texto con imagen).

3) Selectores, combinadores y especificidad

  • Aplica selectores básicos (elemento, clase, id, atributo) y combinadores (descendiente, hijo >, hermanos +/~).
  • Demuestra control de especificidad: estiliza .card > h3 sin afectar .card h3 más profundo.
  • Usa :not() de forma estratégica para excluir elementos de una regla.

4) Pseudo‑clases y pseudo‑elementos

  • Implementa estados de interacción: :hover, :focus, :active, :disabled en al menos un botón o enlace.
  • Usa :nth-child() para alternar estilos en listas o rejillas.
  • Crea al menos un decorador con ::before o ::after (por ejemplo, un badge “Nuevo” o un subrayado animado).

5) Opacidad y efectos visuales

  • Si necesitas transparencia, evita opacity global que afecte hijos; prefiere rgba()/hsla() u overlay.
  • Aplica box-shadow y text-shadow con moderación para profundidad.
  • Agrega microinteracciones con transform y transition (por ejemplo, elevar tarjetas al hover y scale(0.98) al active en botones).

Bloques mínimos sugeridos

Navbar

Logo a la izquierda, links a la derecha. En móvil: wrap o columna. 

<nav aria-label="principal" class="navbar">
  <a class="brand" href="#"><img src="../../images/home.gif" alt="">Tu Nombre</a>
  <ul> <li><a class="active" href="#">Inicio</a></li> ... </ul>
</nav>

Hero

Usa overlay con rgba() o una capa semitransparente para contraste sin afectar el texto. 

.hero { position:relative; }
.hero::before { content:""; position:absolute; inset:0; background: rgba(0,0,0,.25); }

Sección proyectos (grid + tarjetas)

Proyecto 1

HTML/CSS

Proyecto 2

UI

Proyecto 3

Accesibilidad

Proyecto 4

Responsive

.cards { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.38); transition: var(--transition); }

Galería (opcional)

Demo 1 Demo 2 Demo 3 
.gallery { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

Criterios de evaluación (rúbrica)

Semántica y accesibilidad
  • Usa etiquetas correctas (header, nav, main, section, footer).
  • Foco visible en elementos interactivos.
Layout responsive
  • Navbar adaptable y rejillas fluidas.
  • Sin desbordes en móvil.
Estilo y especificidad
  • Uso adecuado de combinadores y :not().
  • Evita !important; controla la cascada.
Interacciones
  • :hover, :focus y :active consistentes.
  • Microanimaciones suaves con transition/transform.
Efectos visuales
  • Sombras y opacidad con criterio.
  • Uso de rgba()/overlay vs opacity global.

Tips y recordatorios