Since I started messing around with web design, people have been coming out of the woodwork, confessing that they’d like to build a website, too, but don’t know where to start. My own experience has been that figuring out how to begin is much harder than actually building the site. So here’s my attempt to make things more clear for the absolute newbie (as I was myself a year ago).
It’s hardly necessary to explain that I’m no expert. On the contrary, I’m new enough to this that I remember exactly how frustrating it was to figure out how to get started.
The way you build your site really depends on your reasons for making it, as I’ll explain. But regardless of how you go about it, there are three aspects of a website that you should know about.
- HTML, or hypertext markup language, is the most basic part of a webpage. It refers to the codes that surround the words and images you want to put on your page, and it tells the user’s internet browser how to display these words and images. For example, surrounding a word with these two guys: <i> </i> tells a browser to display the word in italics.
- CSS. In the olden days (like, five years ago), every website was written only in HTML. But the problem with that is, what if you have a really big site, with a lot of pages on it, and you want to make a change to the formatting on every page? You’d have to go in to every page and change the HTML by hand. CSS, or cascading style sheets, is a way of separating the page’s formatting from its content. Web designers still use HTML to define different seections of each webpage, but now they also use CSS to style their pages. A CSS stylesheet is a separate page that lists rules for all the different features of your website — like, “make all the headers bright red and in 20-point Times New Roman.”
- A server is basically a hard drive that serves up your webpages whenever someone asks for them. Usually, a web designer connects to her server remotely and sticks her webpages on that server. I buy server space from a hosting company for an annual fee, and, to be honest, I have no idea where my server is physically located.
So those are the basics. How you proceed from here depends on your reasons for wanting to build a site.
1. I just want a website. I don’t really care about what goes behind the hood, and I don’t have a specific idea of what I want it to look like.
That’s cool. In your case, I’d recommend using WordPress. This is something called a content management system: a piece of software that organizes your pages for you and provides a simple user interface for building and styling your website. This blog, for example, runs on WordPress. But your website doesn’t have to be a blog. You can pick a bunch of different themes for your WordPress site, and you can create static pages that include anything you want.
There are a couple different ways to use WordPress. Your easiest option is to use WordPress’s hosting service. That means your blog is stored on WordPress’s server and you do all your editing through WP’s user interface. It’s a really good option for someone who doesn’t want to make a huge commitment, and it’s free. The only drawback is that you have slightly less control over how your site looks.
The second, slightly more complicated option is to host your WordPress site yourself. This involves downloading the software files and then sticking them on your own server. This means that you have to sign up with a separate hosting service, but it also means you can tinker with your site in lots of different ways, and you can give your site whatever URL you choose. WordPress has great instructions on how to get started, including how to choose a hosting service.
2. I don’t really care about what happens under the hood, but I want more control over how my site looks.
I suggest iWeb. Geeks will cringe, because the code that iWeb produces is pretty ugly. But you can make a great-looking site with iWeb without knowing a word of HTML or CSS, and the fact is, most people will have no idea what the code looks like. IWeb is a piece of Apple software that’s part of the $79 iLife suite. It allows you to create a website solely by dragging and dropping — as easy as creating a PowerPoint slideshow. IWeb comes with a bunch of themes, but you can modify them in any number of ways. Its flexibility is limited after a certain point, but you can get pretty far before you notice.
If you go with iWeb, you do have to provide your own hosting. The easiest way is to purchase a membership in Apple’s MobileMe service. If you do that, making your site live will be a snap. But if you want to use a different host, you can do that, too. Apple provides pretty straightforward instructions.
3. I want to figure out how everything works and do it myself.
That’s how I felt. Personally, I learn most easily if I have a book I can work through. I highly recommend the book I used, Ian Lloyd’s Build Your Own Web Site the Right Way Using HTML & CSS. The pace is exactly right, the tone is really reassuring, and the techniques are rock-solid. Lloyd doesn’t assume any prior knowledge, but by the end of the book, you’ll be ready to build your own site. It took me about two weeks to get through the book, and by the end, I was good to go.
I think a lot of people think of learning web design as synonymous with learning Dreamweaver. Dreamweaver can be a really convenient timesaver, but I liked learning to make my own site using just a text editor. It made me feel hard-core and taught me exactly how everything works. Plus, learning Dreamweaver is much, much easier if you’re not worried about learning HTML and CSS at the same time.
If you prefer to learn online, W3Schools has complete, step-by-step CSS and HTML tutorials.
However you go about it, I think you’ll find that getting a website up is really satisfying, and getting past the initial barriers makes you feel like you can do anything.
Some additional links:
A List Apart: an online magazine that discusses web standards and best practices
CSS Zen Garden: a website that shows how powerful and flexible CSS can be by allowing graphic artists to provide their own stylesheets for the same HTML document
Webcreme: My favorite of the web design inspiration sites