Tips and Tricks for Building Your Personal Website

Gone are the days when only companies and big organizations had websites. Today it’s possible, even easy, for anyone who wants to be on the web to create a site in a few easy steps with little to no experience with html.

Of course, you could always spend weeks and months studying HTML and CSS, learning the ins and outs of tags and tables, but really who has time for that? If you have nothing to do and hate the sunlight, this is a good option. If not, you may want to read on.

Reserve your domain name

First, make sure you register the address to your site. For personal sites, “” is preferred, but don’t fret if it’s taken. Recently “.me” has come into fashion for personal sites as well, but feel free to experiment with a number of different names. Just be sure to keep your readers in mind (friends? employers? fans?) and make it easy for them to find you.

Many web hosting providers also make site builders available to their customers. When you buy the server hosting and register your domain, you can use provided site builder software to quickly build a website.

Personal branding expert and blogger Dan Schwabel emphasizes the importance of owning your name and blogging. “Those who blog will have a stronger asset than those who don’t because blogs rank higher in search engines and lend more to your expertise and interest areas over time.”

1&1 and Godaddy are two hosts that provide these options, and there are plenty of other hosts as well. Shop around for the best deal for you. Most of these services cost money, and they don’t always offer a whole lot of control over the site.

Purchase or download a WYSIWYG editor

WYSIWYG (pronounced wuhseewig), stands for “What-You-See-Is-What-You-Get,” and is essentially an HTML editor with a graphical interface. This is the route I chose to go when I created my own site, and it’s the one with the most options. It also allows someone with some amount of HTML knowledge to have more control over their site.

Programs such as Adobe’s Dreamweaver, Microsoft’s Expression, or my personal favorite, Kompozer, are considered WYSIWYG editors (I use Kompozer because it tends to create the cleanest code, and it’s freeware, meaning you can find it and download it for free).

While Dreamweaver can be pricey and a little too high-powered for some, LifeHacker’s Jason Fitzpatrick cites the software as, “a titan in the WYSIWYG world. It’s extensible with dozens of free and commercial plugs-ins available for everything from web effects and widgets to shopping carts and image galleries.”

Once you have your WYSIWYG editor downloaded and installed, you can go ahead and start playing around. Try to make something that looks nice and professional, but what you really want is some good CSS to control the visual elements of the website. With a good external CSS sheet, you don’t have to worry about recreating different visual elements each time you add a new page to your website.

Familiarize yourself with CSS

As with the HTML, you could learn how to write CSS code yourself. Or you could just take the shortcut and download a free CSS template.

There are plenty of great sites out there that offer these templates free of charge. And though “Premium” templates are available, they usually range from $30-50. Most sites use Creative Commons licensing for their templates, and as long as you ensure that Non-Commercial is not included in the license, simply leaving the original creator’s footer in the code will allow you to use the CSS however you want.

After you download your CSS template (it will likely come in a zip file), unzip it and import it to your WYSIWYG editor.

Don't be afraid to experiment with funky layouts.

Once you’ve found where to host your site, you can upload your template and forget about having to continually upload new versions of the page. Most WYSIWYG editors have a site manager, which enables you to edit pages quickly and live online. Enter in the provided FTP information from your server, and you’re ready to go.

To get going, make a copy of the “index.html” page that came with your CSS template and rename the copy “template.html.” Every time you create a new page for the site you will use this as the base HTML. Just remember to rename it once you put in the content of the new page (i.e. once you fill in your content, either select “Save as” or “Publish as” and give it a new name, keeping your template as is).

Every time you create a new page, link to it from other pages by simply selecting the text you want to become a link and clicking the “Link” button. Simple.

All WYSIWYG editors are different, and their buttons are located in different places, but they all perform most of the same functions. They will all provide views where you can see the actual HTML code as well as the visual view that makes it so anyone can design a website. If you’re interested in any of these options, there are huge communities online that provide advice and support for first time users.

Any tips we missed? Tell us!

Photos by the tartanpodcast and Claire Sutton.

Joseph Stucker I graduated from Boston University, majoring in Communications Studies and minoring in Sociology. I've worked in a library for six years, a museum for two summers, and interned at a digital content workshop. I spend all my time satisfying my Internet addiction and learning new things about anything and everything. Twitter: @jwstucker

View all posts by Joseph Stucker

Leave a Reply