The Scenario
A design agency gives junior front-end applicants a screenshot and asks them to rebuild the hero section. You will describe the screenshot in your own words and then produce the code.
The Brief
Imagine a hero section with: a dark navy background, a white headline reading "Ship faster with fewer bugs", a shorter grey subheadline, a primary blue button and a secondary outlined button, and a product screenshot to the right that overlaps slightly outside the right edge of the content container. It is responsive: on mobile the image stacks below the text.
Deliverables
- A complete HTML snippet for the hero section
- A complete CSS (or Tailwind class) implementation
- Notes on any accessibility choices you made (focus states, colour contrast, alt text)
- One thing you would push back on the designer about and why
Submission Guidance
Paste the code in fenced code blocks. Do not use any framework beyond plain HTML and CSS (or Tailwind classes).
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.