Step-by-Step Examples with Zurb Foundation Framework

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

Zurb Foundation Framework - Tourist Spot Site Screenshot

Games Site

Zurb Foundation Framework - Game Site Screenshot

Social App

Zurb Foundation Framework - Social App Screenshot

Zurb Foundation Framework - Step by Step Examples

  1. Tourist Spots
  2. Games Site
  3. Social App

Next Lesson > Tourist Spots