Scribd
Upload
211 views5 pages

FE Home Assignment @JTG

The assignment requires creating a Portfolio web application using HTML, CSS, and JavaScript based on a provided Figma mock-up, ensuring pixel-perfect design and compatibility with Firefox, Chrome, and Safari. Key features include a sticky navbar, various sections like 'Projects' and 'Recommendations', and form validation for user inputs. Submission involves zipping the completed project and ensuring all assets and paths are correct before using a provided Google form for submission.

Uploaded by

shreyasrivastava7202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
211 views5 pages

FE Home Assignment @JTG

The assignment requires creating a Portfolio web application using HTML, CSS, and JavaScript based on a provided Figma mock-up, ensuring pixel-perfect design and compatibility with Firefox, Chrome, and Safari. Key features include a sticky navbar, various sections like 'Projects' and 'Recommendations', and form validation for user inputs. Submission involves zipping the completed project and ensuring all assets and paths are correct before using a provided Google form for submission.

Uploaded by

shreyasrivastava7202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Frontend Assignment - Josh Technology Group

Assignment Overview
Your task is to create a Portfolio web application using HTML, CSS, and JS based on a provided
mock-up design. The application should be compatible with Firefox, Chrome, and Safari
browsers (use Windows version if available).
The design reference is provided via a Figma link included in the document.

Requirements
● Design Consistency:
Ensure the implementation is as pixel-perfect as possible compared to the Figma design.
● Coding Best Practices:
Follow the best coding and optimization practices. Avoid using table tags for any layout
creation.
● Browser Compatibility:
Ensure the application functions correctly on Firefox, Chrome, and Safari.

Home Page
It should look the same as the one shown in the Figma. All the sections of the website are
mentioned below for clarity:
a. Navbar
Please note that the navbar should be sticky, that is, it should always be visible
even when the content is scrolled up.
b. Hero Section
c. Footer
d. Contact Information
e. “Projects” Section
f. “Recommendations” Section
Please note, that you can use any JS library for implementing a working
carousel.
g. “Leave Me Your Info” Section
When the user submits the form, it should print the data on the console and show
a confirmation dialog. Please make sure to handle the form validation.
Skills Page
As mentioned in the home page section, the “Navbar” & “Footer” are static and the “Navbar”
should stick at the top when the content is scrolled up. Apart from that, the following are the
things that you need to do on this page:

1. “Skills” Section
● The title and subtitle are static.
● Populate the cards using mock data.

2. “Add Skill” Feature


● Clicking “Add Skill” opens a dialog with a form.
● Form submission adds a new skill.
● Validations:
○ Domain is a required field.
○ At least one skill must be associated with the domain.
○ Proficiency level must be specified for each skill.

Good to have
1. Mobile Responsive
There is no responsive design given. In case you want to make your page responsive,
you can manage your layout in such a way that it doesn’t break on different viewport
sizes.

Submission Instructions
Once the assignment is complete, follow these steps to submit it:
1. Create a zip file of your assignment
2. Checklist Before Zipping
a. All the files and assets used in the assignment are present.
b. All the asset paths used are correct.
c. Screenshots of the assignment implemented by you.
3. Submit the zip file using the provided Google form link: Submission Form
(https://forms.gle/d9ujGmd5thote2ov8).

Assets
Figma Mockup -
https://www.figma.com/design/DdMUttw79UVGcaldgGJ8dn/Portfolio---Set-1?t=jLRaLHZn60N0
UETX-0
Note: You can extract images from the Figma file. Follow the steps mentioned in the Figma
document. For more information, you can refer to this resource.

Notes
1. Browser Support: The application must work on Firefox, Chrome, and Safari browsers.
2. Don’t use table, tr, th, td, hr, br .. tags. We recommend the usage of HTML5 tags.
3. You can use any UI library/framework of your choice.
4. Implement a working carousel for the “Recommendations” section. You can use a
third-party library to implement the carousel.
5. You can use the “Inter” font family (Google Font).
6. You can use any code editor of your choice.
7. The assets/images/icons should be used as provided in the mockups.

Frequently asked questions


1. Should we use CSS properties and dimensions exactly as mentioned in the
mockup?
Do we have to create the ditto of the template shared on Figma or some layout
variations are acceptable?
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.
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. Is it mandatory to create pixel-perfect HTML pages?


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 using the extension to achieve pixel perfection. However, you can use
some other tools as well to achieve pixel perfection.

3. 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 web page must be similar to what we have in the designs.

4. Which technologies can be used to implement the webpage?


You should use plain JS for the application. Additionally, you may choose any UI
library or framework that suits your needs. For implementing the carousel, you are free
to use any library of your preference.
5. Should the carousel be working? If yes, how many slides must be slid in one
go?
Yes, the slider must be working. You can use any third-party Javascript/Jquery plugin
for implementing the same. One slide must be slid in one go/click.

6. 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.

7. 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.

8. 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

9. How do you submit the assignment?


Once you are done with the assignment, you can make a zip of the folder and upload
it here:https://forms.gle/d9ujGmd5thote2ov8

Some useful links you can use for ramping up.


1. Start / Learn:
a. HTML, CSS, and Javascript
b. HTML Content Structure
c. CSS: Zero to Advanced
d. Working with Forms

2. Best Practices in Markup:


a. HTML Best Practices
b. https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741
30+ CSS Best Practices for Beginners | Envato Tuts+
3. JS:
a. https://sabe.io/classes/javascript/ (Highly Recommended)
b. https://javascript.info/intro
4. In Chrome, Safari, and Firefox, you can access the built-in developer tools by pressing
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.

You might also like