Follow

Welcome to TechYari!

Tutorials on webdesign, web development and more...

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 :)

Introduction

Today I am going to create three simple yet beautiful animated hover popup using jQuery, HTML and CSS.
I will be using below functions/events provided by jQuery to achieve this effect

1. mouseenter() - to show the popup when user enters mouse over the link/button.
2. mouseleave() - to hide the popup when user leaves the button.
3. fadeToggle() - to add animation to the popup window, you can use other functions to create different effects according to your needs.

Demo

In order to create this I have used twitter bootstrap with jQuery. There are many different ways to style a hover popup, one is using images but I have styled this popup using css3 and it may not work in older browsers ( IE 9 and earlier ). I have tested this using chrome, you can tweak it to work on other browsers as well.

HTML Code



<div class="container">
      <div class="post-title">
     <h2><a href="#">Creating an animated hover popup using jQuery and CSS3</a></h2>
      </div>

      <div class="row hover-demo">
        <div class="col-md-4">
          <div class="outer-wrapper">
            <div class="on-hover-content">
            <img src="img/mustang.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada turpis metus, vitae fermentum mauris imperdiet ut. Suspendisse aliquam</p>
            </div>
            <a type="button" class="btn btn-primary">An Image with text</a>
           </div>
        </div>
        <div class="col-md-4">
           <div class="outer-wrapper">
            <div class="on-hover-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada turpis metus, vitae fermentum mauris imperdiet ut. Suspendisse aliquam</p>
            </div>
            <a type="button" class="btn btn-success">A paragraph</a>
        </div>
        </div>
        <div class="col-md-4">
           <div class="outer-wrapper">
            <div class="on-hover-content">
              <img src="img/mustang.jpg">
            </div>
          <a type="button" class="btn btn-info">Image only</a>
        </div>
        </div>
      </div>
   </div>

CSS Code


.hover-demo{margin-top: 220px;}
.hover-demo{text-align: center;}
.on-hover-content{position: absolute;bottom: 40px;background-color: whitesmoke;padding: 10px;border-radius: 10px;}
.on-hover-content img{width:360px;}
#dynamic-content{width: 360px;overflow: scroll;}

In this HTML code I have created 3 links and  styled them as buttons using bootstarps classes. All of them have on div element as a sibling which contains the hover popup content to be shown while someone hovers over the links. We will hide these popup content initially using jQuery's hide() method and the we will use mouseenter() and mouseleave() to show and hide hover popup content.

Below is the jQuery code to achieve the result.



 <script type="text/javascript">
      $(document).ready(function(){
          $("div.on-hover-content").hide();
      });

      $(".btn").mouseenter(function(){
        $(this).siblings("div.on-hover-content").fadeToggle( "slow", "linear" );
      })
      .mouseleave(function(){
         
        $(this).siblings("div.on-hover-content").fadeToggle( "slow", "linear" );
      });

    </script>
That's all we have created a nice hover popup in no time with few lines of code using jQuery.

Kindly share this tutorial if you like it :). Leave comments below for suggestions and doubts. 

What is a Wordpress Plugin

Plugins are small piece of software program that can integrate with your wordpress installation and add additional features like gallery support for images, carts for e-commerce sites, spam detection for comments and much more.

Everyone uses plugins to optimize and make their blog more interactive and Wordpress plugin directory has huge number of plugins to accommodate everyone's needs. Below is a list of few popular plugins that can help you get most of your blogs.

W3 Total Cache

W3 Total Cache is a plugin that can improve your websites performance by various methods like caching, minifying and using content delivery networks.



Jetpack

Jetpack adds a lot of features like simple stats, email subscription, likes, comment system with social networking, contact forms and much more.



iThemes Security

Security is one of the most important aspect for any blogger or organization. iThemes Security is one of the most popular plugin to make your blog secure from hackers.



NextGen Gallery

NetGen Gallery is one of the most downloaded gallery plugins with over 10 million downloads. It provides abilities like batch uploads,import metadata, edit thumbnails, group galleries into albums and much more.



Kindly share and reply with comments if you like this post, add your favorite plugins as well.

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.