DEV Community

Cover image for The Frontend Challenge 4 - Glam Up My Markup: Recreation
Rafael Romero
Rafael Romero

Posted on

2 1 1

The Frontend Challenge 4 - Glam Up My Markup: Recreation

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!

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (3)

Collapse
 
jennavisions profile image
Jenna

Nice work @rafajrg21 👏! I like it.

It's great to hear that you had a fantastic time building and designing the page 😊.

I participated in the challenge too. I learned about GSAP animation and had a good time 🎉.

You can check out my work here 👀.

Yes, we can always improve our code 👍.

There are so many amazing GSAP animations out there, and I'm still learning.🚀.

Collapse
 
rafajrg21 profile image
Rafael Romero

Thank Jenna! Really cool submission as well 🚀

GSAP is such a good tool, specially for complex animations, hope you keep using and improving with it. 🙌🏻

Collapse
 
jennavisions profile image
Jenna

Thanks for the encouragement. :-)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay