This take home assignment is designed to allow you to demonstrate design skills.
Our expectations are:
- There is no time limit or due date, though we expect this may take a couple of hours to accomplish.
- This is a skills test and a way to demonstrate your talents, so we do not expect the finished product to be production ready. Messy HTML, repeated CSS, loose ends, hard coded things, hacks to save time, all acceptable, though bonus points if you highlight those in your code, in comments, or in your writeup and talk through a bit how you'd make them production ready.
- That said, we do expect to be able to view the work ourselves in a browser to see what you've done and how it looks.
- Your work should be licensed in a way that allows us to examine the code you wrote and run it so we can test it out for the purposes of our hiring process. We do not need ownership or the right to use it in production, though a permissive open source license like MIT would be fine here too.
Your deliverables are:
- A repository on GitHub (public or private) with your work, accomplishing the goals set out in the instructions below. Feel free to fork this repository if you'd like.
- Instructions for how to view the code ourselves, which may be as simple as loading a certain file in the browser. (Can be a readme type file in the repository if you want.)
Overall, this project should demonstrate your skills in design and static HTML and CSS coding, so please approach it in that spirit. It doesn't have to be perfect and it doesn't have to be "right" or be free of bugs and the like. But it should demonstrate what you can do.
When you are finished, email a link to your repository and instructions to your hiring contact. If you need our GitHub usernames to add to a private repository, we can provide those.
Your goal with this assignment is to translate the following screenshot into HTML and CSS, and add some additional design elements, as explained below:
- Clicking on the rightmost arrow in each row should expand the section and show further contact details for that person. (The other buttons/toggles don't need to do anything)
- The contact details should include email address, physical address, and phone number, where denoted by the icons in the screenshot above. Phone icon means they have a phone number, mail icon means they have an email address, chat icon means their phone number is a mobile phone, and pin icon means they have an address. Some contact info may be missing on a given person.
- The entire design should be responsive and look good on any screen size from a mobile phone in portrait orientation up to a desktop, with a max width of 960px wide.
- You should use only HTML, CSS, and jQuery or vanilla javascript to create your design. No frameworks beyond simple CSS resets, please.
Overall, this assigment aims to get a sense of your design and HTML/CSS coding skill, from envisioning an additional feature fitting in to an existing design to coding mobile responsive HTML and CSS.
If you have any questions as you go, please don't hesitate to reach out to your hiring contact.
Good luck! We're looking forward to seeing your work!