uLearn Breakout 1: Code your first website - Tanya Gray

http://tiny.cc/ulearn

The website I'm making: http://codepen.io/anon/pen/JROgpK?editors=1100

HTML 

HTMLis just for content, you're classifying things. Then CSS is for making it styley.


<h1>_____</h1> = making ________ a heading

<h2>Diet</h2> = making 'diet' a subheading

etc...h3 would be a subheading of subheading 2

Don't forget to make sure that every opening bracket has a closing bracket too.

Paragraphs
<p>They are notable for their ability to use 
stones to break open shellfish on their 
stomachs. This skill must be learnt by 
  the young.</p>

Adding photos:
<img src="#" height="100"> = replace # with link to image. Need to use original image from images (click 'view image and take the URL for that page)

Adding a link:
<a>wikipedia</a> - still won't work, cos we've got to tell it where to go. So add properties in the opening tag: <a href="#">wikipedia</a>

CSS

Applying design to our things in HTML, so HTML things must have classifications (eg <h1>)

Put rule in HTML: <h1 class="pageHeading">Otters</h1>

Then in CSS, create the rule for that: 
.pageHeading {
  color: steelblue;

}

Then add font name and size:
.pageHeading {
  color: steelblue;
  font-family: Trebuchet MS;
  font-size: 80px;

}

text-align: center;
  text-shadow: 3px 3px 3px black;

}

Having a tagline: <p class="tagline">They're otterly adorable.</p>

Then add CSS to it:
.tagline {
  color: #4d4dff;
  font-family: Arial;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  letter spacing: 2px
  font-style: italic

If you have an error in one line, everything after it will break

Spacing around elements - 2 types of spacing = margin and padding

Changing the style of paragraphs. Note, not dot in front of 'p'
 because it is an existing element, not something I made
p {
  color: darkblue;
  font-family: Verdana;
  font-size: 16px;
  line-height: 150%;
}

Creating your background
html {
  background-color: silver;
  background-image: url(#);
   background-size: cover;

  background-attachment: fixed;

# = link to background picture

Choosing your colours website: http://www.w3schools.com/colors/colors_picker.asp

Build your own website on: http://cloudcannon.com/