222257 Kiatiakitanga - Timmy James & Kristen Mabey: Lecture Six

Lecture:

Zip file on stream for this class -

Ensure you have working documents for the line diagrams with the things you need and the rough ideas around the page.
Middle column 960 px wide
Start on illustrator with a quick outline of this page.
use three elements - things inside things inside things - everything nester properly. Can minimise down into broader areas.
<header>
<main>
<footer>
PDF quick guide - Css quick guide
In class we will be using the file and developing our own website file to play around with.
Use ½ screen brackets ½ chrome
Start with header - header {background-color: (rgb works for transparency)
width: 100% ?
height: 48px
Indenting to tell nesting
Layout of code doesn't matter for browser but is more for us.
In CSS give each box and position a colour and place.
Need text for paragraphs written up.
Remember to look at the box model and think about the padding and margin. Margin is white space between elements. Margin-bottom etc just for one side of the object.
Comments help to disable the code so browser ignores it. /* on each side */ margin: top right bottom left 0 0 0 0; to set margins on all 4 sides. Values need units as well.
margin built into body automatically. Self styling built in. Inn chrome - right click inspect. Can see the rules for the header in chrome. Things you write overnight the rest of the rules.
Give an item a width and margin left and right are auto - this makes sure that the item is positioned in the middle of the page.
Work top to bottom, once the largest boxes are all done you can now go into the larger box and develop from here.
<video src=“link” controls=“true” autoplay=“true” the video will play by 100% zoom normally - so ensure that the video does fit the box
1 em default size of a paragraph text - -3 em = 3 times this. 1 em is 16px
Text transform - uppercase
text align
section { background-colour width height etc} remove height in something like main so it will expand to include the new items
float - left or right it will need the space to ensure they fit side to side - need everything planned exactly with the margins in account etc. Section images etc. ensure that the images are the correct size to full in the boxes.
Exercise for webpage for the rest of the class. By the end of class have a webpage live to work with.