Better combination of languages to write an awesome website

Every developer before starting to write some code to develop a website, need to think and consider some languages which fulfil their requirements. A developer needs to takes so many issues into consideration to start his/her application and accordingly need to choose languages. Some of such things include UI, UX, FUNCTIONALITY, SECURITY etc.

In this post I am writing about the languages to choose to fulfil almost all the above needs.

1. HTML / HTML 5

This is the most common language which is used in every web based application. After advancement of HTML 5 Developers are able to develop awesome applications in mobile platform too . This language is commonly used for laying out your website.

    2. CSS / CSS 3 

This used to style the webpages written in HTML. Both HTML and CSS combines to create Front-End of the web site.

   3. JAVASCRIPT

After creating the basic look for your website now you want to give more awesomeness to your application by creating some animations and also create interactions between your website and a client. To accomplish this task u need JAVASCRIPT or it's Libraries like JQUERY, TWEEN.JS, CHART.JS, 

   4. BOOTSTRAP

Now a days, people are opening your applications from different screen sized devices. If your site doesn't support for different screen sizes then you are in big trouble of loosing more than 50% of your clients. Bootstrap is the best option to create responsive websites very easily with very less code .http://getbootstrap.com  is the official website.

  5. LARAVEL

The above language helps you to create world class User Interface and User Experience. Now comes the main part for any application i,e. Functionality. In present days no one wants any static website. Every one needs it with more and more functionalities and also in a secured way. Now to handle that LARAVEL is the awesome framework written on the basis of PHP. It helps you create most secured websites in some minutes. http://laravel.com is the official website.

So, this is it guys. Try mastering these languages and create awesome websites. Happy Coading

Redirecting the users using JQUERY and JavaScript

Suppose you have created a button and when the user clicks that button you want navigate the user to some other page that is what I am going to teach you in this tutorial. You can also user <a href=""></a> tags to do the same thing but I am teaching you how to do that without anchor tags.

html

<button id="home">Home</button>

js

$(document).ready(function(){

        $('#home').click(function(){

              window.location.href="home.php";

        });

});

See how simple it is. If you have any doubts comment below or mail me @ ething4pc@gmail.com

Creating overlay boxes using HTML, CSS and JQUERY

What are overlay boxes?
I think you may have come across this situation, when you open some website and click on login button one pop up box open with login or sign up form in it and there will be some semi transparent box surrounding that white colour box . Those pop up's are called overlay's.

What is the general use of these overlay's?
Suppose, if you don't want to show every information in the page by default when it loaded. and if you want to show certain kind of information after clicking particular link or a button and you want to show in the same page then you can use overlay's. If you want to run some kinds of special ads then also you can use overlay boxes.

Let's start creating an overlay box. here in this post I will show simple confirmation message pop up overlay, you can build up this according to your usage.

html

<div id="overlay"></div>

<div id="message_container">

        <div id="message_container_in></div>

</div>

<button id="btn">Click me</button>

css

#overlay{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 700px;
     background: #000000;
     opacity: 0.7;
    z-index: 99;
    display: none;
}

#message_container {
     position: absolute;
     top: 200px
      width:100%;
     z-index: 999;
     display:none;
}

#message_container_in {
    width:400px;
   padding:10px;
    border-radius: 5px;
    margin:0px auto;
    font-size:20px;
   background: #ffffff;
   z-index: 1000;
}

JQuery

$('#btn').click(function(){

$('#overlay').show();
$('#message_container').slideDown(300);
        $('#message_container').text("You have clicked me");

});


This is it guys. I hope you understood the code written above. If you find any complexities please comment below so that I can explain everything.

How to Install Bootstrap?

Before knowing how to use the Bootstrap let me explain what is bootstrap, when and why we use it.

What is Bootstrap?
Bootstrap is a CSS and JavaScript library developed by two employees in the Twitter. It follows Mobile first approach to give the 100% responsiveness to the web applications in different screen resolutions. You just need to write code once and that it self adjust for different screen sizes. In 2014 Bootstrap is the Git Hub's top project according to Wikipedia.

Why and When we need to use Bootstrap?
Bootstrap is used for building responsive web applications with very less code. We just need to write code once and Bootstrap will take care about different screen sizes. 

Installing Bootstrap into your code
Step 1. Open http://www.getbootstrap,com which is the official website for the Bootstrap
Step 2. Click on the Getting Started link in the Navigation Bar.
Step 3. Click on Download Bootstrap button on the left side. You will get download files in Zip file format.
Step 4. Extract the files you will see three folders named css, fonts, js. 
Step 5. Open css folder and copy bootstrap.min.css file and bootstrap-theme.min.css file and paste in your working folder and include them in your files in the head section as a external style sheet.
Step 6. Open js folder and copy the bootstrap.min.js file and paste in your working directory and include this js file in your body section inside script tags. Other thing is you need to compulsory include jquery to use bootstrap js file functionalities. to do that.
Step 7. Open www.jquery.com and click on download button in the navigation bar.
Step 8. now scroll down a little bit you will find jquery latest series something like jquery 2x series. Now click on the latest file and download link with name production in it. extract the zip file and get the jquery-min.js and include in the working file before bootstrap js file.

Now your document look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tile of website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery-min.js"></script>

</head>
<body>


<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

That's it now you are ready to write the responsive code. Stay tuned to this blog I will explain some of the important things we use in bootstrap very soon.

If you have any doubts please comment below or you can mail us at ething4pc@gmail.com.

JavaScript and Libraries

JavaScript is a scripting language used to create interactivity between the web page and the user. It works with DOM (Document Object Model). There are a hell lot of libraries made with JavaScript to make the life of a  developer more simpler. Each library has its own functions which is concentrated to solve a particular problem. Let's have a look on some of it's libraries and see what they can do.

JQUERY : JQuery is the most lightest library among all the libraries available. It is generally used for small animation effects like fade in, fade out, display, hide etc. With the help of jquery we can accomplish those tasks very easily with small and simple code.

DOJO : Dojo is a great library which saves your time. It helps you to build very sophisticated apps very easily in very less time.

Tween.js: Tween is the fantastic library for smooth animations. It is the library from a create js team. Google uses this library for their smooth animation effects.

Three.js : Three.js is 3D JavaScript library. It works on WebGL . It is used to create 3D effects and other games.

Angular JS : HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. It's most powerful library.

These are some of the main libraries of JavaScript. You can research and find out about other lot of libraries available.