FrapXel
HTML x CSS - Complete Website
Overview
Complete responsive website built with pure HTML and CSS, showcasing modern web design principles.
The Problem
A client needed a fast, lightweight, and maintainable website without the overhead of a CMS or framework. The design needed to be modern, accessible, and performant.
Architecture & Approach
Built a complete multi-page website using semantic HTML5, modern CSS (Grid, Flexbox, Custom Properties), and minimal vanilla JavaScript for interactions. Optimized for Core Web Vitals with critical CSS inlining, image optimization, and no render-blocking resources.
Technology Stack
Key Features
Semantic HTML5
Proper document structure with landmarks, headings, and ARIA labels.
Modern CSS Layout
CSS Grid and Flexbox for responsive layouts without frameworks.
Design System
Custom properties for colors, spacing, typography — easy to maintain.
Performance Optimized
Inlined critical CSS, preloaded fonts, optimized images, no JS frameworks.
Accessibility First
WCAG 2.1 AA compliant — contrast, focus states, skip links, landmarks.
Progressive Enhancement
Core content works without JS; interactions enhance the experience.
Lessons Learned
You don't need a framework for most marketing sites — vanilla HTML/CSS/JS is often faster to build and maintain.
CSS Custom Properties are a game-changer for theming and maintenance.
Performance budgets (LCP < 2.5s, CLS < 0.1) should be set before writing code.
Accessibility isn't a checklist — it's a design constraint that improves UX for everyone.