Curso de Entrevista Frontend

Un curso estructurado de entrevista frontend que cubre JavaScript, HTML, CSS, React, navegador, rendimiento, accesibilidad y seguridad con preguntas enlazadas.

Nivel: Frontend Interview Dificultad: intermediate 5 lecciones 60 min
Progreso del curso 0 / 5
Volver a los cursos

Qué aprenderás

  • Comprender el formato de entrevista.
  • Explicar JavaScript y async.
  • Crear HTML semántico y CSS responsive.
  • Usar componentes y hooks de React.
  • Mejorar rendimiento, accesibilidad y seguridad.

Antes de empezar

  • Conocer JavaScript y HTML ayuda.
  • Se recomienda React básico.
  • Crear componentes pequeños ayuda a practicar.

Lección 1 Comprender la Entrevista Frontend

Las entrevistas frontend cubren JavaScript, HTML, CSS, React, navegador, rendimiento, accesibilidad y seguridad. Debes explicar conceptos, escribir código y resolver problemas de UI. Empieza por JavaScript, luego HTML y CSS, React, y finalmente eventos, rendimiento y seguridad. Explica el event loop, las keys de React y Core Web Vitals. Este curso organiza los temas en cinco lecciones con 60 preguntas originales.

Ejemplo

Ejemplo: explica closures y promises en fundamentos de JavaScript.

Lección 2 Fundamentos de JavaScript

Las entrevistas de JavaScript empiezan con fundamentos: closures, hoisting, igualdad estricta, promises, event loop y métodos de arrays. Un closure conserva el ámbito externo. === evita coerción. Las promises representan async. El event loop ejecuta microtasks. map, filter y reduce son esenciales. Una función pura no tiene efectos secundarios y la inmutabilidad crea valores nuevos. Explica con ejemplos cortos.

Ejemplo

Ejemplo: [1, 2, 3].map(n => n * 2) devuelve [2, 4, 6].

Lección 3 HTML, CSS y Diseño

HTML semántico mejora accesibilidad y SEO. La especificidad decide qué CSS gana. El box model es content, padding, border, margin. Flexbox es unidimensional y Grid bidimensional. rem es raíz, em padre, vw ancho y vh alto. Las media queries hacen responsive. position: fixed usa el viewport y border-box incluye padding. Practica construyendo layouts.

Ejemplo

Ejemplo: usa CSS Grid para un panel con barra lateral y contenido.

Lección 4 React y el Navegador

React cubre componentes, props, state, hooks y renderizado. useState, useEffect y useMemo son hooks clave. El virtual DOM y la reconciliación optimizan actualizaciones. Las listas necesitan keys. El navegador cubre DOM, eventos, event loop, microtasks y cookies. La delegación usa un listener padre. stopPropagation detiene el burbujeo y preventDefault la acción. Practica trazando re-renders.

Ejemplo

Ejemplo: const [count, setCount] = useState(0) crea un estado contador.

Lección 5 Rendimiento, Accesibilidad y Estrategia

Las preguntas de rendimiento piden páginas más rápidas. Debouncing retrasa, throttling limita y lazy loading difiere. Core Web Vitals: LCP, INP y CLS. Accesibilidad: HTML semántico, ARIA y teclado. Seguridad: XSS, CSP y CORS. Responde con estructura: problema, métricas, causas y soluciones priorizadas.

Ejemplo

Ejemplo: mejora CLS reservando espacio para imágenes con atributos de tamaño.