Designing a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development

By Faraz - January 15, 2023

Learn how to create a delicious restaurant website with HTML, CSS, and JavaScript. Improve your user experience and convert more visitors into customers.

Join us on Telegram

designing a delicious website using html, css, and javascript for restaurant web development.jpg

Read Also create responsive card layout with html, css, and javascript (source code).jpg

Create Responsive Card Layout with HTML, CSS, and JavaScript (Source Code)

Welcome to "Designing a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development". In this blog post, we'll be taking a closer look at how HTML, CSS, and JavaScript can be used to create a mouth-watering, visually appealing website for restaurants. The world of food and technology is constantly evolving, and a well-designed website is essential for any restaurant looking to stand out in today's competitive market. We'll be exploring the ways in which HTML, CSS, and JavaScript can be used to enhance the user experience, showcase a restaurant's unique offerings, and drive online traffic. So whether you're a restaurant owner, web developer, or just a food enthusiast, join us as we take a culinary journey through the world of web development.

Let's start making an amazing responsive restaurant website using HTML, CSS, and JavaScript step by step.

Join Telegram Channel to Download the Project: Click Here

Design by: Abdel Rahman Ali

Source Code

Step 1 (HTML Code):

The first step in creating a restaurant website using HTML, CSS, and JavaScript is to create the basic HTML structure. In this file, we will include the main structure for our restaurant website.

This includes creating the necessary HTML tags as well as any other tags that will be used throughout the website. This step is crucial as it sets the foundation for the rest of the website and ensures that all elements are properly organized and nested.

By creating the basic HTML structure, we are defining the skeleton of the website that we will fill with the design and functionality in the next steps.

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ROSA- Restaurant</title>
    <meta name="description" content="ROSA is an enchanting Parallax Restaurant WordPress Theme that allows you to tell your story in an enjoyable way, perfect for restaurants or coffee shops.">
    <meta name="viewport" content="width = device-width, initial-scale = 1, shrink-to-fit = no">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" href="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/rosa-favicon.png">

    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Cabin|Herr+Von+Muellerhoff|Source+Sans+Pro" rel="stylesheet">
    <!--Fonts-->

    <!--FontAwesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <!--FontAwesome-->

    <link rel="stylesheet" href="styles.css">
</head>

<body class="stop-scroll">

  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!--Start loader-->
  <div class="loader-wrap">
      <div class="loader">
          <span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span>
      </div>
  </div>
  <!--End loader-->

  <!--Start Dots-->
  <div class="dots">
      <div class="active one" data-x="header"></div>
      <div class="two" data-x=".recipes"></div>
      <div class="three" data-x=".fixed-image"></div>
  </div>
  <!--End Dots-->

 <!--Start Header-->
  <header>
      <nav>
          <div class="logo">
              <a href="index.html"><img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/logo-rosa-white.png" alt="Rosa Logo"></a>
          </div>
          <div class="toggle">
              <span class="first"></span>
              <span class="middle"></span>
              <span class="last"></span>
          </div>
          <div class="navigation-bar">
              <ul>
                  <li class="active"><a href="index.html">Home<span class="underline"></span></a></li>
                  <li><a href="#">Reservations<span class="underline"></span></a></li>
                  <li><a href="#">Menu<span class="underline"></span></a></li>
                  <li><a href="#">Blog<span class="underline"></span></a></li>
                  <li><a href="#">Features<span class="underline"></span></a></li>
                  <li><a href="#">Shop<span class="underline"></span></a></li>
                  <li><a href="#">Contact<span class="underline"></span></a></li>
              </ul>
          </div>
      </nav>
      <div class="text">
          <h2>Welcome</h2>
          <h1>THE ROSA</h1>
          <div class="arrow">
              <span class="left"></span>
              <i class="fas fa-asterisk"></i>
              <span class="right"></span>
          </div>
          <span>Ready To Be Opened</span>
          <div class="button"><button>Explore</button></div>
      </div>
      <svg class="svg-down" width="192" height="61" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 160.7 61.5" enable-background="new 0 0 160.7 61.5" xml:space="preserve"><path fill="currentColor" d="M80.3,61.5c0,0,22.1-2.7,43.1-5.4s41-5.4,36.6-5.4c-21.7,0-34.1-12.7-44.9-25.4S95.3,0,80.3,0c-15,0-24.1,12.7-34.9,25.4S22.3,50.8,0.6,50.8c-4.3,0-6.5,0,3.5,1.3S36.2,56.1,80.3,61.5z"></path></svg>
      <div class="arrow-down">
      </div>
  </header>
  <!--End Header-->

  <!--start About Us-->
  <div class="about-us">
      <div class="text">
          <h2>Discover</h2>
          <h3>Our Story</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>Rosa is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon’s Exmouth Market. With glazed frontage on two sides of the building, overlooking the market and a bustling London intersection.</p>
          <div><a class="a-CTA" href="#">About Us</a></div>
      </div>
      <div class="image-container">
          <div class="image image1">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988527/vertical-photo-1.jpg" alt="Food Photo">
          </div>
          <div class="image image2">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988532/vertical-photo-2.jpg" alt="Food Photo">
          </div>
      </div>
  </div>
  <!--End About Us-->

  <!--start Recipes-->
  <div class="recipes">
      <div class="image"></div>
      <div class="text">
          <h2>Tasteful</h2>
          <h3>Recipes</h3>
      </div>
  </div>
  <!--End Recipes-->

  <!--start Menu-->
  <div class="menu">
      <div class="box-model">
          <i class="fas fa-times fa-2x close"></i>
          <div class="arrow">
              <div class="arrow arrow-right"></div>
              <div class="arrow arrow-left"></div>
          </div>
          <div class="box-image-container">
              <div class="box-image">
                  <img src=""  alt="Food Photo">
              </div>
          </div>
      </div>
      <div class="menu-image-container">
          <div class="image active">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988517/big-menu-thumb-1.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/big-menu-thumb-2.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988525/big-menu-thumb-4.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988524/big-menu-thumb-6.jpg" alt="Food Photo">
          </div>
      </div>
      <div class="text">
          <h2>Discover</h2>
          <h3>Menu</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.  We love food, lots of different food, just like you.</p>
          <div><a class="a-CTA" href="#">View The Full Menu</a></div>
      </div>
  </div>
  <!--End Menu-->

  <!--Start fixed-image-->
  <div class="fixed-image">
      <div class="text">
          <h2>The Perfect</h2>
          <h3>Blend</h3>
      </div>
  </div>
  <!--End fixed-image-->

  <!--start About Us-->
  <div class="reservation">
      <div class="text">
          <h2>Culinary</h2>
          <h3>Delight</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>We promise an intimate and relaxed dining experience that offers something different to local and foreign patrons and ensures you enjoy a memorable food experience every time.</p>
          <div><a class="a-CTA" href="#">Make a Reservation</a></div>
      </div>
      <div class="image-container">
          <div class="image image1">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988518/bacon-1.jpg" alt="Food Photo">
          </div>
          <div class="image image2">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988518/bacon-2.jpg" alt="Food Photo">
          </div>
      </div>
  </div>
  <!--End About Us-->

  <!--Start Footer-->
  <footer>
      <div class="text">
          <h2>ABOUT ROSA</h2>
          <div><i class="fas fa-asterisk"></i></div>
          <p>ROSA is an enchanting and easy-to-use parallax Restaurant WordPress theme that allows you to tell your story in a dynamic, narrative and enjoyable way, making it perfect for restaurants, bakeries, bars or coffee shops.</p>
      </div>
      <div class="contact-container">
        <div class="social-media">
            <h3>Follow Along</h3>
            <div class="links">
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-facebook-square"></i></a>
                <a href="#"><i class="fab fa-pinterest"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
          <div class="newsletter">
            <h3>NewsLetter</h3>
              <form method="post">
                  <input type="email" name="email" placeholder="Type Your Email">
                  <i class="fas fa-envelope"></i>
              </form>
          </div>
      </div>
  </footer>
<!--End Footer-->

<!--Start Copy-Right-->
  <div class="copyright">
      <svg class="svg-up" width="192" height="61" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 160.7 61.5" enable-background="new 0 0 160.7 61.5" xml:space="preserve"><path fill="#262526" d="M80.3,61.5c0,0,22.1-2.7,43.1-5.4s41-5.4,36.6-5.4c-21.7,0-34.1-12.7-44.9-25.4S95.3,0,80.3,0c-15,0-24.1,12.7-34.9,25.4S22.3,50.8,0.6,50.8c-4.3,0-6.5,0,3.5,1.3S36.2,56.1,80.3,61.5z"></path></svg>
      <i class="fas fa-angle-double-up arrow-up"></i>
      <ul class="info">
          <li>© ROSA 2017</li>
          <li>13 Hanway Square, London</li>
          <li>Tel: 71494563</li>
          <li>Handcrafted with love by <a href="#">Pixelgrade</a> Team</li>
      </ul>
      <ul class="CTA">
          <li><a href="#">PERMISSIONS AND COPYRIGHT</a></li>
          <li><a href="#">CONTACT THE TEAM</a></li>
      </ul>
  </div>
  <!--End Copy-Right-->

  <!-- Add your site or application content here -->
  <script src="script.js"></script>
</body>
</html>

Read Also create rock paper scissors game with html, css, and javascript.jpg

Create Rock Paper Scissors Game with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

We will create our CSS file. In this file, we will use some basic CSS rules to create our restaurant website. We will also add some padding and margin properties to ensure that everything looks correct.

By styling the website with CSS, we are adding the design layer on top of the HTML structure, making the website visually appealing and easy to navigate. This step is essential in creating an engaging and user-friendly website that will encourage users to stay and explore the restaurant's offerings.

This will give our restaurant website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

/*Start Global*/
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 12px;
}
body.hide-scroll::-webkit-scrollbar {
  display: none;
}
a {
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  max-width: 100%;
}
h2 {
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: 100px;
  font-weight: normal;
  margin: 0 0 -55px;
}
h1, h3 {
  font-family: "Source Code Pro", sans-serif;
  font-size: 47px;
  font-weight: bold;
  letter-spacing: 9.4px;
  margin: 0 0 15px;
}
p {
  color: #515151;
  line-height: 27px;
}
.a-CTA {
  border-bottom: 2px solid #a96700;
  padding-bottom: 4px;
  letter-spacing: 1.5px;
  font-size: 18px;
}
/*End Global*/

/*Start Mutual*/
p, .a-CTA, input, header .navigation-bar a, .copyright li, .contact .form form label, .contact .form form button {
  font-family: Cabin, sans-serif;
}
.fa-asterisk, .a-CTA, h2, header .navigation-bar a:hover, header nav.active .navigation-bar a:hover, footer .social-media .links a:hover, .copyright .info li a, .copyright .CTA li a:hover {
  color: #a96700;
}
header nav .navigation-bar .underline, header .text .button button:hover, .contact .form form button:hover, .contact .text i:hover {
  background-color: #a96700;
}
header .navigation-bar ul li, header .text, .about-us .text, .reservation .text, .menu .box-model, .menu .text, .fixed-image .text, footer, .copyright, .contact .text i {
  text-align: center;
}
header nav, header .navigation-bar ul, .about-us, .reservation, .about-us .image-container, .reservation .image-container, .menu, .menu .menu-image-container, footer .contact-container, .copyright ul, .contact {
  display: flex;
}
header nav .toggle, header nav .toggle span, header .navigation-bar, header .navigation-bar ul, .menu .box-model .close, footer .social-media .links a, .copyright .CTA li a {
  transition: .3s;
}
header, header nav .toggle span, header .navigation-bar a, header .text, header .text .arrow .left, header .text .arrow .right, .recipes, .menu .box-image-container, .fixed-image .text, .copyright, .copyright .arrow-up {
  position: relative;
}
header nav .toggle, header .navigation-bar .underline, header .text .arrow .left:after, header .text .arrow .right:after, header .svg-down, header .arrow-down, .recipes .text, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .box-image-container .box-image, .copyright .svg-up {
  position: absolute;
}
.recipes .text, .fixed-image .text, .menu .box-image-container, .menu .box-image-container .box-image {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
header nav, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, .menu .box-model, .menu .box-image-container, .menu .box-image-container .box-image {
  width: 100%;
}
button, .dots > div, header nav .toggle, header .arrow-down, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .menu-image-container .image img, footer .newsletter i, .copyright .arrow-up {
  cursor: pointer;
}
.dots .active, header nav.active, header nav.active .toggle.active span, header nav .toggle span, header .navigation-bar .underline, header .text .arrow .left, header .text .arrow .right, header .text .button button, .contact form button {
  background-color: #fff;
}
h1, h3, header .navigation-bar a, header .text span, .menu .box-model .close:hover, footer .text h2, footer .text p, footer .social-media .links a, .contact .text i, .contact .form form button {
  color: #fff;
}
header nav, header .navigation-bar.show, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, header .text .arrow .left:after, .menu .box-model, .copyright .arrow-up {
  left: 0;
}
header .text .arrow .left:after, header .text .arrow .right:after, header .text span, footer .social-media .links a, footer .newsletter i, .copyright .arrow-up, .contact .text i, .contact .form form label {
  display: inline-block;
}
/*End Mutual*/

/*Start Dots*/
.dots {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translate(0,-50%);
  z-index: 5;
}
.dots > div  {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 20;
  margin-bottom: 10px;
  border: 2px solid #fff;
}
.dots .black {
  border-color: #000;
}
.dots .active.black {
  background-color: #000;
}
/*End Dots*/

/*Start Loader*/
.loader-wrap, .loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader-wrap {
  background-color: #a96700;
  z-index: 30;
}
.loader-wrap.remove {
  display: none;
}
.loader {
  margin: auto;
  height: 40px;
  width: 80px;
  box-sizing: border-box;
}
.loader .loader-item {
  position: relative;
  float: left;
  height: 40px;
  width: 4px;
  margin: 0 2px;
  background-color: #fff;
}
.loader .loader-item:nth-child(1) {
  -webkit-animation: loader-item-1 2s linear infinite;
  animation: loader-item-1 2s linear infinite;
}
.loader .loader-item:nth-child(2) {
  -webkit-animation: loader-item-2 2s linear infinite;
  animation: loader-item-2 2s linear infinite;
}
.loader .loader-item:nth-child(3) {
  -webkit-animation: loader-item-3 2s linear infinite;
  animation: loader-item-3 2s linear infinite;
}
.loader .loader-item:nth-child(4) {
  -webkit-animation: loader-item-4 2s linear infinite;
  animation: loader-item-4 2s linear infinite;
}
.loader .loader-item:nth-child(5) {
  -webkit-animation: loader-item-5 2s linear infinite;
  animation: loader-item-5 2s linear infinite;
}
.loader .loader-item:nth-child(6) {
  -webkit-animation: loader-item-6 2s linear infinite;
  animation: loader-item-6 2s linear infinite;
}
.loader .loader-item:nth-child(7) {
  -webkit-animation: loader-item-7 2s linear infinite;
  animation: loader-item-7 2s linear infinite;
}
.loader .loader-item:nth-child(8) {
  -webkit-animation: loader-item-8 2s linear infinite;
  animation: loader-item-8 2s linear infinite;
}
.loader .loader-item:nth-child(9) {
  -webkit-animation: loader-item-9 2s linear infinite;
  animation: loader-item-9 2s linear infinite;
}
.loader .loader-item:nth-child(10) {
  -webkit-animation: loader-item-10 2s linear infinite;
  animation: loader-item-10 2s linear infinite;
}
.loader:after {
  content: 'Loading...';
  font-size: 16px;
  font-family: Arial, serif;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  margin: auto;
}
@-webkit-keyframes loader-item-1 {
  1% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  11% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  21% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-1 {
  1% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  11% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  21% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-2 {
  7% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  17% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  27% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-2 {
  7% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  17% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  27% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-3 {
  13% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  23% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  33% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-3 {
  13% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  23% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  33% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-4 {
  19% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  29% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  39% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-4 {
  19% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  29% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  39% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-5 {
  25% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  35% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  45% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-5 {
  25% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  35% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  45% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-6 {
  31% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  41% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  51% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-6 {
  31% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  41% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  51% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-7 {
  37% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  47% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  57% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-7 {
  37% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  47% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  57% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-8 {
  43% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  53% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  63% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-8 {
  43% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  53% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  63% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-9 {
  49% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  59% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  69% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-9 {
  49% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  59% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  69% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@-webkit-keyframes loader-item-10 {
  55% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  65% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  75% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
@keyframes loader-item-10 {
  55% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  65% {
      -webkit-transform: scaleY(1.4);
      transform: scaleY(1.4);
  }
  75% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
}
/*End Loader*/

/*Start Home Page*/

/*Start Header*/
header {
  height: calc(100vh - 22px);
  background-size: cover;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg") fixed bottom;
  padding: 20px 70px;
}
header nav {
  position: fixed;
  top: 0;
  padding: 36px 36px 20px;
  z-index: 20;
}
header nav .toggle {
  display: none;
  top: 26px;
  left: 20px;
  background-color: transparent;
  border: none;
  padding: 0;
  z-index: 21;
}
header nav .toggle:focus {
  outline: none;
}
header nav.active .toggle span {
  background-color: #000;
}
header nav .toggle.active {
  left: 32%;
}
header nav .toggle.active .first {
  top: 16px;
  transform: rotate(-45deg);
}
header nav .toggle.active .last {
  top: 0;
  transform: rotate(45deg);
}
header nav .toggle .hide {
  transition: 0s;
  visibility: hidden;
}
header nav .toggle span {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 40px;
}
header nav .toggle span:not(:last-of-type) {
  margin-bottom: 6px;
}
header nav .logo {
  flex-basis: 56%;
  padding-left: 50px;
}
header .navigation-bar.show {
  width: 40%;
}
header .navigation-bar.show a {
  color: #ccc !important;
}
header .navigation-bar.show a:hover {
  color: #fff !important;
}
header .navigation-bar ul li {
  flex: 1;
  padding: 0 10px;
}
header .navigation-bar a {
  text-decoration: none;
  transition: all .5s;
  font-size: 16px;
}
header nav.active .navigation-bar a {
  color: #000;
}
header .navigation-bar .underline {
  height: 2px;
  width: 0;
  left: 50%;
  bottom: -4px;
  transition: all .3s;
  display: block;
}
header .text {
  top: 24%;
}
header .text h1 {
  margin-bottom: 0;
}
header .text .arrow .left, header .text .arrow .right {
  height: 3px;
  width: 100px;
}
header .text .arrow .left {
  left: -4%;
}
header .text .arrow .right {
  right: -4%;
}
header .text .arrow .left:after, header .text .arrow .right:after {
  content: '';
  border: 10px solid transparent;
  border-left-color: #fff;
  top: -8px;
}
header .text .arrow .right:after {
  right: 0;
  border-color: transparent #fff transparent transparent;
}
header .text .arrow .fa-asterisk {
  vertical-align: super;
}
header .text span {
  font-family: "Source Code Pro", sans-serif;
  font-size: 15px;
  margin-bottom: 12px;
}
header .text .button button, .contact form button {
  border: none;
  padding: 9px 18px;
  letter-spacing: 2.4px;
  font-size: 12px;
  font-family: source_sans_problack, sans-serif;
  border-radius: 3px;
}
header .text .button button, .contact form button:focus {
  outline: none;
}
header .svg-down {
  bottom: 0;
  left: 50%;
  z-index: 5;
  margin-left: -96px;
  margin-bottom: -12px;
  color: #fff;
}
header .arrow-down {
  width: 70px;
  height: 50px;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/arrow-down.png") no-repeat center;
}
/*End Header*/

/*Start About-Us*/
.about-us, .reservation {
  padding: 60px;
}
.about-us .text, .reservation .text {
  flex: 50%;
  padding: 40px 52px 0 0;
}
.about-us .text h3, .reservation .text h3 {
  color: #000;
}
.about-us .text .fa-asterisk, .reservation .text .fa-asterisk {
  color: #9a9998;
}
.about-us .image-container, .reservation .image-container {
  flex: 50%;
}
.about-us .image, .reservation .image {
  margin-left: 20px;
}
/*End About-Us*/

/*Start Recipes*/
.recipes .image {
  height: 350px;
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988529/three-col-1.jpg") fixed center;
  background-size: cover;
}
/*End Recipes*/

/*Start Menu*/
.menu {
  padding: 60px;
}
.menu .box-model {
  display: none;
  position: fixed;
  height: 100%;
  top: 0;
  z-index: 20;
  background-color: rgba(0,0,0,.7);
}
.menu .box-model.active {
  display: block;
}
.menu .box-model.active body {
  overflow: hidden;
}
.menu .box-model .close {
  color: #ccc;
  right: 25px;
  top: 10px;
  z-index: 20;
}
.menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left {
  width: 40px;
  height: 40px;
  right: 20px;
  top: 50%;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  z-index: 20;
}
.menu .box-model .arrow .arrow-left {
  left: 20px;
  transform: rotate(-135deg);
}
.menu .box-image-container {
  height: 100%;
}
.menu .box-image-container .box-image img.active {
  animation: scale .5s;
}
@keyframes scale {
  from {transform: scale(0,0)}
  to {transform: scale(1,1)}
}
.menu .menu-image-container {
  flex-wrap: wrap;
  flex: 60%;
}
.menu .menu-image-container .image {
  margin: 0 20px 20px 0;
  flex: calc( 50% - 40px);
}
.menu .text {
  flex: 55%;
  padding: 40px 0 0 62px;
}
.menu .text h3 {
  color: #000;;
}
.menu .text .fa-asterisk {
  color: #9a9998;
}
/*End Menu*/

/*Start fixed-image*/
.fixed-image {
  background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988533/frontpage-menu.jpg") fixed center;
  background-size: cover;
  height: 400px;
}
/*End fixed-image*/

/*Start Footer*/
footer {
  background-color: #121212;
  padding: 60px 20px;
}
footer .text {
  max-width: 500px;
  margin: auto;
}
footer .text h2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 19px;
  letter-spacing: 1.9px;
  margin-bottom: 25px;
}
footer .text .fa-asterisk {
  font-size: 12px;
}
footer .text p {
  line-height: 27px;
}
footer .contact-container {
  padding: 40px 0;
  max-width: 1000px;
  margin: auto;
}
footer .contact-container > div {
  flex: 1;
}
footer .contact-container h3 {
  font-size: 19px;
  letter-spacing: 1.9px;
}
footer .social-media .links a {
  margin: 0 10px;
  font-size: 25px;
}
footer .newsletter input {
  padding: 10px;
  width: 270px;
  background-color: #eee;
  border: none;
  margin-left: -15px;
}
footer .newsletter i {
  margin-left: -40px;
  vertical-align: middle;
  font-size: 21px;
}
.copyright {
  padding: 15px 40px 30px;
  background-color: #262526;
}
.copyright .svg-up {
  top: 0;
  left: 50%;
  margin-left: -96px;
  margin-top: -50px;
}
.copyright .arrow-up {
  width: 40px;
  height: 30px;
  top: -45px;
  color: #fff;
  line-height: 1.9
}
.copyright ul {
  justify-content: center;
}
.copyright li {
  color: #919191;
  font-size: 14px;
}
.copyright li:not(:last-of-type):after {
  content: '•';
  margin: 10px;
}
.copyright .CTA {
  margin-top: 25px;
}
.copyright .CTA li a {
  color: #919191;
}

/*End Footer*/

/*End Home Page*/

/*Start Contact Page*/
.contact-header {
  background-image: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/contact-food.jpg");
  height: 40vh;
}
.contact {
  padding: 78px 40px;
}
.contact > div {
  flex: 50%;
}
.contact .text p {
  margin-bottom: 30px;
}
.contact .text i {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  line-height: 48px;
  font-size: 24px;
}
.contact .text h2 {
  font-family: source_sans_problack, sans-serif;
  font-size: 24px;
  color: #262626;
  letter-spacing: 2.4px;
  margin-bottom: 20px;
}
.contact .form {
  margin-left: 48px;
}
.contact .form form label {
  margin-bottom: 5px;
  color: #515151;
}
.contact .form form input, .contact .form form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 24px;
  border-radius: 5px;
  border: 2px solid #D8D8D8;
  outline: none;
}
.contact .form form input:focus, .contact .form form textarea:focus {
  border-color: #a96700;
  box-shadow: 0 1px 1px #737373;
}
.contact .form form textarea {
  height: 212px;
  resize: none;
}
.contact .form form button {
  background-color: #262526;
  padding: 12px 30px;
  font-size: 12px;
}
/*End Contact Page*/

/*Start Home Page Responsive*/

@media (max-width: 1200px) {
  .menu, .about-us, .reservation {
      padding: 60px 40px;
  }
  .about-us .text, .reservation .text {
      padding: 0 32px 0 0;
  }
  .about-us .image-container, .reservation .image-container {
      align-items: center;
  }
  .menu .text {
      padding: 0 0 0 32px;
  }
}

@media (max-width: 992px) {
  body {
      padding: 0;
  }
  .dots {
      display: none;
  }
  header {
      height: calc(100vh - 10px);
  }
  header nav .logo {
      padding-left: 0;
  }
  .about-us {
      display: block;
      padding-top: 50px;
  }
  .about-us .text , .reservation .text {
      padding: 0 0 40px;
  }
  .about-us .image-container .image1, .reservation .image-container .image1 {
      margin-left: 0;
  }
  .menu {
      display: block;
      padding: 60px 20px 60px 40px;
  }
  .menu .text {
      padding: 20px 20px 0 0;
  }
  .reservation {
      display: block;
      padding: 30px 20px 60px;
  }
  .contact {
      display: block;
      padding: 78px 20px;
  }
  .contact .form {
      margin-left: 0;
      margin-top: 40px;
  }
}

@media (max-width: 768px) {
  header nav {
      display: block;
      text-align: center;
      left: 0;
      top: 0;
      width: 100%;
      padding-top: 25px;
  }
  header nav .toggle {
      display: block;
  }
  header .navigation-bar {
      position: fixed;
      top: 0;
      left: -174px;
      height: 100%;
      background-color: #262526;
      overflow: hidden;
      z-index: 20;
      padding: 40px;
  }
  header .navigation-bar ul {
      display: block;
      padding-top: 40px;
  }
  header .navigation-bar ul li {
      text-align: left;
      padding: 14px 0;
  }
  footer .contact-container {
      display: block;
  }
  footer .social-media {
      margin-bottom: 40px;
  }
  .copyright ul {
      display: block;
      margin-top: -20px;
  }
  .copyright li {
      margin-bottom: 5px;
  }
  .copyright li:not(:last-of-type):after {
      content: '';
  }

}

@media (max-width: 576px) {
  h3, h1 {
      font-size: 40px;
  }
  h2 {
      font-size:90px
  }
  header {
      padding: 0;
  }
  header nav .logo {
      padding-left: 0;
  }
  header nav .toggle.active {
      left: 36%;
  }
  header .navigation-bar.show {
      padding: 20px;
      width: 48%;
  }
  .about-us, .reservation {
      padding: 60px 20px;
  }
  .menu {
      padding: 60px 0 60px 20px;
  }
}

Step 3 (JavaScript Code):

The final step in creating a restaurant website using HTML, CSS, and JavaScript is to add interactivity to the website using JavaScript. JavaScript allows us to create dynamic and interactive elements on the website, such as forms, modals, and image sliders.

By adding interactivity to the website with JavaScript, we are providing an engaging and interactive experience for users, making the website more usable and enjoyable. This step is essential in creating a website that encourages user engagement and ultimately drives more business to the restaurant.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

// constants
const body = document.querySelector("body"),
    loader = document.querySelector(".loader-wrap"),
    links = document.querySelectorAll('a[href="#"]'),
    nav = document.querySelector("header nav"),
    navToggle = document.querySelector("header nav .toggle"),
    navSpanMiddle = document.querySelector("header nav .toggle .middle"),
    navNavigationBar = document.querySelector("header nav .navigation-bar"),
    navNavigationBarLi = document.querySelectorAll(
        "header nav .navigation-bar li"
    ),
    headerText = document.querySelector("header .text"),
    headerSection = document.querySelector("header"),
    aboutSection = document.querySelector(".about-us"),
    recipeSection = document.querySelector(".recipes"),
    menuSection = document.querySelector(".menu"),
    fixedImageSection = document.querySelector(".fixed-image"),
    footerSection = document.querySelector("footer"),
    dotOne = document.querySelector(".dots .one"),
    dotTwo = document.querySelector(".dots .two"),
    dotThree = document.querySelector(".dots .three"),
    dots = document.querySelectorAll(".dots > div"),
    logoImage = document.querySelector("header nav .logo img"),
    svgDown = document.querySelector("header .arrow-down"),
    svgUp = document.querySelector(".copyright .arrow-up"),
    menuImgs = document.querySelectorAll(".menu .menu-image-container img"),
    boxModel = document.querySelector(".menu .box-model"),
    menuImageContainer = document.querySelector(".menu-image-container"),
    boxModelArrow = document.querySelector(".menu .box-model .arrow"),
    boxModelImage = document.querySelector(".menu .box-model img"),
    pageTitle = document.querySelector("title");

// remove loader
function fadeOutEffect() {
    const fadeEffect = setInterval(function() {
        if (!loader.style.opacity) {
            loader.style.opacity = 1;
        }
        if (loader.style.opacity > 0) {
            loader.style.opacity -= 0.4;
        } else {
            body.classList.remove('stop-scroll');
            loader.classList.add('remove');
            clearInterval(fadeEffect);
        }
    }, 100);
}
window.addEventListener("load", fadeOutEffect);

// prevent links click hash
links.forEach(link =>
    link.addEventListener("click", function(e) {
        e.preventDefault();
    })
);

// toggle hamburger menu button
navToggle.addEventListener("click", () => {
    navToggle.classList.toggle("active");
    navSpanMiddle.classList.toggle("hide");
    navNavigationBar.classList.toggle("show");
});

// show active navigationbar li
navNavigationBarLi.forEach(li =>
    li.addEventListener("click", () => {
        const arr = Array.from(li.parentElement.children);
        arr.forEach(li => li.classList.remove("active"));
        li.classList.add("active");
    })
);

// svg-up smooth scroll
svgUp.addEventListener("click", () => {
    window.scroll({
        top: 0,
        behavior: "smooth"
    });
});

window.onscroll = function() {
    // make navbar fixed & change logo color
    if (window.pageYOffset > headerSection.offsetHeight - 75) {
        nav.classList.add("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988525/logo-rosa.png";
    } else {
        nav.classList.remove("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/logo-rosa-white.png";
    }

    // header welcome fade out and in
    if (window.pageYOffset > 0) {
        headerText.style.opacity = -window.pageYOffset / 300 + 1;
    }
    // home page JS
    if (pageTitle.text === "ROSA- Restaurant") {
        //change dots background color
        if (window.pageYOffset < headerSection.offsetHeight * 0.5) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotOne.classList.add("active");
        } else if (
            window.pageYOffset > headerSection.offsetHeight * 0.5 &&
            window.pageYOffset < recipeSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (
            window.pageYOffset > recipeSection.offsetTop * 0.75 &&
            window.pageYOffset < menuSection.offsetTop * 0.81
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotOne.classList.remove("active");
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > menuSection.offsetTop * 0.81 &&
            window.pageYOffset < fixedImageSection.offsetTop * 0.86
        ) {
            dots.forEach(dot => dot.classList.add("black"));
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > fixedImageSection.offsetTop * 0.86 &&
            window.pageYOffset < footerSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotThree.classList.add("active");
        } else if (
            window.pageYOffset > footerSection.offsetTop * 0.72 &&
            window.pageYOffset < footerSection.offsetTop * 0.901
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (window.pageYOffset > footerSection.offsetTop * 0.901) {
            dots.forEach(dot => dot.classList.remove("black"));
        }
    }
};

// home page JS
if (pageTitle.text === "ROSA- Restaurant") {
    // svg-down smooth scroll
    svgDown.addEventListener("click", () => {
        window.scroll({
            top: aboutSection.offsetTop - 30,
            behavior: "smooth"
        });
    });

    // dots smooth scroll
    dots.forEach(dot =>
        dot.addEventListener("click", function() {
            window.scrollTo({
                top: document.querySelector(this.dataset.x).offsetTop - 100,
                behavior: "smooth"
            });
        })
    );

    // show box model
    menuImgs.forEach(img =>
        img.addEventListener("click", function() {
            const arr = Array.from(this.parentElement.parentElement.children);

            arr.forEach(div => div.classList.remove("active"));

            this.parentElement.classList.add("active");
            boxModel.classList.add("active");
            boxModelImage.src = this.src;
            boxModelImage.classList.add("active");
            body.classList.add("hide-scroll");
        })
    );

    // box model functions
    function boxModelFun(e) {
        // close box model
        if (
            e.code === "Escape" ||
            (e.target.tagName === "DIV" && !e.target.classList.contains("arrow")) ||
            e.target.classList.contains("close")
        ) {
            boxModel.classList.remove("active");
            body.classList.remove("hide-scroll");
        }

        if (boxModel.classList.contains("active")) {
            if (
                e.code === "ArrowRight" ||
                e.code === "ArrowLeft" ||
                e.target.classList.contains("arrow-right") ||
                e.target.classList.contains("arrow-left")
            ) {
                const arr = Array.from(menuImageContainer.children);
                const active = arr.find(div => div.classList.contains("active"));

                // change box model image
                if (
                    e.target.classList.contains("arrow-right") ||
                    e.code === "ArrowRight"
                ) {
                    if (active.nextElementSibling === null) {
                        active.parentElement.firstElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.firstElementChild.firstElementChild.src;
                    } else {
                        active.nextElementSibling.classList.add("active");
                        boxModelImage.src = active.nextElementSibling.firstElementChild.src;
                    }
                }

                // change box model image
                else if (
                    e.target.classList.contains("arrow-left") ||
                    e.code === "ArrowLeft"
                ) {
                    if (active.previousElementSibling === null) {
                        active.parentElement.lastElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.lastElementChild.lastElementChild.src;
                    } else {
                        active.previousElementSibling.classList.add("active");
                        boxModelImage.src =
                            active.previousElementSibling.firstElementChild.src;
                    }
                }
                active.classList.remove("active");
            }
        }
    }

    window.addEventListener("keydown", boxModelFun);
    window.addEventListener("click", boxModelFun);
    boxModelArrow.addEventListener("click", boxModelFun);
}

Final Output:

designing a delicious website using html, css, and javascript for restaurant web development.gif

Read Also responsive details card slider concept tutorials and code snippets with html, css, and javascript.jpg

Responsive Details Card Slider with HTML, CSS, and JavaScript: Code Snippets Included

Conclusion:

In conclusion, creating a restaurant website using HTML, CSS, and JavaScript is a great way to enhance the restaurant's online presence and drive more business. By following the steps outlined in this blog post, we have learned how to define the purpose and goal of the website, create the basic HTML structure, style the website with CSS, and add interactivity with JavaScript. With a well-designed website, a restaurant can showcase its unique offerings, provide useful information, and create an engaging and interactive experience for users.

It's important to keep in mind that creating a website is an ongoing process, and should be updated and maintained regularly to ensure that it stays up-to-date and relevant. By utilizing the power of HTML, CSS, and JavaScript, restaurants can ensure that their website is a delicious and engaging experience that will drive more customers through the door.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊