██FR█████ █INTELL███████████

Frontend Challenge v24.07.24


This content originally appeared on DEV Community and was authored by Ilker Ozturk

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

What I Built

For this challenge, I created a landing page for the New York Recreational Cricket League. The goal was to design a modern, user-friendly interface that effectively communicates the league’s offerings and engages potential members. The page features:

A Header: Showcases the league’s name and a call-to-action button for contacting us.
A Navigation Bar: Provides smooth navigation between different sections of the page.

Main Sections:

  • About the League: Details about the league and its benefits.
  • Location of Games: Information on where games are held and how to get there.
  • Season Schedule: Highlights important dates and events for the upcoming season.
  • Membership Info Dialog: A modal with detailed membership options and benefits, accessible from a button within the “About” section.

Demo

Deployed(live) Website: Click to go website
Source Code: Click to go website
Feel free to contribute 🙂

Journey

Process and Learning

  • Design & Development: I used Tailwind CSS for its utility-first approach to create a responsive and visually appealing layout. I aimed for a modern design with a focus on usability and accessibility.
  • Dialog Implementation: Implemented a modal dialog for membership information that pops up when a button is clicked, enhancing user engagement.
  • Page Transitions: Added smooth transitions between sections to provide a seamless user experience.

  • Loading Animation: Included a loading animation that fades out after a short delay to enhance perceived performance.
    Challenges & Solutions

  • Navbar Overlap with Dialog: Ensured that the dialog does not interfere with the navbar by using z-index effectively.

  • Responsive Design: Tested the layout on various screen sizes to ensure responsiveness.

  • What I’m Proud Of

  • Interactive Features: The modal dialog and dynamic section transitions provide an interactive experience.

  • Responsive Layout: The site looks great on both desktop and mobile devices, thanks to Tailwind CSS.

This project protect under MIT License!


This content originally appeared on DEV Community and was authored by Ilker Ozturk