Front-End-Development-Test

This is a front end development test, specifically geared to test abilities in semantics, styles and scripts as they relate to User Interface & User Experience design.

Assets

The following has been provided within this repository:

• assets - This folder includes the majority of image, video and font files that will be needed.
• psd - This folder includes a Photoshop document of the design.
• jpg - This folder includes a JPG of the design.
• mp4 - This folder includes a 20 second animation. The animation is a representation of the intended functionality for the design.

Objectives/Requirements

1. Use HTML5.
2. Use a CSS preprocessor for styles, SCSS or Sass.
3. Use whatever Javascript libraries you would like. The less, the better.
4. Create functionality that very accurately mirrors the animation within the "mp4" folder.
5. The only elements on the page that need to be clickable are the play buttons. If a play button is clicked, the correct video (which can be found in the assets folder) should play. Other elements on the page, like navigation buttons at top of viewport, do not need to be clickable.
6. One video will need to be an embedded iframe. The other three videos can be HTML5 videos using the video files provided in the assets folder
7. Although this test is optimzied for mobile and some elements do not need to be clickable, do your best to create an interactive page with consistent UX detail through hover effects and animation timing.
8. Refer to the image below to see how the intended final product should appear in a browser. The image below also specifies breakpoints and device limitations.

Browser Support

Ensure that the elements work and display correctly in the following browsers:

• Firefox (latest version)
• Safari (latest version)
• Google Chrome (latest version)

Things to Remember

Have you made sure that your work is organized and completed efficiently?

• Are all requirements set above met?
• Does the live page look just like the Photoshop design?
• Can the project be built using npm run build?
• Is the page working without any JS errors?
• Have files been optimized? Are best suited image file types being utilized for graphics?

Deliverables and Deadline

Please deliver final product by cloning this repositiory on your personal git hub account. When completed, email the repo URL to [email protected] and [email protected]

Take your time but try to deliver it within 6 days time.