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

#, #, #, #

inline styles?
# of ID selectors
# of class selectors
# 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