A full public site for a PPR-certified coach on the Main Line (Havertown, Wayne, Radnor, and nearby). Live at pickleballcoachmattryan.com — built from scratch with HTML, CSS, and JavaScript. My first real client project.
Built with
HTML · CSS · JS
Timeline
~1 week
Live URL
pickleballcoachmattryan.com
Matt is a PPR-certified pickleball coach serving Havertown, Wayne, Radnor, and the Main Line. He needed a single credible home on the web — somewhere new players could understand who he is, what he offers, and how to book private, semi-private, or group sessions (including his six-week series).
The live site centers on a clear hero (“Train Smarter. Play Better.”), proof (certifications, reviews, Selkirk partnership), concrete locations, transparent pricing, and scheduling. The goal was a real small-business site, not a generic template. I built it from scratch in HTML, CSS, and JavaScript.
Above-the-fold messaging for Main Line coaching, with paths to book a session and explore coaching. Skip link and a clear site structure (Coaching, Pricing, Locations, Contact) so visitors land and know where to go.
PPR Level 1 certification spotlight with certificate access, plus Radnor Middle School club, Selkirk brand ambassador, and background-check language — the “why trust Matt” block before the long scroll.
About Matt with credibility bullets (hours on court, formats, clearances for minors). A testimonials section with strong social proof, and a Selkirk advocate module with promo code and link to shop.
Three coaching locations (e.g. Westgate Park, The Grange, Radnor Middle School) with map links. Coaching philosophy and “what clients improve,” then pricing for private ($65/hr), semi-private, small group, and the six-week series CTA.
Calendly for scheduling, with an honest “fully booked” state that routes people to email for the waitlist — so the site stays useful even when the calendar is full.
Built mobile-first so someone who finds him from Instagram or search gets the same clarity on a phone as on a desktop.
I learned to get the HTML layout solid before adding any CSS. When I jumped to styling too early I kept having to go back and fix the foundation.
Working with real copy and real information (not placeholder text) forced me to make design decisions I wouldn't have made otherwise. It made the site feel real.
The first version looked fine on my laptop and broken on my phone. I rebuilt a lot of the layout using flexbox and media queries — a big learning curve but worth it.
I used Cursor to help me build and debug this. When something broke I'd ask why, and it would explain. That back-and-forth is how I actually learned — not just copying code.
The full site is published and actively being used.