OutSystems Front-End Developer Specialist study plan

Map the full OutSystems UI stack (Screen, Block, Web Block, Layout, Theme, Style Sheet) and state in one sentence what each layer controls for styling.

Set up a free ODC personal environment and publish a blank Reactive Web app you can redeploy on demand.

Build a one-screen page that uses the OutSystems UI Layout and Grid to place a header, a two-column content area, and a footer without writing custom CSS.

Inventory the OutSystems UI built-in patterns and classify 15 of them as layout, navigation, data display, or feedback.

Apply the Theme Editor to change primary color, typography scale, and border radius, then republish and verify each change visually.

Create a custom Theme extension that overrides two OutSystems UI variables without editing built-in stylesheets.

Demonstrate the cascade by styling the same element through a Theme variable, a Screen-level Style Sheet, and an inline Style property, and record which wins.

Name OutSystems UI CSS variables for spacing, color, and typography and use at least six of them in your own rules.

Build a responsive page that reflows correctly at phone, tablet, and desktop widths using Grid columns and the Column breakpoint properties.

Configure OutSystems UI responsive utilities (visibility and display classes) so specific Blocks hide or show per device.

Test the page in browser device emulation and fix every horizontal scroll and overflow defect you find.

Explain how Screen width classes and Layout breakpoints interact when a Block is nested inside a Container.

Create a reusable Web Block with input parameters and a placeholder, and consume it on two different screens.

Style the Block from the consuming screen using the extended class and Style properties, confirming encapsulation behavior.

Convert a duplicated section of a page into a Block and measure the reduction in repeated markup.

Document naming conventions for Blocks, classes, and parameters that a teammate could follow.

Build a form screen with OutSystems UI form patterns, custom validation messages, and styled inline error states.

Style the focus, hover, disabled, and error states of an input using Theme variables rather than hardcoded colors.

Add a feedback pattern (toast or message) triggered by a client action and verify its styling matches your theme.

Check keyboard tab order and visible focus on the form and fix any accessibility gaps you find.

Build a list screen using OutSystems UI list and card patterns fed by a local entity with sample data.

Style empty, loading, and populated states for the list, including a skeleton or placeholder treatment.

Implement client-side sorting or filtering that updates the UI without a full screen refresh, and confirm the styling of the active filter.

Compare the same list screen rendered in Traditional Web versus Reactive Web and note the styling differences.

Style a mobile app screen in ODC using the mobile-ready patterns and safe-area and bottom-navigation considerations.

Audit your existing screens for hardcoded colors, pixel values, and inline styles, and replace them with theme variables.

Build a small style guide screen inside the app that renders your color, type, and spacing tokens for reference.

Verify your theme changes propagate to every screen after a single republish.

Rebuild one complex screen from scratch in under 90 minutes using only theme variables and OutSystems UI patterns.

Run a full timed review of layout, responsiveness, states, and accessibility against a self-written checklist.

Fix every defect the review surfaces and republish the app.

Write a personal cheat sheet of the 20 styling facts you got wrong or looked up most often.