Front-end Developer Test

Devcenter Frontend Developer Test I

The purpose of this test is not only to quickly gauge an applicant's abilities with a simple HTML/CSS mockup, but also their approach to development.

Applicants may use whatever techniques and Javascript/CSS frameworks they want to achieve the outcome.

How to complete the task

1. Fork this repository into your own public repo.

2. Task 1 - Request to be added to the zeplin project here. https://zpl.io/adAxWm5. You're to convert the mockup on Zeplin to a working page.

3. Task 2 - Using the Giphy API https://developers.giphy.com/docs/ - Write a chat input that takes a command, converts the ensuing string into a gif (Like in Slack) and adds it to the conversation. (This task is seperate from task 1)

4. Complete the project and commit your work. Send the URL of your own repository to @seun on the Slack here bit.ly/dcs-slack.

Show your working

If you choose to use build tools to compile your CSS and Javascript (such as SASS of Coffescript) please include the original files as well. You may update this README file outlining the details of what tools you have used.

Fonts

The fonts used in the designs are Circular see here - https://www.dropbox.com/s/h7m975lvy8bz5gn/Circular%20Fonts.zip?dl=0

Cross-browser inconsistencies

If you get around to doing cross-browser testing, for the sake of this project do not worry about any versions of Internet Explorer below version 9. The most up-to-date versions of Chrome, Firefox and Safari will also suffice. Include details in the README file of what cross-browser testing you have been able to do.

Responsive Design

For extra credit, ensure that the site scales well on mobile (we'll let you figure out the breakpoints).

Clean code

This fictitious project is part of a larger plan to reuse templates for multiple properties. When authoring your CSS ensure that it is easy for another developer to find and change things such as fonts and colours.

Good luck!

We look forward to seeing what you can do. Remember, although it is a test, there are no specific right or wrong answers that we are looking for - just do the job as best you can. Any questions - create an issue in the panel on the right (requires a Github account).