DEV Community

Cover image for Glam Up My Markup: Beaches
Kiruthik Kumar
Kiruthik Kumar

Posted on • Updated on

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

Banner Header

Responsive Slider

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 🩵

Top comments (9)

Collapse
 
hikolakita profile image
Hikolakita

gg :)

Collapse
 
rith1x profile image
Kiruthik Kumar

Thank u 💜✨

Collapse
 
sharath_lingam_s profile image
Sharath Lingam

Looks pretty ✨.

Collapse
 
harshitads44217 profile image
Harshita Sharma D

Congratulations........... 🎉🎉🎉🎉

Collapse
 
rith1x profile image
Kiruthik Kumar

Thank u 🤍✨

Collapse
 
michyking profile image
Michael Onyeabo

Congratulations Dev

Collapse
 
rith1x profile image
Kiruthik Kumar

Thank u💚✨

Collapse
 
jennavisions profile image
Jenna

Nice work! 😊

Congratulations on winning the Glam Up My Markup: Beaches June Challenge! 🎉"

Keep up the amazing work! 👏

Collapse
 
rith1x profile image
Kiruthik Kumar

Thank u 💙✨