Download PrepIQ Webflow Layout certification level 1 Ultimate Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which panel in Webflow’s Designer allows you to view the hierarchical structure of all elements on a page? A) Style Panel B) Navigator Panel C) Settings Panel D) Interactions Panel Answer: B Explanation: The Navigator displays a tree view of every element, showing parent-child relationships for easy selection and re-ordering. Question 2. In the Add Panel, which element is best used to group other elements while preserving semantic meaning for a page’s main content? A) Div Block B) Section C) Container D) Span Answer: B Explanation: A `` tag semantically represents a distinct section of content, improving accessibility and SEO. Question 3. When adjusting the Box Model, which property controls the space inside the element’s border but outside the content? A) Margin B) Padding C) Border-width D) Width Answer: B Explanation: Padding adds space between the content and the element’s border, affecting internal spacing. Question 4. Which CSS property would you modify to change the distance between an element’s border and surrounding elements?
A) Padding B) Margin C) Line-height D) Height Answer: B Explanation: Margin creates external space around an element, separating it from neighboring elements. Question 5. Which HTML5 tag should be used for the primary navigation menu of a website? A) B) C) D) Answer: B Explanation: explicitly denotes a block of navigation links, aiding screen readers and SEO. **Question 6. If you need a heading hierarchy that starts with an H because the H1 is already used in the site header, which tag should you use for a sub-section title?** A) B) C) D) `` Answer: B Explanation: Heading tags should follow a logical order; after an H2, the next level is H3. Question 7. To set a background image that covers the entire element without distortion, which CSS property value is appropriate? A) background-size: contain;
D) To delete duplicate classes automatically Answer: B Explanation: Combo Classes let you apply additional styling on top of a base class without creating a completely new class. Question 11. If a style is set to “All Pages” in the Style Manager, what happens when you edit that style? A) Only the current page updates B) All pages using that class update automatically C) The style is locked from further changes D) It creates a new class for the current page Answer: B Explanation: “All Pages” applies the style globally, so any modification propagates to every element with that class site-wide. **Question 12. Which CSS inheritance rule is true for the color property? ** A) It never inherits from parent elements B) It inherits only if the child has no explicit color set C) It always overrides any parent color D) It inherits only for block-level elements Answer: B Explanation: color is an inheritable property; child elements adopt the parent’s color unless they define their own. **Question 13. In Webflow’s Style Panel, selecting “Block” for the Display property will cause an element to: ** A) Sit inline with text B) Expand to fill the full width of its container C) Allow other elements to wrap around it D) Behave like a table cell Answer: B
Explanation: Block elements occupy the entire horizontal space of their parent container. Question 14. Which Flexbox setting aligns items to the end of the main axis? A) justify-content: flex-start B) justify-content: center C) justify-content: flex-end D) justify-content: space-between Answer: C Explanation: flex-end pushes items toward the end of the main axis, opposite of flex-start. Question 15. In a Flex container with flex-direction: column, which property controls the horizontal alignment of items? A) align-items B) justify-content C) flex-wrap D) order Answer: A Explanation: When the main axis is vertical (column), align-items aligns items horizontally across the cross-axis. Question 16. Which Grid property defines the number of columns in a Webflow Grid? A) grid-template-rows B) grid-auto-flow C) grid-template-columns D) grid-gap Answer: C Explanation: grid-template-columns sets the column track definitions, determining column count and size.
Question 20. In Webflow, which breakpoint inherits styles from the Desktop view by default? A) Tablet B) Mobile Landscape C) Mobile Portrait D) All of the above Answer: D Explanation: All lower breakpoints inherit Desktop styles unless overridden, providing a cascading style hierarchy. Question 21. To prevent horizontal scrolling on mobile devices, which CSS unit is most appropriate for setting a container’s width? A) px B) em C) % D) pt Answer: C Explanation: Percentages adapt to the viewport width, ensuring the container scales proportionally. Question 22. Which Webflow interaction trigger fires when a user hovers over an element? A) Page Load B) Scroll Into View C) Mouse Click D) Mouse Hover Answer: D Explanation: The Mouse Hover trigger initiates actions when the cursor enters the element’s area. Question 23. If you need to add a data attribute data-track=”signup” to a button, which panel should you use?
A) Navigator B) Settings C) Style D) Interactions Answer: B Explanation: The Settings panel includes a Custom Attributes section for adding data attributes. Question 24. Which of the following is a valid way to reference an element in a custom CSS selector within Webflow? A) .my-class B) #my-class C) my-class D) @my-class Answer: A Explanation: Class selectors use a dot prefix; IDs use #. The plain name without prefix is not a valid selector. Question 25. When you duplicate a class in the Style Manager, what happens to the elements that originally used the class? A) They automatically switch to the duplicated class B) They remain linked to the original class C) They lose all styling D) They become uneditable Answer: B Explanation: Duplicating creates a new class; existing elements stay attached to the original unless manually changed. Question 26. Which CSS property determines the thickness of an element’s border? A) border-style B) border-width
Answer: C Explanation: vw (viewport width) scales proportionally with the browser window, enabling responsive typography. Question 30. Which Flexbox property allows items to wrap onto multiple lines when there isn’t enough space? A) flex-direction B) flex-wrap C) align-content D) order Answer: B Explanation: flex-wrap: wrap permits flex items to move onto new rows or columns. Question 31. When using a Grid in Webflow, what does the “Auto-Fit” option do? A) Forces all grid items to the same size B) Automatically creates as many tracks as will fit in the container C) Disables manual column/row editing D) Locks the grid to a fixed number of columns Answer: B Explanation: Auto-Fit generates as many columns (or rows) as can fit given the defined track size, making the grid fluid. Question 32. Which CSS selector has the highest specificity? A) .button B) #header C) div D) .nav .button Answer: B Explanation: ID selectors (#header) have higher specificity than class or element selectors.
Question 33. In Webflow, where can you set a custom slug for a page’s URL? A) Settings Panel → SEO Tab B) Style Panel → Layout Section C) Navigator → Page Settings D) Interactions Panel → Trigger Settings Answer: A Explanation: The SEO tab within Page Settings allows editing the slug, which forms part of the page’s URL. Question 34. Which property would you adjust to change how much space appears between a heading and the paragraph that follows it, without modifying the paragraph’s own margin? A) Heading’s padding-bottom B) Paragraph’s margin-top C) Heading’s line-height D) Paragraph’s padding-top Answer: A Explanation: Adding bottom padding to the heading creates space below it while leaving the paragraph’s margin untouched. Question 35. If an element has display: inline-block;, which of the following is true? A) Width and height cannot be set B) It behaves like a block element and starts on a new line C) It can have width/height set and sits inline with text D) It automatically clears floated elements Answer: C Explanation: Inline-block elements accept size properties while remaining part of the text flow.
B) Create a class named “Button” and apply it to all buttons C Question 40. Which Webflow setting determines whether a link opens in a new browser tab? A) Link Settings → Target: _blank B) Settings Panel → Open in New Window toggle C) Interactions → Open Link action D) Style Panel → Link Behavior dropdown Answer: A Explanation: Setting the link’s target to _blank instructs browsers to open the URL in a new tab. Question 41. To make a section’s background color change only on the Tablet breakpoint, what must you do? A) Edit the background color on Desktop and it will automatically apply to Tablet B) Switch to Tablet breakpoint, then adjust the background color there C) Use a Combo Class with a Tablet-only selector D) Add a custom CSS media query manually Answer: B Explanation: Styles set on a specific breakpoint override inherited styles only for that breakpoint. Question 42. Which property would you use to ensure an image never exceeds the width of its parent container? A) max-width: 100%; B) width: 100vw; C) height: auto; D) object-fit: fill; Answer: A
Explanation: max-width: 100% caps the image’s width at the parent’s width, preventing overflow. Question 43. In the context of CSS inheritance, which property is not inherited by default? A) font-family B) color C) background-color D) text-align Answer: C Explanation: Background properties are not inherited; they apply only to the element they are set on. Question 44. Which Flexbox property allows you to change the visual order of items without altering the HTML source order? A) flex-direction B) order C) align-self D) flex-grow Answer: B Explanation: The order property assigns a numeric order value, rearranging items in the flex layout. Question 45. When using a Grid, what does the grid-gap property control? A) The size of the grid tracks B) The space between rows and columns C) The number of columns in the grid D) The alignment of grid items Answer: B Explanation: grid-gap (or gap) sets the spacing between adjacent grid tracks both horizontally and vertically.
Question 49. Which CSS property would you adjust to create space inside a button’s border, making the clickable area larger without changing the button’s outer dimensions? A) margin B) border-width C) padding D) width Answer: C Explanation: Padding expands the interior area, increasing the clickable region while keeping outer size unchanged. **Question 50. What effect does setting flex-grow: 1 on a flex item have? ** A) The item will shrink to fit its content B) The item will expand to fill remaining space proportionally C) The item will be aligned to the start of the container D) The item will be removed from the flex flow Answer: B Explanation: flex-grow defines how much an item should grow relative to others when free space exists. Question 51. Which of the following is the correct way to target only direct child elements of a container in CSS? A) .container > * B) .container * C) .container .child D) .container + * Answer: A Explanation: The > combinator selects immediate children, not deeper descendants. Question 52. In Webflow, what does the “Float” property primarily affect?
A) The element’s z-index stacking order B) The element’s ability to sit beside other floated elements C) The element’s position relative to the viewport D) The element’s flex alignment Answer: B Explanation: Floating removes an element from normal flow and allows surrounding inline content to wrap around it. **Question 53. Which unit is relative to the font size of the element itself? ** A) em B) rem C) vh D) px Answer: A Explanation: em multiplies by the current element’s computed font size; rem references the root element. Question 54. When you set a link’s href to #section2 in Webflow, what type of link is created? A) External link B) Anchor (page-internal) link C) Email link D) Phone link Answer: B Explanation: A hash (#) followed by an ID creates an anchor that scrolls to the element with that ID on the same page. Question 55. Which CSS property would you use to hide an element visually but keep it accessible to screen readers? A) display: none; B) visibility: hidden;
Answer: B Explanation: `` is intended for tangentially related content such as sidebars or pull quotes. Question 59. What does the CSS object-fit: contain property do to an image inside a fixed-size container? A) Stretches the image to fill the container completely B) Crops the image to match container dimensions C) Scales the image down so the entire image fits inside, preserving aspect ratio D) Leaves the image at its original size regardless of container Answer: C Explanation: contain scales the image to ensure the whole image is visible within the container, maintaining aspect ratio. Question 60. Which Webflow element automatically centers its child elements horizontally? A) Container B) Section C) Div Block with display: flex; justify-content: center; D) Grid Answer: C Explanation: A Flex container with justify-content: center centers its children horizontally; the Container element does not automatically center its content. Question 61. When you set a class’s “All Pages” toggle to off, what happens? A) The class is deleted from the project B) The class becomes page-specific, affecting only the current page C) The class is hidden from the Style Manager D) The class turns into a Symbol
Answer: B Explanation: Turning off “All Pages” restricts the class’s scope to the page where it’s edited. Question 62. Which CSS property would you use to make a heading text all uppercase without changing the HTML? A) text-transform: uppercase; B) font-variant: small-caps; C) letter-spacing: 2px; D) font-weight: bold; Answer: A Explanation: text-transform changes the visual case of text. Question 63. In a Flex container, what does the align-self: stretch; property do to an individual item? A) Aligns the item to the start of the cross-axis B) Makes the item fill the container’s cross-axis size C) Centers the item horizontally D) Overrides the container’s justify-content setting Answer: B Explanation: align-self: stretch forces the item to expand to fill the container’s cross-axis (height in a row direction). Question 64. Which of the following is a benefit of using Symbols in Webflow? A) They automatically generate SEO meta tags B) They allow you to edit one instance and have changes reflect everywhere the Symbol is used C) They replace the need for custom code entirely D) They lock the element from any future edits Answer: B
