Drenmi/building-websites.md

## building-websites.md

      
    Raw
  

              building-websites.md
            
          
    Hello!

Welcome to Building Websites, where we will put cool stuff on the Internet, and make it look good.
Getting Started

We will be using CodePen to build our website. You don't need an account. Just click the link and start building!
Some other things you might find useful are a colour picker, and some nice fonts to use on your website.
Building Our First Block (Splash)

I'm going to show you how to build a website about avocadoes, because avocadoes are awesome. You don't have to make a page about avocadoes (but you can, if you want too, and like avocadoes as much as I do), you can make it about anything, or about nothing in particular.
Adding Text

Let's start simple, by putting the text "Avocado" (or whatever your site is about) on our page. Type this into the box that says "HTML":
<h1>Avocado</h1>

Sweet! Hopefully the word has appeared on your page below. Almost like magic! (Except we know all the tricks.) The "h" in h1 stands for "heading", by the way, and the "1" stands for ... the number one. Headings come in six different sizes, and 1 is the biggest one. Kind of backwards, but if you forget you can always try it out in CodePen.
Adding Pictures

Now. I don't think just the word "avocado" tells the story of how awesome avocadoes are. I think it needs a picture of an avocado as well. I found a picture I like on Google, and I'm gonna put it right above the text. To put an image we can use this code:
<img src"..." />
See the dot-dot-dot I put there? That's where you put the address to the picture you want to use. The way you get is the address is by right clicking a picture and choose "Copy image address." Then just paste it between the " marks instead of the stars. ("img" stands for "image", by the way.)
So the whole code now looks something like this:
<img src="http://avocadoes-are-awesome.net/avocado.png" />
<h1>Avocado</h1>

Woah! My picture is way bigger than my text. That looks a bit wonky. It might be the same for you, or it might be too small, or it might be just right. Either way we are going to fix it in a bit. But first I want to center all the stuff in the middle of my page.
Centering Stuff

To make things centered, we're going to put all the things into a "bucket", and then we'll tell the page to center everything inside that bucket. We can use the div tag for this.
<div>
  <img src="..." />
  <h1>avocado</h1>
</div>
Er ... that didn't do anything! That's because we have just added the stuff so far. We haven't told it to look awesome yet. Before we do that, we need to give it a name. In HTML, this is called a "class". I'm gonna add a class now:
<div class="avocado">
  <img src="..." />
  <h1>Avocado</h1>
</div>
There. Now that our bucket has a name, we can tell it to change the way it looks. Let's center all the stuff like we wanted:
.avocado {
  text-align: center;
}
Wait! This doesn't look anything like our HTML. That's right. This is CSS, and it needs to go in the box that says ... CSS!

See how our picture also got centered? Even though we used text-align? That doesn't make much sense, but it doesn't matter, because it looks great!
Making Pictures Smaller (Or Bigger)

Let's tone that avocado down a notch. Because we already gave our bucket a name, we don't need to give our image a name to tell it what to look like, we can just say "change all images that are in the bucket named avocado" like this:
.avocado img {
  /* look awesome! */
}
Unfortunately we can't just tell our picture to look awesome. We need to be more specific. I'm going to give it a width and a height that I think look good. You might need to play around a bit with the values to find something you like. For me, 384px felt just right. (px means pixel. It's those little squares you can see if you stare super close at your screen. Don't stare too long though. Seriously, you'll get all googly eyed.)
.avocado img {
  height: 384px;
  width: 384px;
}

Making Text Bigger (Or Smaller)

The new picture size is just nice, but the text is still a bit small. If only there was a way to make it look bigger ... Ha! We can use what we just learned from resizing our image, to resize our text. To resize text, we can't use width or height, but we can use font-size. Let's tell our bucket to make all headings inside bigger:
.avocado h1 {
  font-size: 112px;
}

You might need to play around a bit with the pixels again. After some trial and error, I settled on 68px. Nice and even!
Making Text Look Cool

The text looks pretty good now, but I want it to be a dark, avocado green colour. I picked one using the colour picker. Colours are described using a mumbo jumbo of numbers and letters. (The one I chose is #2c560f.) This way it's easy for the computer to understand which colour we want it to draw.
Let's add some colour to our text. We do that by adding color to our heading code:
.avocado h1 {
  color: #2c560f;
  font-size: 68px;
}

Naize!
Making Text Look Cool(er)

I'm going to pick a crisp custom font for my website. This has a few steps, so make sure you're paying attention. The first step is the easiest (or hardest) and most fun. Just go to Google fonts and pick one that you like.
I am going with Pacifico, because it felt very avocadoesque to me. Once you picked one, do this:

Click the red circle with a plus in it. (A black box should appear at the bootom of your screen.)
Open the black box that says "family selected" (whatever that means) by clicking it.
Copy the stuff that says <link href="something" rel="stylesheet" />.
Go back to CodePen and click "Settings".
Now click "HTML". (Hang in there!)
Paste the stuff you copied into the box that says "Stuff for <head>".
Click "Close".

Wheeew! That was a lot of steps ... and our text still hasn't changed! We have only copied the font to our CodePen. We still need to tell the text to look awesome.
If you head back to Google fonts, and look in the black box, there's another piece of code, where it says "Specify in CSS". Let's paste that into our code:
.avocado h1 {
  font-family: 'Pacifico', cursive;
}

In my case the font name is Pacifico, but it might be different for you.
Adding Background Colour

Now everything on my page is nice and green, like avocado should be, except for the background. I'm going to add a flat colour to the background using background-color in my CSS.
.avocado {
  background-color: #fbffaf;
}

That's better!
Adding (Fancier) Background Colour

With CSS you can make really fancy gradient effects. It is quite tedious to write by hand, so I used this tool to create one I like. You can do so too! After you are done, just click "Get CSS", and copy it over. For me it looks like this:
.avocado {
  background: radial-gradient(ellipse at center, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%);
  text-align: center;
}

Wow! That looks tasty.
Building Our Second Block (Video)

Now everyone can tell that my website is about avocados, but it doesn't really do much. I'm going to add a video, explaining why avocado is the most awesome food.
Adding Another Bucket

Before adding the video, I'm going to add another bucket for it. It will sit underneath the .avocado bucket. After adding it, my HTML looks like this:
<div class="avocado">
  <img src="http://avocadoes-are-awesome.net/avocado.png" />
  <h1>avocado</h1>
</div>
<div class="video">
</div>
It doesn't show anything just yet.
Adding a Video

Before we can put a video on our page, we need to find a video. (Duh!) I went on YouTube and found this one.
Next, you need to click "Share", then click "Embed", copy the code that comes up, and paste it inside your bucket.
<div class="video">
  <iframe width="560" height="315" src="..." frameborder="0" allowfullscreen></iframe>
</div>
The dot-dot-dot should be the link to the video you picked.
Making the Video Bigger

On my screen, the video looks kind of small. That's boring. Let's make it bigger! Did you notice the code you copy pasted had two peices that said height and width? You guessed it. Just go and change them around to resize your video. Myself I'm going with:
<iframe width="720" height="405" src="..." frameborder="0" allowfullscreen></iframe>
Centering the Video

I'm going to center the stuff in my video bucket, just like I did with the avocado bucket:
.video {
  text-align: center;
}
That's nice, but the video is still stuck to the bottom of my avocado bucket ...
Making Some Space in the Bucket

Buckets can have something called a padding. This is some space inside the bucket that won't have any content in it. I'm going to use padding to make some space in my bucket.
.video {
  padding: 72px;
  text-align: center;
}
Much better!
Building Our Third Block - (An Avocado Konga Line!)

I don't think my page has enough avocados on it just yet. Know what would be neat? A line of avocados running from one side of the screen to the other. Let's do that!
Adding a Background Image

First, we need to add another bucket. I'll call it konga-line.
The next thing I need is a good picture of some tasty avocados. Off to Google again!
Now what? We know how to add a single picture, but what about a whole line? We could add it several times, but that seems tedious. Good news! We can use a background image using CSS.
.konga-line {
  background-image: url(...)
}
Remember to replace the dot-dot-dot with the address to your picture.
Hm ... Nothing changed! That's because our bucket has nothing in it, and we haven't given it a height, so it's all squashed together. Let's add a height to fix that:
.konga-line {
  background-image: url(...),
  height: 128px;
}
Making Background Images Smaller (Or Bigger)

Now we can see our image, but it doesn't seem to fit in its bucket. Luckily we can set the size of the background, too! Let's make the height match our bucket. We can do this by setting the height to 100%, and the width to auto:
.konga-line {
  background-image: url(...),
  background-size: auto 100%;
  height: 128px;
}
Neat!