50 Preguntas de Entrevista HTML & CSS

• 01.¿Cuál es la diferencia entre HTML y HTML5?
  HTML5 es la versión más moderna. Añade etiquetas semánticas (<article>, <section>, <nav>…), soporte nativo para audio/video, la API Canvas, Local Storage y mucho más. Ya no necesitas Flash ni plugins de terceros.
• 02.¿Qué es la semántica en HTML y por qué importa?
  Usar etiquetas con significado (<main>, <footer>, <aside>) en lugar de solo <div>. Mejora la accesibilidad para lectores de pantalla y el SEO porque los buscadores entienden la estructura de tu página.
• 03.¿Qué hace el atributo alt en una imagen?
  Describe el contenido de la imagen cuando no carga o cuando un lector de pantalla la procesa. Es obligatorio para la accesibilidad (WCAG) y también ayuda al SEO de imágenes.
Espacio Publicitario — In-Article
• 04.¿Cuál es la diferencia entre id y class?
  id debe ser único en toda la página y se usa para identificar un elemento específico. class puede estar en múltiples elementos y sirve para aplicar estilos reutilizables. En CSS, id tiene mayor especificidad que class.
• 05.Explica el Box Model de CSS.
  Todo elemento en CSS es una "caja" compuesta de cuatro capas: Content (texto/imagen), Padding (espacio interior), Border (borde) y Margin (espacio exterior). Con box-sizing: border-box, padding y border se incluyen dentro del tamaño declarado.

  div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid black;
  }

• 06.¿Qué es Flexbox y cuándo se usa?
  Flexbox es un sistema de layout unidimensional. Se usa para alinear elementos en una fila o columna. Ideal para barras de navegación, centrar elementos y distribuir espacio. Se activa con display: flex; en el contenedor padre.
• 07.¿Qué diferencia hay entre Flexbox y CSS Grid?
  Flexbox es unidimensional (una fila o columna). Grid es bidimensional (filas y columnas a la vez). Usa Flexbox para componentes pequeños como botones o navbars, y Grid para la estructura principal de la página.
Espacio Publicitario — Mid-Article
• 08.¿Qué es la especificidad CSS y cómo se calcula?
  Cuando dos reglas se aplican al mismo elemento, la que gana es la más específica. El orden de peso de mayor a menor es: estilos inline > id > class/atributo/pseudo-clase > etiqueta. !important lo sobreescribe todo, pero su uso es una mala práctica.
• 09.¿Cómo puedes centrar un elemento vertical y horizontalmente con CSS moderno?
  La forma más sencilla con Flexbox:

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  Con Grid es aún más corto: display: grid; place-items: center;
• 10.¿Qué es el responsive design y cómo se implementa en CSS?
  Es diseñar interfaces que se adaptan a cualquier tamaño de pantalla. Se implementa principalmente con media queries: @media (max-width: 768px) { ... }. Un enfoque moderno es "mobile-first": diseñas para móvil y luego añades estilos para pantallas más grandes.
💡 Consejo para la entrevista Cuando no sepas una respuesta al 100%, di: "No lo recuerdo de memoria, pero lo buscaría en MDN y lo aplicaría así...". Los reclutadores valoran la honestidad y que sepas dónde buscar.
• 11.¿Qué es la herencia en CSS?
  Algunos estilos como color y font-family se "heredan" automáticamente a los elementos hijos. Otros como margin, border o padding no se heredan. Puedes forzar la herencia con el valor inherit.
• 12.¿Qué son las CSS Variables (Custom Properties)?
  Son variables nativas de CSS que se definen con --nombre y se usan con var(--nombre). Permiten reutilizar valores y crear sistemas de diseño coherentes:

  :root {
    --color-primario: #16a34a;
  }
  button {
    background: var(--color-primario);
  }

• 13.¿Qué hace el z-index y cuándo no funciona?
  z-index controla qué elemento se ve "encima" de otro en el eje Z. Solo funciona en elementos con una posición distinta a static (como relative, absolute o fixed). Si dos elementos no comparten el mismo "stacking context", el z-index puede no tener efecto.
• 14.¿Cuál es la diferencia entre position: absolute y position: fixed?
  absolute: el elemento se posiciona relativo a su ancestro más cercano con position distinto de static. fixed: el elemento se posiciona relativo a la ventana del navegador y no se mueve al hacer scroll.
• 15.¿Qué es un pseudo-elemento? Pon un ejemplo.
  Permiten aplicar estilos a partes específicas de un elemento sin añadir HTML extra. Los más usados son ::before y ::after:

  a::after {
    content: " →";
  }

  También existen ::first-line, ::placeholder, etc.