FE Home Assignment @JTG
FE Home Assignment @JTG
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.
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.
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.
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.
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.