JTG - Frontend Home Assignment
Hello!
Below is a quick overview of the Frontend assignment. If you need any clarification, please feel free to
email or call the HR team.
Assignment Overview:
The mock-up page's Figma Link has been added to the document. We would like you to implement it
using HTML, CSS, and Javascript only (Please make sure not to use any JavaScript or CSS frameworks or
libraries, such as React, Angular, Bootstrap, etc.).
Please follow the best coding/optimization practices that you are familiar with as the same will be
considered while evaluating the assignment. We would also like the implementation to be pixel-perfect
(match the design exactly using tools like the PerfectPixel Chrome extension) as much as possible.
Functionality:
Note: Follow the instructions mentioned in the figma
Assets/Downloads:
You can extract images from the Figma file. Follow the steps mentioned in the Figma document.
Do’s:
1. Implement All Sections: Ensure that all sections outlined in the design or requirements are fully
implemented.
2. Browser Compatibility: Ensure the page works seamlessly on Firefox, Chrome, and Safari
browsers.
3. Use DIVs: Utilize <div> elements for structuring the layout instead of tables.
4. Pixel Perfect Design: Match the design exactly using tools like the PerfectPixel Chrome
extension.
5. Follow Best Practices: Use clean, optimized, and maintainable code adhering to industry
standards.
6. HTML5 Tags: Make extensive use of modern, semantic HTML5 tags (e.g., <section>, <header>,
<footer>, <article>, <nav>).
7. Open Sans Font: Use the Open Sans font family from Google Fonts as specified. 8. Carousel
Implementation:
This document is confidential and contains proprietary information and intellectual property of Josh
Technology Group. Disclosure, copying, distribution or use of this document and the information contained
therein is strictly prohibited.
8. Use Provided Assets: Integrate all assets, images, and icons exactly as specified in the mockups.
9. Code Editor: Feel free to use any code editor of your choice for development.
Don’ts:
1. Avoid Tables: Do not use <table>, <tr>, <th>, <td> for layout purposes.
2. Avoid Non-Semantic Tags: Avoid <hr> and <br> unless absolutely necessary.
3. No UI Frameworks: Do not use UI frameworks like Bootstrap or Material UI.
4. No JavaScript Frameworks: Avoid using JavaScript frameworks/libraries such as Angular or
React.
5. Non-Pixel Perfect Design: Do not deviate from the provided design or mockup.
6. Ignore Browser Testing: Do not neglect testing for cross-browser compatibility.
7. Confidentiality of Figma Files: Do not share the Figma file with anyone else. Avoid adding
comments directly on the Figma file; instead, reach out to HR for any queries or clarifications.
8. Limit Figma Usage to Image Exports: Only export images/icons from the Figma file. Do not
directly use any other elements or code from Figma; all elements should be created on your
own.
Suggested Approach and Task Prioritization:
You can approach the assignment in the following order & try to complete as much as possible.
1. Create static HTML.
2. Implement the Modal (No JS/CSS library to be used).
3. Implement the working slider/carousel (Can use JS library).
4. Make it pixel-perfect and cross-browser. You can use this Chrome plugin.
Submission Link:
1. Once you are done with the assignment, you can make a zip of the folder and upload it here:
https://forms.gle/2iqw1voEMFpb5mwSA
2. Important: ensure that both the ZIP file and the assignment folder are named using your email
address you used to register on Pod.
Frequently Asked Questions (FAQs):
1. Should we use CSS properties and dimensions exactly as mentioned in the mockup?
We do not recommend using the CSS/units from Figma. We expect the usage of CSS best
practices, which might not be well exhibited by the styles in Figma.
2. Do we have to create the ditto of the template shared on Figma or are some layout variations
are acceptable?
This document is confidential and contains proprietary information and intellectual property of Josh
Technology Group. Disclosure, copying, distribution or use of this document and the information contained
therein is strictly prohibited.
The UI should be as close as possible to the mock-up as mentioned in the assignment. That can
be achieved using the PerfectPixel Chrome extension, a link to which has been provided in the
assignment document. Minute variation is acceptable.
3. Is it mandatory to create HTML pages pixel-perfect?
Yes. We expect the implementation to be as close as possible to the mock-ups. However, we
recommend following the priority order mentioned in the assignment document. We
recommend the use of the extension to achieve pixel perfection. However, you can use some
other tools as well to achieve pixel perfection.
4. Do we have to use images in our HTML file with exactly the same size?
The images can be in a size similar to the size it is visible in the designs. Even if the dimensions of
any image are greater than required, the size taken up by that image on the webpage must be
similar to what we have in the designs.
5. What technologies can be used to implement the webpage?
Only HTML5, CSS3, and JavaScript/jQuery should be used in the implementation.
The usage of any framework/library like Material Design, bootstrap, Materialize, etc (except for
the slider) is not allowed.
6. Should the carousel be in working state? If yes, how many slides must be slid in one go?
Yes, the slider must be in a working state. You can use any third-party Javascript/Jquery plugin
for implementing the same. One slide must be slid in one go/click or every 5 seconds.
7. What interactions should be there on the slider?
The basic interactions like navigating using the back and next buttons are mandatory. Further,
drag and keyboard arrow button interaction is good to have.
8. Should we have the width of the web page shown in designs(like width 1440px) or should it be
according to different viewports(like width 100%)?
The webpage can be fluid in layout and can consume 100% width as needed. It should work well
on the viewport range of the desktop sizes without having to scroll horizontally. At 1440px, the
UI is expected to be close to pixel-perfect with the designs.
9. Is it important to make the webpage mobile responsive?
If you’re implementing mobile responsiveness, that’s a plus. But we recommend following the
priority order by
a. Creating the web page first.
b. Implementing the working slider.
c. Making it pixel-perfect.
10.How to submit the assignment?
a. Once you are done with the assignment, you can make a zip of the folder and upload it
here: https://forms.gle/2iqw1voEMFpb5mwSA
b. Important: ensure that both the ZIP file and the assignment folder are named using your
email address used to register on Pod.
This document is confidential and contains proprietary information and intellectual property of Josh
Technology Group. Disclosure, copying, distribution or use of this document and the information contained
therein is strictly prohibited.
Some useful links you can use for ramping up.
1. Start / Learn:
a. https://www.internetingishard.com/html-and-css/
b. http://html-css-js.com/
c. https://internetingishard.com/html-and-css/
d. https://tympanus.net/codrops/css_reference/
e. https://developer.mozilla.org/en-US/docs/Web
2. Best Practices in Markup:
a. https://github.com/hail2u/html-best-practices
b. https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net -6741
3. JS:
a. https://sabe.io/classes/javascript/ (Highly Recommended)
b. https://javascript.info/intro
4. In Chrome and Safari, you have inbuilt developer tools. Activate them by hitting F12.
Please feel free to discuss anything related to the assignment. In case you need any clarifications on the
same please feel free to get in touch.
All the best!
This document is confidential and contains proprietary information and intellectual property of Josh
Technology Group. Disclosure, copying, distribution or use of this document and the information contained
therein is strictly prohibited.
