We have formulated an assignment to test your technical knowledge. The assignment has been devised with technical and visual developers in mind. Carefully read what to do and what not to do. Enclosed you will find a design containing all of the necessary elements.
The design has been made in Sketch, which is only available for Mac OS X. Download the app and use the free trial for this assignment. You can download the sketch file and assets here. Windows users can view the dimensions of the design online and export the necessary assets via zpl.io/bAE5zdB. The login information is dept_frontendassignment and the password is F$Qu4RVD.
How long do you have?
You have 16 to 24 hours to complete the assignment. If no completion date has been agreed on with you, try to complete the assignment within a week. Put your code on GitHub (or Gitlab, Bitbucket etc.) and send us the link to your repository where we can find both the source code and the compiled version. That means no ZIP files. And please make sure that we can run the code on our computers by including a readme.
What are our expectations?
We expect the design to be fully responsive. You’re free to think about which breakpoints you want to support (think about the why as well).
Depending on your level of experience we of course expect different solutions. Make choices based on what you think you can do within the given time. You can use frameworks like React, Vue, or just simply do it old school with a compiler. Ideally you will have prepared every component in its most practical form.
Your passion doesn’t lie with APIs, redux and business logic but you want to create something that’s not only functional but also pleasing to the eye. Surprise us with nice visual effects such as animations, transitions and general user experience enhancements.
Things you could think about:
- How does the menu open and close?
- How do you show components both on load and on scroll?
- Have you considered using responsive typography?
- And what happens to long words: how are they split?
- Take a look at accessibility. Can you use your website using only your keyboard?
Think about adding functionalities like:
- Cases – filtering/grouping:
– Filtering by Industry
– Grouping by Category
– Storing filters dynamically in the URL
- Case grid – List and grid view toggle
- Contact form – With validation and error and success states
Extra other stuff you could do:
- Improve performance: Lazyload stuff, WebP, go crazy!
- Create a 100% Progressive Web App (check it with lighthouse)
- Create a (fake JSON) REST endpoint and insert the project data dynamically
- Use React (or VueJS) with tools like Redux/GraphQL/Emotion/Styled Components or even server side rendering. Use the tools that you think might fit best!
- Add Unit Tests