Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/benmukebo/interactive-photo-gallery

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/benmukebo/interactive-photo-gallery
Owner: BenMukebo
Created: 2024-06-09T10:17:04.000Z (7 months ago)
Default Branch: feature
Last Pushed: 2024-06-09T21:55:46.000Z (7 months ago)
Last Synced: 2024-11-09T10:18:05.248Z (2 months ago)
Language: JavaScript
Size: 1.18 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Interactive Photo gallery

> COA TASKFORCE TAKE HOME CHALLENGE

## 💻 Getting Started

### Requirements:
1. Responsive Design: The interactive photo gallery should adapt seamlessly
to different screen sizes and devices
2. Figma Design Accuracy: Match the provided Figma designs pixel-perfectly,
including layout, spacing, typography, and visual styles
3. Hover Interaction: Implement the hover interaction as shown in the Figma
prototype, displaying additional details when a user hovers over a photo
4. Cross-browser Compatibility: Ensure consistent performance across
modern web browsers, such as Chrome, Firefox, Safari, and Edge
there.

### Objective:
- The purpose of this coding challenge is to assess your skills in HTML, CSS, and
JavaScript, as well as your problem-solving abilities.You will be tasked with
building an interactive photo gallery based on provided Figma designs.

### 📖 Task Details:
**Access the Figma designs:**
- Follow this figma link to view the designs in prototype mode: Figma Link
- The designs showcase the interactive photo gallery for both desktop and
mobile views
- Use these designs as a visual reference for implementing the gallery
**Set up your development environment:**
- Choose your preferred code editor or IDE
- Ensure you have the necessary tools and frameworks installed (e.g., HTML,
CSS, JavaScript)
**Create a public GitHub repository:**
- Sign in to your GitHub account or create a new one if you don't have an
account
- Create a new public repository for this challenge
- Clone the repository to your local machine
**Organize your project:**
- Create appropriate directories and files for your code and assets
- Use meaningful names for files and folders to maintain clarity and
organization

**Implement the interactive photo gallery:**
- Start with the HTML structure, creating the necessary elements for the
gallery
- Style the gallery using CSS, following the design guidelines from Figma
- Implement interactivity and functionality using JavaScript
- Test your implementation regularly to ensure it works as expected

### Docs

- [LIGHTBOX](https://lokeshdhakar.com/projects/lightbox2/)