Creating Home Page of Social App in Zurb Foundation

In the end of this tutorial, your Home page will look like,

Zurb Foundation Example Social App
Step 1.1: Creating Layout

In every web page design, the start point is creating the layout. For simplicity we will be using the templates provided here: Foundation Templates

For the home page I have decided to use "Feed".

After completing the steps of creating layout the website will look like this:

Zurb Foundation Framework Feed Template

Step 1.1.1: Open the downloaded index.html file in your favorite HTML editor.

Step 1.1.2: Delete everything between <body></body> tags except codes inside <script> tags, they are required to use foundation 4 framework. Now the <body> element will look like this,

Zurb Foundation Framework Plugins

Step 1.1.3: Go to this link: Foundation Templates

Step 1.1.4: In the templates page, click the HTML link of the Feed template as shown below.

Zurb Foundation Framework Templates

Step 1.1.5: Copy the code and paste it inside the <body> tags in the HTML editor.

Step 1.1.6:Save the file and open it in your preferred browser, now the layout will look like,

Zurb Foundation Framework Feed Template

Step 1.2: Adding Content

Since we are not adding any new elements for the home page, adding content is the only step left to complete the home page.

Step 1.2.1: Change the src attributes of the img tag to point the images you downloaded.

Step 1.2.2: Remove the default header and add the below code for custom header.

	  
<!-- Header and Nav -->
	<div class="row">
	<div class="large-3 columns">
		<h1><img src="img/logo_96.jpg" /></h1>
	</div>
	<div class="large-9 columns">
	<ul class="inline-list right">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="login.html">[Sign out]</a></li>
	</ul>
	</div>
	</div>
	<!-- End Header and Nav -->

Step 1.2.3: Edit all the default contents like copyright, description, etc., provided in the template.

Step 1.2.4: Remove the links in the footer. If you wish you can interchange the column order of the layout as you prefer.

Step 1.2.5: Save the file and open it in your favorite browser, the home page will now look like,

Zurb Foundation Framework Example Social App