The latest articles on Forem by Gyemfa Abedi Gloria (@gloria_gyemfa). https://forem.com/gloria_gyemfa 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%2F1596850%2F861cd249-b93a-40b4-ac6e-2522e6b601e5.jpg https://forem.com/gloria_gyemfa en Gyemfa Abedi Gloria Sun, 09 Jun 2024 17:54:37 +0000 https://forem.com/gloria_gyemfa/take-me-to-the-beach-frontend-1oij https://forem.com/gloria_gyemfa/take-me-to-the-beach-frontend-1oij <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>Welcome to our curated list of the best beaches in the world. Hover over the gallery of beaches for detailed information about each beach and where they are located</p> <h2> Demo </h2> <p>Link to the website </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://dev-challenge-beaches.vercel.app" rel="noopener noreferrer"> dev-challenge-beaches.vercel.app </a> </div> <br> A link to the code on Github <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Gyemfa-Gloria-Abedi" rel="noopener noreferrer"> Gyemfa-Gloria-Abedi </a> / <a href="https://github.com/Gyemfa-Gloria-Abedi/dev-challenge-beaches" rel="noopener noreferrer"> dev-challenge-beaches </a> </h2> <h3> </h3> </div> </div> <h2> Journey </h2> <p>I began by understanding the challenge and generated ideas on how to go about the challenge. <br> Since it is obligatory to not manipulate the HTML structure, I used javascript to manipulate the DOM and CSS to add images and attain flip effect on hover of an image to achieve the desired outcome. Also, I leverage AI for assistive development. <br> All images are from google images.<br> I finally deployed site using vercel </p> <p>This project was a valuable learning experience in creating dynamic, interactive web content using JavaScript and CSS. I'm particularly proud of the adaptive approach and the smooth animations achieved. Moving forward, I hope to enhance the solution further by optimizing performance, ensuring improved accessibility, and expanding functionality</p> <p>Feel free to comment, all reviews are welcome</p> devchallenge frontendchallenge css javascript