Unit 24 • RF Code & AI
Build a complete website for a Native-owned restaurant, with a tab-switching menu, an about section, a reservation form, and a header that transforms as visitors scroll down the page.
A full restaurant website for Manoomin Kitchen, a fictional Ojibwe-owned restaurant built around wild rice and Indigenous food traditions.
A dramatic dark backdrop with display typography, a location tag, and a call-to-action button that links to the menu.
Four menu categories (Starters, Mains, Sides, Desserts) that switch instantly when a tab is clicked, with no page reload.
A two-column about section with the kitchen's origin story, a pull quote, and a photo placeholder for the space.
A transparent fixed header that turns solid as the page scrolls, a pattern used on nearly every modern website.
Each stage builds on the last. Start at Stage 1 and follow the steps in the left panel.
Stage 1
Design System
CSS variables, Google Fonts, and a full-screen hero section.
14.3%
Stage 2
Menu Cards
12 menu items in a CSS Grid, with data-category attributes on every card.
28.6%
Stage 3
Tab Switcher
JavaScript that shows and hides menu cards when a tab button is clicked.
42.9%
Stage 4
About Section
The restaurant's origin story in a two-column grid with a pull quote.
57.1%
Stage 5
Reservations
A form with date, time, and party-size inputs, plus a simple footer.
71.4%
Stage 6
Fixed Header
A header pinned to the top of the screen with a .scrolled CSS state.
85.7%
Stage 7
Scroll Behavior
JavaScript that reads window.scrollY and toggles the header's visual state.
100%
Research that informed this unit: Indigenous food sovereignty, Native-owned restaurants, and the web concepts you'll use.