The purpose of this challenge is to gauge a candidate's Sr. UI / Interactive Developer capabilities, accessed by by criteria (defined at the end of this document) and their Challenge submission. Review the supplied project requirements (written and creative) and produce a compelling interactive work. Note that this document parallels a scaled down project you might encounter at Wonderful. Use your submission to demonstrate your affinity for web development, modern techniques, language comprehension (i.e., your understanding of vanilla/pure CSS [SCSS], HTML5, and JavaScript), attention to detail, and most importantly—problem solving.
The Wonderful team has worked with the client to define the basic requirements and designers have just mocked up the creative. The client has approved the creative and it is now ready for the development team. Reviewing the requirements, it’s clear that we'll be developing a landing page to start off then as the client needs increase moving onto additional pages in the future. The current task is to develop one (1) landing page, with a carousel (slider), global navigation, sections, and footer according to the design.
The plan is to implement this page in a way that allows the code to be agnostic of the platform or framework in which they ultimately will reside. Therefore, the request is to develop them with vanilla/pure JavaScript (no libraries or frameworks), SCSS, and HTML5. Given modern day front end development, it’s a good idea to set up a task runner (e.g. Gulp) to allow for SCSS to be compiled (into CSS) and additional tasking aids the workflow.
Be mindful of adhering to the creative, but know that the creative team and client are open for your input (code execution) to elevate the final product.
The creative (design) for the landing page is located at the following url: https://www.figma.com/file/J2GWNzuz5BilxMAQBfK2hr/Sr.-Wonderful-UI-Code-Challenge?node-id=2%3A770
- Develop a front end page (as much as possible within your timeframe) to match the provided mocks. The expectation to be able to understand your decisions about where to best invest your time on a design that would likely take more time than you may have available for this code challenge.
- Use your best judgement as it pertains to animations, interactivity, and responsiveness.
- Match the mocks to the best of your ability, within the time you have available for this challenge.
- Please note that, while the mocks do not have a mobile breakpoint, we would like to see your best judgement in how to translate the designs for mobile devices.
- The recommended time frame is less than 1 week (assuming the challenge is worked on off house, etc), but we understand that you may have limited time to complete this challenge. You are done when you are satisfied, and you feel comfortable returning to your work.
- Your submission must be written in vanilla/pure JavaScript (no libraries or frameworks), SCSS, and HTML5.
- You can use any resource or library that you think is best for the product. However, you must be able to justify and attribute any external resource.
- Ask the Wonderful team as many questions as you need to complete the challenge. We have been working with this client for many years and can provide guidance, or validate any assumptions.
- A live URL to view your submission in action for both desktop and mobile breakpoints
- A reviewable copy of the codebase (repo)
- The ability to chat through your process and decisions
- Project organization, and code cleanliness (i.e., ease of another dev to get onboarded into the code)
- Your knowledge of best practices and understanding of best HTML5 & JavaScript practices
- The elegance, efficiency, and performance of your JavaScript
- Your grasp of the SCSS extension language
- Semantic markup
- Problem-solving/creative intuition as to how to "fill in the gaps" that are missing within the design
- Your execution speed, compared to the quality of the delivered product
- Our understanding of the quality of your development process
✨ Thank you and good luck!