Download Webflow Layout certification level 1 Practice Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which panel in the Webflow Designer allows you to view and rearrange the hierarchy of elements on a page? A) Style Panel B) Navigator Panel C) Settings Panel D) Interactions Panel Answer: B Explanation: The Navigator displays the DOM tree, letting you see parent‑child relationships and drag elements to reorder them. Question 2. In the Add Panel, which element is best used to contain a maximum width and center‑align content on large screens? A) Div Block B) Section C) Container D) Grid Answer: C Explanation: A Container has a preset max‑width and auto left/right margins, making it ideal for centered content. Question 3. Which part of the Box Model controls the distance between an element’s border and surrounding elements? A) Content
B) Padding C) Margin D) Border Answer: C Explanation: Margin creates space outside the border, separating the element from its neighbors. Question 4. If you want a background image to fill an element without stretching, which CSS property should you set? A) background-repeat: repeat; B) background-size: cover; C) object-fit: fill; D) background-position: top; Answer: B Explanation: background-size: cover scales the image to fill the container while preserving aspect ratio. Question 5. Which HTML5 semantic tag is most appropriate for a site’s primary navigation links? A)
Question 8. Which setting allows an image to maintain its aspect ratio while filling the height of a container? A) Width: 100% B) Height: Auto C) Object-fit: contain D) Object-fit: cover Answer: D Explanation: object-fit: cover scales the image to fill the container while preserving aspect ratio, cropping if necessary. Question 9. When creating a reusable button style, what is the most efficient way to apply slight color variations without duplicating the whole class? A) Create a new class for each color B) Use a Combo Class on the base button class C) Edit the original button class each time D) Apply an Inline Style attribute Answer: B Explanation: Combo Classes extend a base class, allowing you to change only the needed property (e.g., background color). Question 10. In the Style Manager, what does the “Trash” icon next to a class indicate? A) The class is a global style
B) The class is currently unused on the page C) The class is locked from editing D) The class has been applied to a Symbol Answer: B Explanation: An unused class shows a trash can, indicating it can be safely deleted. Question 11. Which of the following statements about CSS inheritance is true in Webflow? A) All properties are inherited by default B) Only text‑related properties inherit automatically C) Layout properties like margin always inherit D) Inheritance can be disabled in the Settings Panel Answer: B Explanation: Text properties (color, font, line‑height) inherit, while most box‑model properties do not. Question 12. If you want a style to affect only the current page and not the rest of the site, where should you apply it? A) In the Site Settings stylesheet B) As a Global Class C) As a Page‑specific class (All Pages unchecked) D) In the Symbol definition
Question 15. When using Flexbox, what does the “Wrap” option do? A) Forces all items onto a single line B) Allows items to flow onto multiple lines when space is limited C) Reverses the order of items D) Aligns items to the start of the container Answer: B Explanation: Enabling wrap lets flex items move to a new line when they exceed the container’s main‑axis space. Question 16. Which CSS property defines a two‑dimensional layout system in Webflow? A) display: flex; B) display: grid; C) position: relative; D) float: left; Answer: B Explanation: display: grid creates rows and columns, enabling two‑dimensional placement. Question 17. What is the default positioning value for any element placed on a Webflow page? A) static B) relative
C) absolute D) fixed Answer: A Explanation: By default, elements have position: static, meaning they follow normal document flow. Question 18. To move an element 20 px down from its normal position without affecting surrounding elements, which positioning should you choose? A) Static B) Relative C) Absolute D) Fixed Answer: B Explanation: Relative positioning offsets the element while preserving its original space in the layout. Question 19. Which positioning type removes an element from the document flow and anchors it to the viewport, staying visible during scroll? A) Static B) Relative C) Absolute D) Fixed Answer: D
Question 22. Which breakpoint in Webflow inherits styles from the Desktop view but allows you to override them for tablets? A) Tablet B) Mobile Landscape C) Mobile Portrait D) All of the above Answer: A Explanation: Tablet is the first breakpoint below Desktop; it inherits Desktop styles, which you can then adjust. Question 23. To prevent horizontal scrolling on mobile devices, which CSS unit is recommended for width settings? A) px B) em C) % (percentage) D) pt Answer: C Explanation: Percentages scale relative to the parent container, helping maintain fluid layouts across screen sizes. Question 24. Which of the following is NOT a valid way to create an anchor link in Webflow? A) Setting the link URL to “#section‑id”
B) Adding an ID to the target element and linking to it C) Using the “Page Section” link type in the Link Settings panel D) Setting the link URL to “/section‑id” without the hash Answer: D Explanation: Anchor links require a hash (#) before the element ID; omitting it creates a normal page URL. Question 25. Custom attributes in the Element Settings panel are primarily used for: A) Changing the element’s background color B) Adding data for third‑party scripts or SEO C) Adjusting margin and padding D) Defining Flexbox direction Answer: B Explanation: Custom attributes let you add data- attributes or other key/value pairs for scripts and SEO. Question 26. Which interaction trigger would you use to animate an element when the page finishes loading? A) Mouse Click B) Hover C) Page Load D) Scroll Into View
Question 29. Which of the following best describes the effect of setting display: none; on an element? A) The element remains in the layout but is invisible B) The element is removed from the document flow and not rendered C) The element is hidden but still occupies space D) The element’s children become visible Answer: B Explanation: display: none removes the element from the flow and the browser does not render it. Question 30. In Webflow, what does the “Auto” option for Width do on a block‑level element? A) Sets the width to 0 px B) Expands the element to fill its parent’s width C) Keeps the element at a fixed 100 px width D) Allows the element to shrink to its content size Answer: B Explanation: “Auto” on a block element stretches it to the full width of its containing block. Question 31. Which CSS property controls the space inside an element’s border? A) Margin
B) Padding C) Border‑Width D) Outline Answer: B Explanation: Padding adds inner space between the content and the border. Question 32. When using a Grid layout, what does the term “auto‑fit” refer to? A) Automatically adjusting the number of rows based on content B) Filling the grid with as many columns as will fit without overflow C) Setting all grid items to the same height D) Aligning items to the start of the grid container Answer: B Explanation: auto-fit creates as many columns as can fit in the container, collapsing empty tracks. Question 33. Which property would you adjust to increase the space between flex items without affecting the container’s padding? A) Gap B. Margin on each item C) Padding on the container D) Width on each item
Question 36. What effect does setting a Flex container’s “Direction” to “Column” have? A) Items are laid out horizontally left‑to‑right B) Items are stacked vertically from top to bottom C) Items wrap onto new rows automatically D) Items are centered horizontally only Answer: B Explanation: Column direction arranges flex items vertically. Question 37. When creating a Symbol in Webflow, which of the following is true? A) Symbols cannot contain other symbols B) Styles applied inside a Symbol are always global C) Updating a Symbol updates all its instances site‑wide D) Symbols are only usable on the page they were created on Answer: C Explanation: A Symbol is a reusable component; changes propagate to every instance. Question 38. Which unit is most appropriate for setting line‑height to ensure readability across devices? A) px
B) em C) % D) pt Answer: B Explanation: em scales line‑height relative to the current font size, preserving proportional spacing. Question 39. To make a navigation bar stick to the top of the viewport while scrolling, which setting should be used? A) Position: Relative B) Position: Fixed C) Position: Absolute with top: 0 D) Z‑Index: 0 only Answer: B Explanation: Fixed positioning anchors the element to the viewport, keeping it visible during scroll. Question 40. Which of these is NOT a valid value for the “Object Fit” property on an image? A) contain B) cover C) fill D) stretch
Question 43. When you set a Flex container’s “Justify Content” to “Space Between”, what happens? A) Items are centered with equal space on both sides B) First item aligns left, last item aligns right, and space is evenly distributed between items C) All items stack on top of each other D) Items are aligned to the start of the container with no spacing Answer: B Explanation: “Space Between” pushes first and last items to the edges and distributes remaining space evenly. Question 44. Which breakpoint will inherit styles from Tablet if no overrides are made? A) Desktop B) Mobile Landscape C) Mobile Portrait D) None; each breakpoint is independent Answer: C Explanation: Mobile Portrait inherits from Mobile Landscape, which inherits from Tablet, which inherits from Desktop. Question 45. To ensure a button’s text remains legible on high‑resolution screens, which CSS property should you adjust?
A) Font‑size in px B) Font‑size in vw C) Border‑width D) Letter‑spacing Answer: B Explanation: Using vw (viewport width) scales the font relative to screen size, improving legibility on larger displays. Question 46. Which of the following is the correct syntax for adding a custom data attribute named “track-id” with a value of “123” in Webflow’s Custom Attributes panel? A) Name: track-id Value: 123 B) Name: data‑track‑id Value: 123 C) Name: data‑track‑id Value: “ 123 ” D) Name: track-id Value: “123” Answer: B Explanation: Custom attributes require the full attribute name, including the data- prefix; the value is entered without quotes. Question 47. Which interaction trigger would you use to animate an element when it becomes visible in the viewport during scrolling? A) Hover B) Click
