FreeCodeCamp(一)學習筆記

FrontEndDevelopmentCertification

HTML5andCSS

Say Hello to HTML Elements

<h1>hello world</h1>
<h1>Hello world</h1>

Headline with the h2 Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

Inform with the Paragraph Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Uncomment HTML

<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Hello Paragraph</p>

Comment out HTML

<!--<h1>Hello World</h1>-->

<h2>CatPhotoApp</h2>

<!--<p>Hello Paragraph</p>-->

Fill in the Blank with Placeholder Text

<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Delete HTML Elements

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Change the Color of Text

<h2 style = "color:red">CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
</p>

Use CSS Selectors to Style Elements

<style>
  h2{color:blue;}
</style>
<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Use a CSS Class to Style an Element
Style Multiple Elements with a CSS Class
Change the Font Size of an Element
Set the Font Family of an Element
Import a Google Font
Specify How Fonts Should Degrade
Add Images to your Website
Size your Images
Add Borders Around your Elements
Add Rounded Corners with a Border Radius
Make Circular Images with a Border Radius
Link to External Pages with Anchor Elements
Nest an Anchor Element within a Paragraph
Make Dead Links using the Hash Symbol
Turn an Image into a Link
Add Alt Text to an Image for Accessibility
Create a Bulleted Unordered List
Create an Ordered List
Create a Text Field
Add Placeholder Text to a Text Field
Create a Form Element
Add a Submit Button to a Form
Use HTML5 to Require a Field
Create a Set of Radio Buttons
Create a Set of Checkboxes
Check Radio Buttons and Checkboxes by Default
Nest Many Elements within a Single Div Element
Give a Background Color to a Div Element
Set the ID of an Element
Use an ID Attribute to Style an Element
Adjusting the Padding of an Element
Adjust the Margin of an Element
Add a Negative Margin to an Element
Add Different Padding to Each Side of an Element
Add Different Margins to Each Side of an Element
Use Clockwise Notation to Specify the Padding of an Element
Use Clockwise Notation to Specify the Margin of an Element
Style the HTML Body Element
Inherit Styles from the Body Element
Prioritize One Style Over Another
Override Styles in Subsequent CSS
Override Class Declarations by Styling ID Attributes
Override Class Declarations with Inline Styles
Override All Other Styles by using Important
Use Hex Code for Specific Colors
Use Hex Code to Mix Colors
Use Abbreviated Hex Code
Use RGB values to Color Elements
Use RGB to Mix Colors
Use Responsive Design with Bootstrap Fluid Containers
Make Images Mobile Responsive
Center Text with Bootstrap
Create a Bootstrap Button
Create a Block Element Bootstrap Button
Taste the Bootstrap Button Color Rainbow
Call out Optional Actions with Button Info
Warn your Users of a Dangerous Action
Use the Bootstrap Grid to Put Elements Side By Side
Ditch Custom CSS for Bootstrap
Use Spans for Inline Elements
Create a Custom Heading Jun 06, 2016
Add Font Awesome Icons to our Buttons
Add Font Awesome Icons to all of our Buttons
Responsively Style Radio Buttons
Responsively Style Checkboxes
Style Text Inputs as Form Controls
Line up Form Elements Responsively with Bootstrap
Create a Bootstrap Headline
House our page within a Bootstrap Container Fluid Div
Create a Bootstrap Row

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

Split your Bootstrap Row

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

Create Bootstrap Wells
Bootstrap有一個class 叫well，它能讓你的列看起來更立體

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

Add Elements within your Bootstrap Wells

<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></button>
       <button></button> 
       <button></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
       <button></button>
       <button></button> 
       <button></button>
      </div>
    </div>
  </div>
</div>

Apply the Default Bootstrap Button Style

<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"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

bootstrap有其他的button類，叫btn-default。

Create a Class to Target with jQuery Selectors
不是每一個class都要有相應的css，有時候我們創建一些class只是爲了選擇這些元素的時候更容易的使用jquery。

<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="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well"id="left-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"id="right-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>
</div>

Label Bootstrap Wells
sake（目的，利益，理由）

<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"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-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>

Give Each Element a Unique ID

<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"></button>
        <button class="btn btn-default target"
        id ="target2"></button>
        id ="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"></button>
        id ="target5"></button>
        <button class="btn btn-default target" 
        id ="target6"></button>
      </div>
    </div>
  </div>
</div>

Label Bootstrap Buttons

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

Use Comments to Clarify Code

<!--Only change code above this line -->
<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>

Learn how Script Tags and Document Ready Work

<script>
  $(document).ready(function() { });
</script>
<!-- Only change code above this line. -->
<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>

Target HTML Elements with Selectors Using jQuery

<script>
  $('button').addClass("animated bounce");
</script>

<!-- Only change code above this line. -->

<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函數以$符開始。

Target Elements by Class Using jQuery

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
  });
</script>

<!-- Only change code above this line. -->

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

Target Elements by ID Using jQuery

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeout");
  });
</script>

<!-- Only change code above this line. -->

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

Delete your jQuery Functions

<script>
  $(document).ready(function() {

  });
</script>

Target the same element with multiple jQuery Selectors
通過上面的學習，學會了三種JQuery標籤元素:
標識元素(“button”)標識class (“.btn”)
標識id$(“target1”)

<script>
  $(document).ready(function() {
    $("button").addClass("animated ");
    $(".btn").addClass("shake ");
    $("#target1").addClass("btn-primary");

  });
</script>

<!-- Only change code above this line. -->

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

Remove Classes from an element with jQuery

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
</script>

<!-- Only change code above this line. -->

<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  target" id="target1">#target1</button>
        <button class="btn  target" id="target2">#target2</button>
        <button class="btn  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>

Change the CSS of an Element Using jQuery

  
jQuery Playground
  

    

      
#left-well
      

        
        
        
      
    
    

      
#right-well
      

        
        
        
      
    
  

" data-snippet-id="ext.247a0977a79d6a475970958bbdb841f2" data-snippet-saved="false" data-codota-status="done"><script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");
    $("#target1").css("color","blue");
  });
</script>

<!-- Only change code above this line. -->

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

JavaScript

Declare JavaScript Variables

var myName;

Storing Values with the Assignment Operator

var a = 7;
var b =a ;

Initializing Variables with the Assignment Operator

var a = 9;

Understanding Uninitialized Variables

var a;
var b;
var c;

var a = 5;
var b =10;
var c ="I am a";
a = a + 1;
b = b + 5;
c = c + " String!";

Understanding Case Sensitivity in Variables

studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;

Add Two Numbers with JavaScript

var sum = 10 + 10;

Subtract One Number from Another with JavaScript

var difference = 45 - 33;

Multiply Two Numbers with JavaScript

var product = 8 * 10;

Divide One Number by Another with JavaScript

var quotient = 66 / 33;

Increment a Number with JavaScript

var myVar = 87;
myVar ++;

Decrement a Number with JavaScript

var myVar = 11;
 myVar --;

Create Decimal Numbers with JavaScript

var myDecimal = 2.3 ;

Multiply Two Decimals with JavaScript

var product = 2.0 * 2.5;

Finding a Remainder in JavaScript

var remainder;
remainder =11%3;

Convert Celsius to Fahrenheit

function convertToF(celsius) {
  var fahrenheit;
  // Only change code below this line
  fahrenheit = (celsius * (9/5)) + 32;

  // Only change code above this line
  return fahrenheit;
}

// Change the inputs below to test your code
convertToF(30);
convertToF(20);
convertToF(0);
convertToF(-10);
convertToF(-30);

Escaping Literal Quotes in Strings

var myStr="I am a \"double quoted\" string inside \"double quotes\".";