Glam Up My Markup: Cricket League!

#devchallenge #frontendchallenge #css #javascript

Hello again!,

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

What I Built

For the Frontend Challenge v24.07.24, I transformed the provided HTML markup into a visually appealing and interactive landing page for the New York Recreational Cricket League. I focused on enhancing the aesthetics and functionality using CSS and JavaScript, while keeping the original HTML structure intact, only modifying it through JavaScript when necessary.

Demo

Live link: https://rith1x.github.io/challenges/nyrcl/

Github Repository: https://github.com/rith1x/rith1x.github.io/tree/main/challenges/nyrcl

Note: Don't forget to interact with elements!!!

Screenshots

Journey

This challenge gave me the opportunity to explore broad DOM manipulation in JavaScript, which allowed me to add dynamic elements without altering the original HTML. I also learned how to style a timeline and create engaging entry animations that enhance the user experience. Additionally, I experimented with rise-up notes to highlight key information on the page. I'm particularly proud of how these elements came together to create a balanced design that is both functional and visually appealing. These new skills will definitely be useful in future projects.

Key Aspects

SVG CSS Animated Welcome Screen: A visually engaging welcome screen that draws users in with smooth, animated SVG graphics.
Animated Entry Header: An eye-catching entry header that animates as the page loads, setting the tone for an interactive experience.
Interactive Icon: A responsive and interactive icon that enhances user engagement through subtle animations and functionality.
CSS-Only Timeline: A sleek and informative timeline designed purely with CSS, providing a clean and accessible way to display chronological information.
Rise-Up Banner Animated to Scroll: A dynamic banner that animates as users scroll, highlighting important information in a visually appealing way.
Responsive Design: The entire page is designed to be fully responsive, ensuring a seamless experience across all devices.