Resúmen contenido FreeCodeCamp HTML, CSS y Bootstrap
Enviado por PioPioPioPioPio • 16 de Mayo de 2017 • Resúmenes • 1.484 Palabras (6 Páginas) • 191 Visitas
Free Code Camp
I. HTML
A. Elements
1. Headline/ headings
a. <h1></h1> heading
b. <h2></h2> sub-heading
c. <h3></h3> sub-heading
d. <h4></h4> sub-heading
e. <h5></h5> sub-heading
f. <h6></h6> sub-heading
2. Parragraphs
a. <p></p>
b. p elements are the preferred element for normal-sized paragraph text on websites
3. Style
a. Goes in <head></head>
b. You put css code inside it
4. Images
a. <img>
b. Attributes
i. src="#"
ii. alt="lorem ipsum"
iii. # = dead link
5. Anchor
a. <a></a>
b. They are used to link to content outside of the current page
c. Attributes
i. href="#"
ii. # = dead link
6. Unordered lists
a. Bulleted list
b. <ul></ul>
7. Ordered lists
a. Numbered list
b. <ol></ol>
8. List Item
a. <li></li>
b. They go inside unordered or ordered lists
9. Web forms
a. Forms
i. <form></form>
-They need the attribute action
-action="/#"
b. Input
i. <input type="text">
-it always need a type
-it can have a placeholder
> <input type="text" placeholder="Ipsum Lorem">
- if you add required you can't submit the form without text in the input
> <input type="text" required>
c. Button
i. <button type="submit">Ipsum Lorem</button>
ii. Clicking this button will send the data from your form to the URL you specified with your form's action attribute
d. Radio Buttons
i. Only one answer
ii. They should be nested within its own label element
iii. They all NEED the same name attibute
iv. <label><input type="radio" name="Ipsum Lorem"> Ipsum Lorem</label>
v. If you want to have them selected by default, use the checked attibute
-<input type="radio" name="Ipsum Lorem" checked>
e. Checkboxes
i. More than one answer
ii. They should be nested within its own label element
iii. They all NEED the same name attibute
iv. <label><input type="checkbox" name="Ipsum Lorem"> Ipsum Lorem</label>
v. If you want to have them selected by default, use the checked attibute
-<input type="checkbox" name="Ipsum Lorem" checked>
***They are similar to radio buttons***
10. Divisions
a. A general purpose container for other elements
b. It is probably the most commonly used HTML element of all
c. It's useful for passing the CSS of its own class declarations down to all the elements that it contains
d. <div></div>
B. Attributes
1. Inline Style
a. The style that is responsible for the color of an element's text is the "color" style.
b. <tag style="color: blue"></tag>
2. Class
a. <tag class="className"></tag>
b. <tag class="className1 className2"></tag>
3. Id
a. <tag id="Ipsum Lorem"></tag>
b. Id attributes SHOULD be unique
c. You always reference ids by putting a # in front of their names
C. Rules
1. Start tags with <>
2. End tags with </>
3. Comments
a. <!-- -->
4. Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
5. Images NEED src and alt attributes
6. Nesting
a. To put an element inside another one
b. To nest a element in p element means to put an anchor in a parragraph
II. CSS (Cascading Style Sheets)
A. Properties
1. Color
a. It modifies the text's colors
b. color:blue;
2. Font Size
a. It modifies the text's size
b. font-size:10px;
i. You can use px or %
3. Font Family
a. It modifies the text's font
b. font-family: Monospace;
c. Degrading
i. If one font is available, but the othe other isn't, you can degrade the font
ii. font-family: Helvetica, Sans-Serif;
iii. If Heveltica isn't available (either because of the browser or internet, etc.) then Sans-Serif is the next font in line of use
4. Width
a. Controls an element's width
b. width: 10px;
i. You can use px or %
5. Border
a. Color
i. border-color:red;
b. Width
i. border-width: 5px;
ii. You can use px or %
c. Style
i. border-style: solid;
d. Radius
i. border-radius: 2px;
ii. You can use px or %
e. It is one of the three properties that modifies space around HTML elements
6. Background color
a. background-color:red;
7. Padding
a. Padding controls the amount of space between the element and its border
b. You can use the properties padding-top, padding-right, padding-bottom, and padding-left to modify the padding on all four sides
c. Also, you can use the Clockwise Notation (top, right, bottom, left) to specify the padding on all four sides
i. padding: 10px 20px 30px 40px
d. It is one of the three properties that modifies space around HTML elements
8. Margin
a. Margin controls the amount of space between an element's border and surrounding elements
b. You can use the properties margin-top, margin-right, margin-bottom, and margin-left to modify the padding on all four sides
c. Also,
...