Overview

As part of the Mayerfeld Practicum Program, our 4-person team was tasked with building a full multi-page responsive web application named SeaFairing based on client specifications. The objective was to recreate provided visual design references with precise fidelity while structuring a dynamic 3 to 5-page website architecture entirely from scratch.

The Challenge

The client provided specific visual layouts, target typographic hierarchy (Roboto font integration), and color palettes without pre-defined web content or code dependencies. The main constraint was strict technology limitation: frameworks, CSS preprocessors (SASS), or external UI libraries were prohibited, requiring pure Vanilla HTML5 and CSS3. Additionally, coordinating a 4-developer team on a single codebase required strict Git workflows to avoid styling conflicts, ensure cross-device responsiveness, and maintain uniform design execution across all subpages.

Our Approach

To ensure structural clarity and efficient teamwork, we executed a phased development strategy:
     - UX Prototyping & Wireframing: Prior to writing code, we proactively designed a foundational wireframe in Figma. This established a unified visual grid, structural breakdown, and page flow to align the team's execution.

     - Progressive Semantic HTML: Following best development practices, we mapped out section-by-section HTML structures before applying styles, ensuring clean DOM trees and proper content flow.

     - Vanilla CSS System & Typography: Configured global CSS custom variables for strict adherence to client guidelines (colors, line heights, font weights, and Roboto typography integration).

     - Layout Architecture (Flexbox): Implemented modern CSS Layout modules (Flexbox) section-by-section (Header/Navigation, Hero Section, Content Blocks, Multi-Page Views, and Footer) to achieve responsive alignment across device breakpoints.

     - Git Collaboration: Managed a shared GitHub repository with component-based ownership and peer code reviews, ensuring consistent CSS naming conventions and clean merge conflict management.

Project Gallery

Results

The finished SeaFairing web platform was successfully delivered within the practicum scope, providing an intuitive, multi-page web experience:
     - High Visual Fidelity: Replicated the client's design blueprints with high precision in spacing, typographic hierarchy, and visual consistency.

     - Responsive Multi-Page Architecture: Delivered a fluid four page structure featuring seamless navigation and cohesive branding across all viewports.

     - Clean & Framework-Free Codebase: Built a light, accessible, pure HTML5/CSS3 application operating with optimal load speed and zero external dependencies.

     - Streamlined Team Synergy: Managed a clean collaborative GitHub repository among all 4 members, demonstrating effective workflow organization and version control.