Free Advanced Web Design Tutorials

Step 1 : Creating Home Page

In this tutorial, We will create Game Site Home Page like this image.

Twitter Bootstrap Game Site Website Home Page

Step 1.1: Creating Game Site Layout

Step 1.1.1: Create empty html file and add title, path of bootstrap javascript files and bootstrap css files like below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Grid Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet">
    </head>

  <body>

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script> 	
  </body>
</html>

Step 1.1.2: Create page header which contain logo in left side and links in right side by just add this below code.

<div class="row">
  <div class="col-md-2">
  </div>
  <div class="col-md-8">
  <!-- Navigation -->
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Game Site</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="game-site-index.html">Home</a></li>
        <li><a href="game-site-browse.html">Browse Games</a></li>
		<li><a href="game-site-about.html">About Us</a></li>
		<li><a href="game-site-contact.html">Contact Us</a></li>
	  </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
	 </div>
	</div>  
  </nav>

Step 1.1.3: Save the header and open it in your favorite browser, the web page will look like,

Twitter Bootstrap Game Site Website Header

Step 1.1.4: Create page footer using below code.

<footer>
      <div class="row">
        <div class="col-md-5">
          <p>?? Copyright no one at all. Go to town.</p>
        </div>
        <div class="col-md-7">
          <ul class="nav nav-pills pull-right">
            <li><a href="game-site-index.html">Home</a></li>
            <li><a href="game-site-browse.html">Browse Games</a></li>
            <li><a href="game-site-about.html">About Us</a></li>
			<li><a href="game-site-contact.html">Contact Us</a></li>
          </ul>
        </div>
      </div> 
  </footer>
  </div>
  <div class="col-md-2">
  </div>  
</div>

Step 1.1.5: Save the Game Site layout file and open it in your favorite browser, the web page will look like,

Twitter Bootstrap Game Site Website Layout

Step 1.1.6: Take a copy of layout page for creating other page.

Step 1.2: We are going to add image thumbnail for different game in our home page. Add this below code for image thumbnail.


<div class="row">
  <div class="col-md-3">
    <a href="#" class="thumbnail">
      <img src="img/game-site-1.jpg" alt="...">
    </a>
    <div class="panel-footer text-center">Chess</div>
  </div>

  <div class="col-md-3">
    <a href="#" class="thumbnail">
      <img src="img/game-site-2.jpg" alt="...">
    </a>
    <div class="panel-footer text-center">Blob Bob</div> 
  </div>

  <div class="col-md-3">
    <a href="#" class="thumbnail">
      <img src="img/game-site-3.jpg" alt="...">
    </a>
    <div class="panel-footer text-center">Alien Showdown</div>
  </div>
  
  <div class="col-md-3">
    <a href="#" class="thumbnail">
      <img src="img/game-site-4.jpg" alt="...">
    </a>
    <div class="panel-footer text-center">Matrix</div>
  </div>
  
</div>

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

Twitter Bootstrap Game Site Home Page

Step 1.3: Next create panel for game news and button for action.

 
<div class="row">
  <div class="col-md-8">
    <div class="panel-footer">
      <div class="row">
	    <div class="col-md-6">
		  <h2>Games News</h2>
		  <hr />
		  <p><b>Games of the Future will have 32 Bits.</b></p>
		</div>
		<div class="col-md-6">
		  <p>This is just a sample content, don't pay much attention to it. It is used just to fill space nothing more. To read about real game news try searching Google.com or your favorite gaming websites.</p>
		</div>
	  </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <h2>Get In Touch!</h2>
    <hr />
	<button type="button" class="btn btn-primary text-center" style="width:100%;">Call to Action!</button>
  </div>
</div>
<hr />

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

Twitter Bootstrap Game Site Website Home Page 2

Step 1.4: We are going to add image thumbnail with discription for latest release and payment details.

<div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="img/game-site-5.jpg" alt="...">
        <div class="caption">
          <h3>Latest Release</h3>
          <p>This is the latest release from our games site. It features the movie lord of the ring and follows the story as close to the movie as possible.</p>
        </div>
      </div>
  	<button type="button" class="btn btn-primary text-center" style="width:100%;">99 Items in your cart</button>
    </div>
    
    <div class="col-sm-6 col-md-8">
     
     <div class="row">
       <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 1" alt="...">
  	     <div class="panel-footer text-center">
  	     <p>Game 1</p>
  	     <p>$50.00</p></div>
  	   </div>
  	 </div>
  
  	 <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 2" alt="...">
  	     <div class="panel-footer text-center">
  	     <p>Game 2</p>
  	     <p>$47.00</p></div>
  	   </div>
  	 </div>
  	 
  	 <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 3" alt="...">
  	     <div class="panel-footer text-center">
  	     <p>Game 3</p>
  	     <p>$34.00</p></div>
  	   </div>
  	 </div>
  	</div>
  	
  	<div class="row">
       <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 4" alt="...">
  	     <div class="panel-footer text-center">
  	     <p>Game 4</p>
  	     <p>$47.00</p></div>
  	   </div> 
  	 </div>
  	 
  	 <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 5" alt="...">
  		 <div class="panel-footer text-center">
           <p>Game 5</p>
  	     <p>$26.00</p></div>
  	   </div>
  	 </div>
  	 
  	 <div class="col-md-4">
  	   <div class="thumbnail">
  	     <img src="http://placehold.it/300x300&amp;text=Game 6" alt="...">
  		 <div class="panel-footer text-center">
  	   	 <p>Game 6</p>
  		 <p>$16.00</p></div>
  	   </div>
  	 </div>
  	</div>
     
    </div>
  </div>

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

Twitter Bootstrap Game Site Website Home Page
Step 2 >>