Skip to content

Instantly share code, notes, and snippets.

@MonicaDev

MonicaDev/HTML and CSS: Building a Website from Scratch.md

Last active August 29, 2015 13:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MonicaDev/9556476 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MonicaDev/9556476 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MonicaDev revised this gist Mar 14, 2014. 1 changed file with 28 additions and 41 deletions.
    69 changes: 28 additions & 41 deletions HTML and CSS: Building a Website from Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +1,46 @@
    ### Your lnline image of your Treehouse points here:
    [IMG]http://i59.tinypic.com/nmb2mr.jpg[/IMG]

    ###The URL of your new website here (it should include `/portfolio/HTML_CSS_projects/` or something like that):
    file:///Users/monicacho/Desktop/Web/index.html

    http://tinypic.com/m/hvdvzb/3

    <a href="http://tinypic.com?ref=nmb2mr" target="_blank"><img src="http://i59.tinypic.com/nmb2mr.jpg" border="0" alt="Image and video hosting by TinyPic"></a>
    ###file:///Users/monicacho/Desktop/Web/index.html

    ###Quiz
    (Please write 1-2 sentences each. Keep in mind, your explanations can help your fellow students!)

    1. What is a “normalize.css” file? What does it do?
    the normalize file helps us make sure that the website looks close or the same in every browser. It is layered before the style and grid files.
    1. What is a “normalize.css” file? What does it do?<br>
    ~the normalize file helps us make sure that the website looks close or the same in every browser. It is layered before the style and grid files.
    2. What are Bootstrap, Html5 Boilerplate and Zurb examples of? Why would you use them?<br>
    ~These are example of html frameworks.

    3. What does Gridulator do? How would you use it as a web developer?<br>
    ~The gridulator takes your width and column number, then generates a grid layout with the option for gutter width.

    2. What are Bootstrap, Html5 Boilerplate and Zurb examples of? Why would you use them?
    These are example of html frameworks.

    3. What does Gridulator do? How would you use it as a web developer?
    The gridulator takes your width and column number, then generates a grid layout with the option for gutter width.

    4. What's a good reference to see all the tags available in CSS? Paste a couple of good references below:
    http://www.blooberry.com/indexdot/css/propindex/all.htm
    http://www.w3schools.com/CSS/css_list.asp
    http://www.w3schools.com/cssref/default.asp
    http://www.quackit.com/css/css3/properties/
    4. What's a good reference to see all the tags available in CSS? Paste a couple of good references below:<br>
    ~http://www.blooberry.com/indexdot/css/propindex/all.htm
    ~http://www.w3schools.com/CSS/css_list.asp
    ~http://www.w3schools.com/cssref/default.asp
    ~http://www.quackit.com/css/css3/properties/


    5. Where is a good place to find and use web fonts? How do you integrate a font into your web page?
    google.com/webfonts
    the font is contained in a stylesheet that you can copy and paste into your html code.

    5. Where is a good place to find and use web fonts? How do you integrate a font into your web page?<br>
    ~google.com/webfonts
    ~the font is contained in a stylesheet that you can copy and paste into your html code.

    6. What is a hexadecimal color code? Write out some hexadecimal equivalents to common colors.<br>
    ~A hexadecimal color code starts with a pound followed by 5 numbers and/or letters. The values are from 0-F, F being the ~highest value. First 2 are red, second 2 are green and third 2 are blue.

    6. What is a hexadecimal color code? Write out some hexadecimal equivalents to common colors.

    A hexadecimal color code starts with a pound followed by 5 numbers and/or letters. The values are from 0-F, F being the highest value. First 2 are red, second 2 are green and third 2 are blue.


    7. Using what you know about hex colors, guess what this color may be: #FAF3BC. (Hint: What do higher numbers like `FF` mean in relation to the color that is associated?)
    98% red, 95.3% green and 73.7% blue
    7. Using what you know about hex colors, guess what this color may be: #FAF3BC. (Hint: What do higher numbers like `FF` mean in relation to the color that is associated?)<br>
    ~98% red, 95.3% green and 73.7% blue
    This will give you a beige color.

    8. Padding and Margins - what are the difference?
    Padding is the space between the border and the elements inside it. Margin defines the space outside of the box.


    9. Explain what this syntax is this: `.btn:hover`.
    .btn:hover is what will appear when the cursor is hovered over the button. You can customize the effect by making a .btn:hover class.
    8. Padding and Margins - what are the difference?<br>
    ~Padding is the space between the border and the elements inside it. Margin defines the space outside of the box.

    10. Explain what happens to an element that has the styling `margin: 10px 0 20px 0`.
    the box is 10 px below the top of the page, align with the right side of the page, above the bottom of the page 20 px and aligned to the left of the page.
    9. Explain what this syntax is this: `.btn:hover`. <br>
    ~.btn:hover is what will appear when the cursor is hovered over the button. You can customize the effect by making a .btn:hover ~class.

    10. Explain what happens to an element that has the styling `margin: 10px 0 20px 0`. <br>
    ~the box is 10 px below the top of the page, align with the right side of the page, above the bottom of the page 20 px and ~aligned to the left of the page.

    11. Compare CSS classes to CSS id’s. <br>
    ~A class can be used several times. css style code would look like this “.exampleid” and <div class=“exampleid”> in html. a css ~ID would look like this in css code “#example” and <div id=“example”> in html. css id can only be used once.

    11. Compare CSS classes to CSS id’s.

    A class can be used several times. css style code would look like this “.exampleid” and <div class=“exampleid”> in html. a css ID would look like this in css code “#example” and <div id=“example”> in html. css id can only be used once.
  2. MonicaDev created this gist Mar 14, 2014.
    59 changes: 59 additions & 0 deletions HTML and CSS: Building a Website from Scratch.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    ### Your lnline image of your Treehouse points here:
    [IMG]http://i59.tinypic.com/nmb2mr.jpg[/IMG]

    ###The URL of your new website here (it should include `/portfolio/HTML_CSS_projects/` or something like that):
    file:///Users/monicacho/Desktop/Web/index.html

    http://tinypic.com/m/hvdvzb/3


    ###Quiz
    (Please write 1-2 sentences each. Keep in mind, your explanations can help your fellow students!)

    1. What is a “normalize.css” file? What does it do?
    the normalize file helps us make sure that the website looks close or the same in every browser. It is layered before the style and grid files.


    2. What are Bootstrap, Html5 Boilerplate and Zurb examples of? Why would you use them?
    These are example of html frameworks.

    3. What does Gridulator do? How would you use it as a web developer?
    The gridulator takes your width and column number, then generates a grid layout with the option for gutter width.

    4. What's a good reference to see all the tags available in CSS? Paste a couple of good references below:
    http://www.blooberry.com/indexdot/css/propindex/all.htm
    http://www.w3schools.com/CSS/css_list.asp
    http://www.w3schools.com/cssref/default.asp
    http://www.quackit.com/css/css3/properties/


    5. Where is a good place to find and use web fonts? How do you integrate a font into your web page?
    google.com/webfonts
    the font is contained in a stylesheet that you can copy and paste into your html code.



    6. What is a hexadecimal color code? Write out some hexadecimal equivalents to common colors.

    A hexadecimal color code starts with a pound followed by 5 numbers and/or letters. The values are from 0-F, F being the highest value. First 2 are red, second 2 are green and third 2 are blue.


    7. Using what you know about hex colors, guess what this color may be: #FAF3BC. (Hint: What do higher numbers like `FF` mean in relation to the color that is associated?)
    98% red, 95.3% green and 73.7% blue
    This will give you a beige color.

    8. Padding and Margins - what are the difference?
    Padding is the space between the border and the elements inside it. Margin defines the space outside of the box.


    9. Explain what this syntax is this: `.btn:hover`.
    .btn:hover is what will appear when the cursor is hovered over the button. You can customize the effect by making a .btn:hover class.

    10. Explain what happens to an element that has the styling `margin: 10px 0 20px 0`.
    the box is 10 px below the top of the page, align with the right side of the page, above the bottom of the page 20 px and aligned to the left of the page.



    11. Compare CSS classes to CSS id’s.

    A class can be used several times. css style code would look like this “.exampleid” and <div class=“exampleid”> in html. a css ID would look like this in css code “#example” and <div id=“example”> in html. css id can only be used once.