Glam Up My Markup: Earth Day Challenge

Srishti — Mon, 29 Apr 2024 06:43:11 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I built a landing page and tried to enhance and make it more interactive and fun using JS and CSS.

Demo

Demo: https://earth-day.onrender.com/

Code: https://github.com/itsmesrishti/earth-day

Project Gallery:

Journey

I wanted to participate in this challenge as I thought it would be a good way to refresh whatever I had learned in the past regarding JS and to learn some new things becuase watching/reading is only so much fun.

I learned how to make text circular and how to make and add animations!

For accessibility, I tried to make sure that links can be navigated using tab and provided the aria-describedby for them. I wasn't sure what more I could do with accessibility so any tips are most welcome!

As far as responsiveness is concerened it should work fine on tablets and desktops (I tried to make them work even for large screen desktops so hopefully they will work!). It currently doesn't have a mobile version.

I think I might want to make the mobile version of this and maybe add a scrollspy feature for the circular animation.

References:
https://stackoverflow.com/questions/17363164/how-could-i-alternate-background-color-between-odd-even-dd-rows
https://stackoverflow.com/questions/23455798/changing-color-of-letters-one-by-one-in-a-html-text-when-hovering
https://css-tricks.com/set-text-on-a-circle/
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://www.kirupa.com/animations/spinning_circular_text.htm
and then a bunch of MDN content related to animation

DEV Community: Srishti

Glam Up My Markup: Earth Day Challenge

What I Built

Demo

Journey