Frontend Developer Test Project

Objective: Build a simple, responsive webpage for a fictional "Product Showcase." This project assesses basic front-end development skills, including layout design, styling, and interactivity.

---

Project Overview: You will create a two-page website, each showcasing Bootstrap and Tailwind CSS separately. This will help demonstrate your understanding of both frameworks.

Figma Design Link:

Product Showcase Design

---

Project Requirements

Page 1: Bootstrap Showcase

1. Navbar:

   • Create a responsive navigation bar with links (e.g., Home, Products, Contact).

   • Style it using Bootstrap components.

2. Product Grid:

   • Display a grid of at least 6 product cards.

   • Each card should include:

     • An image.

     • Product name.

     • Price.

     • A "Buy Now" button.

   • Use the Bootstrap grid system for layout and styling.

3. Footer:

   • Add a footer with links to social media icons (e.g., Facebook, Twitter, Instagram).

   • Use Bootstrap for alignment and spacing.

---

Page 2: Tailwind CSS Showcase

1. Hero Section:

   • Add a full-width hero section with:

     • A background image.

     • A bold title.

     • A call-to-action button.

   • Style the section using Tailwind CSS utilities for spacing, typography, and colors.

2. Product Grid (Recreated):

   • Display the same 6 product cards but styled with Tailwind CSS.

   • Add hover effects on the cards and buttons using Tailwind utilities.

3. Footer (Recreated):

   • Similar to Page 1 but styled using Tailwind CSS.

---

Interactivity (JavaScript)

• Add a simple hover effect to buttons and cards.

• Include a JavaScript feature where clicking the "Buy Now" button shows an alert (e.g., "Product added to cart!").

---

Technical Requirements

1. Use HTML5 for structure.

2. Implement styling with Bootstrap on one page and Tailwind CSS on the other.

3. Add basic interactivity with JavaScript.

4. Use Git for version control and submit the project via a public repository link (e.g., GitHub).

---

Evaluation Criteria

• Code Quality: Clean, well-structured, and commented code.

• Responsiveness: Proper handling of different screen sizes.

• Styling: Effective and distinct use of Bootstrap and Tailwind CSS.

• Functionality: Basic interactivity with JavaScript.

• Completion: All features implemented as described.

Submission Guidelines:

Read more Submission Guidelines