Why Code?

• Valuable skill in every industry
• Not about being a programmer
• Opportunity for growth
• Structured thinking
• Academic tech pathway

Why Neocities?

Custom URLs
Online editor
Funky design
Open Source

And it's free!

Create a Site

Visit Neocities.org and type in the name of your website.

Site Details

Fill in the additional information.

You can skip the "tags" section!

Dashboard

Fill in the additional information.

You can skip the "tags" section!

Note:

Headings

Add <h1> and </h1> tags to make the Alpacas heading big and bold.

<h1>Alpacas</h1>

<h1> says "start the heading here"

</h1> says "end the heading here"

Subheadings

Now use <h2> tags to make Alpaca Hair and Habitat big.

<h2>Alpaca Hair</h2>

h1 is the biggest heading
h2 is the second biggest heading
h3 is the third biggest heading

h6 is the smallest heading

Paragraphs

Now use <p> tags to split up your paragraphs.

<p>
An alpaca is a domesticated species of 
South American camelid. It resembles a 
small llama in appearance.
</p>

Put a <p> before each paragraph,
and a </p> after each paragraph.

Links

Find the word Wikipedia in your code.

Turn it into a link using a tags, like this:

<a>Wikipedia</a>

Then add the href attribute to the opening tag.

<a href="#">Wikipedia</a>

This turns the link blue, but we need another step to make it clickable.

Link Attribute

We tell the link where to go when it's clicked using href.

Find your opening <a> tag. Add in the href and link.

<a href="http://en.wikipedia.org/wiki/Alpaca">Wikipedia</a>

The only part we added was:

href="http://en.wikipedia.org/wiki/Alpaca"

Image Tags

Add an img tag to the very bottom of your code:

<img src="#" height="100">

src stands for "source"
Replace the # with a link to an image online.

height is the height of the image
This is optional, it is the height in pixels.

Image Source

Find an image online, and copy the link to it.

Replace the # as the src value, using paste:

<img src="http://place.com/photo.jpg" height="100">

Find and add at least 2 more images.

Background

Let's start by adding a background image to your site.

html {
    background-color: black;
    background-image: url('http://tiny.cc/swirls');
}

Got it working?

Now choose a pattern of your own from Subtle Patterns.

Styling Paragraphs

p {
    color: red;
    font-size: 14px;
    line-height: 150%;
}

Centered Paragraphs

p {
    color: red;
    font-size: 14px;
    line-height: 150%;

    width: 700px;
    margin: 0 auto;
}

Defining Classes

.important {
    color: green;
    font-size: 26px;
    font-weight: bold;
}

Applying Classes

<p class="important">
    I love bunny rabbits!
</p>

Embedding YouTube Videos

Video chaos!

Videos

Find a YouTube video you like

Click "Share", then click "Embed"

Copy the code, and use it in your site!

Centered Video

.centered-video {
    margin: 0 auto;
}

<iframe class="centered-video" ... >

Congratulations!

You're officially a web developer!

Tanya Gray
@tanya

tanya@gathergather.co.nz