Question 1 of 50 · Multi-select Creating an API token for a script that only reads CMS items to build an external feed. Which practices apply? (Choose two.) a a. Grant only read scopes needed for CMSb b. Store the token in environment variables on the serverc c. Grant all scopes in case they’re needed laterd d. Commit the token to a public repository for convenience
Answer: a and b. Least privilege and secret storage on the server. (c) increases the damage if the token leaks. (d) public exposure.
Question 2 of 50 On Windows desktop browsers, a page shows a small horizontal scrollbar. The cause is a full-width banner set to width: 100vw on a page that also has a vertical scrollbar. What explains it, and what’s the fix? a a. 100vw includes the vertical scrollbar width, so the element is wider than the visible area; use width: 100% insteadb b. 100vw excludes padding; switch to content-boxc c. vw units don’t work in Webflow; use pxd d. The banner needs position: fixed
Answer: a. 100vw is the full viewport width including the vertical scrollbar, so on desktop browsers with classic scrollbars the element is a few pixels wider than the visible area, which causes horizontal scroll. Use width: 100% (of a full-width parent) instead. (b) border-box already includes padding. (c) vw works fine. (d) fixed positioning doesn’t fix the width calculation and changes behaviour completely.
Question 3 of 50 Why choose a single default domain (e.g. www) with the other variant redirecting? a a. To save bandwidthb b. To avoid duplicate content and split signals/analytics across two hostsc c. Webflow can only serve root domainsd d. It’s required for forms
Answer: b. One canonical host avoids duplication and fragmented SEO and analytics. (a), (c) and (d) false.
Question 4 of 50 Blog cards use images of different sizes, so the cards end up with uneven heights, and some images look squashed when given a fixed height. Which approach gives consistent, undistorted thumbnails? a a. Ask editors to crop every image to the same pixel size before uploadingb b. Give the image a fixed aspect ratio (or height) and set its Fit to Cover (object-fit: cover)c c. Set width and height to 100% with Fit set to Filld d. Use the images as background images on a wrapper with no set height
Answer: b. A fixed ratio or height makes every card’s image area the same, and object-fit: cover fills that area by cropping the overflow instead of stretching the image. (a) relies on manual work that will be missed. (c) Fill stretches the image to the box, which is the squashing you are trying to avoid. (d) a wrapper with no height collapses, and the image loses its alt text.
Question 5 of 50 · Multi-select Which are characteristics of a well-built typography system? (Choose three.) a a. A defined scale of sizes based on a base size and ratiob b. Base body font size set in rem on Body (All pages)c c. Heading tags chosen for visual size rather than structured d. Utility classes like heading-style-h3 to separate appearance from semantics
Answer: a, b and d. A ratio-based scale, a rem base on the Body tag and visual utility classes that separate appearance from semantics are the core of a scalable type system. (c) choosing heading tags by size breaks semantic structure.
Question 6 of 50 A legal stakeholder must review and comment on landing page copy before launch without being able to edit anything. Which role fits? a a. Designerb b. Reviewer/Commenterc c. Content editord d. Workspace Admin
Answer: b. Reviewers/commenters can view and comment without editing. (a), (c) and (d) grant edit or admin abilities.
Question 7 of 50 A client wants a confidential pricing page visible only to selected partners. What’s appropriate? a a. Hide it with display: noneb b. Password-protect the pagec c. Exclude it from the sitemap onlyd d. Rename the slug to something hard to guess
Answer: b. Password protection actually restricts access. (a) content is still in the source. (c) still publicly accessible. (d) security through obscurity is not security.
Question 8 of 50 · Multi-select Which properties are the best choices for smooth, performant animation? (Choose two.) a a. transform (Move / Scale / Rotate)b b. opacityc c. margin-topd d. width
Answer: a and b. Transforms and opacity are handled in the composite stage and don’t trigger layout or paint, so they’re cheapest to animate. (c) margin-top and (d) width force the browser to recalculate layout every frame, which causes jank.
Question 9 of 50 What’s the difference between restoring a backup and duplicating a site? a a. No differenceb b. Restore rolls back the same site; duplicating creates a separate copy without the original’s domain and historyc c. Duplicating rolls back the live sited d. Restore creates a new site
Answer: b. Restore = same site rolled back; duplicate = new, separate project.
Question 10 of 50 A hero heading (the page’s LCP element) fades in from opacity: 0 over 1.2s on page load. Lighthouse reports a poor LCP. What’s the best fix? a a. Increase the duration so the fade is smootherb b. Keep the LCP element visible on load; animate secondary elements instead, or use a subtle transform without hiding itc c. Move the animation to a scroll trigger at 50% offsetd d. Replace the heading with an image
Answer: b. LCP measures when the largest content element is rendered. An element at opacity: 0 waiting for JavaScript delays that. Keep it visible and animate secondary elements, or use a subtle transform that doesn’t hide it. (a) makes it worse. (c) the hero is above the fold, so a scroll trigger doesn’t solve anything. (d) images can also be the LCP element; that just moves the problem.
Question 11 of 50 An event listing should show only upcoming events in date order. Which filter and sort fit? a a. Filter Date is in the future, sort by Date ascendingb b. Filter Date is set, sort by Namec c. No filter, sort by Date descendingd d. Filter Featured = on
Answer: a. A date filter for future items plus ascending date sort lists the next event first. (b) is set includes past events, and sorting by name ignores chronology. (c) shows past events, newest first. (d) unrelated.
Question 12 of 50 A visitor in Spain lands on the English homepage. Which behaviour is most user- and SEO-friendly? a a. Force-redirect all Spanish IP addresses to /es/ with no way backb b. Suggest the Spanish locale (e.g. via a banner or switcher) while keeping all locales accessible to users and crawlersc c. Hide the English site from Spanish visitorsd d. Show both languages mixed on every page
Answer: b. Suggesting without forcing respects user choice and keeps every locale crawlable. (a) forced IP redirects trap users (travellers, expats) and can stop crawlers from seeing other locales. (c) and (d) are poor for users and SEO.
Question 13 of 50 When is region-specific localization (e.g. es-MX vs es-ES) justified rather than a single es locale? a a. Never; one language is always enoughb b. When content differs by region: pricing, currency, legal terms, vocabulary or offersc c. Only when the site uses a different fontd d. Only for right-to-left languages
Answer: b. Regional locales are worth it when content actually differs by region. Otherwise a single language locale is simpler. (a), (c) and (d) are wrong.
Question 14 of 50 Custom code added in site settings doesn’t seem to run while you work in the Designer. Why? a a. Custom code requires an Enterprise planb b. Custom code doesn’t execute in the Designer canvas; test on the published (e.g. staging) sitec c. The code is minifiedd d. Scripts must be in an Embed to run
Answer: b. Custom code runs on the published site, not in the Designer canvas, so test on staging. (a) it needs a paid site plan, not specifically Enterprise. (c) and (d) aren’t the reason.
Question 15 of 50 A homepage needs a large featured article and a grid of the other latest articles, with the featured one not repeated. Which setup is cleanest? a a. Two lists: one filtered Featured = on limit 1; another filtered Featured = off, sorted by dateb b. One list with the first item styled differently by handc c. Duplicate the featured article into a separate Collectiond d. A static hero section updated manually
Answer: a. Two filtered lists give a clear, automatic split that updates as editors toggle Featured. (b) manual styling can’t stop duplication. (c) duplicates content. (d) manual upkeep.
Question 16 of 50 On an Author template page, how do you list all articles written by that author? a a. Manually add each article to the author itemb b. A Collection list of Articles filtered by Author equals Current Author c c. A Collection list of Authors filtered by named d. An Embed that searches the page for the author’s name
Answer: b. The “reverse lookup” is a Collection list of the referencing Collection, filtered by the reference field against the current template item. (a) manual curation goes stale. (c) lists authors, not articles. (d) is a fragile hack.
Question 17 of 50 A legacy site used example.com/french/about. After moving to Webflow Localization (/fr/about), what should you add? a a. 301 redirects from the old paths to the new locale pathsb b. Nothing; search engines adjust instantlyc c. A noindex tag on French pagesd d. A second French locale
Answer: a. Changed URLs always need 301 redirects to preserve links and search equity. (b) search engines need redirects to transfer signals. (c) would remove French pages from search. (d) is irrelevant.
Question 18 of 50 What’s the key difference between robots.txt Disallow and noindex? a a. They’re identicalb b. Disallow blocks crawling; noindex tells search engines not to include a crawled page in resultsc c. noindex blocks crawling; Disallow removes pages from resultsd d. Disallow only affects images
Answer: b. robots.txt controls crawling, and noindex controls indexing. A page blocked from crawling can’t even show the crawler its noindex tag, so don’t combine them when your goal is to de-index a page.
Question 19 of 50 A site’s H2 tag style sets font-size: 3rem. An element with tag H2 and class heading-style-h4 (which sets font-size: 1.5rem) renders at what size? a a. 3rem, because tag styles override classesb b. 1.5rem, because class selectors have higher specificity than tag selectorsc c. 4.5rem, because the values add togetherd d. It depends on which was created first
Answer: b. Class selectors (0,1,0) are more specific than tag selectors (0,0,1), so the class’s 1.5rem wins regardless of order. (a) is backwards. (c) CSS values don’t add up. (d) source order only decides between selectors of equal specificity.
Question 20 of 50 · Multi-select Before publishing, which actions support both SEO and performance best practices? (Choose two.) a a. Upload large, uncompressed images to preserve clarityb b. Write descriptive meta titles and meta descriptionsc c. Enable code minification in site settingsd d. Remove heading hierarchy to simplify structure
Answer: b and c. This is the official sample question. Descriptive metadata helps discoverability and click-through, and minification reduces file size. (a) hurts performance. (d) hurts SEO and accessibility.
Question 21 of 50 What’s the minimum WCAG AA contrast ratio for body text, and for input field borders? a a. 3:1 for bothb b. 4.5:1 for body text, 3:1 for UI component boundariesc c. 7:1 for bothd d. 4.5:1 for both
Answer: b. WCAG 1.4.3 (text 4.5:1) and 1.4.11 (non-text contrast 3:1).
Question 22 of 50 Custom code works on staging but not on the production domain. What’s a likely cause? a a. Production was not republished after the code was added (staging and production can be published separately)b b. Custom code never runs on custom domainsc c. SSL disables JavaScriptd d. robots.txt blocks scripts
Answer: a. Publish targets are selectable, so production may still run an older version. (b), (c) and (d) false.
Question 23 of 50 A team needs a consistent Section wrapper (padding, container, background) whose inner content varies completely from page to page: a feature grid on one, a form on another. Which feature fits best? a a. Text propertiesb b. A slot inside the section componentc c. Unlinking the section on each paged d. A combo class per page
Answer: b. A slot keeps the shell (padding, container, background) consistent and centrally editable while letting each page put any elements or components inside. (a) text properties only change values, not structure. (c) unlinking loses central control. (d) combo classes alter styles, not content structure.
Question 24 of 50 A Style panel property label shows in orange . What does that mean? a a. The value has an error and won’t be publishedb b. The value is inherited, for example from a parent element, a larger breakpoint, or a base classc c. The value is set directly on the current selector at this breakpointd d. The property is unsupported in some browsers
Answer: b. Orange means inherited : from a parent (typography), a larger breakpoint, a base class (for combos) or a default state. Blue means set on the current selector and context (c). Webflow doesn’t use orange for errors (a) or browser support (d). Clicking the label shows the source.
Question 25 of 50 · Multi-select An agency is ending a project. Which steps are good practice? (Choose two.) a a. Transfer the site to the client’s workspace (or ensure the client owns it)b b. Remove agency members’ access that’s no longer neededc c. Keep a shared admin password with the client “just in case”d d. Leave API tokens tied to an agency employee’s personal account
Answer: a and b. Ownership transfer and removing unneeded access are clean offboarding. (c) shared passwords are a security risk. (d) tokens tied to a departing person will break or remain a risk.
Question 26 of 50 You reorder two columns on mobile with flex-direction: column-reverse so an image appears above its text. What is the accessibility concern? a a. None; screen readers follow the visual orderb b. Keyboard and screen-reader order still follow the DOM, so the reading and focus order no longer match the visual orderc c. column-reverse is not supported on mobile Safarid d. It disables hover states
Answer: b. Visual reordering with *-reverse or order doesn’t change the DOM, so tab order and screen-reader order no longer match what sighted users see (WCAG 1.3.2 Meaningful Sequence, 2.4.3 Focus Order). For a meaningful reorder, change the DOM order, or use grid placement where the source order is already the logical one. (a) is false. (c) is false; it’s widely supported. (d) is unrelated.
Question 27 of 50 A submit button shows “Submit” for several seconds during submission and users click repeatedly. What’s a simple improvement? a a. Set a waiting text (e.g. “Sending…”) on the submit buttonb b. Remove the buttonc c. Add a hover interactiond d. Increase the button size
Answer: a. Waiting text gives immediate feedback and discourages repeat clicks. The others don’t address feedback.
Question 28 of 50 Why should each form have a meaningful form name? a a. It changes the button textb b. Submissions and exports are grouped by form name, making data easy to identify and routec c. It improves SEO rankingsd d. It’s required for the success state
Answer: b. The form name identifies data in submissions, exports and integrations. (a), (c) and (d) false.
Question 29 of 50 · Multi-select A job application form appears on each job’s CMS template page. How do you know which job each submission belongs to? (Choose two.) a a. Add a hidden field bound to the job’s name or IDb b. Use one form on the template, not one per jobc c. Ask applicants to copy the job URLd d. Create a separate form block per job item manually
Answer: a and b. One template form with a hidden CMS-bound field scales to every job. (c) unreliable. (d) templates render one form for all items; manual per-job forms don’t scale.
Question 30 of 50 · Multi-select Which principles should guide permission assignment? (Choose two.) a a. Least privilege: only the access each person needsb b. Individual accounts rather than shared loginsc c. Give everyone admin access to avoid bottlenecksd d. Share one account per team for simplicity
Answer: a and b. Least privilege and individual accounts are security and accountability fundamentals. (c) and (d) are the opposite.
Question 31 of 50 A form uses a custom action that posts to an email marketing endpoint. The client now complains they no longer receive Webflow notification emails or see submissions in Webflow. Why? a a. The plan expiredb b. Custom actions send data directly to the external URL, bypassing Webflow’s form processingc c. reCAPTCHA blocks notificationsd d. The form name is too long
Answer: b. A custom action routes data straight to the external URL, so Webflow doesn’t store it or send notifications. (a), (c) and (d) aren’t the cause.
Question 32 of 50 Analytics show double the expected pageviews after a tag manager was added. What’s the likely cause? a a. Visitors refreshed twiceb b. The analytics tag fires twice: once from site settings/custom code and again from the tag managerc c. Minification duplicates scriptsd d. The staging site is indexed
Answer: b. Double installation is the classic cause of doubled metrics. (a), (c) and (d) wouldn’t double counts consistently.
Question 33 of 50 A production site at www.example.com is live, but Google also shows results from example.webflow.io. What should you do? a a. Delete the staging subdomainb b. Enable Disable Webflow subdomain indexing in the SEO settingsc c. Add Disallow: / to robots.txt of the production sited d. Password-protect the production site
Answer: b. The subdomain indexing setting tells search engines not to index the webflow.io copy, which removes the duplicate content. (a) you can’t delete it, and it’s useful for staging. (c) would block crawling of production . (d) blocks real visitors.
Question 34 of 50 A Pricing Card component includes a Button component. The brand changes the button’s border radius. What’s the most efficient way to update every pricing card’s button? a a. Edit each Pricing Card instanceb b. Edit the Button component definition; nested instances update automaticallyc c. Unlink all pricing cards and update the buttonsd d. Add a combo class to each button
Answer: b. Nested components are still instances of their definition, so editing the Button definition updates it everywhere, including inside Pricing Cards. (a) and (c) are manual and error-prone. (d) adds per-instance patches instead of fixing the source.
Question 35 of 50 An article has several topics (multi-reference). How do you display that article’s topic tags on its template page? a a. A Collection list sourced from the article’s Topics multi-reference fieldb b. A plain text field listing topic names separated by commasc c. A Collection list of all Topics with no filterd d. A static list of every topic, hidden with CSS
Answer: a. On template pages a Collection list can be sourced from the current item’s multi-reference field, showing exactly its topics, each linkable to its topic page. (b) loses the relationship and links. (c) shows every topic. (d) hacky and inaccessible.
Question 36 of 50 When is it most important to create a manual backup? a a. Before major refactors, bulk changes or risky clean-upsb b. After every text editc c. Never; backups are only automaticd d. Only when changing fonts
Answer: a. Manual backups before risky operations give a known-good restore point.
Question 37 of 50 A page has 12 FAQ items built from the same structure. Clicking any question should open only its own answer. The answer elements share the class faq_answer. How should the interaction be targeted? a a. Target the class faq_answer with default settingsb b. Target Only children with this class (faq_answer) from a trigger applied to the class of each FAQ itemc c. Create 12 separate interactions, each targeting a specific elementd d. Use a page-load trigger to open all answers
Answer: b. Apply the trigger to the class of the FAQ item and target Only children with this class . One reusable interaction then works for every item, including future CMS items, and each click opens only its own answer. (a) a plain class target opens every faq_answer on the page. (c) 12 interactions is unmaintainable and breaks as soon as an item is added. (d) doesn’t meet the requirement.
Question 38 of 50 A team wants light and dark sections using the same components without creating duplicate “-dark” classes for everything. Which feature fits best? a a. Variable modes, with semantic colour variables taking different values per modeb b. A combo class is-dark on every element inside dark sectionsc c. Duplicating each component as a dark versiond d. Using CSS filters to invert colours
Answer: a. Variable modes switch token values per context, so the same components and classes render light or dark. (b) combo classes on every element is the duplication modes avoid. (c) doubles the components. (d) filters distort images and brand colours and cause contrast problems.
Question 39 of 50 · Multi-select You set font-size: 20px on the Tablet breakpoint for the class hero_heading. Which statements are true? (Choose two.) a a. The heading is 20px on Mobile landscape unless overridden thereb b. The heading is 20px on Desktopc c. The heading is 20px on Mobile portrait unless overridden thered d. The heading is 20px on the 1440px breakpoint
Answer: a and c. Styles set on Tablet cascade down to Mobile landscape and Mobile portrait unless overridden there. They never go up to Desktop (b) or to the larger breakpoints (d), which inherit from the base (Desktop) breakpoint.
Question 40 of 50 · Multi-select The homepage LCP is 4.8s on mobile. The LCP element is a hero image. Which actions are likely to help? (Choose three.) a a. Compress the image and serve a modern format (WebP/AVIF)b b. Ensure the hero image isn’t lazy-loadedc c. Make sure an appropriately sized image is delivered (responsive images)d d. Add a 1.5-second fade-in on page load to the hero
Answer: a, b and c. Smaller files, eager loading of the LCP image and correctly sized delivery all speed up LCP. (d) delays when the image becomes visible, so LCP gets worse.
Question 41 of 50 Which scenario most justifies custom code instead of the native interactions panel? a a. Fading cards up as they scroll into viewb b. Opening a dropdown on clickc c. A physics-based, data-driven chart animation that must re-initialise when new CMS items load via JavaScriptd d. Changing a button’s background colour on hover
Answer: c. Physics, data-driven logic and re-initialising after dynamic DOM changes go beyond what the native panel can express, so custom code (e.g. GSAP) is justified. (a), (b) and (d) are standard native interactions. Writing custom code for them adds maintenance cost with no benefit, the “custom JavaScript for every animation” distractor from the official samples.
Question 42 of 50 Campaign links add tracking parameters, and Google indexes several versions of the same page, such as /pricing?utm_source=newsletter. What is the best fix? a a. Block every URL containing “?” in robots.txtb b. Set a canonical URL (Webflow’s global canonical tag URL setting) so each page points to its clean versionc c. Stop using tracking parametersd d. Add noindex to the pricing page
Answer: b. A canonical tag tells search engines which URL is the main version, so parameter variants consolidate onto the clean URL. Webflow adds a self-referencing canonical to each page once the global canonical URL is set. (a) blocking crawling stops Google from seeing the canonical and can leave URLs indexed without content. (c) gives up useful analytics. (d) would remove the real page from search.
Question 43 of 50 A client wants Google Analytics on every page with minimal custom code. What’s the simplest approach? a a. Add the GA measurement ID in the site’s integrations settings (or via a single site-wide tag)b b. Paste the GA script into an Embed on every pagec c. Write a custom server that proxies analyticsd d. Add GA tags into every CMS rich text field
Answer: a. A single native or site-wide integration is simplest and maintainable. (b) repetition and drift. (c) over-engineering. (d) rich text isn’t a place for scripts.
Question 44 of 50 Where should JSON-LD schema for each product page in a CMS Collection be added? a a. In the Collection template’s custom head code, using CMS fieldsb b. In the robots.txt filec c. In the image alt textd d. In the global canonical URL field
Answer: a. Template head code with CMS fields generates schema per product. The others aren’t places for schema.
Question 45 of 50 Which element should be used for a control that opens a modal on the same page? a a. A Link (<a>) with href="#"b b. A <button> (or an element given the equivalent role and keyboard support)c c. A Div Block with a click trigger and no other changesd d. A Heading
Answer: b. Actions on the current page are buttons . Links navigate. A <button> is focusable, keyboard-operable (Enter/Space) and announced correctly. (a) href="#" misrepresents the control and can jump to the top of the page. (c) a plain Div isn’t focusable or announced. (d) headings aren’t controls.
Question 46 of 50 Which property name is best for a content editor-facing component property? a a. Text 4b b. txt_hdr_mainc c. Card headingd d. h3-prop-final-v2
Answer: c. Property names are labels in the instance settings that content editors and other builders read. “Card heading” is clear. (a), (b) and (d) are cryptic developer shorthand or version noise.
Question 47 of 50 A marketing coordinator needs to publish blog posts and update homepage copy but must not change layouts or styles. Which access is most appropriate? a a. Workspace Ownerb b. Content editor role on the sitec c. Designer role on all workspace sitesd d. A shared admin login
Answer: b. Content editors edit content (including CMS and exposed properties) without changing the design. (a) and (c) far exceed the need. (d) shared logins break accountability.
Question 48 of 50 Why does the lang attribute matter beyond SEO? a a. It changes the font automaticallyb b. Screen readers use it to pick the correct pronunciation rulesc c. It enables the locale switcherd d. It minifies the HTML
Answer: b. Assistive technology uses lang for pronunciation, and it’s a WCAG requirement (3.1.1 Language of Page). (a), (c) and (d) are false.
Question 49 of 50 Form leads must reach the CRM, and the team also needs a Slack notification and a row in a spreadsheet. No developers are available. Which approach fits? a a. An automation platform workflow triggered by Webflow form submissionsb b. Rebuild the form in the CRM and remove the Webflow formc c. A custom action URL pointing at Slackd d. Copy submissions manually every morning
Answer: a. Automation platforms handle multi-step, no-code workflows from form submissions. (b) loses design control and Webflow features. (c) Slack won’t create CRM records, and a custom action bypasses Webflow processing. (d) manual and error-prone.
Question 50 of 50 · Multi-select An agency maintains a brand across a main site, a docs site and several campaign microsites in the same Workspace. Which practices keep them consistent? (Choose two.) a a. Publish the design system as a shared library from one source siteb b. Install the library in each site and accept updates when the source changesc c. Copy-paste components between sites whenever something changesd d. Edit library components directly in each consuming site so they can diverge
Answer: a and b. A shared library published from one source and installed in each site, with updates reviewed and accepted, gives one source of truth with a controlled rollout. (c) copy-paste drifts quickly. (d) library components are edited in the source; letting them diverge in consumers would undo the point of a library.