/recruitment-frontend

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 at our studio in Norwich, UK, or as a remote worker. We are a small team, so you will be 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

We would like you to:

  • Create an HTML page to represent the sample dashboard, which can be found online as an interactive XD prototype at https://xd.adobe.com/view/d2f573b6-de40-4d5d-93d2-634a6a8a47de-87a6/?fullscreen. We have also published a version with all of the design specs & assets at https://xd.adobe.com/view/a0697cb1-7c43-4c38-978d-b1da1329e964-f53a/, but also include the XD files with assets in this repository. If you don't already have XD, you should, and you can download it for free from adobe.com.
  • We would like you to lay out the complete page if you can, but are happy for you to block out sections to save time if you wish. We would like you to build the slide out panel triggered by the table rows, but form elements and the navigation can just be flat representations. The map can just be included as a flat graphic too, but we have some questions later about how you build that in production.
  • We would like you to use semantic, accessible and valid mark-up. You can use straight CSS, or SCSS if you prefer.
  • In order to show us your JavaScript skills, we would like you to write some JavaScript to make the 'Address Search' search box show and hide the notices displayed on the page.

Good to Know

  • We don’t expect you to finish all of the detail in the design, as we appreciate that would take a lot of time. Focus on making the parts that you do work on a good standard that reflects your ability and block out sections you don't have time for. We’d rather see a number of the components from the design styled well, than lots of incomplete components.
  • We don’t expect your submitted code to work in all browsers (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

  • What approaches did you use when completing the test? Do you use any CSS methodologies or techniques to help this approach?
  • If you had more time to spend on the test, what would you like to add to your solution?
  • How would you improve the UX or UI factors of the design?
  • How would you approach making the map interface work? What would be your preferred mapping API and would you use any other software or services?
  • What browsers should your test work in? What will happen if we test it in older browsers like IE10?

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!