Early front-end projects often rely on messy positioning hacks or floating elements that break easily on different screens. For DryOar, the entire layout structure was built using CSS Grid to create a dependable, multi-column system. By defining explicit grid tracks for the river rafting imagery and historical text blocks, the content scales smoothly across viewports without overlapping or shifting alignment unexpectedly.
A functional rafting site requires an easy way for users to plan trips and inputs must stay clean. The reservation form was structured with semantic fieldsets and clear labels to guide users through selecting dates, trip types, and group sizes. Grouping the input elements cleanly balances the visual weight against the bright background colors, making the booking process straightforward and intuitive.
Displaying detailed information like trip names, departure times, difficulty levels, and pricing can easily become unreadable in a standard text paragraph. To solve this, structured HTML tables were implemented to map out the adventure packages. Using semantic table headers and clean row boundaries ensures the data remains perfectly organized, readable, and highly accessible for users comparing different rafting routes.
Large, raw images can easily break a layout grid and slow down performance. For DryOar, I focused on strict asset control by scaling every piece of media down to its exact container size. I also converted the images into modern formats like WebP and AVIF to keep the entire website lightweight, ensuring fast load times while keeping the visual layout perfectly sharp.