Excursion — Static Landing Page Build
Front-End Developer (HTML + CSS) Design Interpreter (Redlining, layout breakdown) UX Integrator (Ensured fidelity to original intent)
Design-to-Code Implementation
The Problem
I was given a static design concept for Excursion, a fictional travel app, and challenged to bring it to life in the browser. The original design was not made in Webflow — it required direct HTML and CSS implementation based on manual redline inspection and careful layout translation.
A clean, responsive static landing page coded from a concept design using only HTML and CSS — ready for live deployment.
Goals
- Recreate the concept exactly in HTML/CSS — no drag-and-drop tools
- Maintain spacing, hierarchy, and visual integrity across devices
- Build a static landing page that could be dropped into a live site immediately
My Approach
- Redlining the Design: Used design specs (margins, type sizes, alignment) to plan clean CSS classes
- Responsive Grid: Structured the layout to work on mobile and desktop using semantic HTML and percentage-based spacing
- Optimized Visuals: Chose proper image formats and compression for loading performance
- CTA Fidelity: Ensured that all button styles and placements aligned with the design’s messaging rhythm
Technical Notes
- Built with HTML5, CSS3 (no frameworks)
- Organized for maintainability with reusable utility classes
- Fully responsive down to 375px (iPhone 8+)
- Can be extended into React/Webflow if needed