Front-end Assignment

Hello! And Welcome!

This assignment is a way for us to assess that you're able to translate design into code and how you would normally structure your code and is part of our job posting on The Hub.

The assignment

The assignment is - in short - to convert the design/master-the-front-end.pdf design to HTML/CSS (we have also provided the design as a Figma file if you want to get a few more details).

There are no strict "rules" for the execution of the assignment except that it should be responsive and delivered to us as a pull-request. The ultimate goal is to create the design as lean, neat and simple as possible.

Feel free to still do the assignment even though you do not have the time to complete it but instead create a readme.md file or a description in the pull request where you explain what you would have done and why you selected to create the parts you did.

Requirements

The base requirements are simple: create a HTML/CSS version of the design following the Mobile First methodology.

  • Responsive and Mobile First
  • Make a pull request with your results to this repository.

Wishlist

We would love to see that you're capable of some of the following skills:

  • Building components with React JS
  • Animations where you deem it relevant
  • Running git commits (so not just one at the end saying "initial commit")
  • Cross-browser support (sadly IE11 is still haunting our daily lives)
  • Component tests (Ex: Jest)
  • No use of 3. party HTML/CSS grid or component frameworks
  • Your own creativity**

** Feel free to display your own creativity in the assignment. An example of this would be to fetch the articles in the grid from a JSON object or replacing them with an API service to display latest articles from another source. We only wish that the "soul" of the project still remains when you're done.

Skip the line

You can skip the line and go straight to an interview if you're able to re-create the design in a WordPress website using React based Gutenberg blocks (red: not ACF blocks or similar) while maintaning a good structure and pretty code.