Frontend developer English
English for Frontend Developers: Essential Vocabulary, Phrases and Situations
September 10, 2026
A bilingual reference for CSS, JavaScript, TypeScript, React, accessibility, and code review English. Real terms, real examples.
1. CSS and Layout Vocabulary
These are the CSS terms that appear in every code review, tech talk, and documentation page. Knowing them in English makes it easier to search for solutions, read official specs, and participate in design discussions.
| Term | Spanish | Example |
|---|---|---|
| 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
JavaScript and TypeScript have a rich vocabulary that is almost always used in English, even in Spanish-speaking teams. These are the terms you will encounter in interviews, stack overflow answers, and pull request comments.
| Term | Spanish | Example |
|---|---|---|
| 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
The React documentation and community are almost entirely in English. Understanding these terms in their original language helps you read the docs, follow changelogs, and participate in discussions.
| Term | Spanish | Example |
|---|---|---|
| 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
Accessibility (a11y) is increasingly required in frontend work. These terms appear in audits, guidelines, and code reviews. The WCAG standard is in English, so understanding this vocabulary is essential.
| Term | Spanish | Example |
|---|---|---|
| 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
These are real phrases you will read and write in pull request reviews. Knowing them helps you give and receive feedback clearly.
“This selector is too specific.”
Use when a CSS selector is overly specific and will cause maintenance issues.
“Consider using CSS custom properties here.”
Suggest replacing hardcoded values with CSS variables for consistency.
“This re-renders on every keystroke.”
Point out a performance issue caused by unnecessary re-renders in a form or input.
“Extract this into a custom hook.”
Suggest moving stateful logic out of the component into a reusable hook.
“Missing alt text on this image.”
Flag an accessibility issue where an img element has no alt attribute.
“This breaks at smaller viewport sizes.”
Flag a responsive design issue you found during review.
“The z-index here creates a stacking context issue.”
Explain why a z-index value is causing layering problems.
Related articles
Ready to practice your English at work?
Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.
Try Lingua-e for free
Written by
Roxana LafuenteLingua-e's founder
Roxana Lafuente is a software engineer with 8+ years of experience. At the beginning of her career, even though she had already passed the First Certificate in English, she still froze every time she had to speak up in the daily standup. That was a gap nobody was fixing. After 2,000+ standups, she figured out what actually builds fluency: practice that looks like your real work. She built Lingua-e so other developers wouldn't have to take the long road to feel confident working in an international development environment.