Frontend Challenge: Cricket League Landing Page

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

What I Built

I’ve created a visually appealing and interactive webpage for the New York Recreational Cricket League. This page is designed to provide information about the league, including how to join, league fees, game locations, and season schedules, while engaging users with a modern and dynamic design.

Objectives and Achievements

1. Enhanced Visual Appeal:

   • I’ve integrated a background image to improve the overall look.
   • Added cricket-related animations, such as a bouncing cricket ball, to make the page more engaging.

2. Interactive Elements:

   • Implemented hover effects on sections to provide a more interactive experience.
   • Added a cricket icon beside each section title to visually tie in with the theme.

3. Responsive Design:

   • Ensured the design was responsive, adjusting navigation and layout for different screen sizes.

Demo

Journey

1. Design Integration:

   • CSS Styling: I’ve utilized CSS for background, hover effects, and animations, enhancing the visual appeal of the page.
   • HTML Structuring: Incorporated structured HTML with sections, titles, and icons to clearly present the league information.

2. Interactivity and Animation:

   • JavaScript: Added basic JavaScript to handle interactions (e.g., click events on schedule items) and made sure the webpage was dynamic and user-friendly.
   • CSS Animations: Implemented animations to attract attention and provide a more engaging user experience.

3. Testing and Troubleshooting:

   • CSS Debugging: Addressed issues with backgrounds and ensured all styles were applied correctly.
   • Responsive Design: Tested and adjusted styles for different screen sizes to ensure a consistent experience across devices.

What I am Proud Of

• The Interactive Design: The use of animations and hover effects adds a layer of interactivity that makes the site more engaging.
• Visual Cohesion: The integration of cricket-related graphics and styling creates a cohesive and thematic design that aligns with the purpose of the webpage.
• Responsiveness: Ensured the webpage adapts well to various screen sizes, making it accessible on mobile and desktop devices.

Next Steps

1. Further Enhancements:

   • Add More Interactivity: Consider incorporating more advanced JavaScript features
   • Improve Accessibility: Ensure the website is fully accessible by adding ARIA roles, keyboard navigation support, and testing with screen readers.

2. Content Updates:

   • Enhance Visuals: Explore additional graphic elements, such as custom icons or illustrations, to further enhance the design.
   • Optimize Performance: Optimize the page for faster load times and better performance, particularly for users with slower internet connections.

By reflecting on the process and achievements, I can continuously improve and adapt the webpage’s effectiveness.