DEV Community

Cover image for The Frontend Challenge: Cricket League
Faisal ahamed
Faisal ahamed

Posted on

1

The Frontend Challenge: Cricket League

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

What I build

In this project, I improved a basic HTML template using CSS and JavaScript. My goal was to create a beautiful and interactive page without changing the original HTML structure.

I added a "Join" button in the header using JavaScript. When you click it, a modal window opens. All animations on the page are created with my own JavaScript and CSS, without using any libraries.

Enjoy the new look and interactive features of the page!

Demo

Journey

In this project, I transformed a basic HTML template into an engaging, interactive webpage using CSS and JavaScript. Starting with the original structure, I applied a soothing color scheme and organized the layout with consistent styling. I added a "Join" button in the header, which, when clicked, opens a modal window. This was achieved using custom JavaScript for the button and modal interactions. To enhance the user experience, I crafted smooth animations with my own JavaScript and CSS, avoiding any external libraries. Throughout the project, I focused on maintaining the original HTML structure while significantly improving the design and functionality. The final result is a beautifully designed webpage that offers a seamless and engaging user experience.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

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

Okay