Download PrepIQ Webflow Layout certification level 2 Ultimate Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which CSS unit scales proportionally with the root element’s font size, making it ideal for maintaining consistent typography across a site? A) px B) em C) rem D) vw Answer: C Explanation: The rem unit is relative to the root (html) font size, so changing the root size uniformly updates all rem-based values. Question 2. In Webflow, if a parent element has position: relative, how does an absolutely positioned child determine its placement? A) It aligns to the browser viewport. B) It aligns to the nearest ancestor with position: static. C) It aligns to the nearest positioned ancestor (relative, absolute, or fixed). D) It aligns to the document body. Answer: C Explanation: Absolute positioning is calculated relative to the closest ancestor that is not static. Question 3. Which property controls how overflow content is clipped and provides scrollbars when needed? A) overflow-x B) overflow-y C) overflow D) clip-path Answer: C Explanation: The overflow shorthand sets overflow behavior for both axes and can be set to auto, scroll, hidden, or visible.
Question 4. When using Flexbox, what does flex-grow: 2 indicate for an item compared to a sibling with flex-grow: 1? A) It will be twice as wide as the sibling if free space exists. B) It will shrink twice as much as the sibling. C) It will occupy two separate rows. D) It will ignore its flex-basis. Answer: A Explanation: flex-grow defines the proportion of remaining space each item receives; a value of 2 means twice the share of free space. Question 5. Which CSS Grid function creates a track that automatically fills remaining space after other tracks are sized? A) repeat() B) minmax() C) auto-fill D) fr Answer: D Explanation: Fractional units (fr) allocate remaining space proportionally after fixed and minmax tracks are accounted for. Question 6. In Webflow’s Style Manager, what does a “Combo Class” represent? A) A class that inherits from another class. B) A class applied only on hover. C) A class that adds additional styling on top of a base class. D) A class that is automatically removed after publishing. Answer: C Explanation: Combo classes extend a base class with extra styles, allowing variations without creating completely new classes. Question 7. Which CSS property should you animate for best performance on modern browsers?
B) Returns 50vw always. C) Returns 300px always. D) Returns whichever value is smaller for the current viewport. Answer: D Explanation: min() selects the smallest value among its arguments at runtime, enabling fluid constraints. Question 11. Which Flexbox property aligns items along the cross-axis when there are multiple lines? A) justify-content B) align-items C) align-content D) flex-direction Answer: C Explanation: align-content distributes space between flex lines on the cross-axis, unlike align-items which aligns items within a line. Question 12. In a CSS Grid layout, what does the shorthand grid-area: header; do? A) Places the element in the column named “header”. B) Assigns the element to a named grid area defined in grid-template- areas. C) Sets the element’s z-index to “header”. D) Creates a new row called “header”. Answer: B Explanation: grid-area references a named area declared in grid- template-areas, positioning the element accordingly. Question 13. Which Webflow breakpoint inherits styles from the Base (Desktop) breakpoint unless overridden? A) Tablet B) Mobile Landscape
C) Mobile Portrait D) All of the above Answer: D Explanation: All lower breakpoints cascade from the Base breakpoint, allowing selective overrides. Question 14. What is the default box-sizing value in Webflow for most elements? A) border-box B) content-box C) padding-box D) margin-box Answer: B Explanation: Webflow follows the browser default of content-box, where width/height exclude padding and border unless changed. Question 15. Which CSS property defines the point around which a transform rotates or scales? A) transform-origin B) transform-box C) transform-style D) transform-position Answer: A Explanation: transform-origin sets the pivot point for rotation and scaling operations. Question 16. When a parent element has opacity: 0.5, what effect does it have on its children’s stacking context? A) Children create a new stacking context automatically. B) Children inherit the opacity but do not form a new stacking context unless other properties trigger it. C) Children become invisible.
Answer: C Explanation: “Scroll Into View” triggers animations when the element enters the viewport. Question 20. What does the CSS rule *:focus { outline: 2px solid #005fcc; } improve? A) Visual focus indicator for keyboard navigation, enhancing accessibility. B. Changes the color of all text on focus. C. Hides focus outlines for a cleaner design. D. Applies a shadow effect on hover. Answer: A Explanation: Providing a clear focus outline helps users navigate via keyboard, meeting WCAG guidelines. Question 21. Which Grid property creates implicit rows automatically when items are placed outside defined rows? A) grid-auto-columns B) grid-auto-rows C) grid-template-areas D) grid-gap Answer: B Explanation: grid-auto-rows defines the size of rows that the grid adds implicitly when content exceeds the explicit grid. Question 22. In Webflow, which setting determines the order of a flex item without changing the HTML source order? A) Flex Direction B) Flex Wrap C) Order D) Align Self Answer: C
Explanation: The order property reorders flex items visually while preserving the DOM order. Question 23. Which CSS function allows you to clamp a value between a minimum, preferred, and maximum size? A) clamp() B) min() C) max() D) range() Answer: A Explanation: clamp(min, preferred, max) returns a value constrained within the defined bounds, useful for responsive typography. Question 24. What is the purpose of the data- attribute in HTML? A) To store custom data that can be accessed via JavaScript or CSS attribute selectors. B) To define CSS variables. C. To create new HTML tags. D. To replace the class attribute. Answer: A Explanation: data- attributes hold user-defined data, accessible through dataset in JavaScript and [data-...] selectors in CSS. Question 25. Which meta tag is essential for proper responsive scaling on mobile devices? A) B) C) D) Answer: C Explanation: The viewport meta tag tells browsers how to adjust layout dimensions for different screen sizes.
Question 29. Which HTML attribute ensures a form field cannot be left empty before submission? A) pattern B) placeholder C) required D) autocomplete Answer: C Explanation: The required attribute makes the browser enforce that the input has a value. Question 30. How does a z-index value behave when its parent element has a CSS transform applied? A) The child’s z-index is ignored. B) The parent creates a new stacking context, isolating the child’s z- index within that context. C) The child’s z-index is multiplied by the transform value. D) The child’s z-index becomes negative. Answer: B Explanation: Any element with a transform (or opacity <1, filter, etc.) forms a new stacking context, limiting how its children stack relative to outside elements. Question 31. Which CSS Grid syntax defines a layout with three equal columns that each take one fraction of the available space? A) grid-template-columns: 1fr 1fr 1fr; B) grid-template-columns: repeat(3, 100px); C) grid-template-columns: auto auto auto; D) grid-template-columns: 33% 33% 33%; Answer: A Explanation: 1fr units distribute remaining space equally; three 1fr columns create three equal fractions.
Question 32. What is the effect of setting overflow: hidden on a container with a child that has position: absolute extending beyond the container’s bounds? A) The child remains fully visible. B) The child is clipped to the container’s padding box. C) The child scrolls automatically. D) The child becomes fixed to the viewport. Answer: B Explanation: overflow: hidden clips any content that exceeds the container’s content box, including absolutely positioned children. Question 33. In Webflow, which panel allows you to define global CSS variables (custom properties) for use across the project? A) Interactions B) Settings > Custom Code C) Designer > Assets D) Designer > Style Manager (via :root selector) Answer: D Explanation: Adding a :root selector in the Designer’s CSS lets you declare --variable-name values that act as global custom properties. Question 34. Which display value enables a container to behave as a Flexbox layout? A) block B) inline-block C) flex D) grid Answer: C Explanation: display: flex activates Flexbox layout for its direct children. Question 35. When using grid-template-areas, how do you assign a grid item to a specific area?
C) Custom Code D) Asset Minifier Answer: B Explanation: Webflow’s responsive image system creates multiple image resolutions and a srcset attribute automatically. Question 39. In Flexbox, what does flex-basis: 0; combined with flex-grow: 1; achieve for all items in a container? A) Items keep their intrinsic size. B) Items shrink to zero width. C) Items distribute available space equally, ignoring their content size. D) Items become fixed at 0px width. Answer: C Explanation: Setting flex-basis: 0 removes the base size, so flex-grow: 1 makes each item take an equal share of the free space. Question 40. Which CSS selector targets an element with a data- role="modal" attribute? A) .data-role-modal B) #modal C) [data-role="modal"] D) data-role(modal) Answer: C Explanation: Attribute selectors use square brackets with the attribute name and value. Question 41. When a Webflow element has transform: translateX(50%);, what is the reference point for the 50% value? A) The element’s own width. B) The parent’s width. C) The viewport width. D) The element’s height.
Answer: A Explanation: Percentage values in translateX and translateY are relative to the element’s own dimensions. Question 42. Which CSS property allows you to create a smooth fade-in effect when hovering over an element? A) transition: opacity 0.3s ease; B) animation: fadeIn 0.3s; C) filter: blur(0); D) transform: scale(1); Answer: A Explanation: transition defines the property to animate (opacity) and its duration/easing, producing a fade effect. Question 43. In Webflow’s CMS, which element should you style to affect the layout of each item in a Collection List? A) Collection Page B) Collection List Wrapper C) Collection Item D) Collection Field Answer: C Explanation: Styling the Collection Item controls the individual repeatable block that repeats for each CMS entry. Question 44. Which position value allows an element to remain in the normal document flow but be offset using top, right, bottom, left? A) static B) relative C) absolute D) fixed Answer: B
Explanation: object-position sets the alignment point (e.g., center, top left) for the image within its container when cropping occurs. Question 48. Which display value creates a block-level grid container? A) grid B) inline-grid C) flex D) block Answer: A Explanation: display: grid establishes a grid formatting context that behaves like a block element. Question 49. In Webflow, where would you place a script that must run after the page’s DOM is fully loaded but before the closing tag? A) Site Settings > Custom Code > Head Code B) Page Settings > Footer Code C) Designer > Interactions D) Asset Manager Answer: B Explanation: The Footer Code field injects scripts just before, ensuring the DOM is ready. Question 50. Which CSS property is used to create a smooth transition for a transform when a user hovers over an element? A) transition: transform 0.4s ease-in-out; B) animation: rotate 0.4s; C) transform: transition(0.4s); D) filter: brightness(0.5); Answer: A Explanation: transition directly targets the transform property, animating changes like rotate or scale.
Question 51. Which HTML heading order violates proper hierarchical structure? A) followed by B) followed by C) followed by (skipping ) D) followed by Answer: C Explanation: Headings should not skip levels; jumping from to `` creates a structural gap. Question 52. What does the CSS visibility: hidden; property do compared to display: none;? A) Removes the element from the layout flow. B) Keeps the element’s space reserved but makes it invisible. C) Changes the element’s opacity to 0. D) Animates the element out of view. Answer: B Explanation: visibility: hidden hides the element while preserving its allocated space. Question 53. Which CSS function allows you to combine multiple calculations, such as calc(100% - (2rem + 10px))? A) var() B) clamp() C) calc() D) min() Answer: C Explanation: calc() can evaluate arithmetic expressions with mixed units. Question 54. In a Flexbox container with flex-wrap: wrap;, what determines how items are distributed across multiple lines?
B) $primary-color: #ff6600; C) color-primary: #ff6600; D) @primary-color: #ff6600; Answer: A Explanation: Custom properties use the -- prefix and are defined within a selector (commonly :root). Question 58. When using grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));, what behavior does this produce? A) Fixed three-column layout. B) Columns that shrink to 200px and never grow. C) As many columns as will fit, each at least 200px wide, expanding to fill remaining space. D) One column per row. Answer: C Explanation: auto-fill creates as many tracks as fit, with each track constrained by minmax(200px, 1fr). Question 59. Which attribute would you add to an `` element to restrict entry to a numeric value between 1 and 10? A) pattern="[1-10]" B) min="1" max="10" type="number" C) maxlength="2" D) step="1" Answer: B Explanation: type="number" with min and max enforces numeric range validation. Question 60. In Webflow, what does the “Auto-Layout” toggle enable for a div? A) Automatic generation of CSS Grid code. B) Switching the div to Flexbox mode for responsive alignment.
C) Automatic height adjustment based on content. D) Enabling absolute positioning. Answer: B Explanation: The Auto-Layout button converts a div into a Flexbox container, allowing easy alignment of child elements. Question 61. Which CSS property controls the amount of space between characters in a text block? A) line-height B) letter-spacing C) word-spacing D) text-indent Answer: B Explanation: letter-spacing adds or reduces spacing between individual characters. Question 62. What effect does setting display: contents; have on an element? A) The element becomes invisible but its children are rendered as if they were direct children of the parent. B) The element receives a block layout. C) The element gains a flex context. D) The element is removed from the DOM. Answer: A Explanation: display: contents removes the element’s box while preserving its children in the layout flow. Question 63. Which Webflow setting determines whether a site’s custom code is placed in the or before? A) Project Settings > Custom Code > Head Code / Footer Code B) Page Settings > SEO C) Designer > Interactions
