Front-end Developer Test

This front-end developer test is aimed to primarily test developer's fluency in preparing a web page from a given image file and to asses fluency in using JavaScript and designing user interfaces. Moreover, we're interested in your little technical choices and judgements, reasoning and ability to understand and explain the trade-offs behind them.

The test has limited time of two to three hours. Please try to finish as much as possible in this time. The aim is not to complete some production-ready finished software. Just to see some code that you've written that will give us a starting point for discussion in the interview. Being able to tell us about the code that you would have written next is just as interesting as what you submit.

We would like to see markup, styles and script that you've written, the way you have structured you have taken decision on selectors, class names and so on.

Story:

As a user,

I'd like to view menu-bar options available to me, accessible from the ellipsis icon in the right side of the top menu-bar,

So that I can perform essential actions in the webapp.

• Consider the menubar.png for reference.
• The menu should show some dummy actions and some submenu items that user can navigate.

Here is the checklist that can be handy when you approach the test

• You are free to use jQuery
• Using Bootstrap or similar frameworks is not okay to achieve responsiveness
• Using templating framework like Mustache or AngularJS is not okay
• The webpage look the same in all four major browsers as much as possible - Chrome, Firefox, Safari and Edge
• Make it responsive using your best judgement. Fonts should be responsive as well.
• When working on the project use consistent coding style
• Try to use SASS effectively with reusability where applicable

Hint: Consider edge cases of data and make sure the UI components give acceptable user experience.

We've also included potentially required images and code skeleton.

To submit your exercise, you can either send us a link to a Git repo, or archive your repo (ideally including the Git history).

All the best and happy coding!

Steps to get started

1. Go to project home directory
2. npm install
3. npm run dev to start the server and run the html file in browser