Introduction

Thanks for taking the time to complete this frontend technical assessment. We will be focusing on software quality (scalability, readability, maintainability, etc.) and your eye for detail. For styling, please use LESS, SASS or CSS without a UI library such as Bootstrap. For JavaScript, please use jQuery, KnockoutJS or vanilla JS. Along with following best practices, there will be bonus points for following our coding guidelines.

Exercise 1

Build a responsive page based on the designs.

Requirements

1. Match the designs exactly.
2. Needs to be responsive and fluid.

Designs

• exercise1-desktop.png
• exercise1-mobile.png

Assets

• Desktop banner - https://via.placeholder.com/1920x650
• Mobile banner - https://via.placeholder.com/600x600
• Content images - https://via.placeholder.com/400x300

Exercise 2

Read the data.json file and display the data as tabs on desktop and an accordion on mobile.

Requirements

1. Display data in tabs on desktop.
2. Display data in an accordion on mobile.
3. Only 1 accordion/tab should be open at a time.
4. Open the first accordion/tab on load.
5. If the open accordion is selected, close it.

Bonus points

• Improve the user experience with meaningful animations/transitions.
• Design and styling.
• Explain why the result of ('b' + 'a' + + 'a' + 'a').toLowerCase() is banana.

Submission

We recommend submitting your completed assessment as a forked repository. Please replace README content with instructions and relevant documentation.