Build your cultural food project.

Start with your own food experience

Choose foods you know and care about. They can connect to your cultural background, region, neighborhood, mixed traditions, or chosen community. Write from your own experience. You do not need to represent an entire culture.

Open index.html to preview your site. Edit a copy of the folder and keep assets and pages in their current locations. No build or installation is needed to view the website.

Square brackets show text to replace. Longer paragraphs tell you what to write. Replace both with your final content. Keep useful interface labels such as Home, Menu, and Contact.

What to write on each page

• Home — index.html: Add your project name, a short headline, a 2–3 sentence introduction, three featured dishes, and an invitation to explore your story.
• Menu — menu.html: Each of the 27 cards has a different prompt. Choose the cards you need, name the dishes, describe ingredients and flavors, and explain a personal connection. Replace or remove [Price].
• Our story — about.html: Introduce your influences and describe a specific food memory. Add details about an ingredient, someone who inspired you, and a tradition.
• Blog — blog.html and pages/blog/blog.html: Replace card titles and summaries with your finished story headlines and short previews. Keep both listings consistent.
• Articles — pages/blog/blog_1.html through blog_7.html: Follow each page's prompts about recipes, celebrations, memories, ingredients, skills, or changing traditions. Replace the prompts with paragraphs, then add captions and sources.
• Contact — contact.html: Add approved class-event details or clearly fictional restaurant details. The form is only a preview and does not send or save entries.

Keep the same names and descriptions wherever a dish or story appears. Headers, footers, and contact sections repeat across pages, so update every copy. Replace each page's <title> and meta description with a unique, accurate summary.

Choose your words with care

Use dish names in the language you know, with a translation or explanation when useful. Describe your household's version instead of claiming that everyone prepares or eats it the same way. Cite research about history or origins and credit recipes or interviews. Do not invent a personal experience.

Rename a menu category

Change the visible category name, the card's data-category, and the matching button's data-filter to exactly the same value. Keep the Everything button's value as all. Blog filters work the same way.

Image dimensions and file-size targets

The placeholders are small, locally stored SVGs. Their labels show the recommended size for the photos you will add. SVGs scale without needing separate mobile files. The real photos should use compressed WebP or AVIF files; use JPEG when your editing workflow needs it.

These are practical project budgets, not ranking requirements. There is no universal “SEO image size.” Preserve image quality and the listed aspect ratio. The website scales images to fit the screen; do not enlarge a small or blurry original to meet a pixel target.

Download the complete image inventory ↗

The CSV lists all 50 placeholder files, their uses, exact dimensions, actual byte sizes, and suggested replacement budgets. Social icons and the favicon are too small for readable dimension labels, so their sizes are listed here.

Replace an image without breaking the layout

1. Choose your own image or one you have permission to use. Crop it to the ratio in the table and export it at the recommended dimensions.
2. Save the photo in assets/images/. Use a descriptive lowercase filename such as family-rice-dish-900.webp. Do not put WebP or JPEG data inside a file ending in .svg.
3. Find the matching <img> element in the HTML. Replace its src, then write accurate alt text. Keep the appropriate width and height so the browser reserves the correct space.
4. If you export two photo sizes, add srcset and sizes. Every listed file must exist. Update all pages that use that image, including Home cards and story listings.
5. In nested blog pages, paths begin with ../../assets/. Preserve that prefix. Replace photo-caption prompts with captions and creator credits.

Example: a responsive menu photo

<img src="assets/images/my-family-dish-900.webp"
     srcset="assets/images/my-family-dish-450.webp 450w,
             assets/images/my-family-dish-900.webp 900w"
     sizes="(max-width:600px) calc(100vw - 40px),
            (max-width:900px) calc((100vw - 62px) / 2),
            (max-width:1100px) calc((100vw - 112px) / 3),
            (max-width:1336px) calc((100vw - 152px) / 3), 395px"
     width="900" height="600"
     alt="[Describe the dish and visible details in this photo]"
     loading="lazy" decoding="async">

Replace the filename and bracketed alt text. For a 900 × 600 card, both exports must retain the 3:2 ratio. Use these sizes values for the three-column menu and blog grids; other layouts need their own values.

For the Home hero use sizes="(max-width:600px) 100vw, 52vw". For an article hero use sizes="(max-width:820px) calc(100vw - 40px), 780px". For the square story image use sizes="(max-width:600px) calc(100vw - 40px), 50vw".

When you add the real hero and story photos, remove the placeholder-only object-fit:contain overrides in the marked student-template section of assets/theme.css if you prefer them to fill their original image frames.

Make your finished images useful and fast

• Describe the actual photo. Useful alt text might be “Rice and beans topped with herbs in a blue serving bowl.” Name a specific dish when you know its name. Avoid keyword lists and unsupported claims about cultural identity.
• Match image and page. Place each photo beside the dish or story it illustrates. Give the page an accurate title and description, and add a caption when it provides helpful context.
• Compress before uploading. Check the export at its displayed size. Aim for the budgets above while keeping the food clear. SVG works well for logos and icons; use photo formats for photographs.
• Keep responsive dimensions. Use matching width and height attributes and responsive CSS. Add smaller photo exports for smaller screens so the browser can choose an appropriate file.
• Load the main image promptly. The Home and article heroes use fetchpriority="high" and eager loading. Images farther down the page use loading="lazy". Do not lazy-load the main hero image.
• Remove every placeholder. Replace prompt text, placeholder alt text, and draft bylines before publishing your finished student project.

Reference: Google Search Central: image SEO and web.dev: image dimensions and loading.

Your logo, icons, and links

Replace assets/placeholders/logo.svg with your own wordmark or point every header and footer image to your new logo file. A 620 × 152 export fits the existing layout. Replace the 32 × 32 favicon reference in each page's head.

The four social icon placeholders currently link here. Replace each icon with a 64 × 64 SVG or PNG and change its link and accessible label to an approved project profile. If you do not need social links, remove that group. Do not leave links pointing to unrelated profiles.

Replace the community image with a relevant photo or an approved location graphic. If you add an actual map, use the correct public location and preserve the map provider's attribution.

Choose one editing workflow

Direct HTML editing: edit the HTML pages and CSS, then preview them. Do not run the generator afterward because it replaces the HTML with generated content.

Template maintenance: edit tools/menu_data.py for menu and story prompts and tools/build_theme.py for shared layouts. Run the builder with Python, then verify every page. This workflow is intended for maintaining the classroom template.

The distributable student ZIP contains the HTML, styles, scripts, placeholder images, this guide, and the image inventory. Original photographs and maintenance tools are not included.

Before you share your finished project

• Replace every bracketed heading, instructional paragraph, example detail, and image placeholder.
• Make sure each story reflects your own experience and credits any researched material.
• Check that every image loads, has the correct ratio, and includes meaningful alt text where needed.
• Check all navigation, category filters, story search, and links at desktop and phone widths.
• Keep classroom prices and restaurant details clearly labeled if fictional. The form remains a non-working preview until connected to a real service.
• Check page titles, descriptions, captions, creator credits, and filenames against your final content.