The latest articles on Forem by Michael Onyeabo (@michyking). https://forem.com/michyking 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%2F1281272%2F77cb2c0c-a5ec-47cc-ae3f-024195d7def7.jpeg https://forem.com/michyking en Michael Onyeabo Fri, 07 Jun 2024 13:20:44 +0000 https://forem.com/michyking/glam-up-my-markup-beaches-mp9 https://forem.com/michyking/glam-up-my-markup-beaches-mp9 <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>I built the web page from the given HTML snippet. The rule is not to edit the HTML source code directly so CSS and JavaScript were my tools in achieving this design. </p> <ul> <li>With JavaScript DOM manipulation, I was able to create and insert 3 important elements to the source HTML file.</li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>1. Search Input 2. Images 3. Buttons </code></pre> </div> <ul> <li><p>To make the page interactive, I hid the beach description and showed it whenever the button was clicked.</p></li> <li><p>Used CSS and JS to add a little animation to improve user experience.</p></li> </ul> <p>My goal was to create an interface that is visually appealing, highly functional, and most importantly simple. Enabling users to easily discover and learn about different beaches worldwide.</p> <h2> Demo </h2> <p>To access the live link to my project <a href="https://glamupmymarkupbeaches-michykings-projects.vercel.app/">CLICK HERE</a>.</p> <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%2F7hnltxndatkjq0h5n37d.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%2F7hnltxndatkjq0h5n37d.png" alt="The design" width="800" height="539"></a></p> <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%2Fjkrr2pvjb6y6x53hd3i9.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%2Fjkrr2pvjb6y6x53hd3i9.png" alt="This shows the decription modal on click of the button" width="800" height="539"></a></p> <p>The link to my Github repo can be found <a href="https://github.com/michyking/Beaches">here</a>.</p> <h2> Journey </h2> <p>The entire process was full of ups and downs, to be honest, but I did enjoy exploring my coding creativity. I encountered some hurdles along the way, but I am particularly proud of the simplicity of my design. As a first-time developer, I am really happy with my results and look forward to taking on more future challenges.</p> <p>This project not only expanded my technical skills but also deepened my understanding and appreciation of the complexities of web development. It was a rewarding journey that challenged me to step out of my comfort zone and enabled me to grow as a developer.</p> devchallenge frontendchallenge css javascript