In this section, 3 real life scenario sample websites will be created with step by step explanations.

You will learn how to create complex web designs using Foundation 4 and 5 framework with the help of 3 real time scenario websites.

I assume you have already downloaded foundation 4 and 5 framework. Open the index.html file in your favorite HTML editor before reading the following chapters.

Make sure to save a copy of index.html in a separate folder before editing it. The reason we are using the downloaded index.html file instead of creating a new html file is to ease the attachments required to use foundation 4 and 5 framework. In a new html file you have a attach the scripts and style sheets required for foundation 4 manually, to avoid this you can simply edit the downloaded file.

Take a look at the sample websites used in this section below. Click on the image to visit the sample websites.

In these websites, we teach each pages by following three steps.

1. Creating Page Layout
2. Adding Foundation Elements
3. Editing Contents and Links

Tourist Spots

Games Site

Social App

Next Lesson > Tourist Spots