Frontend Development Task for Interns
Objective:
Design and implement the desktop version only of the provided eCommerce web pages from
the Figma file: Ecommerce Web Design. The task focuses on applying core frontend
development skills such as HTML, CSS, and JavaScript, along with responsive design
techniques (for desktop).
Tasks Overview:
Each week is structured to gradually guide you through implementing the design in smaller,
manageable parts.
Week 1: Understanding the Design and Building the Layout
1. Goal: Familiarize with the Figma design and implement the 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, and menu options.
■ Footer: Include all links and styling as per design.
○ Focus on accurate spacing, typography, and alignment as 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. Goal: Build the home page and product listing page using 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.
○ Use CSS Grid/Flexbox for layout and ensure pixel-perfect implementation.
○ 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
1. Goal: Create the product details page and add basic interactivity 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 compatibility with 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:
● HTML5: For semantic structure.
● CSS3: For styling, animations, and layouts.
○ Use Flexbox or CSS Grid for 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:
1. Create 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:
1. Design Accuracy: How closely the desktop version matches the Figma
design.
2. Code Quality:
○ Proper use of semantic HTML.
○ Clean and organized CSS with comments where necessary.
3. Responsiveness: Ensure the layout scales properly on different
desktop screen sizes.
4. Timely Submission: Complete weekly tasks on time and push to
GitHub. Good luck, and focus on attention to detail to create pixel-perfect designs!
Deadline:14th August 2025
(You will have to submit all of these 3 tasks collectively on 14th August)
