Glam Up My Markup: Beaches - with new shiny CSS features

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)

• 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 an image
• Images: all images were generated with a special prompt where the names of the beaches were included. Adobe Firefly did all the magic. To decrease size a special resizing and converter shell script was used (see readme on GitHub)