Glam Up My Markup: Beaches

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Beaches

What I Built

For the Frontend Challenge v24.04.17, I transformed the provided HTML markup into a visually appealing and interactive website without modifying the given template. The aim was to showcase the best beaches in the world with enhanced aesthetics and functionality using CSS and JavaScript, while keeping the original HTML structure intact as much as possible.

Demo

Screenshots

Live Demo
Beach Challenge Demo

Repository Link
Github Repository

Journey

Embarking on this challenge, my primary goal was to breathe life into the static HTML by making it both beautiful and engaging. Here’s a glimpse into my process:

1. Design Concept:
   I started by envisioning a serene, beach-themed design. I wanted users to feel like they were virtually visiting these amazing beaches.

2. CSS Enhancements:

• I used a combination of modern CSS techniques, including flexbox and grid layouts, to create a responsive and visually appealing design.
• To evoke a beach vibe, I chose a color palette reminiscent of sand, sea, and sky.
• I incorporated smooth transitions and animations to make the interaction feel more natural and engaging.

1. JavaScript Interactivity:

• I added interactive elements such as image carousels and effects to display additional information about each beach.

1. Challenges and Learnings:

• One of the challenges was to add significant interactivity without altering the provided HTML directly. This required creative use of JavaScript to manipulate the DOM dynamically.
• Through this project, I deepened my understanding of advanced CSS techniques and refined my JavaScript skills, particularly in DOM manipulation and event handling.

Key Aspects

• For Accessibility, I chose Calm background Sand Color and Blue Color for the elements. I made the Beaches list as a interactive horizontal slider, so there are many elements changing according to the visibility ratio, Used some icons for Fun and accessibility

• Responsiveness, I added some media queries in CSS to give some Responsible content ony any sized screens

• I added a fun elements which responds to pageScroll & animation

Thank you 🩵