DEV Community

Altaf Syah
Altaf Syah

Posted on

2

Glam Up My Markup: Beaches

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

This is my first time doing challenge, so in this challenge i built a list of card for the beaches in the template that provided. I try not editing the HTML and make it pure CSS and JavaScript. I would challenge myself to do it with basic, without frameworks and libraries. I want to learn the basic and re-memorized the fundamental of CSS and also JavaScript DOM.

Demo

This is the preview, it's so simple since but I learn a lot from this

You guys can see the code in here : Repo
Visit the live preview in here

Journey

In this challenge, I'm editing the HTML using JavaScript DOM to insert element and adding styles into it. Since the template doesn't included with phots. I challenge myself to make the visual design using SVG path. It's really challenging, but I learn a lot from this.

I re-learn about the fundamental of Javascript, CSS Flexbox, and using path in SVG to draw. It's worth the time, maybe I would make this website as my experiment for SVG path and animation, since I found out it's really fun to do.

I'm looking forward for the next challenges.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay