Build a restaurant landing page with HTML, CSS, & JavaScript

One Sentence Summary:

This video demonstrates how to build a fully responsive, accessible restaurant website with advanced CSS techniques and deploy it on SiteGround.

Main Points:

Uses pure HTML and CSS to create a responsive, full-bleed, and overlapping image restaurant website.
Implements CSS layers for organized styling, custom properties for colors, and local hosting of Google Fonts.
Explains organizing styles with CSS layers, custom properties, and strategic class naming for clarity.
Guides setup with VS Code Live Server extension for local development and SiteGround for deployment.
Demonstrates building semantic HTML structure with header, main, footer, and accessibility considerations.
Utilizes CSS Grid for layout, including full bleed sections, responsive wrapper widths, and strategic overlap.
Implements responsive typography with CSS custom properties and media queries for fluid scaling.
Builds interactive tabbed content with ARIA roles and JavaScript, ensuring accessibility and responsiveness.
Styles complex sections like features and highlights with nested grids, overlapping shapes, and precise positioning.
Shows deploying the site via SiteGround’s file manager, CDN, caching, and security features for optimal hosting.

Takeaways:

Use CSS layers and custom properties to organize and maintain scalable, reusable styles.
Leverage CSS Grid for flexible, full-bleed layouts with responsive wrapper techniques.
Build accessible, interactive components like tabbed content with ARIA roles and JavaScript.
Employ media queries with calc() and CSS variables for fluid, device-adaptive typography and layout.
Deploy websites easily with SiteGround’s integrated tools, CDN, and cache management for fast, secure hosting.

Step By Step

Here’s a step-by-step guide to building a restaurant website using HTML, CSS, and JavaScript:

1. Set up your development environment

Install a code editor like VS Code.
Install the Live Server extension for VS Code to preview your website in real-time. You can find it by searching for "Live Server" in the Extensions Marketplace of VS Code.

2. Create the necessary files

Create a folder for your project (e.g., restaurant-website).
Inside the folder, create three files:
- index.html (for the main page)
- style.css (for the styles)
- script.js (for JavaScript functionality)

3. HTML Structure (index.html)

Start by adding the basic structure of the website in the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="Restaurant Logo">
        </div>
    </header>
    <main>
        <section class="hero">
            <h1>Welcome to Our Restaurant</h1>
            <p>Experience the best cuisine in town.</p>
            <button class="cta-btn">Book a Table</button>
        </section>
    </main>
    <footer>
        <p>© 2025 Restaurant Name</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

4. Add CSS (style.css)

Open the style.css file and add styles to give the website a clean look.

/* Basic resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #fff;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

.logo img {
    width: 150px;
    height: auto;
}

.hero {
    background: url('images/hero.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.cta-btn {
    padding: 15px 30px;
    background-color: #f5a623;
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.cta-btn:hover {
    background-color: #d48918;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

5. JavaScript for Interactivity (script.js)

You can use JavaScript to add interactivity. For example, let’s create a simple script to log a message when the "Book a Table" button is clicked.

document.querySelector('.cta-btn').addEventListener('click', () => {
    alert('Thank you for choosing our restaurant! We will contact you soon.');
});

6. Use Media Queries for Responsiveness

Add media queries to ensure that your website is responsive on different devices (mobile, tablet, desktop).

@media (max-width: 768px) {
    .hero h1 {
        font-size: 32px;
    }

    .cta-btn {
        font-size: 16px;
        padding: 12px 25px;
    }
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 48px;
    }

    .cta-btn {
        font-size: 18px;
        padding: 15px 30px;
    }
}

7. Test Your Website

Open the index.html file in VS Code.
Click the Go Live button provided by the Live Server extension to preview your website.
Make sure it works on different devices (adjust the screen size to check responsiveness).

8. Host the Website

You can host your website for free on platforms like GitHub Pages or Netlify, or use a paid hosting provider such as SiteGround.
If using SiteGround, sign up, choose a hosting plan, and upload your website files using the built-in File Manager or FTP.

9. Final Touches

SEO Optimization: Add relevant meta tags for SEO in the <head> section of your HTML.
Performance: Compress images and minimize CSS and JavaScript files to improve load times.
Content: Add more pages like a menu, reservation, and contact page.

This should help you get started with a basic restaurant website using HTML, CSS, and JavaScript!

Get New Posts

Follow on your preferred channel for new articles, notes, and experiments.