CodersClan Frontend Interview Test

Introduction

If you are here it means you would like to join our Community as a Frontend developer, this is great! Before you will join our community there is a short test we need you to do, a simple PSD to HTML task. Please read in detail this document.

What to do next

Clone this repository to your local pc
Create a new branch to work on (feel free to name it as you'd like)
Open the "frontend-test.png" file to see what is expected from you to deliver, this file includes behavior guidelines that you will need to implement
The source files are frontend-test.psd and frontend-test-mobile.psd
On top of that we would also like you to create a parallax effect for the hero section (desktop only) similar to the one shown in parallax_demo
Open the "frontend.json" file to get the variables you'll need to connect as assets to the work
Create a new project in the branch which will include sass and javascript compiler, we expect you to develop the page with SCSS and ES6, preferred with Node.JS and Pug (Jade) templating.
Please include ALL source files including the compile script in the branch, and also the compiled (dist) folder of the delivery and push everything to the remote.
Once done - please create a merge request from your branch to master, and send an email to your PM (who sent you this repo :) ) so we'll know to check the delivery.

Transitions

The test doesn't describe the transitions and animations, please do make sure to add animations to make the transitions smoother.

What we look for in your delivery

We are looking for pixel perfect delivery, make sure to match everything exactly as it is in the design, so when using a pixel-perfect comparison, it will match 100%.
Keep in mind we develop a dynamic website, make sure to consider the option of repeatable items, different image sizes, and different text, the page should look great regardless of the content in it.
Do not hardcode any of the content but instead use the content from frontend.json, if you need, feel free to edit this JSON file - we will change the content related to these variables as part of the review.
We expect the code to be minimal, very organized and linted. We won't accept "Spaghetti" code even if the frontend looks perfect. Keep in mind that your code when working with us will be sliced to sections and integrated into WordPress, make the backend developer life easier.
It goes without saying the delivery should be responsive to support all device resolutions
Other than the behavior explaind in "frontend-test.png", we would like to have a parallax effect fo the hero image. The image is set to different layers in the PSD - "frontend-test.psd" and we would like to have a similar behavior as the one in the demo the how the different layers will behave on the hero section while scrolling.

What we will test in your delivery

Check pixel-perfect layout according to the provided design.
Apply various ratios and layouts to test responsiveness of assets.
Change the content.json to a test_content.json that has different text and images - test adaptation of page to the change while keeping design requirements.

If you have any questions, feel free to email the PM or Elad at elad@codersclan.com