Glam Up My Markup: Beaches

Byuku - Tracy — Tue, 04 Jun 2024 15:50:08 +0000

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

Here's my first JS / CSS challenge. In an era where everything is built using a framework or design system, it's been a long time since I've had any fun with css. After years of using JS frameworks, it's time to bring out the old js vanilla memories.

Demo

Journey

For this project, I used keyframes, transform, transition for the different animations.

I wanted to create double-sides cards :

sideA will show the beach name with a button that will triggered the rotation.
sideB will display the beach description.

Each time you click on the button trigger, the current item will rotate as the previous should go back to the default state

For this, I rework the DOM thanks to JS vanilla and add some classes to manage the css

This project is also responsive, we have a little zoom effect for the desktop query

I relearn to use some scss variables : mixin, maps, include

It was nice to participate in the challenge, now I'm going back to React and my company design system ✌🏽

DEV Community: Byuku - Tracy

Glam Up My Markup: Beaches

What I Built

Demo

Journey