Restaurant Website

Turbo 360

The restaurant website tutorial is a top-to-bottom implementation of a website for an imaginary upscale restaurant in an urban area. After setting up a base template with UI and graphics, we incorporate additional elements from the restaurant's online presence: Instagram, Yelp, and Youtube. We then add the ability for customers to reserve a table online via the OpenTable API. This tutorial is included in our Freelance series where we build a collection of websites that will prepare you for a career in freelance web development. Each project replicates a realistic freelance assignment complete with deployment, domain setup, social network integration, and client-updating capability. If your goal is to work as a contract web developer, this series is the great way to prepare and build your portfolio.

This series is suited for beginner-to-intermediate developers. You should have a sold understanding of HTML/CSS/Bootstrap as well and Javascript and jQuery as these concepts are not deeply explained in the tutorials. You should also have some experience with MVC and Node/Express though do not need to be an expert.

DOWNLOAD THEME


Setting Up

In the first video, we scaffold the project then set up a corresponding Turbo project for a staging environment. We then implement a theme to add an elegant UI to the site. We transfer the assets over from the theme to our project code base and the write Gulp tasks to optimized the CSS imports - minify and concatenate the text.

Build Process

In the second session, we continue optimizing asset delivery, this time for the Javascript files. We set up another set of Gulp tasks to minify and concatenate all Javascript imports then use the results rather than each individual file. Finally, we create a default Gulp task to run all the tasks in sequence and define it the build script of the project manifest. We connect the assets to the global CDN (automatically provided by Turbo 360) and deploy the project to make sure it works as expected on the staging environment. Last, we add an header image on the home page.

Site Customization

In this video, we use global environment variables to configure the site logo, footer, and social media links. Turbo 360 projects can be easily customized by setting env variables either in the project code base or the dashboard (for non-programmers). We then upload a logo from another restaurant to test the configuration settings and to make use of the built-in CDN provided to all Turbo 360 projects. This session is the first step towards making the site re-usable for multiple assignments which is key to a successful career as a freelance developer.

Home Page Configuration

So far, we have configured global variables for the entire site but that is not enough to page-specific configuration. In this video, we set the meta data for home page: banner image, primary text, header text etc. Turbo 360 makes it very simple to configure page-specific content by defining key-value pairs much the way we did for global variables. We define a set of key-value pairs for the home page then deploy the site to ensure it works on the staging environment.

Blog Setup

In video 5, we continue configuring the home page settings such that the image content is fully loaded from the Turbo 360 CMS. We then add a blog section to populate the "Recent News" section of the landing page and fetch recent blog posts from the Turbo datastore. Every Turbo 360 project automatically comes with blog support and we leverage that in this project to make it easy for website maintainers to add new posts and update their sites quickly.

Membership Options