Make this template your own.

1. Start with a working copy

1. Copy the entire template folder. Name your copy something recognizable, such as restaurant-project-your-name. Keep the original as your backup.
2. If you received a ZIP, extract it first. Do not edit files while they are still inside the ZIP.
3. Open the copied folder in a code editor. Open index.html in a browser in a separate window.
4. Make one small change, save with Ctrl+S, and refresh the browser with Ctrl+R. Confirm that the change appears before doing more.

A browser displays the page; your editor changes the saved file. Changes made only in the browser’s developer tools are temporary. Use a plain-text code editor rather than a word processor.

Opening index.html directly works for this template. An editor’s local preview server is optional. A localhost address such as http://127.0.0.1:8768/ works only while a server is running; it is not a public website address.

2. Find the right file

Use Ctrl+F inside a file to find a phrase you see on screen. Use your editor’s folder-wide search to find the same text on multiple pages.

3. Edit text and headings

HTML tags describe the role of content. In <h1>Welcome</h1>, the text is Welcome; the tags identify the main heading. Preserve the opening and closing tags when replacing the words.

In index.html, find Made with love. Replace the complete heading with this classroom example:

<h1>Fresh flavors.<br>Good food.<br><em>Great company.</em></h1>

<br> inserts a line break. <em> adds emphasis. Change the paragraph below the heading to introduce your own restaurant concept.

• Keep one clear main <h1> for each page, then use <h2> and <h3> for smaller headings.
• Write & for an ampersand in HTML, such as Pasta & Pizza.
• Leave class, id, and data-* attributes alone unless an exercise specifically changes them. They connect the design and interactive behavior to the content.

4. Edit the food menu

Open menu.html and find a dish name. Each dish is one complete <article class="menu-item">…</article> block.

Change a dish

Edit its heading, price, and paragraph. The current menu uses 20 words per description. Matching this convention helps keep cards balanced; the CSS aligns their rows, and the number of visible lines will still vary with screen width.

Add a dish

Copy an existing article and paste it inside <div class="menu-list" id="menu-items">, next to the other dishes. Give it a new ID. This ready-to-try example reuses an existing photograph:

<article class="menu-item" data-category="Appetizers" id="garlic-bread-special">
  <img class="menu-photo"
    src="assets/images/garlic-bread.jpg"
    srcset="assets/images/garlic-bread-480.jpg 480w,
            assets/images/garlic-bread-720.jpg 720w,
            assets/images/garlic-bread.jpg 1440w"
    sizes="(max-width:600px) calc(100vw - 40px),
           (max-width:900px) 50vw, 33vw"
    width="1440" height="808"
    alt="Garlic bread with butter and parsley" loading="lazy">
  <div class="eyebrow">Appetizers</div>
  <div class="meta">
    <h3>Garlic bread special</h3>
    <span class="price">$9</span>
  </div>
  <p>Golden slices of rustic bread brushed with garlic butter and fresh parsley, toasted until crisp outside and deliciously soft inside.</p>
</article>

To remove a dish, remove its entire article block. Search the project for links to its ID and update those too. A featured dish on the home page is a separate copy: changing the menu does not automatically change its home-page title, description, or price.

To introduce a new category, add a matching button in the filter bar and use the same spelling in the dish’s data-category. Existing category buttons automatically include new matching cards.

5. Replace photographs

All 27 menu photographs use JPEG (.jpg), with 480, 720, and 1440 pixel versions for responsive layouts. Put new food photographs in assets/images/ and export them as JPEG; renaming an extension does not convert a file. Use short lowercase names with hyphens, such as student-pasta.jpg. Use photographs you are allowed to use and keep their source information.

Option A: use another existing menu photo

Copy the existing dish’s complete <img> tag, including srcset, sizes, width, and height. For a different section, preserve the destination’s layout class: a menu photo needs class="menu-photo", while a full blog story uses class="article-hero".

Option B: add one new photo

1. Export your photo at a reasonable web size. For this example, use a 1200 × 800 pixel JPG named student-pasta.jpg.
2. Save it in assets/images/.
3. Replace the old image tag with the example below. If your image has different dimensions, use its actual width and height.

<img class="menu-photo"
  src="assets/images/student-pasta.jpg"
  width="1200" height="800"
  alt="Pasta with tomato sauce and fresh basil"
  loading="lazy">

Menu cards show a 3:2 crop. A tall or square photo may lose its top and bottom. To move the subject within its frame, add a targeted rule at the end of assets/theme.css:

#garlic-bread-special .menu-photo {
  object-position: center 35%;
}

Use helpful alt text for informative images. Some blog thumbnail links deliberately use alt="" and are hidden from assistive technology because an adjacent title link supplies the same destination; preserve that pattern when copying a blog card.

6. Edit blog stories and preview cards

A blog preview is not the article itself. Edit both so the image, headline, summary, and destination agree.

1. Open the full article under pages/blog/. Change its main heading, introduction, article-hero photo, section headings, and paragraphs.
2. For one of the six listed stories, update its preview card in both blog.html and pages/blog/blog.html. The cheesecake story has a home-page preview only.
3. If it is featured in “Notes from our table,” update that card in index.html too.
4. Check all three card links: the image, the title, and “Read the story.” All three should open the same full article. Update the read link’s aria-label to match the new title.

The current blog groups are Kitchen notes, At the table, and Sweet endings. Preserve the exact capitalization in data-category and data-filter. Choose a different, relevant photograph for each story; the article’s main photo should match its blog card.

Understand paths from different folders

Each ../ means “go up one folder.” From pages/blog/, two of them take you back to the template root.

Keep the blog grid balanced

To preserve the current symmetry, replace an existing preview card when introducing a new story. Keep six cards in each listing and two in each category. Copy the complete <article class="food-card">...</article> block when editing the layout; preserve its shared image proportions and all three links. When removing a preview, remove the same card from both listings and update the initial data-result-count text in blog.html. Do not delete a full article until you have checked home-page cards and “Next story” links for references to it.

Optional: create another article

Copy pages/blog/blog_3.html to pages/blog/blog_8.html (the next unused article filename). Replace its story, photo, title, description, and keywords. Replace one existing preview in each blog listing and change all three links to keep the six-card layout. If your assignment calls for more cards, add matching previews to both listings and check the resulting rows at each screen size. In the nested listing, use blog_8.html; in the root listing, use pages/blog/blog_8.html. If the number of preview cards changes, update the initial story count. Review any “Next story” links. The search and filters will include the new card when its category matches.

7. Change colors and branding

The first :root block in assets/theme.css holds the shared theme settings. Its compact formatting is normal; use Find to locate a variable.

Change one color at a time. Keep dark text on light backgrounds readable, including the small menu descriptions and navigation labels. Resize the browser after any font change; longer headings can wrap differently.

The visible restaurant name is in assets/logo.png. Create your wordmark in an image or design editor and export a transparent PNG. The current image is 1240 × 304 pixels; keep the same proportions to fit the header and footer. Replace the PNG file, then update image alt text, brand-link aria-label text, and restaurant-name references in the HTML. Social icons also use transparent PNG files in assets/icons/.

For a small layout experiment, append a clearly commented rule at the end of theme.css. Avoid repeatedly adding competing overrides. Keep the existing responsive media queries and test both wide and narrow screens.

8. Navigation and links

<a href="blog.html">Blog</a>

Blog is the visible label; href is the destination. You can change the label without renaming the file. Keep the relative ../../ prefix when editing article pages.

Headers and footers are repeated in each HTML page. Use folder-wide search to update every copy. Preserve aria-current="page" on the active navigation link: it supplies the selected-page styling and an accessibility cue.

For social links, replace the platform homepage URL with the intended profile URL. Preserve rel="noopener noreferrer" on links using target="_blank". To link to a dish, use its exact ID, such as menu.html#pistachio-gelato.

9. Contact details, map, and reservation preview

Search for FIND US and DINNER HOURS. These details repeat in the contact section across the site, not just in contact.html. Replace sample information consistently.

For the map, use the embed code for your intended location. Update the iframe’s src, its descriptive title, the neighboring map link, and the visible location text. Preserve the map provider’s attribution. The map needs an internet connection.

10. Titles and search metadata

Near the top of every HTML page, inside <head>, edit the title, description, and keywords. The title appears on the browser tab; the description summarizes the page for services that use it.

<title>Pasta &amp; Pizza Menu | Student Bistro</title>
<meta name="description"
  content="Explore Student Bistro’s classroom menu of pasta, pizza, appetizers, and desserts, with dish photos, ingredient descriptions, and sample prices.">
<meta name="keywords"
  content="Italian menu, pasta, pizza, appetizers, desserts">

“Student Bistro” is an example name. Give each page a unique, accurate title and description. Use only relevant keywords. Keep exactly one title, description tag, and keywords tag per page.

Keyword tags are included in this template, but Google does not use them for indexing or ranking. No tag guarantees a ranking or the exact words a search engine will display.

11. Practice assignment

Goal: create a clearly personalized classroom restaurant site while keeping the menu and blog functional.

1. Choose a restaurant name and rewrite the home-page headline and welcome paragraph.
2. Edit three dish names or prices. Write a 20-word description for each.
3. Add one appetizer with a unique ID and a working photo. Confirm it appears under Appetizers.
4. Change the accent color and check readability on desktop and mobile.
5. Update one blog preview and its full article. Click its image, title, and read link.
6. Give the home page, menu, and edited article their own title and meta description.
7. Record the files you changed and explain one problem you solved.

Suggested submission: your edited folder or fresh ZIP, one desktop screenshot, one narrow-screen screenshot, and a short change log. Follow your instructor’s naming and submission rules.

12. Test and submit

• All edited files are saved, and the browser is showing the correct project copy.
• Every page opens; navigation and footer links go to the intended destinations.
• The menu’s Everything and category buttons show the right dishes.
• Blog search, category filters, and all three links on each edited preview work.
• Photos load at both wide and narrow window sizes; titles and descriptions remain readable.
• No duplicate dish IDs, clipped text, or unwanted horizontal scrolling appear.
• Images and story topics match; home-page featured content agrees with its destination.
• Titles and descriptions match the page. The form still clearly identifies itself as a preview.
• Tab navigation reaches links and controls, and keyboard focus is visible.
• The finished copy opens after you move or extract it into a different folder.

For a simple screen-size check, try a wide desktop window and a narrow phone-sized view around 390 pixels. Also try the menu at approximately 768 pixels. Use your browser’s device preview if available.

Create a fresh ZIP

The ZIP already in output/ is an earlier export; editing HTML does not update it. For a manual student submission, copy the current website HTML files, assets/, pages/, and applicable licenses/ into a clean submission folder. Include this guide if requested. Compress that folder and test the extracted copy. Follow your instructor’s directions about including development sources; avoid bundling unrelated reference backups.

13. Troubleshooting

14. Instructor appendix: source-based editing

The workspace also contains generation scripts. This is a separate workflow for an instructor or a class learning Python. Decide which method the class will use before editing.

With Python installed and the terminal opened in the template root, the generator command is:

python tools/build_theme.py

It rewrites the generated HTML from source. Preserve manual changes before using it. Shared CSS and JavaScript are edited directly. For new source-based photos, supply all referenced responsive files and a dimensions entry before building.

The home-page cards are selected by cards(indices=(0,1,6), ...). These numbers are zero-based: they mean the first, second, and seventh entries in POSTS. The home page also has image overrides for its first two story previews. Blog listings and full articles use each post’s image value. The cheesecake entry has 'listed': False; BLOG_POST_INDICES selects the other six entries for both blog listings and their displayed counts. The full cheesecake article is still generated. A new post is listed by default unless it also sets 'listed': False.

Adding a generated article updates the listing count automatically, but you should still review grid balance and the packaging/QA page counts. The packaging script includes the current HTML pages, this student guide, license records, JPEG food photos, PNG branding/icons, CSS, and JavaScript. It includes README and asset-license notes when those files are present. It leaves out source SVGs, old WebP derivatives, and unused PNG food originals. Use python tools/package_theme.py to refresh the ZIP after checking your edits, or use the manual submission method above.

This guide is a separate classroom handout. It uses its own styling and does not change the restaurant site’s design.