road to freelance
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.
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.
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.
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.