Website Design Course in Andheri ,Mumbai

Posts

layout code example:-

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <section> <div class="container"> <header> <h3 class="text-center">Services</h3> <p class="text-center">Laudem ...

Juqery Event

(1)Click Event example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ alert("The paragraph was clicked."); }); }); </script> </head> <body> <p>Click on this paragraph.</p> </body> </html> (2)Mouseenter Event Example :- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").mouseenter(function(){ $("p").css("background-color", "yellow"); }); $("p").mouseleave(function(){ $("p").css("background-color", "lightgray"); }); }); </script> </head> <body> <p>Move the mouse po...

Jquery Method Chaining

jQuery Method Chaining:- Until now we have been writing jQuery statements one at a time (one after the other). However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s). Tip: This way, browsers do not have to find the same element(s) more than once. To chain an action, you simply append the action to the previous action. The following example chains together the css(), slideUp(), and slideDown() methods. The "para1" element first changes to red, then it slides up, and then it slides down: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#para1").css("color", "red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id=...

jQuery Callback Functions

jQuery Callback Functions:- JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: $(selector).hide(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); }); </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html>

Juqery stop

jQuery stop() Method:- The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).stop(stopAll,goToEnd); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: #555; color: white; border: solid 1px #666; border-radius: 3px; } #panel { padding: 50px; display: none; } </style> </head> <body> <button id="stop">S...

jQuery Animations

jQuery Animations - The animate() Method:- The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); Note:- By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); }); }); </script> </head> <body> <button>Start Animation</button> <p>Animate example </p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> </html>

Jquery Sliding

jQuery Sliding Methods:- With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown() example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP() example:- <html> <head> <script src="https://ajax....

Juqery fade

jQuery Fading Methods :- With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>...

Jquery Hid and Show

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $("p").hide(); }); $("#button2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="button1">Hide</button> <button id="button2">Show</button> </body> </html>

Angular Js

AngularJS Introduction AngularJS is a JavaScript framework . It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives , and binds data to HTML with Expressions . AngularJS is a JavaScript Framework AngularJS is a JavaScript framework written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: < script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < /script > AngularJS Extends HTML AngularJS extends HTML with ng-directives . The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. AngularJS Example:- < !DOCTYPE html > < html > < script ...

audio tag

<!DOCTYPE html> <html lang="en"> <head> <title>Example of HTML audio Tag</title> </head> <body> <audio controls="controls" src="https://www.tutorialrepublic.com/examples/audio/birds.mp3"> Your browser does not support the HTML5 audio element. </audio> </body> </html>

video tag in html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Embedding Video into an HTML Page</title> </head> <body> <video controls="controls" src="https://www.tutorialrepublic.com/examples/video/shuttle.mp4"> Your browser does not support the HTML5 Video element. </video> <html lang="en"> <head> <meta charset="utf-8"> <title>YouTube Video</title> </head> <body> <iframe width="560" height="315" src="https://www.tutorialrepublic.com/examples/video/shuttle.mp4" frameborder="0" allowfullscreen></iframe> </body> </html> </body> </html>

Jquery Form Validation Example

<html> <head> <script src="jquery.min.js"> </script> <script> $(document).ready(function() { $('#first_form').submit(function(e) { e.preventDefault(); var first_name = $('#first_name').val(); var last_name = $('#last_name').val(); var email = $('#email').val(); var password = $('#password').val(); $(".error").remove(); if (first_name.length < 1) { $('#first_name').after('<span class="error">This field is required</span>'); } if (last_name.length < 1) { $('#last_name').after('<span class="error">This field is required</span>'); } if (email.length < 1) { $('#email').after('<span class="error">This field is required</span>'); } else { ...

Bootstrap Tables

Bootstrap table examples <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bordered Table</h2> <p>The .table-bordered class adds borders to a table:</p> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> ...

Bootstrap Nav Bar

Bootstrap Nav Bar <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class=...

Bootstrap slider

Bootstrap slider <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Carousel Example</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-sl...

how to import another css file inside another css file.

(1)crete a css file by name ok.css: .myclass{ background-color:yellow; } (2)create a file name file name ok1.css: @import url("ok.css"); /* Using a url */ .second{ color:red; } (3)now write html code importcss.html: <html> <head> <link rel="stylesheet" href="ok1.css"> </head> <body class="myclass second"> jjjjj </body> </html>

CSS Styling Tables

Css styling in tables example:- <!DOCTYPE html> <html> <head> <style> #customers { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #customers td, #customers th { border: 1px solid #ddd; padding: 8px; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #ddd;} #customers th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> ...

css form

<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid red; border-radius: 4px; } input[type=text]:focus { background-color: lightblue; } textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; } select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; } input[type=submit] { background-color: #4CAF50; border: none; color: white; ...

Bootstrap Grid System guidance

Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12 Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Grid Classes The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) The classes above can be combined to create more dynamic and flexible layouts. Grid System Rules Some Bootstrap grid system rules: Rows must be plac...