NEW
Font size
Worksheetswebflow
Total questions: 31
Worksheet time: 16mins
What is the main purpose of a Section in Webflow?
To style elements
To organize content in blocks
To add animations
To create pages
What does a Container do?
Controls color
Centers and limits page width
Adds padding automatically
Displays text
What’s the correct structure order?
Section → Container → Wrapper → Content
Body → Div → Button
Container → Section → Nav
Nav → Button → Image
What’s the function of a Div Block?
Adds hover effects
Groups and structures elements
Adds SEO data
Controls global styles
Why use Headings (H1–H6) correctly?
For font size
For SEO & hierarchy
To color text
To add links
The Navigator panel shows:
Color styles
Class names
Page structure hierarchy
Animations
Which element should you use for grouping multiple cards?
Container
Section
Wrapper
Page
The body tag contains:
Only the hero
All visible page content
Only nav and footer
Images only
How do you rename a class in Webflow?
Double-click class name
Right-click → Rename
Only in Style Manager
You can’t rename it
When should you use symbols (now “components”)?
For unique items
To reuse the same element on multiple pages
For styling only
To replace containers
What’s the difference between margin and padding?
Both same
Padding is outside
Padding = inside, Margin = outside
Margin = inside
What does Z-index control?
Transparency
Layer order
Text color
Flex direction
What’s the best way to center content vertically?
Flexbox
Grid
Margin top 200px
Position absolute
Why are classes important?
For naming only
To reuse consistent styling
To animate elements
To export HTML
When do you use a combo class?
To combine fonts
To duplicate a class
To modify one instance without creating a new class
To rename components
What is global color used for?
Random coloring
One-time use
Update color everywhere instantly
Header only
What is global color used for?
Random coloring
One-time use
Update color everywhere instantly
Header only
Why use utility classes (like .flex-center)?
For decoration
To apply common styles quickly across elements
Only in navbars
They are optional
Which display property stacks elements horizontally?
Block
Flex (row)
Grid
Inline
What property controls the gap between flex items?
Margin
Gap
Padding
Z-index
Which of these is not a CSS unit?
px
rem
vh
sp
What’s the default Webflow breakpoint?
Tablet
Desktop
Mobile landscape
Mobile portrait
What’s the purpose of breakpoints?
Add color
Change layout for different screens
Animate text
Add grid
When designing mobile first, you:
Start from Desktop
Start from smallest screen and go up
Use flex only
Don’t use containers
Which property helps make text responsive?
Font weight
Font color
Viewport width (vw) units
Margin
Should you duplicate content for mobile?
Yes always
No, only adjust styles
Only headings
Optional
What’s a hover state used for?
When page loads
When mouse is over an element
When clicked
When scrolling
What property changes commonly on hover?
Width
Background color, shadow, or transform
Position
Font name
What is an animation trigger?
Color
font
Event that starts an animation (e.g., on click)
Section
What panel do you use to add hover or scroll effects?
Pages panel
Interactions panel
Assets panel
Style manager
True or False: You can add multiple hover interactions to the same element.
True
False
