Frontend Development Task for Interns
Objective:
esign and implement thedesktop version onlyof theprovided eCommerce web pages from
D
the Figma file:Ecommerce Web Design. The task focuseson applying core frontend
development skills such as HTML, CSS, and JavaScript, along with responsive design
techniques (for desktop).
Tasks Overview:
ach week is structured to gradually guide interns through implementing the design in smaller,
E
manageable parts.
Week 1: Understanding the Design and Building the Layout
1. G oal: Familiarize with the Figma design and implementthe basic structure of the
website using HTML and CSS.
2. Tasks:
○ Analyze the Figma file and extract the desktop layouts for all pages.
○ Set up the project structure with folders for HTML, CSS, and images/assets.
○ Implement the following sections:
■ Header: Navigation bar with logo, search bar, andmenu options.
■ Footer: Include all links and styling as per design.
○ Focus on accuratespacing,typography, andalignmentas shown in the Figma
design.
3. Deliverables:
○ Fully functional and visually accurate header and footer sections.
○ Push code to a GitHub repository.
Week 2: Home Page and Product Listing Page
1. G oal: Build the home page and product listing pageusing the desktop layout from
Figma.
2. Tasks:
○ Home Page:
■ Hero section with banner and call-to-action buttons.
■ Featured product categories or promotional sections.
○ Product Listing Page:
■ Grid-based product cards (image, name, price, and a "Buy Now" button).
■ Pagination or load more button at the bottom.
○ UseCSS Grid/Flexboxfor layout and ensure pixel-perfectimplementation.
○ Add hover effects for interactive elements like buttons or product cards.
3. Deliverables:
○ Complete home page and product listing page layout with all sections styled.
○ Code committed to GitHub repository.
Week 3: Product Details Page and Interactivity
. G
1 oal: Create the product details page and add basicinteractivity using JavaScript.
2. Tasks:
○ Product Details Page:
■ Display the product image, description, price, and "Add to Cart" button.
■ Include a section for customer reviews or related products.
○ Basic Interactivity:
■ Add a dropdown menu for selecting product sizes (if applicable).
■ Implement a JavaScript-based search bar in the header (non-functional,
styled only).
○ Testing: Ensure consistency across all pages and compatibilitywith major
desktop browsers.
3. Deliverables:
○ Fully implemented product details page.
○ Basic interactive elements styled and functional.
○ Final code uploaded to the GitHub repository.
Tools and Technologies:
H
● TML5: For semantic structure.
● CSS3: For styling, animations, and layouts.
○ UseFlexboxorCSS Gridfor layout design.
○ Maintain a consistent design system with reusable classes (e.g., buttons, grids).
● JavaScript: For basic interactivity (e.g., dropdown,hover effects).
● OR YOU CAN USE TECHNOLOGY STACK OF YOUR
● Figma: For extracting design specifications.
● GitHub: For version control and code submission.
Submission Instructions:
. C
1 reate a GitHub repository named ecommerce-frontend-design
.
2. Push your code weekly based on deliverables.
3. Share the repository link with your supervisor for review.
Evaluation Criteria:
. D
1 esign Accuracy: How closely the desktop version matchesthe Figma design.
2. Code Quality:
○ Proper use of semantic HTML.
○ Clean and organized CSS with comments where necessary.
3. Responsiveness: Ensure the layout scales properlyon different desktop screen sizes.
4. Timely Submission: Complete weekly tasks on time andpush to GitHub.
Good luck, and focus on attention to detail to create pixel-perfect designs!
Deadline:27th March 2025
(You will have to submit all of these 3 tasks collectively on 27th March)
