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!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

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. :-)

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more