Combine hero, navbar, columns, cards, messages, and forms into a believable marketing landing page—the kind of site Bulma excels at when you need polished layout fast without a JS component bundle.
Requirements
- Top navbar with brand, nav links, and CTA buttons (static expanded or burger markup is fine in the playground)
- Hero with headline, supporting copy, and primary + secondary actions
- Feature grid: one column on mobile, three on tablet+ using
columns - At least one
cardorboxfor social proof or pricing - Footer band with links or a simple signup
field
Important interview questions and answers
- Q: Why is Bulma popular for marketing sites?
A: CSS-only components (hero, level, columns) ship polished layout quickly; teams add minimal JS only where needed. - Q: Bulma vs Bootstrap for a landing page?
A: Bulma avoids a JS dependency for styling; Bootstrap adds interactive widgets out of the box but ships a larger behavioral surface. - Q: How do you avoid the “default template” look?
A: Customize Sass variables or CSS custom properties, swap typography, and break grid symmetry with intentional spacing.
Self-check
- Does the layout work at mobile width without horizontal scroll?
- Are headings in logical order for screen readers?
- Can you rebuild this shell from memory in under fifteen minutes?
Challenge
Marketing page slice
- Combine
hero, asectionwith columns, and afooter. - Use at least two color modifiers (
is-primary,has-text-*).
Done when: preview reads as one coherent marketing slice on mobile and desktop.