Creating Home Page of Social App in Zurb Foundation
In the end of this tutorial, your Home page will look like,
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:
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,
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.
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,
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,