Combine top bar, XY grid, callouts, cards, buttons, and a signup form into a believable marketing landing page—the kind of site Foundation still powers in agencies and enterprise marketing stacks.
Requirements
- Top bar with brand, nav links, and CTA buttons
- Hero band with headline, supporting copy, and primary + secondary actions
- Feature row: one column on small screens, three on
medium+usinggrid-x - At least one
cardorcalloutfor social proof or pricing - Footer with newsletter
input-groupor simple form fields
Important interview questions and answers
- Q: Why is Foundation still maintained on legacy sites?
A: Teams invested in XY grid, Top Bar, and jQuery-era plugins; migrations are costly when content and campaigns depend on stable markup patterns. - Q: Foundation vs Bootstrap for a landing page?
A: Both ship marketing components; Foundation historically targeted flexible grids and Zurb templates, while Bootstrap dominates admin UI. Pick based on team familiarity and existing codebase—not hype. - Q: How do you avoid the “default template” look?
A: Customize Sass settings (color, radius, typography), break symmetric grids intentionally, and limit stock Orbit heroes unless the brand needs a carousel.
Self-check
- Does the layout avoid horizontal scroll at mobile width?
- Are headings in logical order for screen readers?
- Can you rebuild this shell from memory in under fifteen minutes?
Challenge
Marketing slice
- Combine top bar, hero/callout, XY grid features, and footer CTA.
- Use at least one breakpoint cell class (
medium-6, etc.).
Done when: preview reads as one marketing page section on mobile and desktop.