How to teach yourself web development

Today I will share with you 5 things that I picked up from learning web development for almost 4 years. I was using WordPress almost for the past 6 years. I didn't take it seriously until about 4 years ago I was convinced that the best way to go about learning it is to take a project-based approach.

It keeps it more interesting especially if you making a website for a friend to help him out or maybe a charity in your community.  

For the sake of learning it is to decide on a project preferably something that involves a passion of yours, something that you genuinely interested in. I don't know it could be a dating website,  maybe you love coffee so it could be a website for a coffee shop. I say dating website because it's going to involve a database or it's going to be involve something that you don't know how to solve you might not even know what you actually need in order to solve it. You might not know which function you need which plugin you need and then you go up on the journey of hitting the forums and asking for help and that's how you become actually a good Google searcher.

How to use Google

That's part of being a developer is knowing how to use Google to your advantage. How to present a question on a forum and that way that's going to get more responses, more feedback. The great thing about it is that when you are involved in solving a problem? The important things are the confidence you that you gain from that.

Find one instructor

The second tip is if you can it can be difficult but try and find an instructor when you look at video tutorials and platforms try and find an instructor that you're resonate with someone who you can imagine hanging out with and chilling out and if you're not resume Voice I find some instructors are a little bit. A little bit too polished. Spend time on YouTube videos can be a lot better because the instructors on there tend to be a little bit more laid back. So I actually use at the moment a combination of Team Treehouse and YouTube videos and even blog posts.

Know your learning style

The third tip which is to know your learning style I find it helps to not only learn from video tutorials but also use books. You read what you want to read. You can easily jump and can take it into the garden when you feel like I need to get away from the laptop so it does come in handy and the great thing about books is that you can take it everywhere.

You can take it to the toilet if you are going to somewhere you can read it in train and that's the great thing about the book. but a lot of the times it helps to have the pdf version because you're going to have challenges they have like cold challenges you need to type that in to the laptop and it can be a bit of a hassle trying to keep the book open The 4 is you going to do it daily business is no good doing it one day 2 days 3 days in a row and then not doing it until next week it's no good because when you come back to it you waste a lot of time for figuring out where you were up to something happens in the brain when you learn in a craft daily you experience what's known as The Compound Effect I'm telling you magical things will happen when you do it daily you begin to not be so much focused on the end result. Dream job Feeling of progressing feeling competent at what you learn in you find a real death and a sensitivity comes with learning daily and that goes for learning anything in life number 5 is be patient when I started out I remember Wax developer and I sat down with Photoshop open and I was so frustrated I wanted to make these great websites but I didn't know how they didn't have the skills and it is frustrating and you feel like you're behind and everyone's ahead of me in slow down take your time just do what you got to do which is to learn step by step you can only take the next step. See in front of you you take that step then the next stepping stone it will present itself trust me it will be there for you go to take the step by using front of you now that's why you got to do just trust the next step will present itself Level all the way to professional from HTML CSS and then on to JavaScript if you won or python, PHP Actually build an iPhone app with the help of teamtreehouse I'm currently doing that.

Read More

How to submit HTML form to Google Sheet

How to submit HTML form to Google Sheet

In six simple steps, you can submit HTML form to google sheets.

 1. Create a new Google Sheet

• First, go to Google Sheets and withStart a new spreadsheet the templateBlank.
• Rename it. With any name you want.
• Put the following headers into the first row:

	A	B	C	...
1	timestamp	firstName

2. Create a Google Apps Script

• Click on Tools > Script Editor… which should open a new tab.
• Rename it Submit Form to Google Sheets. Sometimes the name takes time, wait for that until you are 100% satisfied
• When you are done with Tools->Script Editor and renaming, then, delete the function myFunction() {} block within the Code.gs tab.
• Paste the following script in it's place and File > Save:

 var sheetName = 'Sheet1'  
 var scriptProp = PropertiesService.getScriptProperties()  
 function intialSetup () {  
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()  
  scriptProp.setProperty('key', activeSpreadsheet.getId())  
 }  
 function doPost (e) {  
  var lock = LockService.getScriptLock()  
  lock.tryLock(10000)  
  try {  
   var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))  
   var sheet = doc.getSheetByName(sheetName)  
   var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]  
   var nextRow = sheet.getLastRow() + 1  
   var newRow = headers.map(function(header) {  
    return header === 'timestamp' ? new Date() : e.parameter[header]  
   })  
   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))  
    .setMimeType(ContentService.MimeType.JSON)  
  }  
  catch (e) {  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))  
    .setMimeType(ContentService.MimeType.JSON)  
  }  
  finally {  
   lock.releaseLock()  
  }  

 }  

Now you created a Sheet -> This sheet is already saved with some one of your choice -> and from Tools>Scripts Editor the script is past. Done now you can move the next step.

3. Run the setup function

• Next, go to Run > setup to run this function.
• In the Authorization Required dialog, click on Review Permissions.
• Sign in or pick the Google account associated with this projects.
• You should see a dialog that says Hi {Your Name}, Submit Form to Google Sheets wants to...
• Click Allow

4. Add a new project trigger

• Click on Edit > Current project’s triggers.
• In the dialog click No triggers set up. Click here to add one now.
• In the dropdowns select doPost
• Set the events fields to From spreadsheet and On form submit
• Then click Save

5. Publish the project as a web app

• Click on Publish > Deploy as web app….
• Set Project Version to New and put initial version in the input field below.
• Leave Execute the app as: set to Me(your@address.com).
• For Who has access to the app: select Anyone, even anonymous.
• Click Deploy.
• In the popup, copy the Current web app URL from the dialog.
• And click OK.

IMPORTANT! If you have a custom domain with Gmail, you might need to click OK, refresh the page, and then go to Publish > Deploy as web app… again to get the proper web app URL. It should look something like https://script.google.com/a/yourdomain.com/macros/s/XXXX….

6. Input your web app URL

Open the file named.index.html Online 12 replace <SCRIPT URL> with your script URL:

NOTE: In the above code you can see that <SCRIPT URL> you will replace it with your URL.

 <form name="contact">  
  <input name="email" type="email" placeholder="Email" required>  
  <button type="submit">Send</button>  
 </form>  
 <script>  
  const scriptURL = '<SCRIPT URL>'  
  const form = document.forms['contact']  
  form.addEventListener('submit', e => {  
   e.preventDefault()  
   fetch(scriptURL, { method: 'POST', body: new FormData(form)})  
    .then(response => console.log('Success!', response))  
    .catch(error => console.error('Error!', error.message))  
  })  
 </script>  

7. Adding additional form data

To capture additional data, you'll just need to create new columns with titles matching exactly the name values from your form inputs. For example, if you want to add first and last name inputs, you'd give them name values like so:

 <form name="submit-to-google-sheet">  
  <input name="email" type="email" placeholder="Email" required>  
  <input name="firstName" type="text" placeholder="First Name">  
  <input name="lastName" type="text" placeholder="Last Name">  
  <button type="submit">Send</button>  
 </form>  

Then create new headers with the exact, case-sensitive name values:

	A	B	C	D	...
1	timestamp	email	firstName	lastName

8. Submit HTML form to Google Sheet

Read More

HTML 5 and CSS 3 Responsive theme

Responsive them

Mobile

File setup

index.html

<html>

<head>

<title>Zia Personal Web site</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/style.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body class="body">

<header class="mainHeader">

<img src="images/logo.jpg" />

<div class="add">

this will be th add

</div>

<nav>

<ul>

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Contact Me</a></li>

</ul>

</nav>

</header>

<div class="mainContent">

<div class="content">

<article class="topContent">

<header>

<h2><a href="#" title="First Post">First Post</a></h2>

</header>

<footer>

<p class="post-info">This is posted by Zia</p>

</footer>

<content>

<p> This is my content here.This is my content here.

This is my content here.This is my content here.

This is my content here.This is my content here.</p>

<p>This is my content here.This is my content here.

This is my content here.This is my content here.

This is my content here.This is my content here.</p>

</content>

</article>

<article class="bottomContent">

<header>

<h2><a href="#" title="Second Post">Second Post</a></h2>

</header>

<footer>

<p class="post-info">This is posted by Zia</p>

</footer>

<content>

<p> This is my content here.This is my content here.

This is my content here.This is my content here.

This is my content here.This is my content here.</p>

<p>This is my content here.This is my content here.

This is my content here.This is my content here.

This is my content here.This is my content here.</p>

</content>

</article>

</div>

</div>

<aside class="top-sidebar">

<article>

<h2>Top sidebar</h2>

<p>his is my content here.This is my content here.

This is my content here.This is my content here.</p>

</article>

</aside>

<aside class="midde-sidebar">

<article>

<h2>Middle sidebar</h2>

<p>his is my content here.This is my content here.

This is my content here.This is my content here.</p>

</article>

</aside>

<aside class="bottom-sidebar">

<article>

<h2>Bottom sidebar</h2>

<p>his is my content here.This is my content here.

This is my content here.This is my content here.</p>

</article>

</aside>

<footer class="mainFooter">

<p>Copyright &copy;  <a href="http://zia-ullah-khan.blogspot.se/" title="Zia Personal Site">Zia Khan</a></p>

</footer>

</body>

</html>

styl.css

 body 

 {

 background-image: url('../Images/bg.jpg');

 color: #000305;

 font-size: 87.5%;

 font-family: Arial, 'Lucida sans Unicode';

 line-height:1.5;

 text-align: left;

 }

 a {

 text-decoration: none;

 }

 a:link, a:visited{

 color: #cf4c3f;

  

 }

 a:hover, a:active{

  color: #fff;

  background-color: #cf4c3f;

 }

 .body {

 margin: 0 auto;

 width: 75%;

 clear: both;

 }

 .mainHeader img {

 width: 30%;

 height: auto;

 margin: 2% 0;

 }

 .add {

  background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

  padding: 3% 5%;

   margin-top: 2%;

   width: 50%;

   float: right;

 height: auto;

 }

 .mainHeader nav {

 background-color: #666;

 height: 40px;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 }

 .mainHeader nav ul {

 list-style: none;

 margin: 0 auto;

 }

 .mainHeader nav ul li {

 float: left;

 display: inline;

 }

 .mainHeader nav a:link, .mainHeader nav a:visited {

color: #fff;

height: 40px;

line-height: 2.7em;

float: left;

width: 6em;

display: inline-block;

text-decoration: none;

text-align: center;

 }

 .mainHeader nav a:hover, .mainHeader nav a:active,

 .mainHeader nav .active a:link, .mainHeader nav .active :visited

 {

 background-color:#cf5c3f;

 text-shadow: none; 

 }

 .mainHeader nav ul li a{

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 }

 .mainContent {

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 }

 .content{

 width: 70%;

 float: left;

 }

 .topContent {

 background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 padding: 3% 5%;

 margin-top: 2%;

 }

 .bottomContent {

 background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

  padding: 3% 5%;

   margin-top: 2%;

 }

 .post-info {

 font-style: italic;

 color: #999;

 font-size: 90%;

 }

 .top-sidebar {

 width: 21%;

 float: left;

 background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 margin-left: 3%;

 padding: 2% 3%;

 margin-bottom: 2%;

 margin-top: 2%;

 }

 .midde-sidebar {

 width: 21%;

 float: left;

 background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 margin-left: 3%;

 padding: 2% 3%;

 margin-bottom: 2%;

 }

 .bottom-sidebar{

 width: 21%;;

 float: left;

 background-color: #fff;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 margin-left: 3%;

 padding: 2% 3%;

 margin-bottom: 2%;

 }

 .mainFooter {

 width: 100%;

 height: 40px;

 float: left;

 border-radius: 5px;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 background-color: #666;

 margin: 2% 0;

 }

 .mainFooter p {

 width: 92%;

 margin: 10px auto;

 color: #fff;

 }

 @media only screen and (min-width: 150px) and (max-width: 600px) {

 .body{

 width: 90%;

 font-size: 95%;

 }

 .mainHeader img {

 width: 100%;

 }

 .add {

  

 display: none;

   

 }

 .mainHeader nav {

 height: 160px;

 }

 .mainHeader nav ul {

 padding-left: 0;

 }

 .mainHeader nav ul li {

 width: 100%;

 text-align: center;

 }

 .mainHeader nav a:link, .mainHeader nav a:visited {

float: left;

width: 100%;

display: inline-block;

text-decoration: none;

text-align: center;

 }

 .content{

 width: 100%;

 float: left;

 margin-top: 2%;

 }

 .post-info {

 display: none;

 }

 .topContent {

 margin-top: 3%;

 }

 .bottomContent {

 margin-bottom: 4%;

 }

 .top-sidebar,.midde-sidebar , .bottom-sidebar {

 width: 94%;

 margin: 2% 0 2% 0;

 padding: 2% 3%;

 }

 }

Read More

How to filter data from a MySQL Database Table with PHP Function

Here if we want to filter data from above table.
First we will use a function which will use to get the data in array formate as following

<?php

function leaders($mysqli)
{
$arr = array();

if($stmt = $mysqli->prepare("SELECT firstname, lastname, pts FROM members ORDER BY pts DESC LIMIT 20"))
{
$stmt->execute();
$stmt->bind_result($firstname, $lastname, $pts);
while($stmt->fetch())
{
$arr[] = $firstname;
$arr[] = $lastname;
                    $arr[] = $pts;
}

return $arr;
}
}

?>

For displaying data we will use the following code.

<table width="100%" border="1" align="center"  bgcolor="#f0f0f0" id="member_table">

<tr bgcolor="#cf4c3f">

<td colspan="10" align="center">

<h2>Members</h2></td>

</tr>

<tr>

<th>Rank</th>

<th>First Name</th>

<th>Last Name</th>

<th>Points</th>

</tr>

    

<?php

    

  $leaders = leaders($mysqli);

 

       $rank = 0;

$leadcount = 0;

$leaddatacount = count($leaders);

for($i=0;$i<$leaddatacount;$i++)

{

$leadcount++;

if($leadcount==1) // Firstname

{

                    

                    $rank++;

echo "<tr><td>". $rank ."</td><td>". $leaders[$i] . "</td>";

}

elseif($leadcount==2) // Lastname

{

echo "<td>" .$leaders[$i]. "</td>";

}

                elseif($leadcount==3) // Points

                {

                    

                    echo "<td>" .$leaders[$i]. "</td></tr>";

                    

                    $leadcount = 0;

                    

                }

}

    

   ?>

    

</table>

Read More

How to connect your's Blog to Google Analytic

Google Analytic 

Google Analytic shows you the picture of your viewers, like what kind of viewers you have. From which places they are and what they think about your's bogs or website, I means what they feel.

Know your audience

Through Google Analytic you might easily know about your blog or website audience needs, like what they want to see in your blog or website. In more detail, it is like a kind of connection with you and your  audience.

Devices use to access you bog or website

Through Google Analytic you can easily know about that who is accessing my blog or website and through which kind of device, this will be help you to make your website or blog according to that.

How to you can create a Google Analytic for you site

It is a three steps very easy process. i.e. to sing up for Google Analytic, get your tracking scripts or ID and access your audience.

Please watch the following video tutorial, which will help you to deal with these three steps.
If you want to watch this video on YouTube please click on following link.

Read More

A very simple way to create main interface using Div tag

A very simple way to create main interface using Div tag.

<html>

<head>

<title> How you can use HTML <div> tag</title>

<style>

#body {

padding: 0;

margin:0;

background: black;

}

#header{

background: #ffffff;

width: 1000px;

height:260px;

margin-left: auto;

margin-right: auto; 

}

#nav_bar{

background: brown;

width: 1000px;

height: 60px;

margin-left: auto;

margin-right: auto;

}

#main_con{

border-right:2px red;

background: #ffffff;

float: left;

width: 700px;

height: 600px;

margin-left: 212px;

}

#side_bar{

border-right:2px red;

background: #cccccc;

float: right;

width: 298px;

height: 600px;

margin-right: 212px;

}

#footer{

background: brown;

width: 100%;

height: 40px;

clear: both;

}

</style>

</head>

<body id= "body">

<div id="header">this is header</div>

<div id="nav_bar">this is navigation

 bar</div>

<div id="main_con">this is manin content</div>

<div id="side_bar">this is side bare</div>

<div id="footer">this is footer</div>

</body>

</html>

Read More

How to use GitHub - Basic understanding

What GIT dose?

GIT is a very handy tool for any web developer. If you work on big project some time it is very very difficult to keep track of you code, in such case Git help. Git can be valuable for a single developer but more valuable for a team of developers. It allows a team who is working where i.e. I mean who wrote which code.

How to install Git?

I order to install Git first you need to download its exe file. Click here to download the exe file.

If you git segmentation fault 11 error then you need to uninstall the installed version and reinstall the correct version according to you operating system. Click on this link to find other version.

I had the issue when I installed on my IMAC then I found the following solution to fix the issue.

Uninstalling Git latest version (2.2.0) and reinstalling Git version 1.8.4.2 worked for me. Here is the download link for git 1.8.4.2

It says snow-leopard but actually works for Lion here is the page with all git-osx-installer

How to configure Git?

I order to configure Git you need to open the terminal and type the following commands.

git config --global user.name "your user name" 

press enter

git config --global user.email your email address

Note: do not add "" when you enter your email address

Read More

How to use GitHub - Basic understanding

What GIT dose?

GIT is a very handy tool for any web developer. If you work on big project some time it is very very difficult to keep track of you code, in such case Git help. Git can be valuable for a single developer but more valuable for a team of developers. It allows a team who is working where i.e. I mean who wrote which code.

How to install Git?

I order to install Git first you need to download its exe file. Click here to download the exe file.

If you git segmentation fault 11 error then you need to uninstall the installed version and reinstall the correct version according to you operating system. Click on this link to find other version.

I had the issue when I installed on my IMAC then I found the following solution to fix the issue.

Uninstalling Git latest version (2.2.0) and reinstalling Git version 1.8.4.2 worked for me. Here is the download link for git 1.8.4.2

It says snow-leopard but actually works for Lion here is the page with all git-osx-installer

How to configure Git?

I order to configure Git you need to open the terminal and type the following commands.

git config --global user.name "your user name" 

press enter

git config --global user.email your email address

Note: do not add "" when you enter your email address

Read More

Complete index page including Bootstrap, FontAwesome and jQuery

Just add the following code to your index page and you are ready to use all the functionalities of Bootstrap, FontAwesome and jQuery

 <!DOCTYPE html>  
 <html>  
   <head>  
    <title> </title>  
    <!-- Favicon Start -->  
    <link rel="icon" type="image/png" href="resources/images/favicon.png" />  
    <!-- Favicon End -->  
    <!-- Meta Tags Start -->  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <!-- Mobile First -->  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    <!-- Mobile First -->  
    <!-- Meta Tags Start -->  
    <!-- Latest compiled and minified CSS Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
    <!-- Latest compiled and minified CSS End -->  
    <!-- Optional theme Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
    <!-- Optional theme End -->  
    <!-- JQuery UI CSS Start -->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.structure.min.css">  
    <!-- JQuery UI CSS End -->  
    <!-- Sticky Footer Basic CSS Start -->  
    <style>  
      /* Sticky footer styles  
      -------------------------------------------------- */  
      html {  
      position: relative;  
      min-height: 100%;  
      }  
      body {  
      /* Margin bottom by footer height */  
      margin-bottom: 60px;  
      }  
      .footer {  
      position: absolute;  
      bottom: 0;  
      width: 100%;  
      /* Set the fixed height of the footer here */  
      height: 60px;  
      background-color: #f5f5f5;  
      }  
      /* Custom page CSS  
      -------------------------------------------------- */  
      /* Not required for template or sticky footer method. */  
      .container {  
      width: auto;  
      max-width: 680px;  
      padding: 0 15px;  
      }  
      .container .text-muted {  
      margin: 20px 0;  
      }  
    </style>  
    <!-- Sticky Footer Basic CSS End -->  
    <!-- JQuery Start -->  
    <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>  
    <!-- JQuery End -->  
    <!-- JQuery UI Start -->  
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.min.js"></script>  
    <!-- JQuery UI End -->    
    <!-- FontAwesome JavaScript Start -->  
    <script src="https://use.fontawesome.com/d639cd4fa4.js"></script>  
    <!-- FontAwesome JavaScript Start -->  
    <!-- Latest compiled and minified JavaScript Start -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
    <!-- Latest compiled and minified JavaScript Start -->  
   </head>  
   <body>  
    <!-- Navigation Areas -->  
    <nav class="navbar navbar-default" role="navigation">  
      <!-- Main Navigation Start -->  
      <div class="container">  
       <!-- Navigation Container Start -->  
       <ul class="nav navbar-nav">  
         <li><a href="#">Home</a></li>  
         <li><a href="#">About Us</a></li>  
         <li><a href="#">FAQ</a></li>  
         <li><a href="#">Contact</a></li>  
       </ul>  
      </div>  
      <!-- Navigation Container End -->  
    </nav>  
    <!-- Main Navigation End -->  
    <h1><i class="fa fa-university" aria-hidden="true"></i>This is without Bootsrap!</h1>  
    <!-- Footer Areas -->  
    <footer class="footer">  
      <!-- Footer Start -->  
      <div class="container">  
       <!-- Footer Container Start -->  
       <p class="text-muted">Place sticky footer content here.</p>  
      </div>  
      <!-- Footer Container End -->  
    </footer>  
    <!-- Footer End -->  
   </body>  
 </html>  

Read More

Use CSS To Work With Background Images

Use CSS To Work With Background Images

In order to do this you can easily use CSS for your websites. Here is the example CSS code to apply those effects. If you play with this you can achieve your goal according to your's need.

1. Overlay the image

Apply image overlay on background image with the following concept

 .darken {  
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(YOUR IMAGE HERE);  
 }  

Example

This is just a simple example which you can do change in according to your need.

HTML

 <div class="test">  
   <p>Beautiful image with dark overlay</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
   position: relative;  
 }  
 .test p {  
   font-size: 23px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   position: absolute;  
   top: 160px;  
   left: 22px;  
 }  

2. Put text in a box

Apply text in a box above background image with the following concept
Note: The image fades towards black at the bottom, with white text written over it

 .text-box {  
 background-color: rgba(0, 0, 0, 0.5);  
 color: #fff;  
 display: inline;  
 padding: 10px;  
 }  

Example

This is just a simple example about text in a box

HTML

 <div class="test">  
   <p>Beautiful image with some text in a box</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   position: relative;  
   background-image: url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
 }  
 .test p {  
   background-color: rgba(0,0,0,0.6);  
   color: #fff;  
   display: inline;  
   padding: 10px;  
   font-size: 30px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   width: 440px;  
   position: absolute;  
   top: 120px;  
   left: 20px;  
 }  

3. Floor fade

With this Floor fade effect you can put the text over image in the background. This effect is normally used in many latest websites. 

 .floor-fade {  
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);  
 }  

Example

Here is the simple example of Floor fade effect.

HTML

 <div class="test">  
   <p>Beautiful image with floor fade</p>  
 </div>  

CSS

 .test {  
   width: 500px;  
   height: 400px;  
   background-size: cover;  
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url("https://download.unsplash.com/photo-1428604467652-115d9d71a7f1");  
   position: relative;  
 }  
 .test p {  
   font-size: 24px;  
   color: #fff;  
   text-transform: uppercase;  
   font-family: sans-serif;  
   position: absolute;  
   bottom: 10px;  
   left: 25px;  
 }  

Read More

What are basic fundamentals of JavaScript?

According to w3schools JavaScript is the programming language of HTML and the Web. JavaScript is used to add more functionalities to you web applications.

Where to use JavaScritp?

You can use JavaScritp in different ways which we will conver with examples.

1. JavaScript in <head> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>  

2. JavaScript in <body> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </body>  
 </html>  

3. External JavaScript

index.php

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script src="main.js"></script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>  

main.js

 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  

What simply JavaScript can do for you?

JavaScript can do a lot, but here we will use a very simple examples to answer the above questions that what exactly JavaScript can do for you.

JavaScript Can Change HTML Content

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction() {  
      document.getElementById("txt").innerHTML = "JavaScript Can Change HTML Content!";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is the HTML contect!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>  

JavaScript Can Change HTML Attributes

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <button onclick="document.getElementById('bulb').src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkJ_OzR4FdacfzGLRHQdPBbsdgKh4kbkaibx8C6-0FvwljUg14f0r1fR6pmo3PdkHLkAhnPNuhWJn9Of6RyANYTS94ahvJRQJRqlbtTqY2gdpZ0lCHMYlPssUOS6Fv9F7w7Sl-QRxABE/s1600/pic_bulbon.gif'">ON!</button>  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif  
 " id="bulb"/>  
 <button onclick="document.getElementById('bulb').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif'">OFF!</button>  
 </body>  
 </html>  

JavaScript Can Change HTML Styles (CSS)

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.fontSize='20px'">Click to hange font size!</button>  
 </body>  
 </html>  

JavaScript Can Show HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:none;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'block'">Show!</button>  
 </body>  
 </html>  

JavaScript Can Hide HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:block;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'none'">Hide!</button>  
 </body>  
 </html>  

JavaScript Output

JavaScript mostly used the four ways to display the data.

1. Writing into an alert box, using window.alert().
2. Writing into the HTML output using document.write().
3. Writing into an HTML element, using innerHTML.
4. Writing into the browser console, using console.log().

1. Writing into an alert box, using window.alert().

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <script>  
 $(document).ready(function(){  
   window.alert("This will alert");  
 });  
 </script>  
 </body>  
 </html>  

2. Writing into the HTML output using document.write().

 <script>  
 $(document).ready(function(){  
   document.write("This is document dot write");  
 });  
 </script>  

3. Writing into an HTML element, using innerHTML.

 <body>  
 <p id="text"></p>  
 <script>  
 $(document).ready(function(){  
   document.getElementById("text").innerHTML = "This is the example of innerHTML";  
 });  
 </script>  
 </body>  

4. Writing into the browser console, using console.log().

 <script>  
 $(document).ready(function(){  
   console.log(11+10);  
 });  
 </script>  

JavaScript Statements

The line of instruction executed by the web browser is called JavaScript statements. JavaScript statements must end with semicolons ; such as the semicolons inside curly brackets(;).

Example:

 document.getElementById("demo").innerHTML = z;  

JavaScript Comments

Comments in JavaScript is either single like or more than one line, show in example.

Single line comments start with //

More than one line comments start with /* and end with */

 // Single line comments:  
 document.getElementById("demo").innerHTML = z;  
 /*  
 Double like commnets  
 These lines will be ignored.  
 */  
 document.getElementById("myH").innerHTML = "My First Page";  

JavaScript Variables

Read More