The Frontend Challenge 4 - Glam Up My Markup: Recreation

Rafael Romero - Aug 5 - - Dev Community

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

After a little break I came back for this challenge, I really liked the premise and I tried to create a design that was smooth and dynamic, this is a sports page after all. Is not as responsive and accessible as I wanted it to be, but this is the best I can do with my current time constrains and all the difficult situations on my country.

Of course I always try to adhere to the challenge rules but this time I went all out with the animations, those are the star of the show, specially the scroll animation.

Demo

For this demo I recommend to always see it in the full page view, specially in a new tab (please) and of course it will be functional in desktop (the best experience) and in mobile (the most common way).

You can see the page on a new tab clicking here

Journey

I can keep improving the code with some dry principles, specially with the aforementioned scroll animation, I repeated a lot of logic in the code but I did try my best to keep it as clean and clear as possible. The design process for this submission was my favorite part, it was not easy to choose a good color scheme, but I'm glad I landed on that red, grey and cream combo and I hope you find it pretty to look at as well.

I-hope-you-enjoyed-it

Finding some "real" cricket images was easy with my new knowledge of the Commons Creative License, and I found some good icons in a tool I discovered in a recent DEV post (I'll try to find the post to credit it in the comments). But I also made some assets like the cricket ball pattern in the schedule section and of course, the cover image on this post.

madagascar-he-has-style

And that's all for this one. If you're participating in the challenge, I hope you have as much satisfaction from your work as I do from mine. If not, perhaps the upcoming challenge will be your time to shine.

And as always, if you have some feedback you can write a comment or send me a DM. English is my second language, so please be nice to me ❣️ Thank you for reading up to this point, and until the next time, bye!

. . . . . .