Scribd
Upload
54 views

Front End Developer Internship Assignment

Uploaded by

rajantiwarirt12
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
54 views

Front End Developer Internship Assignment

Uploaded by

rajantiwarirt12
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/ 3

Front-End Developer Intern Assignment

Objective:
To assess your front-end development skills, including HTML, CSS, React.js, TypeScript, and
Tailwind CSS, using Next.js. This assignment will evaluate your ability to create a responsive
and visually appealing web application based on a given mobile-first design.

Assignment Overview:
You are required to create a responsive single-page web application (SPA) for a fictional
product launch based on the provided Figma design. The application should be fully functional
on mobile screens, implementing all the details specified in the design, including the menu bar
and smooth scrolling features.

Figma Design Link:


Design Link

Main Website for Reference:


Toingg

Requirements:
1. Use Next.js for the project framework.
2. Use React.js, TypeScript, and Tailwind CSS for the implementation.
3. Ensure the application is fully responsive, primarily optimized for mobile screens.
4. Implement menu bar with smooth scrolling to different sections as detailed in the design
5. Add basic animations for the hero section and feature cards.
6. Follow the notes and instructions provided in the Figma design carefully.

Steps to Complete the Assignment:


1. Setup Project:
● Initialize a new Next.js project.
● Set up your development environment and version control (GitHub).
● Configure TypeScript in your Next.js project.
● Integrate Tailwind CSS into your project.
2. Analyze the Figma Design:
● Study the provided Figma design to understand the layout, styles, and interactions.
● Extract necessary assets (images, icons, etc.) from the Figma file.
● Pay close attention to the notes and instructions within the Figma design.
3. Create the Header:
● Implement a header with navigation links that smoothly scroll to different sections of the
page, as shown in the design.
4. Develop the Hero Section:
● Add a large product image, a catchy headline, & a call-to-action button as per the design.
5. Build the Features Section:
● Create three feature cards with icons, titles, and descriptions.
● Include basic animations when these cards come into view, matching the design.
6. Design the Testimonials Section:
● Display three customer reviews with profile pictures, names, & comments according to
the design.
7. Construct the Footer:
● Include contact information and social media links as specified in the design.
8. Make It Responsive:
● Use Tailwind CSS to ensure the application looks good on all devices, adhering to the
Figma design guidelines.
9. Finalize and Test:
● Ensure all functionalities are working.
● Test the application across different browsers and devices.

Submission Guidelines:
1. Host your project on a platform like Vercel.
2. Do not share the project publicly on GitHub or any other platform.
3. Provide either a link to the hosted application or a screen recording explaining each
feature and its implementation.
4. Submit the zip file of your assignment with the links and a screen recording to
[email protected] with the subject line “Front-End Developer Intern Assignment
Submission - [Your Name]”.
5. The Deadline to submit the assignment is 24 hours from the date of receiving.
6. Include a brief description of your learnings & challenges during the project

Evaluation Criteria:
1. Functionality: The application meets all the specified requirements.
2. Code Quality: The code is clean, well-commented, and follows best practices.
3. Design Implementation: The application faithfully replicates the Figma design.
4. Responsiveness: The application works seamlessly on different devices, especially
mobile.
5. Creativity: Unique and creative elements in design and implementation.

🙂--------------------------------------------
For any queries or clarifications, please contact us at [email protected].
-----------------------------------Good luck!

You might also like