Follow

Welcome to TechYari!

Tutorials on webdesign, web development and more...

Create a website using Bootstrap, HTML5, jQuery and CSS3



By  Vipin Dubey     6/27/2014    Labels:,,,,,, 

Introduction

Everyone wants to have his own website, in this post I am going to show you one of the easiest way to create one using html5, css3 and jQuery. I will also add one slider to the homepage. This will be a single page website but you can copy the code and manipulate it to create a website with multiple pages in the same way.

What we need  :




Download Source  Demo

Step 1 : Creating the html page

We need to create the basic markup with css classes which will be used later to add style to the page. In order to make things easier we need a css framework. There are many frameworks available and I will be using Twitter Bootstrap for this website creation tutorial. We also need a jQuery plugin to create the desired slider on homepage. We will use jQuery Nivo Slider plugin to achieve this. Below is the html markup :


<!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">
    <title>TechYari - HTML5, CSS3, JavaScript Demo & Tutorials</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="plugins/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
     <link href="plugins/nivo-slider/nivo-slider.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <header class="navbar">
    <div class="container">
     <div class="col-md-8 navbar-header">
        <a href="#">TechYari</a>
     </div>
        <div class="col-md-4 main-navigation">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
      </div>
    </div> 
    
   </header>
   <div class="wrapper">
     <div class="slider-bg">
      <div class="container">
     <div class="col-md-8 col-md-offset-2">
             <div class="slider-wrapper theme-default">
              <div id="slider" class="nivoSlider">
                <img src="img/1.jpg" data-thumb="img/1.jpg" alt="" />
                <a href="http://techyari.in"><img src="img/1.jpg" data-thumb="img/2.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="img/2.jpg" data-thumb="img/3.jpg" alt="" data-transition="slideInLeft" />
                <img src="img/3.jpg" data-thumb="img/4.jpg" alt="" title="#htmlcaption" />
              </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>
     </div>
     </div>
   </div>
   <div class="container">
     <div class="row">
     <div class="col-md-4">
        <div class="intro">
            <div class="image"> <img src="img/iPad.png"/></div>
            <h2>Introducing new iPad</h2>
            <p>Lorem ipsum dollor Lorem ipsum dollor Lorem ipsum dollorLorem ipsum dollorLorem</p>
        </div>
      
     </div>
     <div class="col-md-4">
         <div class="intro">
            <div class="image"><img src="img/monitor.png"/></div>
            <h2>Fall in love with MacBook</h2>
            <p>Lorem ipsum dollor Lorem ipsum dollor Lorem ipsum dollorLorem ipsum dollorLorem</p>
        </div>
     </div>
     <div class="col-md-4">
         <div class="intro">
            <div class="image"><img src="img/Printer.png"/></div>
             <h2>Wirelss Printing</h2>
            <p>Lorem ipsum dollor Lorem ipsum dollor Lorem ipsum dollorLorem ipsum dollorLorem</p>
        </div>
     </div>
     </div>
     <hr class="half-rule">
     <div class="tagline">
        <p>This is an awesome website. You will love it for sure</p>
        <a href="#">Download Source Code</a>
     </div>
      </div>
   </div>
    <div class="credits">
      <div class="container">
         <div class="col-md-4">
            <h4>Credits & Attributions:</h4>
         </div>
          <div class="col-md-4">
            <p>Images :</p>
            <ul>
              <li><a href="https://www.flickr.com/photos/katsrcool/14511055622/">Kool Cats Photography</a></li>
               <li><a href="https://www.flickr.com/photos/breatheoutnow/14505171801/">breatheoutnow</a></li>
                <li><a href="https://www.flickr.com/photos/118118485@N05/14535481923/">Michael D Beckwith</a></li>
            </ul>
         </div>
          <div class="col-md-4">
            <p>Scripts :</p>
            <ul>
              <li><a href="http://jquery.com/">jQuery</a></li>
              <li><a href="http://getbootstrap.com/">Bootstrap</a></li>
              <li><a href="http://dev7studios.com/plugins/nivo-slider/">Nivo Slider</a></li>

            </ul>
         </div>
      </div>
    </div>
   

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
 <footer>
        &copy 2014 Techyari.in | All rights reserved
    </footer>

  </body>
</html>

So we have our markup ready, now we need to style it. Use below css code to style the page :


/********** General Styles *********/
body{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
p{color:#555;}
.navbar{ height:50px;background:#ffffff;color:gray;margin-bottom: 0px;}
.navbar-header{padding-top: 5px;}
.navbar-header a{font-weight: bold;font-size: 32px;line-height: 32px;color:gray;text-decoration: none;}
.wrapper{min-height:500px; margin-bottom: 20px;}
.post-title h2{text-align: center; margin-bottom: 50px;}
.post-title a{text-decoration: none;}
footer{border-top: 1px solid gray;text-align: center;}


/********** Navigation *********/

.main-navigation ul li{float: left;list-style-type: none;margin: 10px 0px 0px 10px}
.main-navigation ul li a{text-decoration: none;color:#555;font-size: 14px;;}
.main-navigation ul li a:hover,.main-navigation ul li a:focus,.main-navigation ul li a:active{color:#428bca;}
.slider-bg{background: #244363;padding: 20px 0px 20px 0px;margin-bottom: 20px;}
.intro{text-align: center;}
.half-rule {width: 100px;margin: 40px auto;}
.tagline{text-align: center;}
.tagline p{font-size: 20px;font-weight: bold;}
.tagline a{text-decoration: none;padding: 6px 10px;border: 1px solid gray;border-radius: 5px;}
.credits{text-align: left; margin-top: 100px;background: rgb(57, 93, 156);padding: 10px;color: white;}
.credits p{color: white}
.credits ul li{list-style-type: none}
.credits a{color: white}

Our website is almost ready now...we just need to call jQuery NivoSlider plugin to activate the slider. Add below code to the footer area of website and refresh your browser. Download source code and try it if you get into any trouble.



<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>


That's it we have created a simple yet beautiful website with very few lines of code. Kindly share this tutorial if you found it useful. Use comment box below for any suggestions and doubts. Happy coding. Cheers :)

About Vipin Dubey

A web developer, blogger, amateur designer and an open source enthusiast.

No comments:

Post a Comment


Contact Form

Name

Email *

Message *

Labels

Follow TechYari on

Translate

About TechYari

Tech Yari is a Technical Blog featuring articles on Web Development, Web Design, Search Engine Optimization, Social Media Marketting and Programming.