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

Take me to the beach with CSS/JS/HTML.
As the markup challenge prompt stated – no markup was changed except for adding a link to CSS and a script tag in the head. With styles, animations, and some JS for adding images and a dialog window – the page becomes more fun and interactive.

Demo

samvimes01
/
markup-css-js

For the challenge https://dev.to/challenges/frontend-2024-05-29

Simple static page

Made for a dev.to challenge

I have used CSS and JavaScript to make the starter HTML markup beautiful, interactive, and useful
The template does not include photos, so to make it visually appealing, a simple JavaScript with css var trick was used.

Live

Github pages

Tech used

MDN: new HTML and CSS features like dialog, css import, css nesting, image set, css var.
Interactive buttons: cssbuttons.app

Cards: neumorphism.io, glassmorphism

Animations: wave svg and some experiments with keyframes and pseudoelements
Interactivity without changing HTML: used :after, :before pseudoelements, JavaScript and css var for adding and image
Images: all images were generated with a special prompt where names of the beaches were included. Adobe Firefly did all the magic. To descrease size a special resizing and converter script was used (created with the ChatGPT 4o help)

ImageMagick and the necessary codecs for…

View on GitHub

Journey

I used some interesting stuff here. AI for image generation, converted images to new AVIF format, used many HTML/CSS features that were added/adopted recently (dialog, CSS vars, etc.). And I’ve never used animations so extensively as here (even though it’s only a few transforms and keyframes)