Frontend Challenge v24.07.24: CSS Art – New York Recreational Cricket League

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

Inspiration

I was inspired to create a responsive landing page for the New York Recreational Cricket League (NYRCL). The idea was to make it visually appealing and interactive while ensuring it looks great on all devices.

Demo

You can check out the live demo of the project here: NYRCL Landing Page

You can find the code for the project on my GitHub repository: frontend-challenge

Journey

This project was a fantastic opportunity to apply modern web design practices. Here are some key aspects of the journey:

  1. Planning and Design:

    • I started by outlining the structure of the page and choosing a color scheme that reflects the vibrant spirit of a recreational cricket league.
  2. Development:

    • I used HTML to structure the content, CSS for styling and ensuring responsiveness, and JavaScript for interactivity.
    • The CSS includes media queries to handle different screen sizes, ensuring a consistent experience across devices.
    • JavaScript was used to add hover effects and smooth transitions, enhancing user engagement.
  3. Challenges and Learning:

    • One of the challenges was ensuring the page is fully responsive. I learned a lot about using flexbox and media queries to achieve this.
    • Another challenge was creating smooth animations and transitions, which required careful tuning of CSS properties.
  4. Outcome:

    • I’m particularly proud of the responsive design and the interactive elements that make the page lively and engaging.
  5. Next Steps:

    • I plan to add more interactive elements, such as a registration form and dynamic content loading.

Conclusion

Participating in this challenge was a rewarding experience, and I look forward to applying these learnings in future projects. Thank you for organizing this fantastic opportunity!


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Cloudy | #1 secure, private, and affordable online storage solutions. Privacy, cookie & data policy.