What I Built
I built Warm Table, a fictional Taiwanese comfort-soup house inspired by the idea that a warm bowl of soup can make a difficult day feel a little softer.
The landing page features six Taiwanese-inspired soups:
- Garlic Chicken Soup
- Peanut Pig Trotter Soup
- Ginger Duck Soup
- Ginger Sea Bass Soup
- Fo-Ti Herbal Chicken Soup
- Astragalus and Angelica Lamb Soup
Rather than building a full ordering system, I focused on a polished one-page experience that communicates warmth, familiarity, and the patience behind a slowly simmered soup.
The design uses large food photography, soft cream backgrounds, brick-red accents, rounded surfaces, and generous spacing. The main features include responsive navigation, daylight and evening themes, a mood-based soup finder, client-side email validation, and layouts for desktop, tablet, and mobile.
Demo
Source Code
How I Built It
Warm Table was built with semantic HTML, modern CSS, vanilla JavaScript, optimized WebP images, and GitHub Pages.
I intentionally kept the technology stack small because the project did not require a framework, API, database, or build system. This allowed me to focus on frontend fundamentals and keep the structure easy to understand.
CSS Grid and Flexbox handle the layouts, while reusable design tokens define colors, typography, spacing, borders, and shadows. JavaScript manages the mobile navigation, theme switching, soup recommendations, and newsletter form feedback.
The Soup Finder
The feature I am most proud of is the mood-based soup finder.
Visitors choose one of four feelings:
- Something gentle
- I need to warm up
- Something nourishing
- I am truly hungry
The page then updates the recommended soup's image, name, description, character, best moment, and simmer time.
The interaction is small, but it supports the comfort-food theme and gives visitors something meaningful to do without turning the project into a full restaurant application.
Accessibility and User Experience
Accessibility was part of the page structure from the beginning.
The project includes semantic landmarks, a logical heading structure, visible focus states, descriptive image text, native controls, and support for prefers-reduced-motion.
I also used:
-
aria-expandedfor responsive navigation -
aria-pressedfor theme and soup-finder controls - An ARIA live region for form feedback
- WebP images and lazy loading for improved performance
The soup finder uses native buttons instead of clickable div elements, making it easier to operate with a keyboard and understand with assistive technology.
Journey
This project went through several visual directions.
The first version used a CSS bowl illustration and strongly separated sections, but the page felt like a collection of unrelated components. I later explored an editorial style with oversized typography, section numbers, and asymmetrical layouts, but those elements competed with the food photography.
The final version simplified the structure by removing section numbers, reducing heading sizes, replacing abrupt dividers, and using a consistent soup gallery. I also rebuilt the closing section as a contained visit card with a lightweight footer.
The most useful lesson was that adding more visual ideas does not always improve a page. Sometimes removing an element creates a stronger and more cohesive experience.
AI and Image Disclosure
The food images were generated with Gemini.
I also used AI tools for brainstorming, layout iteration, content refinement, and code assistance. I reviewed and adjusted the final structure, responsive behavior, interactions, accessibility attributes, and written content throughout the project.
What I Learned
This project helped me practice responsive design, accessible JavaScript interactions, visual hierarchy, image optimization, and iterative design.
The biggest lesson was that visual consistency matters more than the number of effects or components on a page. A landing page can remain technically simple while still feeling complete and intentional.
What I Would Do Next
Future improvements could include connecting the newsletter form to a real service, saving the selected theme with localStorage, adding subtle recommendation transitions, and performing additional screen-reader testing.
Top comments (1)
I like that you resisted the temptation to over-engineer it. A landing page doesn’t automatically become better because it uses a framework or a complex toolchain. Choosing semantic HTML, CSS, and vanilla JavaScript for a project with this scope is a perfectly valid engineering decision.
The accessibility touches also stand out. Native controls, ARIA attributes, and keyboard-friendly interactions often have a much bigger impact on real users than adding another animation or visual effect. Nice work!