The latest articles on Forem by Lade Oshodi (@ladeoshodi). https://forem.com/ladeoshodi 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%2F1572299%2F97ede1f0-35dd-493a-a509-d475d34fd2c1.jpg https://forem.com/ladeoshodi en Lade Oshodi Fri, 06 Dec 2024 22:56:47 +0000 https://forem.com/ladeoshodi/glam-up-my-markup-winter-solstice-21e9 https://forem.com/ladeoshodi/glam-up-my-markup-winter-solstice-21e9 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice</a></em></p> <h2> What I Built </h2> <p>I created an interactive and responsive landing page about the Winter Solstice.</p> <h2> Demo </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6v4hssokc2zhtgv849i.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6v4hssokc2zhtgv849i.png" alt="Winter Solstice" width="800" height="547"></a></p> <p>Have a peek at the code: <a href="https://github.com/ladeoshodi/winter-solstice" rel="noopener noreferrer">Celebrating Winter Solstice</a></p> <p>Live site: <a href="https://ladeoshodi.github.io/winter-solstice/" rel="noopener noreferrer">Celebrating Winter Solstice</a></p> <h2> Journey </h2> <p><strong>Step 1: Styling the navbar and footer</strong></p> <p>I used CSS grid for the overall page and CSS flexbox to lay out the links in the navigation bar. Finally, I used a media query to stack up the navigation links when displayed on smaller screens.</p> <p>It was interesting learning the importance of this viewport meta tag to make the page responsive<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="nt">/&gt;</span> </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1yhcx36e2bf1ew6ascxl.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1yhcx36e2bf1ew6ascxl.gif" alt="Responsive landing page 1" width="500" height="473"></a></p> <p><strong>Step 2: Switching between tabs</strong></p> <p>This second step involved using JavaScript to toggle the display of each section depending on which navigation link was clicked/active. This gives it the interactivity of navigating between different pages</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozt3z0yhqnlfbpjvthdk.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozt3z0yhqnlfbpjvthdk.gif" alt="Responsive landing page 2" width="600" height="589"></a></p> <p><strong>Step 3: Making it more beautiful</strong></p> <p>For the last step, I assigned various background images to each section to make it more interesting</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmnvwx3s2rp5b8tplf7bj.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmnvwx3s2rp5b8tplf7bj.gif" alt="Responsive landing page 3" width="600" height="396"></a></p> <h3> Attributes </h3> <ul> <li>Tree Photo by <a href="https://unsplash.com/@fabulu75?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Fabrice Villard</a> on <a href="https://unsplash.com/photos/withered-tree-surrounded-with-snow-during-daytime-Du41jIaI5Ww?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Unsplash</a> </li> <li> <a href="https://www.freepik.com/free-vector/flat-winter-eskimo-illustration_33745102.htm#fromView=search&amp;page=1&amp;position=2&amp;uuid=44d27711-d651-4907-867c-0d67c69c3691" rel="noopener noreferrer">Snowball Fight Image</a> by freepik</li> <li> <a href="https://www.freepik.com/free-vector/flat-winter-people-collection_19838194.htm#fromView=image_search_similar&amp;page=1&amp;position=31&amp;uuid=0f4382f7-6e77-4c84-a1d4-814bfdccf46e" rel="noopener noreferrer">Winter People Image</a> by freepik</li> <li> <a href="https://www.freepik.com/free-vector/virtual-reality-concept_11372779.htm#fromView=image_search_similar&amp;page=1&amp;position=50&amp;uuid=0f4382f7-6e77-4c84-a1d4-814bfdccf46e" rel="noopener noreferrer">Virtual Reality Image</a> by freepik</li> <li> <a href="https://www.freepik.com/free-vector/flat-eskimo-illustration_33810950.htm#fromView=image_search_similar&amp;page=1&amp;position=45&amp;uuid=0f4382f7-6e77-4c84-a1d4-814bfdccf46e" rel="noopener noreferrer">Woman Eskimo and Dog Image</a> by freepix</li> <li> <a href="https://www.freepik.com/free-vector/flat-eskimo-illustration_33810950.htm#fromView=image_search_similar&amp;page=1&amp;position=45&amp;uuid=0f4382f7-6e77-4c84-a1d4-814bfdccf46e" rel="noopener noreferrer">Winter Eskimo Image</a> by freepix</li> </ul> devchallenge frontendchallenge css javascript