Get some insights into Front End develpoement

for the input
<input type="text">

Add Placeholder Text to a Text Field
<input type ="text" placeholder="this is placeholder">

Create a Form Element
<form action="/url-where-you-want-to-submit-form-data"></form>

Add a Submit Button to a Form
<button type="submit">this button submits the form</button>

Use HTML5 to Require a Field
<input type="text"required>

Create a Set of Radio Buttons
<label><input type="radio" name="indoor-outdoor">Indoor</label>

Create a Set of Checkboxes
<label><input type="checkbox" name="personality">Loving</label>

Check Radio Buttons and Checkboxes by Default
<input type="radio" name="test-name"checked>


For multiple classes
<div class="class1 class2">
 
                           

                                            BOOTSTRAP

Make image responsive

<div >
  <img class="img-responsive" src="https://bit.ly/fcc-running-cats">
 </div>

CENTER THE TEXT
<h2 class="red-text  text-center">your name</h2>

CREATE BOOTSTRAP BUTTON
<button type="button" class="btn">Like</button>

TO GIVE BUTTON 100% OF THE AVAILABE WIDTH
<button class="btn btn-block">Like</button>

Taste the Bootstrap Button Color Rainbow
<button class="btn btn-block btn-primary">LIke</button>

TO ADD A DELETE BUTTON
<button class="btn btn-block btn-danger">Delete</button>

TO MAKE THE 3 BUTTONS IN A HORIZONTAL LINE
<div class="row">
  <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
</div>
 


USE OF SPAN
<p>Top 3 things cats <span class = "text-danger">hate:</span></p>


TO PUTH THE THUMBS-UP SYMBOL
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>


TO ADD "TRASH" & "INFO-CIRCLE"  IN YOUR BUTTONS
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>


TO MAKE RESPONSIVE CHECKBOXES (evenly spread across out the page regardless of how wide the screen resolution is)
<div class="row">
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
        </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
        </div>
      <div class="col-xs-4">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button></div>
   </div>
  </form>
    </div>


STYLE  TEXT  INPUT AS FORM CONTROLS
 <input class="form-control" type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>
</form>


LINE UP FORM ELEMENTS RESPONSIVELY WITH BOOTSTRAP
 <div class="row">
  <div class="col-xs-7">
      <input type="text" class="form-control" placeholder="cat photo URL" required>
  </div>
 <div class="col-xs-5">
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
 </div>
 </div>
      </form>
</div>


MAKE YOUR TEXT ALIGN IN CENTER
house our page within a bootrap container fluid div-(content on your page is mobile responsive)

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>

CREATE A BOOTSTRAP ROW
(row for inline elements)

<div class="container-fluid">
     <h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"></div>
</div>
<h3 class="text-primary text-center">jQuery Playground</h3>

CREATE BOOTSTRAP WELLS

well that can create a visual  sense of depth for your coloumns
<div class="well"></div>


CREATE A CLASS TO CREATE WITH JQUERY SELECTORS
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>


ADD id ATTRIBUTES TO BOOTSTRAP ELEMENTS
<div class="well" id="right-well">
<div class="well" id="left-well">

GIVE EACH ELEMENT A UNIQUE ID
<button class="btn btn-default" id=" target4"></button>
<button class="btn btn-default" id="target5"></button>
  <button class="btn btn-default" id="target6"></button>

 FINAL CODE

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>



                                                                                        JQUERY
START                                                                          
 <script>
$(document).ready(function(){ });
</script>

All jQuery functions start with a $.

USE JQUERY TO GIVE "ANIMATED" BOUNCE  FEATURE
<script>
  $(document).ready(function(){
   $("button").addClass("animated bounce");
    });
</script>


MAKE ALL THE ELEMENTS WITH CLASS text-primary SHAKE BY ADDING THE FOLLOWING TO YOUR document ready function
$(".text-primary").addClass("animated shake");

JQUERY  FOR id
$("#target6").addClass("animated fadeOut");


TARGET THE SAME ELEMENT WITH MULTIPLE Jquery SELECTORS

Using .addClass(), add only one class at a time to the same element, three different ways:
Add the animated class to all elements with type button.
Add the shake class to all the buttons with class .btn.
Add the btn-primary class to the button with id #target1


REMOVE JQUERY FROM button element
$(button).removeClass("btn-default")


CHANGE THE CSS OF ELEMENT USING JQUERY by using(.css)  class.
$("#target1").css("color","blue");




DISABLE AN ELEMENT USING Jquery
$("button").prop("diasabled","true");


CHANGE TEXT INDSIDE AN ELEMENT USING JQUERY
$("h3").html("<em>jquery playground </em>");

USE  (.text)  FUNCTION THAT ONLY ALTERS TEXT WITHOUT ADDING TAGS
$("p").text("helloworld");

REMOVE AN ELEMENT USING JQUERY
$("#target4").remove();

MOVE ELEMENTS FROM ONE PLACE TO ANOTHER PLACE
$("#target4").appendTo("#left-well");

COPY ONE ELEMENT FROM ONE PLACE TO ANOTHER
$("#target4").clone().appendTo("#left-well");

<!-- This involves the two function .clone() & .appendTo() sticking the two functions together is called "FUNCTION  CHAINING"

TARGET THE PARENT OF AN ELEMENT  USING JQUERY
$("left-well").parent().css("background-color","red");


TARGET THE CHILDREN ELEMENT BY USING JQUERY
$("#right-well").children().css("color","red");

TARGET  THE nth ELEMENT
$(".target:nth-child(3)").addClass("animated bounce");

TARGET EVEN NUMBERED ELEMENTS USING JQUERY
$(".target:odd").addClass("animated shake");

TARGET THE WHOLE BODY
$("body").addClass("animated hinge");



                                                                                   JAVASCRIPT
 Different data types
1-undefined
2-null
3-boolean
4-string
5-symbol
6-number
7-object






As Ruskin bond has rightly said, “Once you lived with the mountains, you will return, you will come back…to touch the trees and grass… and climb once more the windswept mountain pass…”So keep going