A restaurant without a website in 2025 is losing reservations to competitors who have one — and a poorly structured site loses them to competitors who have a better one. This tutorial walks you through building a complete restaurant website with HTML, using the Canvas HTML Template as your foundation so you get production-quality code without starting from scratch.
- A restaurant website needs five core sections: hero, about, menu, gallery, and reservations — every other section is secondary.
- Canvas HTML Template’s Bootstrap 5 grid handles mobile-first layout out of the box; no separate Bootstrap CDN import is needed.
- Canvas CSS variables like –cnvs-themecolor let you rebrand every colour touchpoint from a single declaration.
- Reservations and menu CTAs must be above the fold and repeated — diners decide fast and leave faster.
Why Canvas Is the Right Starting Point for a Restaurant Website
Building a restaurant website from a blank file means solving layout, typography, responsiveness, and browser compatibility before you write a single line of business content. Canvas HTML Template solves all of that at the template level. It ships with Bootstrap 5 bundled, a full icon font library via css/font-icons.css, and a documented variable system so you can control brand colour, fonts, and header behaviour without digging through thousands of lines of CSS.
The relevant Canvas section type for a restaurant site is singlepage — one HTML file containing a sticky header, hero section, content blocks, and a footer. This structure suits most independent restaurants, cafes, and bistros perfectly. For a multi-location brand or a site that needs separate menu pages and event listings, fullpage_layout is the better choice.
Canvas also lets you set your brand colour once using –cnvs-themecolor and it cascades through buttons, links, borders, and highlights automatically — far more maintainable than overriding individual selectors.
File Structure and Initial Setup
After purchasing and unzipping Canvas, your working file structure for a single-page restaurant site should look like this:
restaurant/
├── index.html
├── style.css
├── css/
│ └── font-icons.css
├── js/
│ ├── plugins.min.js
│ └── functions.bundle.js
└── images/
├── hero-bg.jpg
├── menu-starter.jpg
└── gallery-1.jpgYour index.html file should load Canvas assets in the correct order. Never add a Bootstrap CDN link — Bootstrap 5 is already bundled inside Canvas’s CSS and JS files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ember & Oak — Contemporary Dining</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-icons.css">
<style>
:root {
--cnvs-themecolor: #8B3A2A;
--cnvs-primary-font: 'Playfair Display', serif;
--cnvs-secondary-font: 'Lato', sans-serif;
--cnvs-logo-height: 50px;
--cnvs-logo-height-sticky: 36px;
}
</style>
</head>
<body>
<!-- content goes here -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>
</body>
</html>The –cnvs-themecolor: #8B3A2A declaration sets a deep terracotta red as the brand colour — a common choice for warm, food-forward restaurant identities. Adjust it once here and every themed element across the page updates automatically. For deeper guidance on colour psychology in this context, the post on Colour Theory for Web Designers: Choosing Palettes That Convert covers how to select palettes that trigger appetite and trust responses.
Building the Hero Section
The hero is the single most important conversion point on a restaurant website. It needs to communicate cuisine style, atmosphere, and a booking action within seconds. Above-the-fold design research is consistent on this: if your reservation CTA is not visible without scrolling, you are losing bookings.
<section id="hero" class="min-vh-100 d-flex align-items-center"
style="background: url('images/hero-bg.jpg') center/cover no-repeat;">
<div class="container text-center text-white">
<h1 class="display-3 fw-bold mb-3" style="font-family: var(--cnvs-primary-font);">
Fire-Kissed Food,<br>Honest Flavour
</h1>
<p class="lead mb-5">Open Tuesday – Sunday, 5 pm – 10:30 pm</p>
<a href="#reservations" class="btn btn-lg px-5 py-3"
style="background-color: var(--cnvs-themecolor); color: #fff; border-radius: 2px;">
Reserve a Table
</a>
</div>
</section>Keep the headline short and sensory — it should evoke the dining experience, not describe the business. The reservation button design follows evidence-backed principles covered in the post on Call-to-Action Button Design: Science-Backed Tips That Drive Clicks: high contrast, large tap target, and action-oriented copy.
Structuring the Menu Section with Bootstrap 5 Grid
A digital menu does not need to replicate the printed version — it needs to be scannable. Use Bootstrap 5’s grid (already included in Canvas) to lay out menu categories in columns that collapse gracefully on mobile.
<section id="menu" class="py-7">
<div class="container">
<div class="text-center mb-6">
<h2 style="font-family: var(--cnvs-primary-font);">Our Menu</h2>
<p class="text-muted">Seasonal ingredients, sourced locally where possible</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="border p-4 h-100">
<img src="images/menu-starter.jpg" class="img-fluid mb-3 w-100"
style="height:200px; object-fit:cover;" alt="Charred Leek Starter">
<h5>Charred Leek & Romesco</h5>
<p class="text-muted small">Wood-fired leeks, house romesco, toasted almonds</p>
<strong style="color: var(--cnvs-themecolor);">£9</strong>
</div>
</div>
<!-- repeat col blocks for additional dishes -->
</div>
</div>
</section>Notice the use of –cnvs-themecolor for the price colour — this keeps pricing visually distinctive without needing a separate utility class. For more on how Bootstrap 5’s column system works inside Canvas, the Bootstrap 5 Grid System: The Complete Beginner’s Guide is worth reading before you start adding more complex multi-column layouts.
Gallery and Atmosphere Section
Food photography is the restaurant’s strongest sales asset online. A simple CSS grid gallery that renders as a masonry-style layout on desktop and a stacked grid on mobile does the job without third-party JavaScript.
<section id="gallery" class="py-7 bg-light">
<div class="container">
<h2 class="text-center mb-5" style="font-family: var(--cnvs-primary-font);">
The Experience
</h2>
<div class="row g-2">
<div class="col-6 col-md-4">
<img src="images/gallery-1.jpg" class="img-fluid w-100"
style="height:260px; object-fit:cover;" alt="Restaurant interior">
</div>
<div class="col-6 col-md-4">
<img src="images/gallery-2.jpg" class="img-fluid w-100"
style="height:260px; object-fit:cover;" alt="Chef at the pass">
</div>
<div class="col-12 col-md-4">
<img src="images/gallery-3.jpg" class="img-fluid w-100"
style="height:260px; object-fit:cover;" alt="Signature dish">
</div>
</div>
</div>
</section>Keep alt text descriptive and specific — “Signature dish” is adequate for a gallery, but “Wood-fired lamb with salsa verde” is better for SEO and screen reader users alike.
Reservations Form and Footer
The reservations section should appear near the bottom of the page and include a repeat of the booking CTA, since users who have scrolled through the full site are now your most qualified visitors. A minimal HTML form is enough; integrate it with a third-party booking service like OpenTable or Resy via their embed code in production.
<section id="reservations" class="py-7">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 text-center">
<h2 style="font-family: var(--cnvs-primary-font);">Make a Reservation</h2>
<p class="text-muted mb-5">
Call us on <strong>020 7000 0000</strong> or book online below
</p>
<form>
<div class="row g-3 text-start">
<div class="col-sm-6">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Your name">
</div>
<div class="col-sm-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="your@email.com">
</div>
<div class="col-sm-6">
<label class="form-label">Date</label>
<input type="date" class="form-control">
</div>
<div class="col-sm-6">
<label class="form-label">Guests</label>
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3–4</option>
<option>5+</option>
</select>
</div>
<div class="col-12 text-center mt-4">
<button type="submit" class="btn btn-lg px-6"
style="background-color: var(--cnvs-themecolor); color: #fff;">
Confirm Booking
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="py-5 text-center text-muted" style="background: #111; color: #aaa;">
<p class="mb-1">Ember & Oak — 14 Broad Street, London EC2A 4PT</p>
<p class="small">© 2025 Ember & Oak. All rights reserved.</p>
</footer>The phone number in the reservations section is intentional — many diners, especially older demographics, prefer to call. Providing both channels removes friction for every visitor type.
Frequently Asked Questions
Do I need to know advanced CSS to customise the Canvas HTML Template for a restaurant site?
No. The most impactful customisations — brand colour, logo height, and typography — are controlled entirely through Canvas CSS variables like –cnvs-themecolor and –cnvs-primary-font declared in a single :root block. You only need deeper CSS knowledge if you are building custom animation or layout effects beyond Canvas’s included utilities.
Should I use a single-page layout or multi-page layout for a restaurant website?
For most independent restaurants, a single-page layout (Canvas’s single_page section type) is ideal — it keeps navigation simple and all key information accessible within one scroll. Multi-page layouts make sense for restaurant groups with separate menus per venue, events pages, or blog content.
How do I handle online reservations in an HTML template?
HTML templates do not process form submissions by default. In production, replace the form’s action with a backend handler, or embed a third-party booking widget from services like OpenTable, Resy, or SevenRooms. These services provide JavaScript embed snippets you can drop directly into your Canvas HTML file.
Can I add Bootstrap 5 components like modals or carousels to my Canvas restaurant site?
Yes — Bootstrap 5 is fully bundled within Canvas, so all Bootstrap components work without any additional imports. Never add a separate Bootstrap CDN link, as this creates version conflicts. Load only js/plugins.min.js and js/functions.bundle.js as your JavaScript files.
How many images should a restaurant website include, and what sizes are optimal?
Aim for a minimum of 6–10 high-quality food and interior images. For web use, compress images to under 150 KB each where possible — use WebP format for best quality-to-size ratio. Hero background images can be larger (up to 400 KB) since they load above the fold and directly impact first impressions.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.