Learn by recreating.

Every challenge shows you a finished popup. Build one that looks and behaves the same in the real editor, press Check, and get a score out of 100. 32 challenges, from your first button to lists and app actions.

0 / 32challenges passed
0 / 96stars earned
Start with the first challenge

Basics

Your first popups: text, images, buttons and links.

0 of 7 passed

Build a friendly popup: a big heading, one line of text and a button that closes it.

Dragging blocks inEditing wordsA Close button
Not tried yetStart →

Recreate the announcement card: a small badge, a heading, a grey sentence and a button, all centred.

BadgeCentring a StackMuted text colour
Not tried yetStart →

Yes or no

Starter

Ask a question with two buttons side by side: a main “Yes” that tells your app, and a quiet “No thanks” that closes the popup.

Row layoutButton looksTelling your app something
Not tried yetStart →

Show a list of perks with a bold word and a link, using one Rich Text block.

Rich Text**bold**Bullet lists
Not tried yetStart →

Use a coloured Line and a Space block to give a heading, a sentence and a button some air.

LineSpaceColour and thickness
Not tried yetStart →

Rate us

Starter

Centre an amber star icon above a heading, a sentence and two buttons.

IconSize and colourTwo actions
Not tried yetStart →

Show a wide banner image above a heading, a sentence and a button that opens a web address.

ImageAlt textOpening a web address
Not tried yetStart →

Layout & style

Columns, rows, colours, fonts and media.

0 of 8 passed

Recreate the promotion: an image beside the offer on desktop that stacks on phones, with a badge, heading, rich text and a button.

GridPer-device valuesRich text
Not tried yetStart →

Centre a heading above three buttons of different sizes and looks that wrap onto a new line when there isn't room.

Row wrappingButton size and lookSpreading items
Not tried yetStart →

Three plan cards in a grid that shows 3 across on desktop, 2 on tablet and 1 on phones. The middle plan has a coloured outline.

Grid per deviceBordered cardsRepeating a pattern
Not tried yetStart →

A product photo, a row with the name on the left and price on the right, a grey caption and a full-width Add to cart button.

Spreading a rowFull-width buttonSending data to your app
Not tried yetStart →

Night mode

Builder

Make the whole popup dark with big rounded corners and a soft glow, with an amber button.

Popup backgroundCorner roundnessShadow
Not tried yetStart →

Two fonts

Builder

Pick one font for headings and another for everything else, for the whole popup at once.

Popup-wide fontsHeading vs body font
Not tried yetStart →

A wide video player with controls and a 16:9 shape.

Video blockAspect ratioPopup width
Not tried yetStart →

A centred card with a diagonal indigo-to-pink gradient, white text, rounded corners and a badge.

GradientsText colourCorner roundness
Not tried yetStart →

Position & polish

Corners, glass, layers, timers and phones.

0 of 9 passed

Corner toast

Designer

A small card in the bottom-right corner that slides up, leaves the page usable behind it, and uses its own fonts for the whole popup.

Popup positionNo dimmed pageEntrance animation
Not tried yetStart →

Top banner

Designer

A full-width strip across the top of the page with one line of text and a small link button, sliding down from above.

Full widthTop positionSquare corners
Not tried yetStart →

A translucent card with a blurred backdrop sitting on a gradient, with an outlined badge and a glassy button.

Blur behindTransparent coloursBorders
Not tried yetStart →

Content floating over a dark, blurred page: big uppercase headings (one with a gradient), a gold gift icon and a gradient button.

Popup without a cardGradient textCapital letters
Not tried yetStart →

Stack things on top of each other: a gradient fills the box, a “New” badge sits top-left and a heading bottom-left.

LayersAnchorsOffsets
Not tried yetStart →

A sale popup with a 90-minute timer that starts when it opens, a message when it ends and a big button.

CountdownTimer that starts on openEnd message
Not tried yetStart →
Shows on phones only

Phones only

Designer

An app-install strip that only appears on phones, stuck to the bottom of the screen.

Hiding per deviceBottom position
Not tried yetStart →

An editorial layout where the heading is 44px on desktop but 30px on phones, with tighter padding on small screens.

Per-device sizesLetter spacingShort coloured Line
Not tried yetStart →

A banner image that opens a web address, rich text with links, a 10-minute timer and a button that shows “Bonus added!” when your app says it worked.

Clickable imagesLinks in rich textSuccess message
Not tried yetStart →

Dynamic popups

Personalise with variables, lists and app actions.

0 of 8 passed

Greet each player by name and fill in their discount and favourite category, using variables.

Variables{{name}} in textDefaults for the preview
Not tried yetStart →

Say hello with a name that falls back to “friend” when your site doesn't know it, and a discount that falls back to 10.

{{name|fallback}}Missing values
Not tried yetStart →

A button that asks your app to claim a gift, then shows “Gift added!” if it worked or “Couldn't claim. Try again.” if it failed.

App actionsSuccess and failure messagesSpinner while waiting
Not tried yetStart →

Show three offer cards from one list. Each card has a tag, title, amount and price, and its own Avail button that sends that card's id to your app.

List variablesRepeater{{item.title}}
Not tried yetStart →

Packs in a two-column list where each Buy button closes the popup first, then asks your app to open its own checkout for that pack.

Close this popup firstItem data in actionsPopups that never stack
Not tried yetStart →

A leaderboard from a list: show only the first three rows, number them, and show “No scores yet” when the list is empty.

Repeater limit{{index}}Empty text
Not tried yetStart →

A live-event popup: badge, a name and prize pool from variables, a 2-hour timer, and a Join button that sends the tournament name and closes the popup when it worked.

Variables + timersEvent dataClosing on success
Not tried yetStart →

Put it all together: a frosted VIP card with the player's name, a list of perks in columns that stack on phones, and a Claim button that closes the popup when your app says it worked.

Everything so farGlass + variables + lists + actions
Not tried yetStart →