I85PREP
⌘ K
OutSystems Front-End Developer Specialist study materials
OutSystems Front-End Developer Specialist study resources

OutSystems Front-End Developer Specialist practice questions

One question at a time. Build your OutSystems Front-End Developer Specialist understanding.

First 50 of 200 questions. Each one lists the choices, the correct answer, and an explanation. The checker at the top of this page saves progress in this browser when it is available.

Continue in the practice tool above to load more questions, 50 at a time.

Question 1OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In OutSystems, which element should you use to apply a reusable visual style such as a brand color or font to multiple widgets without repeating the CSS on each screen?

  1. A Style Class defined in the theme Correct answer.
  2. An Inline Style on each widget
  3. A Screen Property
  4. A Local Variable of type Text

Explanation

Style Classes are defined once in the theme (or module CSS) and referenced by widgets, so a single edit propagates to every widget using that class. Inline styles live on one widget only and cannot be reused globally, which is why they are discouraged for design systems.

Question 2OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

You need a widget's style to change only on small phone screens while staying unchanged on desktop. Which OutSystems mechanism is designed for this?

  1. A Style Class with CSS media queries in the module's stylesheet Correct answer.
  2. A second Screen with duplicated layout
  3. A Client Action that toggles a Local Variable
  4. An If widget that hides content by role

Explanation

Responsive behavior in OutSystems is handled by CSS media queries applied through Style Classes or the theme, letting one layout adapt across breakpoints. Duplicating screens or conditionally hiding widgets does not actually change styling and creates maintenance overhead.

Question 3OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems Screen property controls the HTML title shown in the browser tab for a web screen?

  1. Name
  2. Description
  3. Title Correct answer.
  4. URL Path

Explanation

The Title property of a Screen sets the document title rendered in the browser tab, and it can be set statically or from an expression. Name identifies the screen inside the module, Description is documentation, and URL Path affects the address.

Question 4OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In a Traditional Web module, where should a developer place custom CSS that must be available to every screen of the module?

  1. In the OnReady event of the Layout
  2. In the Preparation of each screen
  3. In a Web Block placed on each screen
  4. In the module's Style Sheet, referenced through the theme or module CSS Correct answer.

Explanation

Module-level CSS is loaded once and shared across all screens, which is the correct place for global overrides and custom classes. Repeating style blocks per screen or per web block scatters the same rules and makes them hard to maintain.

Question 5OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer wants the same header layout reused across many screens so that a single change updates all of them. Which OutSystems element fits best?

  1. A copied Container on each screen
  2. A Static Entity record
  3. A Web Block placed inside the Layout Correct answer.
  4. A Screen with a redirect

Explanation

Web Blocks are reusable UI components, and placing one inside a Layout makes the header appear on every screen that uses that Layout. Copying containers creates independent duplicates that must be edited one by one.

Question 6OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget is the correct choice to display a list of records with a repeating visual template and built-in paging behavior?

  1. Container
  2. Form
  3. Table Records
  4. List Records Correct answer.

Explanation

List Records iterates a record list and renders a template per row, with optional pagination and empty-state handling. Table Records is for tabular grids, Container is a layout box, and Form groups inputs for submission.

Question 7OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In a Reactive Web screen, which event should contain JavaScript that must run after the screen's DOM is rendered?

  1. OnReady Correct answer.
  2. OnParametersChanged
  3. Preparation
  4. OnInitialize

Explanation

OnReady fires on the client after the screen is rendered, so the DOM exists and can be manipulated. OnInitialize runs before rendering, Preparation runs on the server, and OnParametersChanged fires when input parameters change.

Question 8OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems theme mechanism lets you override a built-in style class globally without editing platform files directly?

  1. Editing the platform's base theme file in place
  2. Using inline styles on every affected widget
  3. Disabling the theme entirely
  4. Adding the override to the module's own stylesheet so it loads after the base theme Correct answer.

Explanation

Custom CSS placed in the module stylesheet loads after the base theme, so equal-specificity rules override the defaults in a maintainable way. Editing platform files is overwritten on upgrade, and inline styles cannot scale.

Question 9OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer needs a button to look different from the default primary style but still inherit the theme's spacing and typography. What is the recommended approach?

  1. Create a new theme from scratch
  2. Replace the button with an image
  3. Add a custom Style Class alongside the existing button classes Correct answer.
  4. Remove all classes and write inline CSS

Explanation

Adding a custom Style Class on top of the existing button classes lets you change only the properties you need while inheriting the theme's spacing and typography. Stripping classes or replacing the widget discards accessibility and theme behavior.

Question 10OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which property on an Image widget should be set so that a photo fills its container without distortion across screen sizes?

  1. The Loading property set to Lazy
  2. A fixed Width and Height in pixels
  3. A Style Class that sets object-fit to cover Correct answer.
  4. The Alternate Text property only

Explanation

An object-fit value of cover scales the image to fill the box while preserving aspect ratio, cropping overflow as needed. Fixed pixel dimensions force distortion or overflow on different viewports, and alternate text and loading affect accessibility and performance, not scaling.

Question 11OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In OutSystems Reactive Web, what is the purpose of the Layout's placeholders?

  1. They define named regions where screen content is injected Correct answer.
  2. They configure the module's service actions
  3. They store session variables
  4. They define database indexes

Explanation

Placeholders are named slots in a Layout that screens fill with their own content, enabling consistent chrome such as headers and menus. They have nothing to do with data storage or server configuration.

Question 12OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems feature allows a developer to preview and adjust spacing and colors of a screen visually during development?

  1. Service Studio's visual editor with the Styles pane Correct answer.
  2. The module's dependency tree
  3. The debugger's watch list
  4. The entity diagram

Explanation

Service Studio provides a visual editor where widgets are dragged and styled, and the Styles pane exposes style properties for the selected widget. The dependency tree, watch list, and entity diagram serve unrelated development purposes.

Question 13OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A screen must show a different layout on mobile versus desktop, including different navigation. Which approach best fits OutSystems?

  1. Use one Layout and hide navigation with an If widget
  2. Use separate Layouts for phone and tablet/desktop and let the platform select by device Correct answer.
  3. Use a Table Records to switch layouts
  4. Use a single screen with inline styles for both sizes

Explanation

OutSystems supports device-specific Layouts, so a module can define distinct layouts for phone and tablet/desktop and the platform picks the right one at runtime. Hiding elements with conditions or inline styles does not deliver genuinely different navigation structures.

Question 14OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget is appropriate for capturing a single line of text from the user on a form?

  1. Dropdown
  2. Text Area
  3. Input Correct answer.
  4. Switch

Explanation

The Input widget binds to a variable and renders a single-line text field suitable for short values. Text Area is for multiline text, Dropdown offers a fixed set of choices, and Switch toggles a boolean.

Question 15OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer wants validation messages on a form to appear next to each field. Which OutSystems construct supports this?

  1. Built-in validation on Input widgets with the form's validation messages Correct answer.
  2. A Web Block placed after the form
  3. A Static Entity with error text
  4. A Client Action that shows an alert

Explanation

Input widgets support mandatory and type validation, and the platform displays validation messages inline near the field when the form is submitted. Generic alerts and unrelated blocks do not provide per-field feedback.

Question 16OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems element should be used to display a small badge with a count that updates when a variable changes, without reloading the screen?

  1. An Expression widget bound to the variable Correct answer.
  2. A Screen with a URL parameter
  3. A Server Action
  4. A Text widget with static text

Explanation

Expression widgets render values from variables and re-render reactively when those variables change, so a bound count updates without a full reload. Static text cannot reflect changing values, and server actions do not render UI.

Question 17OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In OutSystems, which is the correct way to make a Web Block accept input data from the screen that uses it?

  1. Add a Screen Property
  2. Use a Session Variable
  3. Define Local Variables on the Web Block
  4. Define Input Parameters on the Web Block Correct answer.

Explanation

Web Block Input Parameters are the supported contract for passing data into the block from the consuming screen. Local variables are internal, session variables are global, and screen properties configure screens rather than blocks.

Question 18OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems concept lets you build a mobile app UI with native-feeling navigation and gestures in OutSystems 11?

  1. Static Entities
  2. Mobile Apps built with the Reactive Web and mobile patterns Correct answer.
  3. Server-side Preparation only
  4. Traditional Web screens

Explanation

OutSystems mobile apps use reactive patterns that render native-feeling navigation and gestures on devices. Traditional Web screens target desktop browsers, Preparation is server logic, and Static Entities are data.

Question 19OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A designer supplies a specific hex color that must be used consistently across a module. What is the most maintainable OutSystems approach?

  1. Add the hex value to every screen's Title
  2. Type the hex value into each widget's inline style
  3. Store the hex value in a Local Variable
  4. Define a CSS custom property or theme variable and reference it in style classes Correct answer.

Explanation

Centralizing the color in a CSS custom property or theme variable means a single change updates every reference. Repeating the literal value in inline styles or unrelated properties creates drift and inconsistency.

Question 20OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget should be used to render a data grid with sortable columns and a header row?

  1. Table Records Correct answer.
  2. List Records
  3. Link
  4. Container

Explanation

Table Records renders a tabular structure with header and body rows suited to grid-style data. List Records renders a repeating free-form template, Container is a layout box, and Link navigates.

Question 21OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer needs the same custom button style on many screens but must also keep accessibility attributes. What should they avoid doing?

  1. Extending the button with an additional Style Class
  2. Referencing the class from each button
  3. Defining the style once in the module CSS
  4. Replacing the button with a clickable Container and image Correct answer.

Explanation

Replacing a real button with a clickable container and image removes keyboard focus and screen-reader semantics. Extending the button through a Style Class keeps native semantics while changing appearance, which is the recommended pattern.

Question 22OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems feature allows conditional rendering of a group of widgets based on a boolean expression?

  1. The Container widget
  2. The If widget Correct answer.
  3. The Link widget
  4. The Form widget

Explanation

The If widget evaluates a boolean expression and renders its true or false branch accordingly. Container, Form, and Link are structural or navigation widgets and do not branch on conditions.

Question 23OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In a Reactive Web app, a developer wants a modal dialog to open without navigating away from the current screen. Which approach fits OutSystems patterns?

  1. Use a Table Records to show the dialog
  2. Use a Server Action to render HTML
  3. Create a new Screen and redirect to it
  4. Use a Popup or Modal pattern triggered by a Client Action Correct answer.

Explanation

OutSystems provides popup and modal UI patterns that open over the current screen, typically shown by a Client Action that sets a visibility variable. Redirecting to a new screen changes context, and server actions cannot render client-side dialogs.

Question 24OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems construct best supports a consistent page background, header, and footer across all screens of a module?

  1. Inline styles on each screen's root container
  2. A Web Block placed manually on each screen
  3. A Client Action called on each screen
  4. A Layout referenced by each screen Correct answer.

Explanation

Layouts define shared chrome such as background, header, and footer, and screens inherit them by referencing the Layout. Manually placing blocks or repeating inline styles requires per-screen edits and invites inconsistency.

Question 25OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A team wants to change the default font family for an entire module while keeping platform styles intact. What is the most appropriate action?

  1. Edit the platform base theme file
  2. Add a font tag to each screen's Title
  3. Set the font in a module-level style rule that overrides the theme default Correct answer.
  4. Change each widget's font in inline styles

Explanation

A module-level rule that overrides the theme's font default cascades to all widgets while leaving the rest of the platform styles untouched. Per-widget inline changes and platform file edits are either unscalable or overwritten on upgrade.

Question 26OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In OutSystems, which CSS unit convention does the platform's grid and spacing system primarily rely on so that layouts scale predictably across screen sizes?

  1. Viewport-width units for every container
  2. Percentage heights on all widgets
  3. Relative rem/em units derived from the theme's base font size Correct answer.
  4. Fixed pixel values tied to the 960px desktop grid

Explanation

OutSystems themes define spacing and typography relative to a base font size, so rem/em-based values scale consistently when the base changes. Hard-coded pixels break that scaling and force manual rework per breakpoint.

Question 27OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer needs a screen element to occupy six of twelve columns on desktop but the full width on a phone. Which OutSystems mechanism implements this declaratively?

  1. Using a Web Block with a JavaScript resize listener
  2. Wrapping the container in an If widget keyed to screen width
  3. Setting the Container's column widths per device in the grid properties Correct answer.
  4. Adding a custom CSS class with media queries to the container

Explanation

The platform grid exposes per-device column settings (phone, tablet, desktop) directly on the container, so the layout adapts without custom CSS. This keeps breakpoint behavior consistent with the theme's grid definition.

Question 28OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems entity is the recommended place to define a reusable color token so that changing it once updates every screen in the module?

  1. A Theme's global style variable or CSS custom property Correct answer.
  2. A Static Entity record containing the hex value
  3. A local variable on each screen holding the hex string
  4. An inline style attribute on each styled widget

Explanation

Theme-level variables and CSS custom properties are compiled into the module stylesheet, so a single edit propagates to all consumers. Inline styles and per-screen variables scatter the value and invite inconsistency.

Question 29OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer applies a custom class to a Button but the platform's default button styling still wins. What is the most likely cause?

  1. The theme file was not saved before publishing
  2. The custom class has lower CSS specificity than the platform selector Correct answer.
  3. Custom classes only apply to Link widgets
  4. The Button widget does not support custom classes

Explanation

Platform button styles often use compound selectors, so a single class may lose the specificity contest. Raising specificity by scoping the selector or matching the platform's selector depth resolves it without editing platform CSS.

Question 30OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget is designed to group related widgets and apply a shared style class and visibility rule without adding semantic HTML of its own?

  1. Web Block
  2. Container Correct answer.
  3. Table Records
  4. Form

Explanation

A Container renders a generic div that groups widgets and accepts style classes, so it is the standard grouping primitive. It adds no table or form semantics, unlike the other options.

Question 31OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A list must render a different card design when an item's status is 'Urgent'. Which OutSystems construct expresses this inside the list item template?

  1. A Screen Action that rebuilds the list on each render
  2. A second List widget filtered by status
  3. A Web Block with an input parameter for the whole list
  4. An If widget inside the list item that tests the status attribute Correct answer.

Explanation

An If widget inside the list item evaluates per record, so each row can choose its own template. Filtering with a second list or rebuilding via screen action duplicates data and logic unnecessarily.

Question 32OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which statement correctly describes how a Screen's local variables affect UI rendering in Reactive Web?

  1. Variables must be manually pushed to the DOM with JavaScript
  2. Only Aggregate outputs can drive widget bindings
  3. Variable changes require a full page reload
  4. Changes to a variable bound to a widget re-render only that widget's binding automatically Correct answer.

Explanation

Reactive Web tracks variable dependencies and updates the affected bindings when a value changes. This fine-grained reactivity is why developers rarely need manual DOM manipulation.

Question 33OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer wants a horizontal row of equally spaced items that wraps on narrow screens. Which combination is most appropriate in OutSystems?

  1. A Container with a flex-based Columns or display-flex style class Correct answer.
  2. A single Text widget with spaces between items
  3. An absolute-positioned Container per item
  4. A Table Records widget with fixed column widths

Explanation

Flex layout with wrapping handles equal spacing and reflow without fixed widths. The platform theme ships flex utilities that integrate with the grid and breakpoints.

Question 34OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

When styling a Mobile app built with OutSystems, which consideration most affects how custom CSS behaves compared with Reactive Web?

  1. Mobile screens use native UI patterns, so styling is applied through the platform's mobile theme and supported style properties Correct answer.
  2. Mobile themes ignore the module's global stylesheet
  3. Mobile apps cannot use CSS classes at all
  4. Mobile CSS must be written in inline styles only

Explanation

Mobile apps render through native components, so styling flows through the mobile theme and the properties the platform exposes rather than arbitrary browser CSS. Developers must respect those constraints to get consistent results.

Question 35OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems feature lets a developer define a reusable styled component with its own inputs, styles, and internal logic for use across many screens?

  1. Static Entity
  2. Screen
  3. Web Block Correct answer.
  4. Server Action

Explanation

Web Blocks encapsulate markup, styles, inputs, and local logic, making them the standard reusable UI component in OutSystems. Screens are top-level pages, entities store data, and server actions hold no markup.

Question 36OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer must ensure a custom icon button remains usable by keyboard and screen readers. Which practice fits OutSystems best?

  1. Use a Button or Link with an accessible label and visible focus styling Correct answer.
  2. Hide the button text with display:none to save space
  3. Use an Image widget with a click handler and no label
  4. Rely on color alone to convey the button's action

Explanation

Interactive elements should be real buttons or links with an accessible name and a visible focus indicator so assistive technology and keyboard users can operate them. Images with click handlers lack native semantics.

Question 37OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems styling layer is compiled last, letting a module's own rules override the platform's default theme rules without editing platform files?

  1. The platform's base theme
  2. Browser user-agent styles
  3. Inline styles on system widgets
  4. The module's theme extension or custom stylesheet Correct answer.

Explanation

The module theme extension is compiled after the base theme, so equal-specificity rules there take precedence. This is the supported way to customize without touching platform assets.

Question 38OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A screen shows a spinner while data loads. Which OutSystems mechanism should drive the spinner's visibility?

  1. A timer that hides the spinner after a fixed delay
  2. A CSS animation that always runs
  3. An OnClick handler on the spinner itself
  4. A local boolean toggled by the screen's data-fetch lifecycle events Correct answer.

Explanation

Binding the spinner to a boolean that the screen's lifecycle events set and clear ties visibility to actual loading state. Fixed delays or always-on animations desynchronize from real data readiness.

Question 39OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which approach best displays a numeric value formatted with the user's locale (for example thousands separators) inside a Text widget?

  1. Use the platform's built-in number formatting function in the expression Correct answer.
  2. Store a pre-formatted string in the database
  3. Apply a CSS class that inserts separators
  4. Concatenate the raw number into the text expression

Explanation

The platform provides formatting functions that respect locale settings, so the expression produces a correctly formatted string at render time. Raw concatenation and stored strings ignore the user's locale.

Question 40OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget best supports a collapsible section that expands to reveal additional form fields?

  1. A Static Entity flag
  2. A Table Records widget with hidden columns
  3. An Expander or Container toggled by an If bound to a boolean Correct answer.
  4. A second Screen navigated to on click

Explanation

A collapsible section is markup plus a boolean that controls an If or the platform's expander behavior. This keeps the extra fields in the same screen and lets the user reveal them on demand.

Question 41OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

In Reactive Web, which property should be set on an Input widget so that its value is bound to a screen variable and updates it as the user types?

  1. The Style Classes property referencing the variable
  2. The Placeholder property set to the variable name
  3. The Enabled property bound to the variable
  4. The Variable property bound to the screen variable Correct answer.

Explanation

The Variable property creates a two-way binding between the input and the screen variable, so typing updates the value. Placeholder, style classes, and enabled state do not carry the value.

Question 42OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer notices that a custom style applied to a widget inside a Web Block does not reach the consuming screen. What is the most likely explanation?

  1. Web Blocks strip all CSS on publish
  2. Web Block styles are scoped to the block and require an exposed class or theme rule to style from outside Correct answer.
  3. Styles only apply to screens, never to blocks
  4. The consuming screen must duplicate the block's markup

Explanation

Web Block markup is encapsulated, so external styling needs an exposed style class or a theme-level rule that targets the block's elements. Duplicating markup defeats reuse.

Question 43OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems construct should be used to show a small inline error message under a field only after validation fails?

  1. A Text widget with an If bound to the field's validation state Correct answer.
  2. A Static Entity record per error
  3. A Tooltip on the input
  4. A Label widget always visible

Explanation

An If bound to the field's validation state shows the message only when invalid, keeping the form clean. Labels, tooltips, and entities do not represent transient validation feedback.

Question 44OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer must apply the same custom card styling to several screens while keeping it editable in one place. Which approach is most maintainable?

  1. Use a separate theme file per screen
  2. Add the styles to each screen's local stylesheet
  3. Copy the inline styles into each screen
  4. Create a Web Block for the card and style it once Correct answer.

Explanation

A Web Block centralizes markup and styling so a single edit updates every usage. Copying styles or per-screen stylesheets multiplies maintenance and invites drift.

Question 45OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems mechanism allows a developer to define breakpoint-specific styles that override the base theme for a module?

  1. Setting the screen's Title property
  2. Using inline styles with fixed widths
  3. Adding media queries in the module's custom stylesheet Correct answer.
  4. Editing the platform's base theme file directly

Explanation

Media queries in the module stylesheet layer on top of the theme and let breakpoint-specific rules override base styles. Editing platform files is unsupported and lost on upgrade.

Question 46OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which statement best describes how the OutSystems grid's gutter and container widths interact with the theme?

  1. Gutters are hard-coded and cannot be changed
  2. The grid ignores theme variables entirely
  3. Gutters and container widths are theme variables that the grid consumes, so changing them updates all grid-based layouts Correct answer.
  4. Container widths apply only to Mobile apps

Explanation

Grid gutters and container widths are defined as theme variables, so editing them propagates to every grid layout that uses them. This is what keeps spacing consistent across screens.

Question 47OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A developer needs a full-width hero image with overlaid text that stays legible on all screen sizes. Which technique is most appropriate?

  1. A background image with a semi-transparent overlay behind the text Correct answer.
  2. A fixed-size image with absolutely positioned text
  3. A separate image and text block stacked vertically
  4. An image with the text baked into the file

Explanation

A background image with an overlay keeps text contrast consistent while the image scales to its container. Baking text into the image or fixing sizes breaks responsiveness and accessibility.

Question 48OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems feature provides a live, in-browser preview where a developer can inspect and tweak widget styles during development?

  1. The module's dependency diagram
  2. The publish log
  3. The browser's developer tools combined with the Service Studio preview Correct answer.
  4. The Static Entity editor

Explanation

Browser dev tools plus the Service Studio preview let developers inspect computed styles and iterate on CSS quickly. The other features report structure or logs, not visual styling.

Question 49OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

A team wants consistent typography across a module but must not break platform component styles. Which approach is safest?

  1. Set font styles inline on each screen
  2. Apply a global font-family rule with high specificity to every element
  3. Override the theme's font variables and verify component styles still render correctly Correct answer.
  4. Replace the platform's font files with custom ones

Explanation

Overriding theme font variables changes typography at the source while preserving component rules that depend on those variables. High-specificity global rules and inline styles risk breaking components and are hard to maintain.

Question 50OutSystems Front-end development fundamentals (UI design and styling for pixel-perfect web and mobile applications in ODC and O11)

Which OutSystems widget should be used to render a simple two-column label-and-value layout on a detail screen without tabular data?

  1. An If widget wrapping a Label
  2. A Table Records widget bound to a single record
  3. A Container with two Containers styled side by side Correct answer.
  4. A Form with hidden inputs

Explanation

Two Containers inside a parent Container with flex or grid classes produce the label-and-value layout without unnecessary table semantics. Table Records is meant for lists, not static pairs.