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
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…
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,::beforepseudoelements, 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)
Top comments (0)