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

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