Last Updated:  January 2, 2009

Overview

Table of Contents

Overview
  1. The Beginning
  2. Learning HTML
  3. Expanding Your HTML
  4. Better by Design
  5. "Color Me Happy!"
  6. CSS Enterprise
  7. Roll Over, CSS
  8. Domain Registration and Hosting
  9. Fire Up, FireFTP!  (Loading Files)
  10. "Video Only," Please
  11. Tools
  12. Portfolio: Bringing It All Together
  13. Visual Reference:
    1. HTML
    2. Images and Links
    3. HTML Template
    4. IE Specific CSS
    5. Meta Tags
    6. Special Characters
    7. HTML Lists
    8. CSS
    9. CSS Shorthand
    10. Colors


Download Resources folder (zip file)

Who is this for?

  • Anyone who wants to learn HTML
  • Artists, novices, and others who want to create their own online portfolio/web gallery
  • Most especially, for those who are not tech savvy, but are willing to learn

Read All About It

I have created this tutorial for anyone who wants to learn how to make their own online portfolio. I have also designed it for those who just want to learn HTML in general, at a simple and pleasant pace, without missing any of the good stuff (for those of you only interested in the learning html part, read up to "Putting it All Together", then skip to "Other Reference".) But most importantly, I have designed it to allow someone to do all of this for free. There is no software to buy, no shareware to trial, just straight forward "here it is," get the job done, tools and instruction. The only investment required is one of some time and effort.

This Will Only Hurt a Little

I have tried to make this as painless as possible, and don't worry if you've never done anything this computer techie before. It really won't be that hard. If I can do it, you can do it. And I have laid it out before you in such a way that should really make sense. In fact, it can be kind of fun. The main thing is, that once you're done with this tutorial, you will be able to do more than those who spend their precious money on Dreamweaver, and other such software.

So Why Not Dreamweaver?

Two reasons: 1) it's not free; and 2) It's not perfect; it still has its coding flaws. I'm not against Dreamweaver or any of its counterparts, by any means. They can be really useful tools. But any guidebook will tell you that Dreamweaver is intended as a secondary tool and not a replacement for learning html.

There is a third reason: In the long run, you can actually speed up and streamline the creation process, not to mention having a greater capacity to add features to your site. And even if you don't use this tutorial for learning how to code, and get Dreamweaver anyways, you can still benefit from the "Better by Design," "Color Me Happy," and "Visual Reference" sections of this tutorial.

Let me give you a little more insight:

I first started in web design when a friend and I decided to run a small business building websites together, while going through college. I was the designer and he was the programmer. But before long, my friend fell through, and I was left to go solo. That left me with the predicament of teaching myself HTML.

Intimidated by programming and figuring that Dreamweaver was my safest bet, I got myself a copy of the software and purchased a guidebook from Barnes and Noble ("Dreamweaver: The Missing Manual"). With the necessary tools in hand, I went to work.

It wasn't long before I started running into small problems with Dreamweaver's code. Not understanding how to fix it myself, I continued trying to use Dreamweaver's visual interface to fix the problems. What I was unaware of was what was going on under the hood. The reality of Dreamweaver, or any other similar program, (called a WYSIWYG, which stands for "what you see is what you get;") is that it isn't perfect; it can create junk code.

What does that mean? It means that Dreamweaver, once in a while, as a natural byproduct of the creation process, will generate things in the code that you don't want. In essence, either breaking your design, or even worse, the entire page.

On top of that, the hours I had invested had been in learning how to do things the Dreamweaver way: navigating the menus, using its design interface, familiarizing myself with the Dreamweaver environment. Then I came across using CSS in Dreamweaver. For those of you who don't know, CSS is the "presentation" aspect of creating web pages; determining how things are positioned on a page, the color or font, and other visual details.

Well, what I found when using CSS in Dreamweaver, was that I was essentially learning how to code it. So why not just learn that in the first place? CSS is relatively simple. And while figuring out how to fix what was broken in the HTML that Dreamweaver was generating, I came to a similar conclusion with HTML. Let's just learn the code altogether. So I went to a site called W3Schools, which teaches HTML and CSS, among other things, and started to learn.

The Wrap-Up

So the question became: for a non-coder, non-programmer, artist type, like myself—would it be worth it to learn how to code? The answer was a resounding "yes". And was it easy? Sort of. I'm still learning. That's the beauty of it. There's so much that you can do with it.

The simple fact remains: there is no way around it, but through it. It can be daunting at times. Things keep changing. Browsers all handle thing differently in their own little way. There are no shortcuts; you just have to do it. But hopefully this tutorial will guide you through the process in a relatively simple and straightforward fashion. Heck, if I can spare you the frustration and heartache that I suffered before getting here, then all the better.

So step right up, and "Let's do this thing!"

[Next]


Book Cover > Overview > Beginning