忍者刘米米

Front-end-development-FCC

发表于  |    |   分类于   |  

HTMl5 and CSS

Comment HTML

1
2
3
4
5
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
-->

Inline CSS

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

Use CSS Selectors to Style Elements

1
2
3
4
5
<style>
  h2 {color:red;}
</style>
...........
<h2>CatPhotoApp</h2>

Style Multiple Elements with a CSS Class

1
2
3
4
5
6
7
<style>
  .red-text {
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

Change the Font Size of an Element

1
2
3
4
5
6
<style>
  p {
    font-size:16px;
  }
</style>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. </p>

Set the Font Family of an Element

1
2
3
4
5
6
<style>
  p {
    font-size: 16px;
    font-family:Monospace
  }
</style>

Import a Google Font

1
2
3
4
5
6
7
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  h2 {
    font-family: Lobster;
  }
</style>

Specify How Fonts Should Degrade

1
2
3
p {
  font-family: Helvetica, Sans-Serif;
}

Add Images to your Website

1
<img src="https://bit.ly/fcc-relaxing-cat" alt="Author standing on a beach with two thumbs up. ">

Size your Images

1
2
3
4
5
6
7
<style>
  .smaller-image{
    width:100px;
  }
</style>

<img class ="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

Add Borders Around your Elements

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .thick-green-border {    
    border-color:green;
    border-width:10px;
    border-style:solid;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

Add Rounded Corners with a Border Radius

1
2
3
4
5
6
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;
  }

Make Circular Images with a Border Radius

1
2
3
4
5
6
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
1
<a href="http://freecodecamp.com"> cat photos</a>

Nest an Anchor Element within a Paragraph

1
<p>View more <a href="http://www.freecatphotoapp.com">cat photos</a></p>
1
<p>Click here for <a href="#">cat photos</a>.</p>
1
<p>Click here for <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a></p>

Create a Bulleted Unordered List

1
2
3
4
5
<ul>
  <li>milk</li>
  <li>cheese</li>
  <li>cheese</li>
</ul>

Create an Ordered List

1
2
3
4
5
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
   <li>Sylvester</li>
</ol>

Create a Text Field

1
<input type="text">

Add Placeholder Text to a Text Field

1
<input type="text" placeholder="cat photo URL">

Create a Form Element

1
2
3
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
</form>

Add a Submit Button to a Form

1
2
3
4
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>

Use HTML5 to Require a Field

1
<input type="text" required placeholder="cat photo URL">

Create a Set of Radio Buttons

1
2
3
4
5
6
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <button type="submit">Submit</button>
</form>

Create a Set of Checkboxes

1
2
3
4
5
6
7
<form action="/submit-cat-photo">
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

Check Radio Buttons and Checkboxes by Default

1
2
3
4
5
6
7
8
9
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

Nest Many Elements within a Single Div Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
</div>

Set the ID of an Element

1
2
<form id = "cat-photo-form" action="/submit-cat-photo">
  ...

Use an ID Attribute to Style an Element

1
2
3
4
5
<style>
  #cat-photo-form {
  background-color: green;
}
</style>

Adjusting the Padding of an Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

Adjust the Margin of an Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
    margin: 20px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
    margin: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

Add a Negative Margin to an Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
    margin: -15px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
    margin: -15px;
  }
</style>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

Add Different Padding to Each Side of an Element

1
2
3
4
5
6
7
.green-box {
  background-color: green;
  padding-top:40px;
  padding-left:40px;
  padding-bottom:20px;
  padding-right:20px;
}

Add Different Margins to Each Side of an Element

1
2
3
4
5
6
7
.green-box {
    background-color: green;
    margin-top:40px;
    margin-left:40px;
    margin-bottom:20px;
    margin-right:20px;
  }

Use Clockwise Notation to Specify the Padding of an Element

1
2
3
4
.green-box {
    background-color: green;
    padding:40px 20px 20px 40px;
  }

Use Clockwise Notation to Specify the Margin of an Element

1
2
3
4
.green-box {
    background-color: green;
    margin:40px 20px 20px 40px;
  }

Inherit Styles from the Body Element

1
2
3
4
5
6
7
8
9
<style>
  body {
    background-color: black;
    color:green;
    font-family:Monospace;
  }
</style>

<h1>Hello World</h1>

Prioritize One Style Over Another

1
2
3
4
5
6
7
8
9
10
11
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  } 
  .pink-text{
    color:pink;
  }  
</style>
<h1 class = "pink-text">Hello World!</h1>

Override Styles in Subsequent CSS

The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

Override Class Declarations by Styling ID Attributes

id attribute will always take precedence.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text {
  color: orange;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

Override Class Declarations with Inline Styles

1
<h1 style="color: white" id="orange-text" class="pink-text blue-text">Hello World!</h1>

Override All Other Styles by using Important

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink!important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

Use Hex Code for Specific Colors

1
2
3
4
5
<style>
  body {
    background-color: #000000;
  }
</style>

Use RGB values to Color Elements

1
2
3
body {
    background-color: rgb(0, 0, 0);
  }

Responsive Design with Bootstrap

Use Responsive Design with Bootstrap Fluid Containers

  1. popular Bootstrap responsive CSS framework.
  2. Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.
1
2
3
4
5
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<div class = "container-fluid">
  ......
</div>

Make Images Mobile Responsive

class: image-responsive

1
<img class="img-responsive thick-green-border" src="https://bit.ly/fcc-running-cats" alt="A cute orange cat lying on its back. ">

Center Text with Bootstrap

class: text-center

1
<h2 class="red-text text-center">CatPhotoApp</h2>

Create a Bootstrap Button

class: btn

1
<button class="btn">Like</button>

Create a Block Element Bootstrap Button

1
<button class="btn btn-block">Like</button>

Taste the Bootstrap Button Color Rainbow

1
<button class="btn btn-block btn-primary">Like</button>

Button Info

1
<button class="btn btn-block btn-info">Info</button>

btn-danger

1
<button class="btn btn-block btn-danger">DELETE</button>

Use the Bootstrap Grid to Put Elements Side By Side

1
2
3
4
5
6
7
8
9
10
11
<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 Spans for Inline Elements

1
<p>Things cats  <span class = "text-danger">love:</span></p>

Create a Custom Heading

1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
     
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
  
</div>

Add Font Awesome Icons to our Buttons

1
2
3
4
5
<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>

Add Font Awesome Icons to all of our Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
  
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
  
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>

Responsively Style Radio Buttons

1
2
3
4
5
6
7
8
9
<div class="row">
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    </div>
</div>

Responsively Style Checkboxes

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

Style Text Inputs as Form Controls

1
<input class = "form-control" type="text" placeholder="cat photo URL" required>

Create a Bootstrap Headline

1
<h3 class = "text-primary text-center">JQuery Playground</h3>

House our page within a Bootstrap Container Fluid Div

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

Create a Bootstrap Row

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

Split your Bootstrap Row

1
2
3
4
5
6
7
8
9
<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>

Create Bootstrap Wells

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

Add Elements within your Bootstrap Wells

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 type="submit">Submit</button>
        <button type="submit">Submit</button>
        <button type="submit">Submit</button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button type="submit">Submit</button>
        <button type="submit">Submit</button>
        <button type="submit">Submit</button>
      </div>
    </div>
  </div>
</div>

Apply the Default Bootstrap Button Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

Create a Class to Target with jQuery Selectors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

Label Bootstrap Wells

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
        <button class="btn btn-default target" 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>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></button>
      </div>
    </div>
  </div>
</div>

Label Bootstrap Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

Learn how Script Tags and Document Ready Work

1
2
3
<script>
  $(document).ready(function() {});
</script>

Target HTML Elements with Selectors Using jQuery

jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling.

1
2
3
4
5
6
7
<script>
  $(document).ready(function() {
    
  $("button").addClass("animated bounce");
    
  });
</script>

Target Elements by Class Using jQuery

1
2
3
4
5
6
7
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
  
  $(".well").addClass("animated shake");
</script>

Target Elements by ID Using jQuery

1
$("#target3").addClass("animated fadeOut");

Target the same element with multiple jQuery Selectors

1
2
3
4
5
6
7
<script>
  $(document).ready(function() {
    $("button").addClass("animated")
    $(".btn").addClass("shake")
    $("#target1").addClass("btn-primary")
  });
</script>

Remove Classes from an element with jQuery

1
$("button").removeClass("btn-default");

Change the CSS of an Element Using jQuery

1
2
3
4
5
<script>
  $(document).ready(function() {
    $("#target1").css("color","red")
  });
</script>

Disable an Element Using jQuery

jQuery has a function called .prop() that allows you to adjust the properties of elements.

1
$("#target1").prop("disabled", true);

Change Text Inside an Element Using jQuery

jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.

1
$("#target4").html("<em>#target4</em>");

Remove an Element Using jQuery

1
$("#target4").remove()

Use appendTo to Move Elements with jQuery

moving elements from one div to another.

1
$("#target2").appendTo("#right-well");

Clone an Element Using jQuery

1
$("#target5").clone().appendTo("#left-well");

Target the Parent of an Element Using jQuery

jQuery has a function called parent() that allows you to access the parent of whichever element you’ve selected.

1
$("#target1").parent().css("background-color","red")

Target the Children of an Element Using jQuery

1
$("#right-well").children().css("color","orange")

Target a Specific Child of an Element Using jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
  $(document).ready(function() {
  ......
    $(".target:nth-child(2)").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>

Target Even Numbered Elements Using jQuery

1
$(".target:even").addClass("animated shake")

Use jQuery to Modify the Entire Page

1
$("body").addClass("animated hinge");