intro to html and css pt2


Ashley Williams

Thursday, 25 April 2013




Git in it

Installing and Configuring Github

what is git?


  • Git is a software version control system

USE IT! Why?
  • Make mistakes and be able to roll back
  • Keep all your projects in one place where others can also access it
  • Collaborate without worrying about overwriting changes
  • AND MUCH MUCH MORE

getting started

https://help.github.com/articles/set-up-git

  • Go to github.com and create an account
  • Download and install git

Configuring git:
  • In terminal type:

$   git config --global user.name "Your Name Here"
$   git config --global user.email "Your Email Here"

create a new repo

https://help.github.com/articles/create-a-repo

  • Click "New Repository" from the github landing page
  • Give your repository a name
  • UNCHECK "Initialize this repository with a README"
  • Click "Create Repository"


Create and initialize a repo


  • Create a folder for your project   $mkdir ~/FolderName
  • Navigate into that folder $cd ~/FolderName
  • Type $git init to initialize a git repository
  • Type $touch README to create a readme file

  • Type $git remote add origin https://github.com/username/Your-Project.git

^^ This line connects your folder on your computer with the project you create on github.com

Add, commit, push


ADD: First you have to stage your changes
 $git add FileName (single file)
$git add . (all changed files)

COMMIT: Review your staging, and confirm
$git commit -m "this is a description of the changes"

PUSH: Send your changes up to github
$git push origin master
($git push RemoteName BranchName)



html5

When a DIV is not just a DIV

html5 tags

  • <header> and <footer>
  • <nav> "a section of the page that links to other pages on the site, or to other sections of that particular page."  
  • <section> "a group of content based around a theme. **must be able to stand alone."
  • <article> "an independent, self-contained composition. e.g. news posts, magazine articles, user comments."
  • <aside>  "content related to an article but not necessary to its  understanding."

    • exercise 1

    Open exercise1.html in Sublime Text
    The instructions are in a comment at the top
    <!-- INSTRUCTIONS
    1. refactor the <!DOCTYPE> and <html> tag to use the new HTML5 syntax
    2. replace the <divs> with the appropriate HTML5 elements 
    3. remember to update the header levels when creating new header elements
    4. add article tags around appropriate elements
    -->




    css positioning

    Floats//Clears,  Absolute/Relative/Static

    Floats

    https://developer.mozilla.org/en-US/docs/CSS/float
    float: left / right / none
    • HTML documents have a flow of elements
    • Floating and element takes it out of this flow
    • Other elements in the same container will "wrap" around items that are floating.
    • Floating elements stack up to the edge
    • When they hit the edge of the container they will move down to the next available edge (**objects with different heights can cause problems!)

    Exercise 2

    Open exercise2.html and exercise2.css in sublime
    Also open exercise2.html in Safari
    <!-- INSTRUCTIONS
1. remove all inline and <head> styles and put them in the external stylesheet so that you no longer need the !important for background-color
2. center the slogan and make it italic using an ID selector
3. float the aside to the right and add 10px of margin to its left and bottom sides
4. then make the article width the same width as the aside and float it left
-->

    clears


    • When an item is floated, its height is sometimes larger than its container

    <article>
      <aside>
         <img src="giraffe.png" height="100px"/>
      </aside>
    </article>

    What do you think this would look like in the browser?

    Clears - the wrong way

    Clear with an element placed after the float
    • requires the DOM element order to remain the same
    • background and border do not extend

    Manually
    • requires an empty element just for style (BOO)
    • might not be necessary later, becomes vestigial

    the clear fix

    .group:before,
    .group:after  {
         content: "";
         display: table;
    }
    .group:after {
         clear: both;
    }
    .group {
         zoom: 1; /* IE6&6 */
    }

    Overflow

    https://developer.mozilla.org/en-US/docs/CSS/overflow

    overflow: visible / auto / hidden / scroll
    • visible (default): visible content extends past container
    • auto: adds a scroll bar is necessary
    • hidden: visible content stop at container boundary
    • scroll: adds scroll bar, even if not necessary

    positioning

    https://developer.mozilla.org/en-US/docs/CSS/position

    position: static / relative / absolute / fixed

    • anything other than static causes the element to become a positioned element

    • positioned elements get new properties:

    top: // left: // bottom: // right:

    positioning


    Relative
  • Same as static, but gives options to use TLBR
  • Renders in normal flow, then shifted based on TLBR
  • Can be used to make an element a positioned element without changing its position or behavior
    • Absolute
  • Taken out of normal flow
  • Position is based on the container element
    • Fixed
    • Affixed to position in window regardless of scrolling




    controlling the cascade

    Advanced Selectors, Specificity, and Position

    cascade order


    • Style priority is determined by position and specificity
    • CSS is processed top->bottom, outside->in
    • The last CSS processed wins


    UNLESS

    • Prior CSS was more specific

    inheritance and specificity


    • Parent/child relationship
    • Nested elements inherit their parents styles

    NESTED Selectors use a space between selector elements

    priority of selectors


    #, #, #, #



    1. inline styles?
    2. # of ID selectors
    3. # of class selectors
    4. # of element selectors

    priority of selectors


    Determine the specificity of each selector

    1.    header { -moz-border-radius: 2px; }
    2.    .row { text-shadow: 4px 4px 1px #fff; }
    3.    #copyright { text-style: italic; }
    4.     <a style="color: red">Delete</a>
    5.     aside { padding: 0 0 20px 20px; !important}

    exercise #3


    Open exercise3.html and exercise3.css in Sublime
    Open exercise3.html in Safari

    <!-- INSTRUCTIONS
1. refactor this code to use clearfix to clear floats
2. use a nested selector to make paragraphs in asides italic 
3. for anchor tags inside aside paragraphs, override the inherited font-style and make it normal
4. refactor the css for .active and .copyright so that !important can be removed
-->



    the lego way

    Box Model and Display Types

    the box model


    The width of an element is determined by 4 elements:
    • content
    • padding
    • border
    • margin

    These 4 thing compose what is known as the box model.

    display types - block


    display: none / block / inline / inline-block


    Block elements:

    • stretch the full width of their container
    • full box model (margin, padding, border, content)
    • line breaks before and after

    <div>, <p>, <ul>, <ol>, <li>, <h1>...<h6>

    display types: inline


    Inline elements:
    • Usually inside block-level elements
    • Size based on content
    • No line breaks

    <span>, <a>, <em>, <img>, <strong>

    display types - inline-block


    Inline block elements:
    • Same flow as inline elements
    • Get full box model like block elements

    intro to html and css pt2

    By ag_dubs

    Made with Slides.com

    intro to html and css pt2

    • 903

    More from ag_dubs