Developer Challenge (Landing Page Design)

As a member of the development team, backend (PHP, JS, etc) knowledge is a given. However, it’s equally important to have adequate proficiency with frontend development (HTML, CSS, SASS, etc).

Challenge: Design to Landing Page

Overview:

You’ll create a simple landing page (.html is fine) that follows the design provided.

Specifications:

  • Create an HTML landing page from our Figma design.
  • Use modern markup and styling techniques/methods.
  • The featured image should play this YouTube video when the play button is clicked. How you implement that is up to you!
  • The page should be fully responsive – so shift and size down elements as you see fit. We’ll view this in desktop, tablet, and mobile viewports.
  • CSS should be written using SASS and both the source and compiled files should be included. Method of compiling (gulp, grunt, etc) is up to you.

Notes:

  • If you don’t have a Figma account (free), sign up to access the inspector view.
  • You can download and use the prepared asset files (images and icons).
  • Do not rush! Strive for attention to detail (one of our core values) – we’ll compare the HTML template to the design file provided 🙂