La Abuela — Comfort Food from Madrid

La Abuela — Comfort Food from Madrid 🍲

A cozy, fully accessible landing page for an imaginary family restaurant in Madrid, built from scratch with vanilla HTML, CSS and JavaScript for the DEV Frontend Challenge: Comfort Food Edition.

🔗 Live demo: https://laabuela.bmops.tech

💻 Interactive pen (CodePen):

---

The story

La Abuela ("the grandmother") is a tiny four-table restaurant in Lavapiés, Madrid. In 1987, Abuela Carmen opened it with one rule: if it wouldn't be served at her Sunday table, it wouldn't be served here. Forty years later, the menu still has three dishes — caldo, croquetas, lentejas — and the pot still simmers for three hours.

The page tells that story through a warm terracotta-and-cream palette and five illustrations drawn entirely in pure CSS — no images, no SVG, no canvas.

What I built

• Hero — a clay pot in pure CSS: gradient body with layered inset shadows for volume, decorative band, handles, a two-tongued fire with a glowing core, a wooden table with grain, a light sweep across the heading, and animated organic steam
• Our story — a bowl of caldo with a wooden spoon and a terracotta heart, all divs and box-shadows
• The menu — three dish cards, each with its own pure-CSS illustration: a steaming bowl of caldo, three golden croquetas with crispy texture and a pool of salsa, and a dark bowl of lentils with nine individual grains
• The recipe — an accessible accordion unlocking Abuela's caldo, step by step
• Quotes — from regulars (including one from Osaka who cried into the caldo)
• Booking form — with inline validation, clear labels and a friendly confirmation
• Footer — hours, address, and a wink to Carmen

The art is pure CSS — no images, no SVG

Every illustration is built the way : nested absolutely-positioned divs, layered box-shadow (inset shadows give the clay its volume and the croquettes their crust), organic border-radius, and radial gradients for light. The pot alone uses four shadow layers to feel round instead of flat.

• The steam is animated with pure CSS keyframes (and disabled for users who prefer reduced motion)
• The croquettes' golden heart is an inset highlight — no image, no filter trick
• The lentil grains are nine individual divs with their own tiny highlights
• Total: zero <img>, zero <svg>, zero canvas — one file, ~37 KB

Accessibility (it was the first requirement, not an afterthought)

The challenge judges accessibility — so I treated it as a feature:

• ✅ 0 violations on axe-core (serious + moderate)
• ✅ WCAG AA contrast on every text element (I darkened the primary buttons after the first axe pass)
• ✅ Skip-to-content link, one h1, logical heading order (h2 → h3, no skips)
• ✅ Semantic landmarks (header, main, footer, section with aria-labelledby)
• ✅ Keyboard navigable: hamburger menu, accordion and form all work with Tab/Enter
• ✅ Visible :focus-visible outlines on every interactive element
• ✅ aria-expanded on nav toggle and accordion buttons, role="region" + aria-label on panels
• ✅ Live region (role="status") for form feedback
• ✅ prefers-reduced-motion — animations, steam and scroll reveals are disabled for users who ask for it

Responsive

Tested at 390px, 360px, 820px and 1440px viewports: no horizontal overflow, no console errors, hamburger navigation kicks in on mobile, grids collapse gracefully, and the illustrations scale down with transform.

What I learned / enjoyed

• Chasing axe-core to zero violations is a great discipline — the color-contrast pass caught a button I would have shipped as-is
• grid-template-rows: 0fr → 1fr makes a silky pure-CSS accordion with no height hacks
• Layered inset box-shadows are the entire trick behind "3D" CSS art — one shadow is flat, four shadows are clay
• Drawing food in pure CSS is harder than cooking it. The croquettes took three tries and still look suspiciously like planets
• A 100% vanilla stack keeps the page ~37 KB and instantly embeddable anywhere

Tech

HTML5 · CSS3 (custom properties, grid, layered box-shadow art, media queries, prefers-reduced-motion) · Vanilla JS (IntersectionObserver, ~90 lines) · Zero dependencies · Zero images · Zero SVG

---#frontendchallenge

Built for the Frontend Challenge: Comfort Food Edition · All recipes belong to Carmen.

Comments

[TukTuk Tour]

TukTuk Tour provides private guided tours across Madrid, helping visitors discover iconic landmarks, historic streets, and hidden gems comfortably with a local guide. For travelers looking for a convenient way to explore the city, Tuk Tuk Tour Madrid offers private experiences for up to 4 passengers.