A multi-page hiking trail website built from wireframe to live deployment — designed for nature lovers across Texas, Oklahoma, Missouri, and Arkansas.
Solo project — responsible for every aspect of design and development.
Following a structured workflow helped manage scope within a tight 6-week timeline, moving from high-level planning through iterative implementation.
Established site goals, target audience, and a 6-page sitemap covering Home, Trails, Gallery, News, Contact, and a detail page.
Created low-fidelity wireframes then refined into Figma mockups with a defined color palette, typography, and component patterns.
Implemented HTML/CSS page by page, starting with index.html. Used CSS custom properties and Flexbox/Grid for layout consistency.
Published to GitHub Pages, debugged image paths, validated HTML with W3C, and integrated Google Analytics for traffic tracking.
Color System
The palette was derived from the landscape itself — warm parchment backgrounds evoking worn trail maps, earthy greens reflecting forest canopy, and terracotta accents referencing Texas Hill Country rock. All colors were defined as CSS custom properties in :root for consistency across all 6 pages.
Kept navigation as a single top bar with 5 direct links — no dropdowns or nested menus. This reduced cognitive load for users who arrive with a specific page in mind (e.g., finding a trail), and made responsive design simpler: the menu collapses cleanly on mobile.
All colors and key spacing values were defined as CSS variables in :root, shared across pages via a single linked stylesheet. This ensured visual consistency without duplicating declarations, and made future updates a single-line change.
Base styles were written for mobile, then progressively enhanced for tablet and desktop using CSS Grid and Flexbox breakpoints. The gallery page in particular required careful grid adjustment — shifting from 1 column on small screens to a 5-column masonry-style layout on desktop.
Rather than reusing the same generic description, each page received a unique meta description and relevant keywords tailored to that page's content. This was one of the more satisfying course discoveries — understanding how page metadata connects design intent to search visibility.
Every project has friction. Here are the three most significant technical challenges I faced and what I did to resolve each.
My initial HTML failed the W3C validator due to incorrect nesting — particularly around <iframe> elements embedded inside <section> and <article> tags. The error messages were dense and hard to interpret at first.
Locally, all images rendered correctly. After pushing to GitHub Pages, a significant number of images disappeared — the result of case-sensitive file path differences between Windows and Linux file systems.
Several sections — particularly the card grid on the homepage and the trail comparison table — broke unpredictably at certain viewport widths. Elements overlapped or collapsed in unexpected ways that didn't appear in the desktop preview.
Each page was designed to serve a distinct user need while sharing the same navigation, footer, color system, and typographic rhythm.
Hero slideshow, featured trail cards, testimonials section, and footer with email link.
Trail comparison table with difficulty ratings, distances, and highlights for 10 trails.
Photo grid of 20+ self-shot trail photos plus an embedded YouTube video highlight reel.
Trail closures, policy updates, and hiking news with 10+ sourced external links.
6-field contact form with file upload, consent checkbox, and accessible field labels.
Detailed trail guide with personal narrative, tips list, embedded video, and Garner State Park context.
Looking back at this project with fresh eyes, here's what I learned and what I'd approach differently next time.
View the live site or browse other projects in my portfolio.