←  Kodi Alex Case 05

Nonprofit · Hyderabad, India · Serving since 2005

Smile Always

I designed and built the website for Smile Always Foundation in Hyderabad. It brings together their work in child care, clean water, women’s empowerment, community development, and emergency relief, with programme pages and a donation checkout.

smilealways.org
RoleDesign & build, solo
Built withHTML, CSS & JavaScript
FrameworkStatic website
PaymentsRazorpay checkout
Children crowding together and grinning up at the camera
One of the foundation’s photographs used across the site.

The website

Five programmes, one site.

The foundation does more than one kind of work. I gave each programme its own section, then brought in stories, photographs, and ways to get involved. The homepage introduces all five without making visitors read everything at once.

A few decisions behind the pages ↓
Smile Always campaign artwork with children at a water pump
Campaign artwork used in this portfolio. The yellow gives the photographs a bright, recognisable frame.

What I focused on

01 / design & development
The aimMy approach
01

Organising the programmes

Child care, water, women’s empowerment, community work, and relief each have their own place on the site. Visitors can open the programme they want to read about.

02

Working with their photographs

I used the foundation’s photos throughout the pages, with large images and short captions showing the people and projects behind each programme.

03

Connecting donations

Programme pages lead into the donation flow. I also kept registration and contact details available for people who want to know more about the foundation first.

04

Building the pages

I wrote the site in HTML, CSS, and JavaScript and connected Razorpay checkout. It is a static site, with layouts for phones and larger screens.

What went into it

02 / the build

Design

  • Clear sections for each programme
  • Large photographs with supporting captions
  • Consistent type and spacing across pages

Development

  • HTML, CSS, and JavaScript
  • Layouts that adapt to phone and desktop screens
  • Responsive images and lightweight interactions

Donations

  • Razorpay checkout integration
  • Links from programme pages to giving
  • Registration and contact information close by

Finishing touches

  • Page titles and search metadata
  • Share previews for individual pages
  • Reduced-motion support for animations

How I worked

  1. 01Problem

    Five very different programmes needed to live on one clear site.

  2. 02People

    Donors and volunteers looking for the work they care about.

  3. 03Design

    Each programme gets its own section, carried by the foundation’s own photographs.

  4. 04Build

    HTML, CSS and JavaScript, with stories from the field and a donation checkout.

  5. 05Result

    Child care, water, women’s empowerment, community work and relief, each easy to find.