WorksheetsPreguntas de HTML y CSS
Total questions: 68
Worksheet time: 47mins
¿Cuál es la diferencia más precisa entre <section> y <article> en semántica HTML?
Un <section> siempre contiene artículos relacionados.
Un <article> es autónomo y tiene sentido fuera del contexto, mientras que <section> agrupa contenido temáticamente.
Ambos son intercambiables, solo cambia el estilo por defecto.
<section> siempre requiere un encabezado, <article> no.
¿Qué atributo se usa correctamente para mejorar la accesibilidad en una imagen decorativa sin valor informativo?
alt=""
alt="decoración"
role="none"
title="decoración"
¿Cuál es el propósito real de usar aria-label en un botón que ya tiene texto visible?
Duplicar la accesibilidad, siempre es necesario.
No es necesario, solo debe usarse si el texto visible no describe la acción correctamente.
Mejora el SEO aunque no cambie la accesibilidad.
Sirve solo para lectores de pantalla móviles.
¿Qué diferencia clave existe entre defer y async en un script?
Ambos bloquean la renderización.
async ejecuta en orden de aparición, defer no.
defer garantiza ejecución tras el parseo del DOM, async no.
Los dos hacen exactamente lo mismo, solo varía el navegador.
En un formulario, ¿qué efecto tiene novalidate?
Desactiva toda validación, incluso las personalizadas en JavaScript.
Solo desactiva la validación automática del navegador.
Solo afecta a inputs tipo email y number.
Hace que los errores de validación se envíen igual.
¿Qué diferencia existe entre <header> y <head>?
<header> pertenece al body, <head> a la metadata del documento.
Ambos se usan para la cabecera visual.
<head> es obligatorio, <header> también.
Los dos sirven para título y logo.
¿Qué diferencia existe entre <strong> y <b>?
<strong> agrega énfasis semántico, <b> es solo visual.
Ambos significan exactamente lo mismo.
<b> se usa solo en formularios, <strong> en texto.
<strong> no es reconocido por lectores de pantalla.
¿Qué significa que un elemento sea “autocontenido”?
Que no necesita apertura ni cierre.
Que su contenido tiene sentido por sí mismo sin depender del contexto.
Que no se puede anidar dentro de otros.
Que no puede llevar atributos.
¿Qué atributo debería usarse para asociar un <label> con un <input>?
for en el label con id en el input.
id en ambos.
name en ambos.
value en el label y el input.
¿Qué etiqueta es más adecuada para marcar un bloque de navegación principal?
<nav>
<aside>
<menu>
<section>
Diferencia entre em y rem:
em depende del tamaño de fuente del padre, rem del html.
em siempre se calcula desde 16px, rem no.
Ambos dependen del root.
rem no escala con media queries, em sí.
¿Cuál es la diferencia entre visibility: hidden y display: none?
Ambos ocultan y mantienen espacio.
visibility: hidden oculta y mantiene espacio, display: none lo elimina.
visibility: hidden elimina espacio, display: none no.
Son lo mismo.
¿Qué hace exactamente contain: layout; en CSS?
Aísla el cálculo del layout de un elemento.
Evita renderizado hasta ser visible.
Es un alias de overflow: hidden.
Solo afecta position.
¿Qué hace la pseudoclase :focus-within?
Selecciona al que recibe foco directo.
Selecciona a un elemento si él o un hijo recibe foco.
Es igual que :focus-visible.
No existe.
¿Qué diferencia existe entre relative y sticky?
sticky mezcla relativo con fijo según el scroll.
Ambos son idénticos.
relative siempre se pega al top.
sticky ignora z-index.
¿Qué significa object-fit: cover en una imagen?
Ajusta la imagen al contenedor recortando.
Estira la imagen.
Mantiene proporciones sin recortar.
Hace lo mismo que background-size: contain.
¿Qué propiedad CSS se usa para controlar cómo hereda un elemento?
inherit
initial
unset
Todas son válidas, con efectos distintos.
¿Qué diferencia existe entre inline-block y block?
Ambos ocupan toda la línea.
inline-block respeta márgenes horizontales, block no.
inline-block se comporta como inline pero acepta dimensiones, block ocupa todo el ancho.
Son equivalentes.
¿Qué significa que CSS sea “cascada”?
Que siempre gana la regla más larga.
Que las reglas se aplican en orden de especificidad y prioridad.
Que los navegadores aplican aleatoriamente.
Que el CSS se ejecuta en paralelo.
Diferencia entre == y ===:
== compara valores, === compara tipo y valor.
=== es más rápido.
Ambos hacen conversión implícita.
== solo compara strings.
¿Qué devuelve typeof null?
"null"
"undefined"
"object"
"null object"
Diferencia entre map() y forEach():
Ambos devuelven arrays.
map() devuelve nuevo array, forEach() no.
forEach() rompe con return, map() no.
Ambos devuelven undefined.
¿Qué pasará?
let x = {};
console.log(x.__proto__ === Object.prototype);
true
false
Error
undefined
Resultado de [] + []:
0
[]
""
undefined
¿Cuál es la diferencia entre var, let y const?
var tiene hoisting y scope de función, let y const son block scope.
Todos tienen el mismo scope.
const es igual a let.
let y const no existen en ES6.
¿Qué pasa con este código?
console.log(a);
var a = 5;
undefined
5
Error
null
¿Qué devuelve Promise.resolve(5).then(x => x*2)?
10
Una promesa que resuelve en 10
5
Error
¿Qué significa “hoisting”?
Que variables y funciones se elevan antes de ejecutar.
Que se ejecutan antes del DOM.
Que las promesas se resuelven solas.
Que el código se paraleliza.
Resultado de: console.log([] == false);
true
false
Error
undefined
¿Qué significa “closure”?
Función que recuerda su scope aunque se ejecute fuera.
Función que cierra recursos.
Función asíncrona.
Objeto global.
¿Qué diferencia hay entre undefined y not defined?
undefined es valor válido, not defined es error.
Son lo mismo.
Ambos lanzan error.
undefined no existe en JS.
¿Qué diferencia hay entre undefined y not defined?
undefined es valor válido, not defined es error.
Son lo mismo.
Ambos lanzan error.
undefined no existe en JS.
¿Qué hace Object.freeze()?
Congela propiedades, no se pueden añadir, quitar o cambiar.
Solo congela valores primitivos.
Hace inmutable un array.
Borra propiedades.
¿Qué es el Event Loop?
Mecanismo que gestiona ejecución síncrona y asíncrona en JS.
Algoritmo de ordenamiento.
Sistema de estilos en CSS.
API de React.
Diferencia entre setTimeout(fn, 0) y queueMicrotask(fn):
Ambos se ejecutan igual.
queueMicrotask tiene prioridad en el event loop sobre setTimeout.
setTimeout(0) es más rápido.
Ninguna, son equivalentes.
¿Qué hace JSON.stringify({a:1, b:undefined})?
{"a":1}
{"a":1,"b":null}
{"a":1,"b":undefined}
{}
¿Qué pasará?
let a = [1,2,3];
let b = a;
b.push(4);
console.log(a);
[1,2,3]
[1,2,3,4]
[4]
Error
Diferencia entre Object.seal() y Object.freeze():
seal impide añadir/eliminar, pero sí modificar; freeze bloquea todo.
Ambos son iguales.
seal solo sirve para arrays.
freeze permite añadir nuevas propiedades.
¿Qué significa “inmutabilidad” en programación funcional?
Que los datos no cambian, se crean copias nuevas.
Que no hay variables globales.
Que el DOM no se actualiza.
Que JS no soporta cambios.
Diferencia entre res.json() y res.text():
Ambos devuelven objetos.
json() convierte a objeto JS, text() devuelve string.
text() convierte a JSON.
Ambos devuelven string.
¿Cómo manejar errores en Fetch?
Solo con catch().
Revisar res.ok y luego usar catch().
fetch lanza error en 404.
Con finally().
Diferencia entre REST y GraphQL:
REST múltiples endpoints, GraphQL uno flexible.
REST siempre devuelve todo, GraphQL solo lo pedido.
REST más rápido, GraphQL más lento.
Son idénticos.
¿Qué significa idempotencia en una API?
Que puede ejecutarse varias veces sin alterar resultado.
Que nunca devuelve lo mismo.
Que solo admite GET.
Que solo aplica en GraphQL.
Ventaja de la paginación:
Evita sobrecarga del backend.
Aumenta velocidad del frontend.
Reduce tamaño de JS.
Elimina endpoints.
¿Qué diferencia existe entre status 200 y 204?
Ambos devuelven contenido.
204 significa éxito sin contenido.
200 es error silencioso.
No hay diferencia.
¿Qué significa CORS?
Restricción de orígenes cruzados.
Caché optimizado.
Mecanismo de login.
Política de SEO.
¿Qué método HTTP es el más idempotente?
GET
POST
PATCH
CONNECT
¿Qué diferencia existe entre PUT y PATCH?
PUT reemplaza todo el recurso, PATCH modifica parcialmente.
Ambos hacen lo mismo.
PATCH solo funciona en GraphQL.
PUT no existe en REST.
¿Qué significa una API “stateless”?
Que no guarda estado en el servidor entre peticiones.
Que no necesita tokens.
Que solo usa GET.
Que mantiene sesiones en memoria.
¿Qué significa una API “stateless”?
Que no guarda estado en el servidor entre peticiones.
Que no necesita tokens.
Que solo usa GET.
Que mantiene sesiones en memoria.
¿Qué hook usarías para ejecutar solo al montar?
useEffect(() => {}, [])
useState
useMemo
useLayoutEffect
Diferencia entre useMemo y useCallback:
useMemo memoriza valores, useCallback funciones.
Ambos memorizar funciones.
useMemo en efectos, useCallback en estados.
Son iguales.
Error en este código:
const [count, setCount] = useState(0);
function increment() {
count++;
}
count++ no actualiza estado.
useState no permite 0.
count no puede usarse en función.
Funciona bien.
¿Qué pasa si no agregas key en un .map()?
React ignora duplicados.
React no sabe identificar cambios.
Nada.
Error fatal.
¿Qué es un componente controlado?
Input que depende de state y props.
Se renderiza una vez.
No recibe props.
Controla hijos.
¿Qué significa “lifting state up”?
Mover estado a un componente padre para compartirlo.
Crear más estados globales.
Usar Context.
Eliminar estados.
¿Qué diferencia existe entre props y state?
props son inmutables desde el hijo, state mutable dentro del componente.
Ambos mutables.
Ambos inmutables.
props solo en class, state en function.
¿Qué significa reconciliación en React?
Proceso de comparar Virtual DOM con DOM real para actualizar eficientemente.
Re-renderizar todo.
Reemplazar DOM cada vez.
Técnica de hooks.
¿Qué hook usarías para contexto global?
useContext
useReducer
useMemo
useRef
¿Qué hace React.StrictMode?
Activa comprobaciones adicionales en desarrollo.
Optimiza producción.
Desactiva warnings.
No existe.
¿Qué pasa si usas setState en un componente no montado?
Error de memoria.
Nada.
Siempre se ejecuta.
El componente se monta solo.
¿Qué diferencia hay entre useRef y useState?
useRef no provoca re-render, useState sí.
Ambos provocan re-render.
useRef no guarda valores.
Son lo mismo.
¿Qué significa que React sea declarativo?
Que describes el resultado, no los pasos exactos.
Que obliga a usar class.
Que requiere JSX siempre.
Que ejecuta línea por línea.
Explica por qué usarías aria-hidden="true" en un icono dentro de un botón y cómo afecta a los lectores de pantalla.
Corrige este código para que funcione adecuadamente:
<form>
<input type="email" required="false" />
<button>Enviar</button>
</form>
Implementa una función en JS que reciba un array de números y devuelva otro array con los pares elevados al cuadrado.
Escribe un ejemplo práctico de cómo consumirías la API de GitHub para obtener los repositorios públicos de un usuario y mostrarlos en una lista.
Explica cómo manejarías un error de useEffect que entra en bucle infinito al depender de un state.
