Soul & Spoon — Comfort Food Landing Page

#frontendchallenge #devchallenge #javascript #webdev

---
title: "Perfect Landing — Soul & Spoon (Comfort Food Edition) — Research Summary"
published: false
tags: ["frontend", "html", "css", "javascript", "accessibility", "performance", "react", "svelte"]
cover_image: "https://images.unsplash.com/photo-1543353071-087092ec393a?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=3"
canonical_url: ""
series: ""
---

Perfect Landing — Soul & Spoon Research Summary

A concise, ready-to-paste DEV post that summarizes the research, design decisions, technical choices, and next steps for the Soul & Spoon landing-page project — a warm, accessible, performance-minded single-page site celebrating soul food.

What I Built

Soul & Spoon — Comfort Food Landing Page is a single-page landing site that showcases soul-food plates with a polished, modern frontend. The static prototype includes:

Hero with a full-bleed background and clear CTAs.
Featured dishes section with responsive cards and descriptive copy.
Gallery of soul-food plates with a keyboard-accessible lightbox.
Contact form with client-side validation and toast feedback.
Responsive, accessible, and performant implementation using semantic HTML, picture/srcset/WebP, lazy loading, and minimal JavaScript.

Research Summary and Rationale

Design goals

Evoke warmth and comfort through color, rounded shapes, and soft shadows.
Prioritize readability and hierarchy for quick scanning on mobile and desktop.
Keep interactions simple and predictable: smooth scroll, accessible modal, and unobtrusive toast notifications.

Accessibility findings

Semantic elements (header, main, section, figure, figcaption, footer) improve screen-reader navigation and SEO.
Keyboard operability is essential: gallery images must be focusable and open via Enter/Space; Escape should close the lightbox.
ARIA attributes (aria-hidden, aria-expanded, role="dialog") plus focus management significantly improve modal usability.

Performance findings

Images dominate page weight; srcset and WebP deliver the best trade-off between quality and size.
loading="lazy" and IntersectionObserver reduce initial payload and improve perceived performance.
Deferring minimal, well-scoped JavaScript keeps the critical rendering path fast.

UX and interaction findings

Sticky header with a mobile nav toggle is a familiar pattern that preserves screen real estate.
Smooth scrolling for internal anchors improves perceived navigation speed and orientation.
A lightweight, dependency-free lightbox is often preferable to adding a third-party library for a simple gallery.

Technical Choices

Markup and semantics

Use semantic HTML for structure and accessibility.
Provide descriptive alt text for all images and figcaption for context.

Images and responsive delivery

Use <picture> with WebP source and JPEG fallback.
Provide srcset entries for multiple widths and sizes so the browser picks the optimal asset.
Example pattern used across hero and gallery images:

<picture>
  <source type="image/webp" srcset="...&fm=webp 400w, ...&fm=webp 800w, ...&fm=webp 1600w" sizes="(max-width:600px) 100vw, 1600px">
  <source type="image/jpeg" srcset="... 400w, ... 800w, ... 1600w" sizes="(max-width:600px) 100vw, 1600px">
  <img src="...&w=1600" alt="Descriptive alt text" loading="lazy">
</picture>

Styling

CSS variables for theme tokens (colors, radii, shadows).
CSS Grid for responsive card and gallery layouts.
clamp() for fluid typography and consistent scaling.

JavaScript

Minimal vanilla JS for:
- Mobile nav toggle with aria-expanded updates.
- Smooth scrolling for internal anchors.
- Keyboard-accessible lightbox with focus management and Escape-to-close.
- Toast notifications for form feedback.
- IntersectionObserver for lazy enhancements.

Journey and Key Learnings

What I learned

Small accessibility details (tabindex, ARIA, focus management) dramatically improve usability.
Image optimization is the single most impactful performance improvement for photo-heavy pages.
Minimal, well-structured vanilla JS can replace heavy dependencies for common UI patterns.
CSS variables and a small design system speed up iteration and theming.

What I’m proud of

The gallery is keyboard-friendly and works well on mobile.
The design balances visual warmth with readable contrast and clear hierarchy.

Next Steps and Roadmap

Image optimization: generate WebP and AVIF variants, add more srcset breakpoints, and host on a CDN.
Form backend: connect the contact form to a serverless endpoint for real signups.
SEO improvements: add JSON-LD for recipes or menu items and structured metadata.
Content expansion: add recipe pages, printable recipe cards, and a small CMS for content updates.
Testing and CI: add accessibility checks (axe), Lighthouse CI, and visual regression tests.

How to preview

Static: Save index.html, style.css, and script.js into a folder and open index.html.
React starter: Use Vite to scaffold a React app and port the static markup into components.
Svelte starter: Use Vite to scaffold a Svelte app and port the static markup into Svelte components.

React or Svelte starter with a README.md.