The Scenario
A Series A fintech is replacing its marketing site. The existing page loads a 2.4MB hero video on mobile, ships 180KB of render-blocking CSS, and scores 42 on Lighthouse Performance. The engineering lead wants the rebuild to cross 90 on Performance, 100 on Accessibility, and 100 on SEO - without losing the current visual direction. You are the candidate for the frontend role.
The Brief
Plan and implement a rebuild of a four-section marketing page: hero with a product demo, a three-column feature grid, a customer logo strip with testimonials, and a final CTA with a signup form. You do not need to ship a live URL; a single HTML file plus CSS (vanilla or Tailwind) is enough. What you must show is the thinking behind production decisions, not just the code.
Deliverables
- Full HTML and CSS for the four sections (may be split across files or inline)
- A short architecture note: how you handle above-the-fold CSS, font loading, the hero media, and any JavaScript you add
- Accessibility audit of your own page: at least 3 specific choices (heading order, landmark regions, form labels, focus management, reduced-motion, colour contrast) with why each matters
- SEO plan: meta tags, structured data, semantic outline, and one on-page content decision you would push back on marketing about
- Performance budget you set for the page (total KB, LCP target, CLS target) and one trade-off you had to make to stay inside it
- What you would measure in production in the first 30 days to know the rebuild actually worked
Submission Guidance
This task rewards judgement, not volume. A sharp 800-word submission with tight code beats a sprawling 3,000-word one. Show the trade-offs you rejected, not only the ones you took.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.