Free Advanced Web Design Tutorials

Creating Seleton Templates

This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.

Skeleton Template

Steps to create the above website.

Step 1: Creating Navbar using below code.

Html Code
<div class="row">
      <div class="twelve columns">
	  	<ul id="navlist">
			<li class="active"><a href="#" style="color:white">Home</a></li>
			<li><a href="#" style="color:white">News</a></li>
			<li><a href="#" style="color:white">About Us</a></li>
			<li><a href="#" style="color:white">Contact Us</a></li>

CSS Code
   	 background: #2BA6CB; /* Sets light blue background */
	height: 40px;  /* Sets the height to 40px, otherwise the nav bar will look like a line */
	line-height: 30px; /* It makes the links to appear in the middle */
	margin: 0 auto 30px auto;
	text-align: left;
	border-radius: 5px; /* Rounded Corner */
  #navlist li
     display: inline;
	 list-style-type: none;
	 padding-left: 30px;
	 padding-right: 10px;
	#navlist a:link{
	 text-decoration: none;

Step 2: Creating body content using below code.

<div class="row"  style="background-color:white;">
	<div class="nine columns" style="padding-left:2%; padding-bottom:5%;">
    <header><h5><a href="#" style="text-decoration:none;">Step by Step Web Design Guide</a></h5></header>
	<footer><i>This was posted on the 1st of January 2013 by ieatcss</i></footer>
    	<p>This ebook is not same as 1000s of other web design books in the Market. It is aimed at complete beginners, and assumes that you have no web design experience whatsoever. Don't worry, if you have no knowledge about web design! Basics of web technologies (html and css) are covered on first few sections.</p>
        <p>In this ebook you will learn how to use Zurb Foundation Framework for advance web designing. It is the only ebook available in the internet which teaches advance web design using 3 real life scenario sample websites with step by step explanations.</p>

	<header><h5><a href="#" style="text-decoration:none;">What is Zurb Foundation Framework?</a></h5></header>
	<footer><i>This was posted on the 2nd of January 2013 by ieatcss</i></footer>
	  <p>Zurb Foundation is the most advanced responsive front-end framework in the world.  Foundation 4 offers a free collection of tools to create complex responsive websites easily.  It contains HTML and CSS based design templates for Grids, Buttons, Forms, UI elements, Typography and much more.</p>
      <p>It has Flexible, efficient layout. In simple words, Zurb Foundation is what you need to start your web design carrier.</p>

Step 3: Adding Sidebar which provides feature panel and navigation links using below code.

<div class="three columns">
	  <h5 style="padding-left:5%;">Navigation</h5>
	  <ul class="navigation" style="list-style-type:none; padding-left:5%;">
	  <li><a href="" style="text-decoration:none;">Home</a></li>
	  <li><a href="" style="text-decoration:none;">News</a></li>
	  <li><a href="" style="text-decoration:none;">About Us</a></li>
	  <li><a href="" style="text-decoration:none;">Contact Us</a></li>

  	 <aside style="padding-right:5%;`">
		<div style="background-color:#F2F2F2;">
		<h5 style="padding-left:5%;">Featured</h5>
		<p style="padding-left:5%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio.</p>
		<a href="" style="text-decoration:none; padding-left:5%;">Read More >></a>

Step 4: Creating footer with navlist style class using below code.

<footer id="navlist" style="padding-left:2%;">
  <p style="color:white;">Copyright &copy; 2013 -</p>

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

Skeleton Template