MediumWeb Development

Mobile-friendly menu website for a restaurant

Build a fast, mobile-first menu page with categories, veg filter, search and an 'order on WhatsApp' button.

Skills: HTML, CSS, JavaScript, responsive design

Small restaurants often share a blurry photo of their menu on WhatsApp

The problem

A family restaurant shares a photo of its printed menu on WhatsApp. Customers can't read it on their phones, and prices are outdated.

Build a one-page menu website the owner can update by editing a single data file. Most customers will open it on a phone over a slow connection.

01Load menu items (name, category, price, veg/non-veg, available) from one JSON or JS data file
02Show items grouped by category with a sticky category bar
03Add a 'Veg only' toggle and a search box that filter instantly
04Hide unavailable items, or show them greyed out
05Let the customer add items with quantities and see the running total
06An 'Order on WhatsApp' button opens WhatsApp with the order text filled in
07Look good on a 360px-wide phone and load fast (no heavy frameworks needed)

Stuck? Show hints (4)

Render the list from data with a single render() function and call it after every filter change
WhatsApp link: https://wa.me/91XXXXXXXXXX?text= + encodeURIComponent(message)
Use CSS position: sticky for the category bar
Test on a real phone with the network throttled to 3G in DevTools