🧪 UI Tech Test

This Tech test aims to assess your all around front-end skills – HTML, CSS and JavaScript.

📋 Task requirements

Please:

• Create an HTML page to represent the Create Account design in the design-screenshot.png image (or design-figma.fig Figma file). Use semantic, accessible and valid mark-up.
• We have provided the Figma version of this design for those of you who have this software (you should be able to get free access on both Mac and Windows to just view this file). We have also provided the design as a PNG if you cannot open the design using Figma.
• Style the page so that it looks like the design. This can be done using native CSS, or using a preprocessor like Sass – whatever you prefer.
  • We've included designs for both narrow and wide viewport widths. Ensure your code adapts between the two designs using Responsive Design techniques.
• Use the images, icons and fonts in the /assets folder to help you when styling the page.
• Write some JavaScript to:
  • Validate the form fields on the page.
  • Enable the password field to toggle between being obfuscated and plain text by interacting with the 'Eye' icon.
  • Count the number of characters entered in the password field and update the counter to the top right of the form field.

⚠️ Important considerations

• Please do not use AI to generate your submission. Feel free to use AI to bounce ideas off and ask general questions, but the solution must be your own original work.
• We don’t expect your submitted code to work in every browser combination (given the time constraints), but coding in a way that shows you've thought about fallbacks if/when using newer language features is expected.
• We understand that you may be developing from a PNG and not the Figma file – don’t get too hung up on the exact colours of text or margins between elements. We'll be looking at the structure of your code and aren't expecting pixel precision.
• Please don’t use a framework (i.e. Bootstrap, Material or Tailwind) to do the majority of your styling – we're trying to assess how you would style this yourself, not whether you can use a CSS framework.
• Feel free to use tools like Vite, Astro, NextJS or Nuxt if that gets you up and running faster. Just be sure to explain why you've chosen to use it when submitting your test.
• Think about how the CSS you write can be used across other pages on the site. We build our CSS in a component-driven way so show us that you can do that too.
• 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 an hour or two on the test – if you want to spend more or less time on it, that’s completely up to you.
  • If there are any parts of the test you didn't have time to complete, explain how you'd approach these parts of the task if you had more time.

❓ 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?
• What browser(s) should we view your test in?
• What's your favourite programming language? Why?
• Please describe yourself using JSON.

📤 Submitting your test

Please submit your code as specified by the recruiter. Usually this will be via Google Drive.

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