Capturing Beach Memories: A Polaroid Showcase of the World's Top Beaches

#devchallenge #frontendchallenge #css #javascript

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

Hello DEV,

This is my first entry here.

I incorporated a Polaroid photo effect to evoke a sense of nostalgia and capture the essence of cherished beach memories. Using HTML, CSS, and JavaScript, I crafted a visually appealing display where each beach is presented as if captured on a polaroid. Clicking on any beach card opens up a gallery, allowing users to browse all images. This interactive experience is enhanced with icons for location and additional information, enriching the exploration of each beach.

Credits:
Beach images from Freepik
Grainy background from freecodecamp

Demo

See the Pen Beach challenge by JennaVisions (@JennaVisions) on CodePen.

Beach challenge

Journey

Please note that the project is not fully responsive at the moment. There are some fixes and updates that I plan to implement later, which I haven't been able to complete yet. Despite these pending improvements, building each step of the challenge has been an enjoyable journey.

In addition to the visual design, I prioritized accessibility features to ensure a user-friendly experience for all visitors. Incorporating alt attributes for images and keyboard controls for navigation in the lightbox gallery were among the measures to enhance accessibility. While the project is not yet fully responsive, I plan to improve it in future updates.

Cheers