Download Webflow Layout certification level 2 Practice 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: rem (root em) bases its size on the font size of the root (html) element, allowing designers to change the entire typographic scale by adjusting a single value. Question 2. In Webflow, which property would you use to ensure an element never exceeds 800 px in width, regardless of its parent container’s size? A) max-width: 800px; B) width: 800px; C) min-width: 800px; D) overflow: hidden; Answer: A Explanation: max-width caps the element’s width at the specified value while still allowing it to shrink on smaller screens. Question 3. When using the calc() function to create a responsive heading that is 5 rem plus 2 vw, which of the following syntaxes is correct?
A) calc(5rem + 2vw) B) calc(5rem, 2vw) C) calc(5rem - 2vw) D) calc(5rem * 2vw) Answer: A Explanation: calc() accepts arithmetic expressions with +, - , *, / and requires spaces around operators. Question 4. Which CSS function would you use to create a fluid font size that never goes below 1rem or above 2.5rem? A) clamp(1rem, 2vw, 2.5rem) B) min(1rem, 2.5rem) C) max(1rem, 2.5rem) D) clamp(1rem, 5vw, 2.5rem) Answer: D Explanation: clamp(min, preferred, max) sets a lower bound, a fluid middle value, and an upper bound. The preferred value (5vw) scales, but the font size stays within 1rem – 2.5rem. Question 5. In Webflow, which box-sizing value makes an element’s total width include its padding and border? A) content-box B) border-box
Answer: B Explanation: An absolute element searches upward for the first ancestor with position: relative, absolute, fixed, or sticky. That ancestor becomes the containing block. Question 8. A sticky header should stay at the top of the viewport after scrolling past it. Which CSS property and value combination achieves this effect? A) position: fixed; top: 0; B) position: sticky; top: 0; C) position: absolute; top: 0; D) position: relative; top: 0; Answer: B Explanation: position: sticky keeps the element in the normal flow until a scroll threshold is met, then it behaves like fixed. Question 9. Which CSS property creates a new stacking context, potentially affecting the z-index of child elements? A) display: block; B) opacity: 0.9; C) float: left; D) clear: both; Answer: B
Explanation: Any element with an opacity value less than 1 forms a new stacking context, isolating its children’s z-index from outside elements. Question 10. In a Flexbox container, which property controls the distribution of free space between multiple rows of wrapped items? A) justify-content B) align-items C) align-content D) flex-wrap Answer: C Explanation: align-content aligns the entire flex lines within the container when there is extra space on the cross axis. Question 11. Which Flexbox property determines how much a flex item will grow relative to its siblings when extra space is available? A) flex-shrink B) flex-basis C) flex-grow D) order Answer: C Explanation: flex-grow defines the proportion of free space each item should take; a higher value means the item grows more.
C) grid-column-gap D) grid-auto-flow Answer: A Explanation: grid-auto-columns defines the size of automatically generated columns when items are placed beyond the explicit grid. Question 15. To position an element spanning from the second to the fourth column in a grid, which shorthand is correct? A) grid-column: 2 / span 2; B) grid-column: 2 / 4; C) grid-column: span 2 / 4; D) grid-column-start: 2; grid-column-end: 4; Answer: B Explanation: The syntax grid-column: start / end uses line numbers; 2 / 4 makes the item cover columns 2 and 3 (ending before line 4). Question 16. Which named grid area syntax allows you to assign an element to a region called “hero” defined in grid-template-areas? A) grid-area: hero; B) grid-area-name: hero; C) area: hero; D) grid-template-area: hero; Answer: A
Explanation: The grid-area property references the name given in grid-template- areas. Question 17. When designing a responsive grid that changes from three columns on desktop to one column on mobile, which Webflow technique is most efficient? A) Duplicate the grid for each breakpoint. B) Use grid-template-columns: repeat(3, 1fr); on desktop and override to 1fr at the mobile breakpoint. C) Change the Flex direction at each breakpoint. D) Apply display: block on mobile. Answer: B Explanation: Overriding the grid-template-columns at a smaller breakpoint maintains a single element while adjusting its column count. Question 18. In the cascade, which breakpoint’s styles have the highest specificity when no class overrides are applied? A) Base (desktop) B) Tablet C) Mobile landscape D) Mobile portrait Answer: D Explanation: Styles cascade from larger to smaller breakpoints; the most specific (last) is the smallest (mobile portrait) unless overridden.
A) Manually scroll through each page. B) Use the “Clean Up” button in the Style Manager to remove classes with zero references. C) Delete every class that starts with “temp-”. D) Export the CSS and run a linter. Answer: B Explanation: Webflow’s Style Manager provides a built‑in cleanup tool that lists classes not applied to any element, facilitating safe removal. Question 22. To define a global color palette using CSS variables in Webflow’s custom code, which syntax is correct? A) :root { --primary-color: #ff6600; } B) body { $primary-color: #ff6600; } C) @global { primary-color: #ff6600; } D) .global { --primary-color: #ff6600; } Answer: A Explanation: CSS custom properties are declared on the :root pseudo‑class using the --variable-name syntax. Question 23. Which attribute would you add to an input element to ensure the browser validates it as a correctly formatted email address? A) type="text" B) pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$"
C) type="email" D) required="true" Answer: C Explanation: type="email" triggers built‑in email format validation in modern browsers. Question 24. When embedding third‑party JavaScript that depends on the DOM, where should you place the script tag in Webflow to guarantee it runs after the page content loads? A) In the <head> section. B) Inside the <body> tag, after all elements. C) In the “Before
