Accent Design Front End Technical Test

Thanks for your interest in the role of front-end web developer at Accent Design. We are looking for an experienced full stack developer with skills in HTML, CSS/SCSS and JavaScript, and with good communication skills, to join our established team developing websites, web-based software systems and mobile apps. The successful candidate will join the team on a full-time basis either as a remote worker, or at our studio in Norwich, UK. We are a small team, so you will be a big part of it. Your voice will be heard and you will be expected to take on jobs outside of your comfort zone.

If you think you are up for it, then we would like you to spend 2-3 hours having a go at our front end technical test...

Task Requirements & Considerations

The programming challenge is in 2 parts:

• Part A: HTML + CSS
• Part B: PHP + Javascript

Part A: HTML + CSS

We would like you to:

• Create a layout based on the given screen for which PNG and XD files are included in this repo (front-end_visual_screen.png, front-end_visual_screen.xd). If you don't already have XD, you should, and you can download it for free from adobe.com.
• Style the layout consistently and beautifully, adhering as closely to the design as possible.
• You are free to use any preprocessor you wish or write raw CSS, but we place great importance on using utility-driven CSS classes to create re-usable code, so please show us that you can do this.

Part B: PHP + JavaScript

• Use PHP to process the supplied serialised data (front-end_data.txt) into a JSON format that can be consumed by JavaScript.
• Use JavaScript to display the details of each card, including:
  • Name
  • Description
  • Time Alive
  • Technology
  • Strength
  • Special Powers
  • Loyalty
• Format the DOB from the data to determine how long they have been alive using days, weeks, months and years.
• Retrieve the formatted data using JavaScript
• Display the formatted data in the HTML + CSS layout created in step A, sticking to the design, placing data where it fits.
• You are free to use any framework you wish or do it VanillaJS style

Good to Know

• We don’t expect your submitted code to work in all browsers or to be responsive at this stage (given the time constraints), but it should show that you’ve thought about fallbacks when using newer language features.
• Think about how the CSS you write can be used across other pages on the site. We build our CSS in a utility-driven way (Google it if you're not familiar with that term), so show us that you can do that too.
• If you want to use a grid framework to help you out with the base layout, that’s fine. However, please don’t use a framework to do the majority of your styling though – we want to see an example of your own CSS, not that you can use a CSS framework like Bootstrap.
• Don’t get too hung up on exact colours of text or margins between elements. We'll be looking at the structure of your code more than expecting pixel precision.
• Don’t overcomplicate the JavaScript part of the task. We just want to see that you know how to write basic JS.
• We advise spending at least 2-3 hours on the test – if you want to spend more or less time on it, that’s completely up to you.

Technical Questions

Please take some time to answer the following questions, which are an important part of the test:

• How long did you spend completing the test?
• What libraries did you add to the front-end? What are they used for?
• If you had more time, what further improvements or new features would you add?
• Which parts are you most proud of? And why?
• Which parts did you spend the most time with? What did you find most difficult?
• How did you find the test overall? Did you have any issues or have difficulties completing it? If you have any suggestions on how we can improve the test, we'd love to hear them.

Bonus Points

• Clean and commented code!
• Knowledge of application flow
• Knowledge of modern best practices/coding patterns
• Demonstration of good state management
• Usage of frameworks/supersets
• Pixel perfection
• Usage of utility-driven styles
• The clean, organised website directory structure
• Basic knowledge of DevOps
• Knowledge of Docker

Submitting Your Solution

Please email your code and answers to the technical questions, plus anything else you'd like to tell us, to jobs@accentdesign.co.uk or upload it to DropBox or Google Drive (or similar) and send us a link. If you have any questions about the test, you are also welcome to email those to jobs@accentdesign.co.uk.

Thanks for your time – we look forward to hearing from you!