BC Travel Guide

Destinations as stories

The site organizes British Columbia destinations through images, written introductions and video. Navigation and page hierarchy keep a growing set of places understandable on both desktop and mobile screens.

Six story cards introduce Vancouver, Vancouver Island, Whistler, the Sea-to-Sky Highway, Stanley Park and Capilano Suspension Bridge. Featured videos, a travel photo wall, contact information and an embedded map broaden the site beyond a simple destination list.

A responsive reading flow

HTML and CSS establish the editorial structure, while JavaScript supports interactive behaviour. The layout adapts from large image-led pages to compact mobile reading without hiding essential content.

Anchor navigation moves between Stories, Explore More, Videos and Contact Us. A prominent sign-up action scrolls smoothly to the subscription form, and media cards preserve a consistent hierarchy as the viewport narrows.

One template, six data-driven pages

Destination links open one shared story template with a story key in the URL. Vanilla JavaScript reads the query parameter, selects the matching record and renders its title, image, introduction, travel tip, quick facts and related-story links.

Keeping the destination content in a structured JavaScript object avoids duplicating six nearly identical HTML pages and makes the story collection easier to extend.

Optional subscription workflow

A PHP and MySQL path extends the static experience with a local subscription workflow, connecting interface design with basic server-side data handling.

The XAMPP setup script creates a subscriptions table containing visitor name, email, favourite article and submission time. A PHP form handler inserts records through a prepared PDO statement, while a separate page retrieves subscribers in reverse chronological order and escapes displayed values.

A static demo with a local server extension

GitHub Pages publishes the responsive frontend, including destination stories and media. Because static hosting cannot execute PHP or connect to MySQL, JavaScript detects unsupported form contexts and directs the user to run the project through XAMPP before submitting.

Frontend anywhere, subscriptions through XAMPP

The published link demonstrates the full frontend. To use subscriptions, place the project in the XAMPP web root, configure the database connection, run php/setup.php once, then open the site at localhost so PHP and MySQL can process and display subscriber records.