Frameworks: hydration · SSR · SSG · ISR · virtual DOM · reconciliation · reactive
0 / 10 completed
1 / 10
In frontend development, which term describes the browser's internal tree-like representation of all HTML elements on a page?
The DOM (Document Object Model) is the browser's in-memory tree representation of HTML elements. JavaScript uses the DOM API to read and modify the page. Related terms: CSSOM (CSS Object Model — a separate tree for CSS rules); Shadow DOM (an encapsulated DOM subtree used in Web Components to isolate styles and markup); Virtual DOM (React's in-memory copy used to minimise re-renders via reconciliation). The viewport is simply the visible area of the browser window — not a DOM concept.
2 / 10
Complete the sentence using the correct frontend term: "To ensure the app is accessible, we added proper _____ attributes to all interactive elements so that screen readers can announce them correctly."
ARIA (Accessible Rich Internet Applications) attributes — such as aria-label, aria-expanded, aria-live — extend HTML semantics to help assistive technologies understand the purpose of custom UI components. data-* attributes are custom data attributes (not for accessibility). meta tags go in <head> and describe page metadata. rel describes the relationship in link/anchor elements. Knowing accessibility vocabulary is increasingly expected in frontend interviews across all levels.
3 / 10
In CSS, what is specificity?
Specificity is a numerical weight calculated from the selectors in a CSS rule. Higher specificity wins over lower specificity, regardless of source order. The hierarchy (highest to lowest): inline styles → ID selectors → class/pseudo-class/attribute selectors → element/pseudo-element selectors. !important overrides all specificity (use sparingly). Related terms: cascade (the algorithm combining specificity, source order, and origin to resolve conflicts); inheritance (properties that automatically pass from parent to child if not set).
4 / 10
What does hydration mean in the context of modern frontend frameworks (React, Vue, Svelte)?
Hydration is the process of attaching JavaScript (event listeners, component state) to server-rendered HTML, making the static markup interactive. Without hydration, SSR (Server-Side Rendering) produces a fast visual first paint but a non-interactive page. Hydration bridges the gap. Related: partial hydration (hydrate only the interactive parts); islands architecture (Astro's approach — ship zero JS for static components); resumability (Qwik's approach — skip replay of app startup entirely). Hydration performance is a key topic in modern frontend engineering discussions.
5 / 10
The term critical rendering path refers to:
The critical rendering path is the sequence: HTML parsing → DOM construction → CSS parsing → CSSOM construction → Render tree → Layout → Paint → Composite. Optimising the critical rendering path means reducing the time to First Contentful Paint (FCP). Key optimisations: defer/async non-critical JS (JS blocks HTML parsing by default); inline critical CSS; preload key resources. Related metrics: FCP (First Contentful Paint), LCP (Largest Contentful Paint), TTI (Time to Interactive), CLS (Cumulative Layout Shift) — all part of Core Web Vitals.
6 / 10
Sarah from the UI team just left a comment on your PR: 'The component is rendering incorrectly. I'm seeing a large gap between the header and the main content.' What does cumulative layout shift (CLS) likely relate to in this situation?
Cumulative Layout Shift (CLS) is a Core Web Vital measuring visual stability. It specifically refers to how much an element shifts its position on the screen during rendering—in this case, likely due to content loading asynchronously or changes in CSS styles causing reflows. Option A is incorrect because CLS isn't directly about CSS parsing; it's about *how* elements are laid out after the page has loaded.
7 / 10
Mark in the Slack channel asks: 'How do we ensure our site looks good on both desktop and mobile?'. Which of the following best describes a responsive design approach?
Responsive design is fundamentally about adapting to different screen sizes. Media queries in CSS are the key technique – they enable you to apply different styles based on characteristics like width and height. Option A describes creating separate websites, which is a much more complex and less efficient approach than responsive design. Option D relies on a poor user experience.
8 / 10
You are debugging an issue where your React component isn't updating correctly after a state variable changes. The developer tools indicate that the component is re-rendering but the UI doesn't reflect the new state. What does memoization typically refer to in this context?
Memoization is an optimization strategy used to prevent unnecessary re-renders in React (and other frameworks). It works by caching the result of a function call and only recalculating it when its inputs change. This significantly improves performance, especially for frequently rendered components with complex calculations or data transformations.
9 / 10
David in the PR description writes: 'We're using a server-side rendering technique to improve initial page load performance.' What does server-side rendering (SSR) primarily aim to achieve?
Server-side rendering (SSR) involves generating the HTML of a web page on the server rather than solely in the user's browser. This results in faster initial load times because the browser receives fully rendered HTML, allowing it to display content more quickly. It's also beneficial for SEO as search engines can easily crawl and index the rendered content.
10 / 10
You are investigating a performance bottleneck in your web application. The monitoring tools show that network requests to the API are consistently slow. What is throttling typically used for in this scenario?
Throttling is a technique used to limit the rate at which a function or event handler can be executed. This prevents a single request from monopolizing resources and causing delays for other operations. It's crucial when dealing with potentially overwhelming API calls.
What does the "Frontend Development Vocabulary" vocabulary exercise cover?
This exercise tests real IT vocabulary related to frontend development vocabulary through 10 multiple-choice questions, each built from realistic workplace sentences rather than abstract definitions.
Is this vocabulary exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is completely free — no account, sign-up, or payment required.
How many questions does this exercise have?
This exercise has 10 questions. Each one shows a real-world sentence or scenario with multiple-choice options and an explanation once you answer.
What happens after I answer a question?
You'll see immediate feedback showing whether your answer was correct, along with a short explanation of why — then a button to move to the next question, and a full results screen at the end.
Can I retry the exercise if I get questions wrong?
Yes. Once you reach the results screen, click "Try again" to reset your answers and go through the exercise from the start as many times as you like.
Do I need to create an account to take this exercise?
No account is needed. Your answers are scored in your browser during the session — nothing is saved to a server, so you can jump straight in.
Is my progress saved if I leave the page?
No — progress within an exercise resets if you navigate away or reload. Each exercise is short enough to complete in a few minutes in one sitting.
Are these vocabulary exercises connected to other topics?
Yes — browse the full vocabulary exercises hub to find related modules covering adjacent IT topics and roles.
How is this different from reading a glossary or blog article?
Exercises like this one are active recall drills — you have to choose the correct term or phrasing yourself, which builds retention faster than passively reading a definition.
Where can I find more vocabulary exercises?
Browse the full Vocabulary exercises hub for hundreds of modules covering Agile, DevOps, security, databases, architecture, and more — organised by IT role and skill.