Making things pretty

Before we get started, I want to explain the difference between an ID and a Class in CSS.
In the CSS i've been using in this example i've started every new block with "." but you can also use a "#" to create an "ID" for your HTML.
Its easier to explain with code:

.header{
width:800px;
height:200px;
background-color: red;
}

goes with this line of HTML:

Header text and stuff

But this CSS:

#header{
width:800px;
height:200px;
background-color: red;
}

goes with this HTML

Header text and stuff

Both will result in the exact same thing appearing on the page. A class can be used on as many different HTML objects as you want, but an ID can only be used once. Using the example above, with" .header "i can make another div later in the page with the class "header" but if i used "#header" i would be restricted to only using it once as an ID. So IDs are much more restrictive, but they have their uses. When you start adding Javascript to your site you'll need objects to have certain IDs so you don't have two things on the same page with the same JS function screwing it all up. With an ID you can also put a link on a page that moves the scroll bar to that section. In other words, if i put this link in the site:

<a href="#header" alt="header">Header</a>

When the user clicks it the browser will automatically scroll up to the header. This can't happen if there are two divs named header.
In general, i used classes unless i have to use an id, simply because ids are more restrictive.


CSS has a few options to help dress things up a bit. One of the easiest things to make is a background image. To set this up add this line to the CSS for that particular div:

background-image: url(images/bg1.jpg);

Replace the background image with yours, of course. You can ten add text to the div and it will appear above the image.
If the image is something you want to tile you can repeat it by adding this line:

background-repeat: repeat;

This will only work if the image is smaller than your div. If it is larger than your div you wont be able to see enough of it to make it repeat. You can choose to make it repeat only horizontally or vertically as well by changing it to:

background-repeat: repeat-x;

or

background-repeat: repeat-y;

This is useful if you want to put an image across the top of your div to highlight your title text.

If the picture is bigger than your div you can adjust its position with this line:

background-position: top left;

If you change that to 'bottom right' it will align the bottom and right edges of your image with the bottom and right edges of your div, so any extra will be cut off from the top and left. If you are going to position your background image a certain way you should add no-repeat. You can fine-tune it by using these lines instead:

background-position-x: 0px;
background-posision-y: 0px;

You'll need to use negative numbers here. Adjusting the X position moves the image left and right. A positive value will move the image to the right, which would create empty space to the right of the image. This isn't a problem if you want empty space, but if you want the div filled with the image you'll need to adjust it to the left by using a negative number like -40px. The same applies for the Y value. A positive number will move the image down, making empty space above it.
When using a background image you should add a background-color as well in case the image doesn't load correctly. The background-color will still be applied so your div will stand out even if the image doesn't load. You'll likely never have an issue like that, but it is good practice to prepare for the rare things that will break your entire page.

Another really easy way to use CSS to dress up your page is by adding a border. You can add a border to almost anything in the page, and its done like this:

border: 2px solid #00ff00;

This is the condensed version of the border attribute. The border will be 2px thick, bright green (#00ff00) and a solid line. You can make it as thick as you want, any color you want, and a few different styles. The options for border styles are dotted, dashed, solid, double, groove, ridge, inset, and outset. Most of those styles look like an awful site from the late 90s, so you'll probably stick to solid or double. Feel free to play around with it.
If you want to get more precise with the border you can adjust settings for each edge.

border-left: 2px solid #00ff00;
border -top: 1px dotted #ff0000;
border-bottom: 3px outset #7a7a7a;
border-right: 4px double #fafa00;

Which will leave us with this ugly mess:

The next one we'll look at involves the cursor. You can change the cursor when a user hovers the mouse over a certain object. Use this line for that:

cursor: crosshair;

Pretty simple. The cursor will be normal until it is moved over the object with that CSS attached. Then it will change to crosshairs until it is moved back out, just like how your cursor changes when you hover over a link. There are many cursor options. You can find a full list here.

Now we'll look at right now is how to change anything when an user hovers. Make a div and set it up any way you like, i'll be using the header from earlier in this post. When it is all set, make a new section in the CSS like this:

.header:hover{

}

Add anything you want to change inside that CSS block. Anything you don't write will stay the way the not-hovered CSS block tells it to. So you don't need to re-write all of the positioning and size lines, only what you want changed. So if my css looked like this:

.header{
width:800px;
height:200px;
background-color: red;
}

.header:hover{
background-color: blue;
}

The header will change from red to blue when i put my cursor over it. The "hover" here is called a pseudo-class.

Hovering is commonly used to modify links. Remember, links are called "a" in HTML, so to change their appearance in the CSS we simply add:

a{
color: green;
}

There is no "." or "#" because there is no class or id, you are modifying the actual "a" object itself instead of assigning attributes to them individually. That CSS will make every text link in the page green, regardless of what the rest of the text is colored. Coloring links makes it easier for users to find them. Just like with the header, you can change how links look when you hover over them:

a:hover{
color: green;
}

Links also have a special pseudo-class called "visited" for pages your user has already been to.

a:visited{
color: black;
}

Usually visited links are a darker or less bold color than normal and hover links.

Combining everything we learned in this post, we can modify the entire body of the page. Look at a HTML template page and you'll see after the the starts. Just like with links, you don't give the body a class or ID, you modify it directly in the css like this:

body{

}

Here you can add global attributes. In the body CSS you can change the text size for the entire page. The text size will be what the body says unless you change it in a div's CSS. This is an easy way to make the entire page's text larger or smaller without having to put "text-size: 16px;" in every single div.
You can also change the background color for the whole page by putting a background-color or background-image in the body. This will go behind everything else.

You can also globally modify images in your HTML with this line in the CSS:

img {

}

This has limited usefulness because you'll be working with a bunch of different sizes and formats of images in the page and you don't want to change all of them in one shot. I aways add this to my CSS:

img {
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

Certain browsers, particularly older browsers, tend to assign borders to images even if you want want it. This will clear all of it out. You can put padding, margins, and borders back in to each image individually in the CSS later if you need to.

One last thing today, we can do global changes contained within a div for things like images and links. What? Yeah, that makes more sense when you understand it.
Lets say you have a div that you are going to fill with a grid of pictures:

.photo_grid{
width:800px
height:800px;
}

You want every image inside that div to have a border, but you don't want to change the entire page with the global "img" part of the CSS. What you can do is add this to the CSS:

.photo_grid{
width:800px
height:800px;
}

.photo_grid img{
border: 1px solid black;
}

This tells the browser that any image inside "photo_grid" will have a border. It wont affect anything that isn't inside "photo_grid" so you don't have to change any other CSS.

As you progress, you'll learn that HTML coding is 90% CSS. HTML just dictates the order of objects and what is inside of what. CSS does everything else.

Positioning Divs and misc stuff.

*disclaimer*
Blogspot doesnt seem to like html a whole lot in the posts. The formatting of the divs may look nothing like it is supposed to, but i'll work on that. For now just do everything in your html editor so you can see what it is actually supposed to look like.


In the last post we made a div and put some text inside it, but often we need to place divs inside of other divs and position it a certain way. We'll start by setting up our divisions with the following CSS and HTML

.outer{
width: 600px;
height: 200px;
background-color: black;
color:white;
}

.inner{
width: 400px;
height: 100px;
background-color: lime;
}

_________

<div class="outer">
Outer div.
<div class="inner">
Inner div.
</div>
</div>


The CSS is pretty basic, one black div that will be 600x200px with white text and one lime green div 400x100px with black text.
The HTML is fairly simple too. We open the "outer" div, add the "inner" div, and close the "outer" div. When writing code in layers like this it is good practice to tab each new section in so it stays organized. When you have layers of 5 or more divisions it can be a little tough keeping track of what closing tag belongs to each div, so we put a tab space before each layer. The tab spaces won't show up in plain text, so you can put a space before the text in the inner div and it will line up normally.

That code ends up looking like this:

Outer div.

Inner div.

By default, everything lines up to the top left corner. There are a few ways to align divisions a different way.
Aligning text is very easy, just add "text-align:##" to the div. Change ## to left, center, right, or justify.

Positioning a div requires a little more knowledge. We can add margins to our div, which is like invisible space we add to the border of the div. There are two ways to write margins in CSS. You can choose each side of the div individually and add:

margin-left: 10px;
margin-top: 50px;

Or you can write it as one line like this:

margin: [top]px [right]px [bottom]px [left]px;

Think of the directions like a clock. Its easier to remember the order that way.

So if we wanted to combine both the left and top margin in one line we'd write it like this:

margin: 50px 0px 0px 10px;

You have to include every direction, even if its is just 0px. This is going to lower our div by 50px by adding an invisible 50px to the top of it, and move it right 10px by adding 10 invisible px to the left.

Outer div. Text-align is centered.

Inner div. Text-align is right, margins are 50px top, 10px left.

We can use margins to center a div as well. Horizontal centering is the easiest, we can use the "auto" option for margins. Add this the the CSS for the inner div:

margin: 0px auto 0px auto;

That sets our top and bottom margins to nothing, and automatically sets the left and right margins.

Outer div. Text-align is centered.

Inner div. Text-align is right, margins are 0px top and bottom, auto on left and right.

The potential problem with this is that the inner div now fills the entire width of the outer div. This means that any content after it will appear below it. If you want to add a div with some text wrapped around it, like a magazine article, you'll have to 'float' the div.

Floating a div means other objects can position themselves around it without any one item taking up the whole width of the page.

This time we will change our markup a little.

<div class="outer">
<div class="inner">
Inner div.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa. Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu. Aenean dignissim vulputate metus vitae varius. Nulla gravida, neque vitae fringilla tempus, erat leo elementum risus, non cursus sem lorem ullamcorper mi. Vivamus quis elit nulla. Aliquam quam sapien, adipiscing non scelerisque at, tempor sed justo. Pellentesque imperdiet aliquam ultrices. Donec scelerisque fringilla odio et hendrerit. Etiam vitae hendrerit tellus. Curabitur a egestas quam.
</div>

I moved the inner div on top of the text in the outer div. We need the inner div to be positioned first, then the text inside. I also added a bunch of filler text so you can see how it works.

For the inner div's CSS, take out all of the margin settings before you float it. You can add margins later, but for now we just want to float it to the left.

.inner{
width: 100px;
height: 100px;
background-color: lime;
color: black;
text-align: right;
float: right;
}

You can float the div left or right and the text will wrap itself around for you. Try both in your html editor to see how it affects it. I changed the width of the div to 100px just because it looks better that way for now.

Floated right, it looks like this:

Inner div.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa. Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu.

You can put the inner div in the middle of the text as well and the text will fill around the top and left of it automatically. This is what it looks like with the inner div placed after "a tincidunt massa."

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales sapien nec justo scelerisque mollis. Duis velit ante, bibendum sit amet mollis ac, fermentum et ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sagittis quam dolor, a tincidunt massa.

Inner div.

Etiam ut nulla metus, vel blandit augue. Ut aliquet lacinia magna, a pulvinar sem consectetur id. Nullam pellentesque enim lectus, viverra hendrerit arcu.

I'll show one more example where we will float several divs inside our outer div and space them out with margins.

Start over with a new page and use the following CSS:

.outer{
width: 600px;
height: 400px;
background-color:black;
}

.inner{
width: 100px;
height: 100px;
background-color: gray;
}

And the HTML markup is:

<div class="outer">
<div class="inner">
Inner div 1.
</div>
<div class="inner">
Inner div 2.
</div>
<div class="inner">
Inner div 3.
</div>
</div>

You can see we used the same class for several divs on the inside. CSS lets you apply a class to as many different divs as you want, but remember they will all appear exactly the same.

You can see that the divs automatically stack themselves on top of each other. If we want them lined up horizontally we can add a float to the CSS. I'll add float:right for this example.

Inner div 1.

Inner div 2.

Inner div 3.

The are all lined up the way we want, but i want them spaced out a little. 10px between each div should be enough, so add a margin line to the CSS:

.inner{
width: 100px;
height: 100px;
background-color: gray;
float:right;
margin: 0px 5px 0px 5px;
}


I added 5px to the left and right, which means they will be 5px from the edge and 10px from each other.

Inner div 1.

Inner div 2.

Inner div 3.

You can add margins to the top and bottom if you need them spaced out vertically as well.

Positioning is one of the most time consuming parts of HTML. Lining things up can be a huge pain and there is a lot of trial and error involved. The best way to learn it is to play with all of the options and see what happens.


Some easier things I'll cover are images and links.
To add an image to your page you don't need to bother with CSS, just HTML. You'd use this line:

<img src="URL" alt="TEXT" />

There are 3 main parts to the markup. You put the url of the image in the 'src' section, which stands for Source. Replace "TEXT" with a name for your image. If your image doesn't load for any reason the browser displays this text instead. Since img markups are self-contained you close it with the "/" at the end.
So to post the google logo we'd write:

<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google logo" />

Which gives us this:


Generally you'll have an 'images' folder next to your html document. If you are loading images from there you don't need to put the full url for the image. You can write it like this:

<img src="images/pic1.jpg" alt="pic1" />

If you have your images organized more than that you just type in the folder path, for example:

<img src="images/people/steve/pic1.jpg" alt="steve" />

The same rules apply for links. To write a link you use this line:

<a href="www.google.com">This text is a link</a>

This text is a link

The "a" stands for link (i don't get it either), and "href" tells your browser what page to link to. Inside the "a" tags you put whatever you want the user to click. If you have several pages on your site you can link to them the same way you link to pictures, like this:

<a href="page2.html">This text is a link</a>

Your main page must be named "index.html" but you can name the other pages anything you want. Calling the main page "index.html" tells the server to direct you to that page first. In page2 you can link back to the main page with:

<a href="index.html">Home</a>

You can make images links very easily too. Just put the "img" line inside the "a" line, like this:
<a href="page2.html"><img src="images/pic1.jpg" alt="pic1" /></a>

Everything between and will be a link.

That means we can make a link to google using the google logo like this:



<a href="www.google.com"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google" /></a>

One last thing. Your HTML and CSS documents are going to get huge and complex, and it can be hard to keep track of everything. One thing that helps a lot is adding plenty of comments. Comments are lines in the code that don't get processed by the web browser so you are free to add any notes you need for yourself.

In HTML you add comment lines like this:

<!-- This is a comment -->

In your HTML editor they will likely show up as a completely different color than anything else. In Coda they are bright green, which makes them super easy to see. You can add them anywhere in the HTML document as long as they are outside of any other tags. You cant write:
<div class="header" <!--comment--> >

But you can write

<div class="header"> <!--this is the header div-->

</div>


Adding comments is CSS is done differently, but has the same effect. They can be added like this:

.header {
width: 800px; /*this is a comment*/
background-color: #ff0000; /*the background will be bright red*/
margin: 0px auto 0px auto; /*this line centers the div*/
}

When coding anything it is a good idea to add plenty of comments. You might have to go back to the code a long time from now and its good to know what you were thinking back then.

Writing HTML and CSS formats

There are two languages you must know to make a website: HTML and CSS.

HTML stands for HyperText Markup Language, which is a fancy way of saying it defines what items are on a page and where. The HTML document will contain the actual text you want visitors to see on your site, as well as text that tells the browser how to arrange everything. The instruction parts of HTML is contained within angle brackets, like this:

<div class="red">
This is text the visitor will be able to read.
</div>

We'll pick that apart more later, but the first line tells the web browser to create a div (division) who's class is "red". Everything after that will be contained inside that div until we close it. Line 3 tells the browser that we want to close that division.

So where does CSS come in? CSS stands for Cascading Style Sheet. HTML tells the browser where to put things on the page, but CSS tells it how items should look. CSS is written in a completely different way than HTML because CSS is essentially a list of styles we want to apply, kind of like Layer Styles in Photoshop, but all text and much more basic.
Above we made a div with the class "red". The class part of the markup tells the browser to look in the CSS for a section called "red" and apply those styles to the div. Without the CSS the div would be invisible and just big enough to hold the text inside it. I want to make the div 200x400px with a red background. I also want to make the text inside 16px high and colored black. We'd write the CSS like this:

.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}

".red" means this will be for items in the HTML that have the class "red". The attributes are then put between braces. The "red" class makes the background red and any text inside it 16px high. Text is black by default, but you can change that by changing the "color: XXX" line. For colors you can use simple names like red, black, blue, fuchsia, etc, or hex codes like #FF0000. You can define the height, width, borders, margins, and tons of other attributes with CSS, but we'll keep it simple for now.

When we put the CSS and HTML together we have this.

This is text the visitor will be able to read.

Know that we understand the basics of writing the code, we'll start with a blank HTML template page, which looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

</body>
</html>


There are a few key things to notice here. The first line starts with a "<!", which means that line is a comment and will be ignored by the browser. This comment, however, is needed by the browser to define what kind of document this is. There are a few different kinds of HTML (strict, transitional, frameset, older versions) so you need to declare what doctype you want to use. I'm not going to explain the differences, just know that Transitional is what we want to use.
Line 2 starts the HTML section of the document. The xlmns tag is a little complicated to explain, and it really doesn't even have to be there (if it isn't there the browser just assumes it is anyway), but I like to include it just in case.
Line 3 opens the Head of the document. The head contains information about the site you are building, but not the actual site itself. In the Head you will link to the CSS document, any JS scripts you may be using, you can include the title for your page, etc. Line 3 is an example of this. It tells the browser that you want to use the UTF-8 character set. There are a few different character sets you can use, but UTF-8 works best.

The head is then closed with </head>.

Then starts the Body of the page. The Body holds the part of the site your visitors will actually see. The div example at the beginning of this post would belong here. Go ahead and copy it in and save the document. When you have everything in place you close it with </body>, then close the open <html> with </html> at the bottom of the whole page.


Next we can work on the CSS. Style Scripts don't require any fancy headers or information, just the code. Since we have the "red" div in our HTML lets add a "red" section to your CSS, which simply looks like this:

.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}

Feel free to change anything you want in the CSS so you can see the effects on your HTML page. The CSS document doesn't need anything else so save it as something easy to remember, like "style.css".

The HTML is done and the CSS is done, now we need to put them together. There are two ways to include CSS in the HTML. The first is the proper way, by linking to it. Make sure the CSS and HTML documents are in the same folder and add this line in the Head section of your HTML:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

The REL tells your browser this is a style sheet being linked to. HREF is how a browser finds files. You'll be using HREF to link to other pages of your site later. TYPE is self-explanatory. MEDIA tells your browser that this is meant for a computer screen. You can specify add a print, projection, tv, etc CSS document if you need to. You'll never need to.

The other way to add CSS to your HTML is through <style> tags. This is improper, but is useful when writing a site. You would add this inside the Head of your HTML:
<style type="text/css" media="screen">

</style>

Then paste the CSS inside those tags, like this:

<style type="text/css" media="screen">
.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}
</style>

It can be easier when developing the site because you are only working with one document that contains both your HTML and CSS so you don't need to switch back and forth constantly. If you choose to work this way you should switch the CSS over to its own document before publishing.

When you are done including your CSS save everything and we can test the site. Open your browser and in the File menu choose Open File. Find the HTML document we just made and open it up. Pretty boring, but its a start. There is a huge list of CSS properties at W3C with examples of how to use it. Read through it so you have an idea of what CSS can do on your site.

In the next post I'm going to talk about images, links, divs inside of divs, and a few other odd things.

You can download the documents from this post here:
http://www.box.net/shared/p3imkfug6b

Getting started with HTML

My pals Nick and Dan, perhaps coincidentally, have both started learning HTML recently. I know a little HTML, CSS, JS, and PHP, so I'm going to post a few mini-guides to help people get started.


The first thing to do is gather some software.

Web browsers read HTML files and render the web page based on the code in it, but not every browser does it the same way. There are three main rendering engines: WebKit (Safari, Chrome), Gecko (Firefox), and IE (Internet Explorer, of course). So in order to test your site you'll need to have several browsers installed.
For Windows users this is easy. IE comes pre-installed, Firefox is easy enough to find, and you can pick Safari or Chrome based on whatever one looks neater (I like Chrome). For Mac and Linux users it gets a little more complicated. Both have access to WebKit and Gecko, but IE doesn't run native on either OS, so you'll need to have a Windows PC handy, dual-boot, or virtualize Windows with QEmu, VMWare, or something similar. Virtualizing is the quickest way to test a site in IE, which is what I do.   I'm not going to explain how to virtualize Windows, but there are many guides online that can help you get set up. Don't think you can get away with just using Gecko and WebKit. IE is the worst browser ever, and its the one most likely to break your site. Unfortunately its still the most popular browser. Its imperative that you test your site in IE before publishing it.

  Now that we have a means of viewing our HTML, we need something to help us write it.
You can write your website using nothing more than Notepad, but it will be a huge pain. Luckily, people have made programs that make HTML much easier to write. These editors color the code so its easier to navigate, number your lines, show validation errors, etc.
  One of the best free editors is Kompozer. In Kompozer you can see a live preview of the HTML you are editing, have several pages open in different tabs, and all sorts of cool stuff. It doesn't support JS in the live preview (you can open the page in your browser to see the JS work, though), and CSS is kind of a pain to work with, but for free you can't find a better program.
If you don't mind investing in software you have many more choices. For Macs, Coda and Espresso are very popular (personally, I love Coda). They aren't cheap (~$100), but both are excellent. You can download a demo of each to see if its worth buying or not.
  I haven't done any work in Windows recently, but CoffeeCup is a well-featured editor that is priced very well ($49). It also has a demo you can try first.
There are also WYSIWYG (what you see is what you get) editors like DreamWeaver, iWeb and, to a certain extent, Photoshop (with the slice tool). I hate them. Its very easy to slide elements around on the page and make it look pretty, and you can throw together a site in about 10 minutes, but you'll have no idea why things work the way they do. You'll be lost if you need to edit a line of code by hand. Take the time to learn HTML the hard way and you'll run in to far less problems.

 You are ready to start writing your site. I'm not going to get into that right now, i'll start showing some code in my next post. Once you have your site written you have one more step: validation.
Like any code, your HTML must follow certain rules. Tags have to be closed properly, certain elements can't exist inside of others, etc. You need to make sure you didn't violate web standards. To do this you can visit W3C. Upload your HTML document and the site will show you any errors you may have made. Don't panic if you have a ton of errors, most of the time it is a simple mistake like not closing an img tag. Review your errors, fix them, and validate again. After you learn what the rules are you'll be able to write a website that validates on the first try. Theres also a CSS validator at W3C. Don't forget to check your style sheet for errors as well. Keep both of those sites bookmarked, they will come in handy.

  If you plan on uploading your site to a server online you'll need an FTP client. FTP stands for File Transfer Protocol and is simply a way to send all of your site's resources to someone else's server. Filezilla is great, free, and cross-platform (Windows, Mac, and *nix), so keep it in mind for when you get to this step. Later on I'll show you how to find a free server and domain name to host your site on, but for now this isn't super important.

  So now we have all the tools we need to get started. In my next post i'll get into the actual HTML code, CSS, and how it all works together.