Inglés para frontend developers
Inglés para Frontend Developers: vocabulario, frases y situaciones esenciales
10 de septiembre de 2026
Referencia bilingüe de CSS, JavaScript, TypeScript, React, accesibilidad y code reviews en inglés. Términos reales, ejemplos reales.
1. CSS and Layout Vocabulary
1. Vocabulario de CSS y layout
Estos son los términos de CSS que aparecen en todo code review, charla técnica y página de documentación. Conocerlos en inglés facilita buscar soluciones, leer las especificaciones oficiales y participar en discusiones de diseño.
| Término | Español | Ejemplo |
|---|---|---|
| cascade | cascada | The cascade determines which rule wins when two selectors have the same specificity. |
| specificity | especificidad | ID selectors have higher specificity than class selectors. |
| breakpoint | punto de corte / breakpoint | We added a breakpoint at 768px for tablet layouts. |
| media query | media query / consulta de medios | Use a media query to apply different styles on mobile. |
| viewport | ventana de visualización / viewport | The viewport width changes when you rotate the device. |
| repaint | repintado | Changing color triggers a repaint but not a reflow. |
| reflow | reflujo / reflow | Changing width triggers a reflow because it affects layout. |
| z-index | z-index / índice z | Increase the z-index to bring the modal above the overlay. |
| stacking context | contexto de apilamiento | Setting position: relative creates a new stacking context. |
| pseudo-class | pseudoclase | :hover and :focus are common pseudo-classes. |
| pseudo-element | pseudoelemento | ::before and ::after are pseudo-elements. |
| critical CSS | CSS crítico | Inline critical CSS to avoid render-blocking stylesheets. |
2. JavaScript and TypeScript Terms
2. Términos de JavaScript y TypeScript
JavaScript y TypeScript tienen un vocabulario rico que casi siempre se usa en inglés, incluso en equipos de habla hispana. Estos son los términos que encontrarás en entrevistas, respuestas de Stack Overflow y comentarios de pull requests.
| Término | Español | Ejemplo |
|---|---|---|
| callback | callback / función de retorno | Pass a callback to handle the async operation result. |
| promise | promesa | The API call returns a promise that resolves with the user data. |
| closure | clausura / cierre | The counter function uses a closure to keep track of state. |
| scope | ámbito / alcance | Variables declared with let have block scope. |
| hoisting | hoisting / elevación | Function declarations are hoisted to the top of their scope. |
| prototype chain | cadena de prototipos | JavaScript looks up the prototype chain when a property isn't found on the object. |
| type assertion | aserción de tipo | Use a type assertion when you know more about the type than TypeScript does. |
| generic | genérico | This function uses a generic type parameter to work with any data type. |
| narrowing | estrechamiento de tipos | The typeof check narrows the type from string | number to string. |
| discriminated union | unión discriminada | Use a discriminated union to model different event types. |
3. React Ecosystem Vocabulary
3. Vocabulario del ecosistema React
La documentación y la comunidad de React son casi totalmente en inglés. Entender estos términos en su idioma original te ayuda a leer los docs, seguir los changelogs y participar en discusiones.
| Término | Español | Ejemplo |
|---|---|---|
| prop | prop / propiedad | Pass the user object as a prop to the Avatar component. |
| hook | hook | useEffect is a hook for handling side effects. |
| ref | ref / referencia | Use a ref to access the DOM element directly. |
| hydration | hidratación | Hydration errors occur when the server-rendered HTML doesn't match the client render. |
| reconciliation | reconciliación | React's reconciliation algorithm decides which DOM nodes to update. |
| render cycle | ciclo de renderizado | Avoid heavy computations inside the render cycle. |
| error boundary | límite de error | Wrap risky components in an error boundary to prevent the whole page from crashing. |
| suspense | suspense | Wrap async components in Suspense to show a loading state. |
| portal | portal | Render the modal through a portal so it escapes the parent's overflow: hidden. |
| virtual DOM | DOM virtual | React updates the virtual DOM first, then batches changes to the real DOM. |
4. Accessibility Vocabulary in English
4. Vocabulario de accesibilidad en inglés
La accesibilidad (a11y) se exige cada vez más en el trabajo de frontend. Estos términos aparecen en auditorías, guías y code reviews. El estándar WCAG está en inglés, por lo que entender este vocabulario es esencial.
| Término | Español | Ejemplo |
|---|---|---|
| ARIA | ARIA (Aplicaciones de Internet Enriquecidas Accesibles) | Add aria-label when the button text alone doesn't describe its action. |
| screen reader | lector de pantalla | Test the form with a screen reader to check the reading order. |
| focus management | gestión del foco | Move focus to the modal header when it opens. |
| skip link | enlace de salto | A skip link lets keyboard users jump directly to the main content. |
| contrast ratio | relación de contraste | WCAG AA requires a minimum contrast ratio of 4.5:1 for body text. |
| landmark | punto de referencia / landmark | Use nav, main, and footer landmarks for screen reader navigation. |
| keyboard navigation | navegación por teclado | All interactive elements must be reachable via keyboard navigation. |
| WCAG | WCAG (Pautas de Accesibilidad al Contenido Web) | We need to meet WCAG 2.1 AA compliance before launch. |
5. Code Review Phrases for Frontend
5. Frases para code reviews de frontend
Estas son frases reales que leerás y escribirás en revisiones de pull requests. Conocerlas te ayuda a dar y recibir feedback con claridad.
“This selector is too specific.”
Úsalo cuando un selector CSS es demasiado específico y causará problemas de mantenimiento.
“Consider using CSS custom properties here.”
Sugiere reemplazar valores hardcodeados con variables CSS para mayor consistencia.
“This re-renders on every keystroke.”
Señala un problema de rendimiento por re-renders innecesarios en un formulario o input.
“Extract this into a custom hook.”
Sugiere mover la lógica con estado fuera del componente a un hook reutilizable.
“Missing alt text on this image.”
Marca un problema de accesibilidad donde un elemento img no tiene atributo alt.
“This breaks at smaller viewport sizes.”
Marca un problema de diseño responsive que encontraste durante la revisión.
“The z-index here creates a stacking context issue.”
Explica por qué un valor de z-index está causando problemas de apilamiento.
Artículos relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis
Escrito por
Roxana LafuenteFundadora de Lingua-e
Roxana Lafuente es ingeniera de software con más de 8 años de experiencia. Al comienzo de su carrera, aunque ya había aprobado el First Certificate in English, se bloqueaba cada vez que tenía que hablar en el standup diario. Era un problema que nadie estaba resolviendo. Después de más de 2.000 standups, descubrió qué es lo que realmente construye la fluidez: practicar situaciones que se parecen a tu trabajo real. Creó Lingua-e para que otros developers no tuvieran que tomar el camino largo para sentirse seguros trabajando en un entorno de desarrollo internacional.