Question 1 of 50 A scheduling widget is added via Embed. Which checks belong in a production QA? (Choose the best answer.) a a. Only check that it renders on desktopb b. Check keyboard access, iframe titles and contrast, mobile layout, and performance impact (lazy-load if heavy)c c. Check that it appears in the Designer canvasd d. Check that it is excluded from the sitemap
Answer: b. Third-party embeds affect accessibility and performance and need responsive testing. (a) incomplete. (c) embeds often only render on the published site. (d) irrelevant.
Question 2 of 50 · Multi-select Which are part of localized SEO? (Choose three.) a a. Localized meta titles and descriptions per localeb b. hreflang annotations linking equivalent pages across localesc c. The correct lang attribute for each locale’s pagesd d. Using the same English meta description for all locales
Answer: a, b and c. Localized metadata, hreflang and correct lang attributes are the core of international SEO. (d) English metadata on French pages hurts relevance and click-through.
Question 3 of 50 Which alt text is best for an image of a red running shoe on a product page? a a. imageb b. shoe.jpgc c. Red lightweight running shoe, side viewd d. Image of a picture of a shoe
Answer: c. Concise and descriptive in context. (a) and (b) are meaningless. (d) redundant and still vague.
Question 4 of 50 A custom modal is hidden by fading to opacity: 0 at the end of a close interaction. Keyboard users report that Tab moves focus into invisible links. What’s the fix? a a. Lower the modal’s z-indexb b. End the close animation with display: none (and set display to visible at the start of the open animation)c c. Set opacity to 0.01 instead of 0d d. Add a hover trigger to the modal
Answer: b. opacity: 0 hides an element visually only. It stays in the layout, stays focusable and stays exposed to screen readers. Ending with display: none removes it from the accessibility tree and the tab order. (a) and (c) don’t remove focusability. (d) is unrelated.
Question 5 of 50 Where should feedback on a specific element be captured to keep context for the designer? a a. In a long email thread with screenshotsb b. As a comment pinned to that element in Webflowc c. In the element’s alt textd d. In the site’s robots.txt
Answer: b. Pinned comments keep feedback attached to its context and trackable to resolution. (a) loses context. (c) and (d) are misuse.
Question 6 of 50 A client wants form submissions to land in the CRM and remain in Webflow with email notifications. Which approach fits? a a. Custom action to the CRM endpointb b. Keep Webflow’s form handling and connect the CRM via an app, automation platform or webhookc c. Use a CRM-embedded form and delete the Webflow formd d. Export CSV daily and email it
Answer: b. Keeping Webflow handling preserves submissions and notifications, and an integration forwards the data to the CRM. (a) bypasses Webflow. (c) loses Webflow handling and design control. (d) manual and slow.
Question 7 of 50 Why should content editors work in Edit mode rather than having Designer access? a a. Edit mode is faster to loadb b. It limits changes to content and exposed properties, protecting the design system from accidental changesc c. Designer access doesn’t allow CMS editsd d. Edit mode publishes automatically
Answer: b. Edit mode restricts editors to content and exposed properties, protecting structure and styles. (a) not the purpose. (c) false; designers can edit CMS. (d) false.
Question 8 of 50 A blog post item should be removed from the live site temporarily but may come back later with the same URL and content. What’s the best action? a a. Delete the itemb b. Archive the item (or set it to draft and publish)c c. Change its slug to something randomd d. Hide it with CSS on the template page
Answer: b. Archiving (or drafting) removes the item from the live site while keeping its content and slug, so it can be restored with the same URL. (a) deletion loses everything. (c) breaks the URL. (d) the page is still live and indexable.
Question 9 of 50 Which statement best describes when to use the Data API rather than an app or an automation platform? a a. Always; the API is the only official methodb b. When requirements need custom logic, high volume, or sync with internal systems that apps and no-code tools can’t handlec c. Only for styling changesd d. Never; the API is read-only
Answer: b. The API fits custom, high-volume or internal-system integration. (a) apps and native settings are official too. (c) the API isn’t for styling. (d) the API supports writes.
Question 10 of 50 A background pattern image is purely decorative. How should it be handled? a a. Give it detailed alt text describing the patternb b. Mark it decorative (empty alt) or use it as a CSS background so screen readers skip itc c. Add “decorative image” as alt textd d. Hide it with display: none
Answer: b. Decorative images should be ignored by assistive technology. Empty alt or a CSS background does that. (a) and (c) add noise. (d) works only if the image isn’t needed visually, which it is.
Question 11 of 50 · Multi-select What’s the benefit of storing author bios on Author items rather than in each article? (Choose two.) a a. Update a bio once and every article’s author box updatesb b. Consistent author data across the sitec c. It removes the need for author template pagesd d. Rich text styling is disabled
Answer: a and b. Normalised data means a single source of truth and consistency. (c) author pages are still valuable, and are made possible by this model. (d) unrelated.
Question 12 of 50 · Multi-select Which are signs that a project’s component architecture needs refactoring? (Choose two.) a a. Components named Card, Card 2, Card copy and Card FINAL with tiny differencesb b. Many unlinked instances that used to be a navbar componentc c. A Button component used inside several other componentsd d. A Section component with a slot used on many pages
Answer: a and b. Near-duplicate components and lots of unlinked instances both show the system isn’t doing its job. Properties, variants and slots should replace them. (c) nested components are a healthy atomic architecture. (d) a section shell with a slot reused across pages is the intended pattern.
Question 13 of 50 A designer has unfinished style changes in progress, but an editor needs to publish a new blog post today. What’s the best option? a a. Publish the whole site, including unfinished design workb b. Publish the individual CMS itemc c. Wait until the designer finishesd d. Ask the designer to undo their changes
Answer: b. Publishing individual CMS items ships content without publishing pending design changes. (a) pushes unfinished work. (c) and (d) block or disrupt work unnecessarily.
Question 14 of 50 What’s the role of approvals in a publishing workflow? a a. They speed up publishing by skipping reviewb b. They require an authorised reviewer to sign off changes before they’re merged or publishedc c. They automatically fix design errorsd d. They translate content
Answer: b. Approvals are a quality and governance gate. (a), (c) and (d) false.
Question 15 of 50 · Multi-select While connecting a custom domain, which DNS steps are typically required? (Choose two.) a a. Add the A records and CNAME (www) values shown in Webflow’s settingsb b. Remove conflicting records pointing to the previous hostc c. Delete the domain’s MX recordsd d. Point the domain to webflow.com with a redirect at the registrar
Answer: a and b. Add Webflow’s records and remove conflicts. (c) deleting MX records breaks email. (d) a registrar redirect isn’t how hosting is connected.
Question 16 of 50 What does code minification do? a a. Compresses imagesb b. Removes unnecessary characters (whitespace, comments) from HTML/CSS/JS to reduce file sizec c. Deletes unused pagesd d. Converts CSS to JavaScript
Answer: b. Minification strips non-essential characters. (a) is image optimisation. (c) and (d) false.
Question 17 of 50 A developer wants icon-only social buttons to be understandable to screen-reader users without showing visible text. What’s the best reusable pattern? a a. Add the platform name in a visually hidden (sr-only) text element or an accessible label on each buttonb b. Set the icon’s opacity to 0c c. Rely on the icon image’s file named d. Use display: none text inside the button
Answer: a. Visually hidden text (the sr-only pattern) or an accessible label gives the button a name screen readers announce (WCAG 4.1.2, 2.4.4) without changing the visual design. Making it a utility class means it’s reusable everywhere. (b) the icon still has no accessible name. (c) file names aren’t reliably announced and often aren’t meaningful. (d) display: none hides the text from screen readers too.
Question 18 of 50 · Multi-select A custom accordion uses Div Blocks with click triggers. Which changes improve accessibility? (Choose two.) a a. Use a <button> element (or role="button" plus tabindex="0") as the toggleb b. Update aria-expanded to reflect open/closed statec c. Remove focus outlines so the design looks cleanerd d. Trigger the accordion on hover instead of click
Answer: a and b. A real button (or the equivalent role and tabindex) makes the toggle focusable and keyboard-operable, and aria-expanded tells assistive technology whether the panel is open (WCAG 2.1.1, 4.1.2). (c) removing focus outlines fails WCAG 2.4.7 Focus Visible. (d) hover is unavailable on touch and keyboard.
Question 19 of 50 A job board form should tell the CRM which job each applicant applied for. The form is on the Jobs Collection template. What’s the best approach? a a. Ask applicants to type the job titleb b. Add a hidden field populated with the current CMS item’s job title or IDc c. Create one form per job manuallyd d. Use the page’s meta description
Answer: b. A hidden field bound to the CMS item adds reliable context to every submission. (a) error-prone. (c) doesn’t scale. (d) irrelevant.
Question 20 of 50 · Multi-select Which practices improve both accessibility and responsiveness of typography? (Choose two.) a a. Setting all font sizes in px so they never changeb b. Using rem-based sizes so text respects the user’s browser font-size preferencec c. Using clamp() with a rem component for fluid headingsd d. Using only vw units for body text so it scales with the screen
Answer: b and c. rem sizes respect the user’s browser default font-size setting, and clamp() with a rem component scales fluidly between a minimum and maximum while still responding to zoom and font preferences. (a) px ignores the user’s font-size setting. (d) pure vw text doesn’t respond to browser zoom the way users expect (a WCAG 1.4.4 resize-text concern) and becomes tiny on small screens.
Question 21 of 50 A site loads three Google Font families with six weights each, and the text appears late on mobile. What is the most effective fix? a a. Keep all weights but add more preconnect hintsb b. Reduce to the families and weights the design actually uses (or one variable font) and use font-display: swapc c. Convert all headings to imagesd d. Load the fonts with a custom script at the end of the body
Answer: b. Every family and weight is a separate file to download before that text renders in its final font. Trimming to what the type scale uses (often two or three weights), or using one variable font, cuts the bytes, and swap shows fallback text immediately. (a) preconnect helps the connection, not the number of files. (c) images of text hurt accessibility, SEO and localization. (d) still downloads every file and causes a late reflow.
Question 22 of 50 In a horizontal flex row, a child that contains a long unbroken URL overflows the container on mobile, even though the child has flex-shrink: 1. What is the most likely fix? a a. Change the parent to display: blockb b. Set min-width: 0 (or overflow: hidden) on the flex child, and allow the text to breakc c. Increase the parent’s z-indexd d. Add a Mobile portrait breakpoint override of width: 100vw
Answer: b. Flex items default to min-width: auto, so they can’t shrink below their content’s intrinsic minimum width, and a long URL is one unbreakable “word”. Setting min-width: 0 (or overflow: hidden) lets the item shrink, and overflow-wrap: anywhere / word-break lets the text wrap. (a) changes the layout instead of fixing the cause. (c) z-index affects stacking, not size. (d) 100vw makes overflow worse .
Question 23 of 50 After adding German, several buttons and nav items overflow their containers. What’s the most likely cause and fix? a a. German text is typically longer; use flexible, content-sized layouts instead of fixed widthsb b. German characters aren’t supported in Webflowc c. The locale switcher adds extra CSSd d. Translation removes classes
Answer: a. Text expansion is normal in localization. Flexible layouts (flex/grid with auto sizing, wrapping) handle it. (b), (c) and (d) are false.
Question 24 of 50 · Multi-select Which practices reflect responsible handling of form data? (Choose three.) a a. Collect only fields that are neededb b. Include consent and privacy information where requiredc c. Export and delete old submissions according to a retention policyd d. Ask for date of birth on every contact form in case it’s useful later
Answer: a, b and c. Data minimisation, transparency and retention are core privacy principles. (d) collecting unnecessary personal data increases risk and may break privacy law.
Question 25 of 50 What happens immediately after restoring a backup? a a. The live site instantly changesb b. The project reverts; you must publish for visitors to see the restored versionc c. The domain disconnectsd d. All CMS items are deleted
Answer: b. Restoring changes the project; publishing makes it live. (a), (c) and (d) false.
Question 26 of 50 Elements briefly appear at their final position and then jump to their initial state when the page loads. What is the most relevant concept? a a. Initial states, which Webflow can render into the HTML so elements start in the correct pre-animation stateb b. Easing curvesc c. Breakpoint inheritanced d. Combo classes
Answer: a. This “flash of final state” is what initial states prevent. When an interaction defines an initial state, Webflow can output it as an inline style in the published HTML, so the element starts in its pre-animation state before scripts run. The other options don’t relate to load-time rendering.
Question 27 of 50 A “Thank you” page appears after form submissions and should not appear in search results. What’s the best setting? a a. Exclude the page from indexing and the sitemap in its page settingsb b. Delete the page after each submissionc c. Hide its content with display: noned d. Rename the slug to something random
Answer: a. Exclude-from-indexing (noindex) plus sitemap exclusion keeps the page usable but out of search. (b) absurd. (c) hiding content doesn’t affect indexing of the URL. (d) obscurity isn’t an indexing control.
Question 28 of 50 Error messages on a form are shown only as a red border on invalid fields. What’s the accessibility issue? a a. Red borders are too thickb b. Colour alone conveys the error; add text that explains the problem and how to fix itc c. Borders are not supported on inputsd d. There’s no issue
Answer: b. WCAG 1.4.1 (Use of Color) and 3.3.1 (Error Identification) require more than colour. Add descriptive text, ideally linked to the field.
Question 29 of 50 Using the WCAG 2.x AA standard, what’s the minimum contrast ratio for normal-sized body text? a a. 3:1b b. 4.5:1c c. 7:1d d. 2:1
Answer: b. WCAG AA requires 4.5:1 for normal text. (a) 3:1 is for large text and UI components. (c) 7:1 is AAA for normal text. (d) 2:1 doesn’t meet any WCAG text requirement.
Question 30 of 50 A hero image contains English marketing text baked into the graphic. What’s the localization issue and the better approach? a a. No issue; images are universalb b. Text inside images can’t be translated per locale; use real HTML text over the image (or localized image variants)c c. Images must be SVG for localizationd d. Hide the image in other locales
Answer: b. Text baked into an image is fixed in one language and isn’t accessible as text. Real text (or localized variants with localized alt text) solves both problems.
Question 31 of 50 · Multi-select Which statements about editing a component definition are true? (Choose two.) a a. Changes to the definition’s structure update all linked instances site-wideb b. Each instance can freely change its own layout and classes without affecting others, while staying linkedc c. Unlinked instances no longer receive definition updatesd d. Editing an instance’s text property changes the default text for all instances
Answer: a and c. Definition edits propagate to all linked instances, and unlinked instances are plain elements that no longer receive updates. (b) linked instances can only vary through properties, slots and variants, not free layout or class edits. (d) an instance’s property value is specific to that instance; it doesn’t change the default for the others.
Question 32 of 50 A text link reads “Click here” in several places on a page. What’s the issue? a a. Noneb b. Link text should describe the destination/purpose; generic text is unclear out of context for screen-reader users and weak for SEOc c. Links must be buttonsd d. Links need a hover animation
Answer: b. WCAG 2.4.4 (Link Purpose): link text should make sense on its own. Screen-reader users often navigate by a list of links. Descriptive anchors also give search engines context.
Question 33 of 50 · Multi-select Which CMS fields usually need localized values for a blog post? (Choose two.) a a. Title and bodyb b. SEO title and meta descriptionc c. Publish dated d. A “Featured” switch
Answer: a and b. Readable content and SEO metadata are language-dependent. (c) and (d) are usually shared across locales.
Question 34 of 50 A Card component sometimes needs a “New” badge and sometimes doesn’t. What’s the most scalable solution? a a. Create Card and Card with Badge as separate componentsb b. Add a Visibility property that controls the badgec c. Unlink instances that don’t need the badge and delete itd d. Set the badge to opacity: 0 on instances that don’t need it
Answer: b. A Visibility property toggles the badge per instance while keeping one component. (a) duplicates the component, so future card changes have to be made twice. (c) unlinking loses central updates. (d) opacity: 0 leaves the badge in the layout and exposed to screen readers. It isn’t really removed.
Question 35 of 50 A designer spaces sections with values like 87px, 92px and 100px chosen by eye, and pages look inconsistent. What’s the best systemic fix? a a. Define a spacing scale as size variables and section-padding utility classes, and use only those valuesb b. Use percentage padding everywherec c. Add per-page overrides until it looks rightd d. Remove all section padding
Answer: a. A limited spacing scale in variables, applied through section-padding utilities, gives consistent rhythm and a single place to adjust it. (b) percentage padding is relative to the parent’s width , so vertical rhythm changes with viewport width. (c) per-page overrides make the inconsistency worse. (d) removes the problem by removing the design.
Question 36 of 50 · Multi-select Before handing a site off, which actions reduce CSS bloat and improve maintainability? (Choose two.) a a. Running Clean up to remove unused stylesb b. Renaming auto-generated classes like Div Block 47 to meaningful namesc c. Adding a unique class to every element in case it needs one-off styling laterd d. Duplicating every class per page so pages can be changed independently
Answer: a and b. Clean up removes unused classes so they stop shipping in the CSS, and meaningful names make the system understandable to collaborators. (c) and (d) produce exactly the class sprawl and duplication that make Webflow projects hard to maintain.
Question 37 of 50 A designer used placeholders instead of labels to keep a contact form minimal. What’s the main problem? a a. Placeholders don’t submit datab b. Placeholders disappear when typing, often have low contrast, and aren’t a reliable accessible name; fields need associated labelsc c. Placeholders are not supported on mobiled d. Placeholders block reCAPTCHA
Answer: b. Labels give a persistent, programmatically associated name (WCAG 1.3.1, 3.3.2). (a), (c) and (d) are false.
Question 38 of 50 · Multi-select A blog has 400 CMS posts. Every post should have unique social share previews. Which settings achieve this? (Choose two.) a a. Bind the Collection template’s OG title and description to CMS fieldsb b. Bind the OG image to a CMS image fieldc c. Set one static OG image for the templated d. Add OG tags manually to each item’s rich text
Answer: a and b. Binding template OG fields to CMS fields gives every item its own preview. (c) a single image for all 400 posts isn’t unique. (d) OG tags belong in the <head>, not in rich text.
Question 39 of 50 A developer wants to display CMS data in a custom JavaScript widget by calling the Webflow Data API from the browser with a site token. What’s the problem? a a. None; tokens are safe in front-end codeb b. The token would be exposed in the page source; API calls should be made from a server or serverless functionc c. The Data API can’t read CMS itemsd d. JavaScript can’t make HTTP requests
Answer: b. Front-end code is public, so the token could be stolen and used with all its scopes. Use a server-side proxy that returns only the data the page needs. (a) false. (c) and (d) false.
Question 40 of 50 Articles have a multi-reference field “Topics”. On the Topic template page, you need a list of every article tagged with the current topic. How do you set up the Collection list? a a. Add an Articles Collection list filtered by “Topics contains Current Topic”b b. Build a static list on each topic page and update it by handc c. Duplicate each article into a separate Collection per topicd d. Load all articles and hide non-matching ones with custom JavaScript
Answer: a. A Collection list on a template page can filter by the current item. For a multi-reference field, “contains Current Topic” returns every article whose Topics include this one, and it updates automatically as editors tag articles. (b) and (c) are manual duplication that drifts. (d) ships every article to the browser and hides the content from search engines.
Question 41 of 50 A tracking script must load on every page without blocking rendering. Where should it go? a a. Site settings → Custom code → Footer codeb b. An Embed element on each pagec c. Page settings head code on every paged d. Inside a Rich Text field
Answer: a. Site-wide footer code runs on every page after content, without blocking rendering. (b) and (c) mean repeating it on every page. (d) rich text isn’t for scripts.
Question 42 of 50 When is unlinking a component instance an appropriate choice? a a. Whenever you need to change the text of one instanceb b. When you intentionally need a one-off fork that should never receive future updates from the definitionc c. To improve page performanced d. To allow content editors to edit text
Answer: b. Unlinking is for an intentional, permanent fork. (a) use properties for text. (c) unlinking doesn’t make a page faster in any meaningful way. (d) editors can edit text through component properties, so unlinking isn’t required.
Question 43 of 50 · Multi-select Before migrating a domain from WordPress to Webflow, which steps reduce risk? (Choose three.) a a. Map old URLs and add 301 redirects in Webflowb b. Lower DNS TTLs ahead of the switchc c. Preserve email-related DNS recordsd d. Delete the old site before DNS propagates
Answer: a, b and c. Redirects preserve SEO, low TTLs speed up the switch, and email records must stay. (d) removes your rollback option and causes downtime.
Question 44 of 50 A team needs a card layout where cards sit three per row on desktop, two on tablet and one on mobile, with equal spacing that never doubles at the edges. Which approach is most maintainable? a a. Give each card a right and bottom margin, and remove the margin on the last card at each breakpointb b. Use a grid (or wrapping flex) parent with gap, and change only the column count at the breakpoints that need itc c. Duplicate the card section three times and hide two of them per breakpointd d. Absolutely position each card with fixed top/left values per breakpoint
Answer: b. gap puts space only between items, never at the outer edges, so you don’t need “remove margin on the last item” overrides. With a grid or wrapping flex parent, the only breakpoint change is the column count, which is the “shared classes + intentional overrides” principle from the official sample question. (a) creates fragile overrides that break when the item count changes. (c) triples the DOM, hurts SEO and accessibility (duplicate content), and multiplies maintenance. (d) absolute positioning removes items from document flow and won’t adapt to content length.
Question 45 of 50 A site is reachable at both example.com and www.example.com with identical content. Which settings consolidate it? (Choose the best answer.) a a. Set a default domain (other variants redirect to it) and use a global canonical URLb b. Add noindex to the homepagec c. Use robots.txt to block the root domaind d. Publish only to staging
Answer: a. A default domain with redirects plus a global canonical consolidates everything onto one preferred host. (b) removes the homepage from search. (c) blocks crawling but doesn’t consolidate. (d) irrelevant.
Question 46 of 50 · Multi-select When should you use a reference field to a separate Collection instead of an Option field? (Choose two.) a a. When each value needs its own template page (e.g. /topics/seo)b b. When each value needs extra data such as a description and an iconc c. When there are only three fixed values with no extra datad d. When you want the values to appear in a dropdown in the item editor
Answer: a and b. References are needed when values carry their own data or need their own pages. (c) a small fixed set with no data is exactly what Option fields are for. (d) both give editors a picker, so it’s not a deciding factor.
Question 47 of 50 Which is a correct statement about exported Webflow code? a a. Exported code includes the working CMS and formsb b. Exported static code doesn’t include Webflow-hosted features like a working CMS and form handlingc c. Exported code auto-updates when you publishd d. Export is required for custom domains
Answer: b. Exported code is static HTML/CSS/JS. The hosted CMS and form processing don’t come with it.
Question 48 of 50 A blog shows 340 posts in one Collection list, but only 100 appear. What’s the correct explanation and fix? a a. Collection lists display up to 100 items; enable pagination (or split the list)b b. The CMS plan only stores 100 items; upgrade the planc c. Posts beyond 100 are drafts; publish themd d. Webflow sorts randomly; change the sort
Answer: a. Collection lists display at most 100 items at a time. Pagination (or several lists using offsets) solves it. (b) item limits are much higher on CMS plans. (c) drafts aren’t the cause of an exact 100 cap. (d) sort order doesn’t change the count.
Question 49 of 50 A cursor-following “magnetic” effect and a heavy desktop scroll sequence cause jank on phones and are pointless without a mouse. What’s the most maintainable approach? a a. Duplicate the section, build a static version and hide it on desktopb b. Disable those interactions on the Tablet and Mobile breakpointsc c. Rewrite all interactions in custom JavaScript with user-agent sniffingd d. Lower the animation duration on mobile
Answer: b. Webflow interactions can be turned off per breakpoint, which is the native, maintainable solution. (a) duplicates content and doubles maintenance. (c) adds fragile custom code; user-agent sniffing is unreliable. (d) shorter durations don’t fix CPU cost or the lack of a cursor.
Question 50 of 50 Why do mature design systems use semantic variables (e.g. color-action) that point to primitive variables (e.g. blue-600), instead of referencing primitives directly in classes? a a. Webflow requires two variables per colourb b. Re-pointing one semantic alias can change the meaning-level use (e.g. action colour) everywhere without touching the raw palette or every classc c. Primitive variables can’t be used in classesd d. It improves page load speed significantly
Answer: b. Aliasing separates what a colour means from what the colour is . You can re-theme meaning-level uses (or swap per mode) without touching the raw palette or individual classes. (a), (c) false. (d) the effect on performance is negligible; the benefit is maintainability.