This document outlines an assignment crafted to showcase your front-end development experience and expertise. Beyond testing your technical skills, this assignment offers an opportunity to demonstrate your ability to manage timing, handle technical debt, and ensure code maintainability. It will also serve as a measure of your overall understanding of the relationship between HTML, CSS, JavaScript, and accessibility.
This assignment involves slicing a mockup into HTML, CSS, and JavaScript.
- Confirmation: Please confirm receipt of the assignment before starting work.
- Timeline: Aim to complete the assignment within 4-5 days of receipt. The balance between execution and delivery time is key; being faster or slower is not necessarily better.
- Submission: Submit your work as a compressed archive or via Google Drive. Do not host your solution on GitHub or share it with other candidates, as this will disqualify both of your applications.
- Inquiries: Feel free to reach out with any concerns or questions.
An experienced member of our technical team will review your submitted code for efficiency and elegance. Documentation and comments will help the reviewer understand your solution. The reviewer will compare your solution's rendering against the provided mock-ups, which are exact representations of the expected outcome. We may discuss your submission during the hiring process, but no additional preparation will be required on your part.
The provided mockups present an Article page. Please slice it into a responsive HTML5 prototype, following these guidelines:
- Responsiveness: Implement a responsive prototype with a mobile-first approach, providing the best experience on all viewports based on available space.
- Precision: The implementation should match the design pixel by pixel. At Atypon, we value high attention to detail.
- Browser Compatibility: Ensure the prototype works on all modern browsers and viewports.
- Dummy Text: Use Lorem ipsum text where needed.
- Behavioral Features: Refer to the “Demo” folder and focus on:
- Scroll-to-top functionality
- Tabs components (“Latest”, “Popular”, “Trending”)
- The “Related Posts” grid section, which becomes a slider on tablet and mobile
- CSS: Use SCSS or Less.
- JavaScript: Use TypeScript for scripting.
- React: You may use React if preferred, but provide your own bundler configurations instead of using pre-made setups like Create React App or Gatsby.
- Author Section: Use your image and real name.
- Images: Use images from the 'Assets' folder. Extract the logo and SVG icons from the provided Figma design, as listed on the 'Components' page.
- README.md: Include a README.md file with instructions.
- Bundler/Task Runners: Use bundlers or task runners to preprocess and bundle your code (include a dev mode).
- Public Hosting: Host the page publicly on services like AWS S3, Heroku, etc.
- i18n Setup: Initial setup for i18n with English translation.
- Additional Features: Enhance behavioral components such as the “Hamburger menu” with your touch.
Good luck!