The latest articles on DEV Community by Altaf Syah (@altafsyah). https://dev.to/altafsyah https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1545752%2F9a8ab422-2f10-4532-82ce-424f3643ac15.png https://dev.to/altafsyah en Altaf Syah Fri, 31 May 2024 02:54:12 +0000 https://dev.to/altafsyah/glam-up-my-markup-beaches-4hfg https://dev.to/altafsyah/glam-up-my-markup-beaches-4hfg <p><em>This is a submission for [Frontend Challenge v24.04.17]((<a href="https://dev.to/challenges/frontend-2024-05-29">https://dev.to/challenges/frontend-2024-05-29</a>), Glam Up My Markup: Beaches</em></p> <h2> What I Built </h2> <p>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.</p> <h2> Demo </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbavrfplvj4h9d5llpnqs.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbavrfplvj4h9d5llpnqs.png" alt="This is the preview, it's so simple since but I learn a lot from this" width="745" height="913"></a></p> <p>You guys can see the code in here : <a href="https://github.com/altafsyah/dev.to-beach">Repo</a><br> Visit the live preview in <a href="https://dev-to-beach.vercel.app/">here</a></p> <h2> Journey </h2> <p>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. </p> <p>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.</p> <p>I'm looking forward for the next challenges.</p> devchallenge frontendchallenge css javascript