Feature Tutorial

This tutorial uses many features to build a website prototype. We recommend beginners follow this tutorial, doing exercises from start to finish then you'll know how to use

Viewing the Example and Preparing for Exercises

Please download our Example File first.
This zip file contains all the files that will be generated from the project after completing the entire tutorial. Please unzip this file and use to watch the folder. Next, open in your browser and view these pages to understand the structure of this website.

Note: Although all files in this folder are static, they need to be on a web server to work correctly because of the absolute urls they use. That's why we must use to watch the folder. If you need to generate files with relative urls, please check Building Projects.

The structure of this website is shown in the following image. There are Home (/index.html), Features List (/features/index.html), Features Detail (/features/detail.html), Documents (/documents.html) and Screenshots (/screenshots.html) pages.

We can see many common or duplicated parts in the website, include content, block and code. These duplicated parts are our main target in the following tutorial.

After viewing this website's structure, let's prepare for the following exercise. Please download our Teaching Material File and unzip it.

Note: This teaching material file is the initial setup for the following exercises, please don't confusion it with the example file we just saw.

Use to watch this folder, then follow the steps below.

You can skip all the "Advanced" parts if you don't need to use them.