Tutorials To Build Your Own Website
Building Your First Website
Although the tutorials on this page present information in a linear format, in reality, before you begin building your first website, you should look at the big picture first. Consider all the aspects of the site before you ever begin creating it. Create an overview or outline that answers the following questions.
- What is the topic of my website? What is the niche?
- Is this niche viable? Are there enough people interested in the niche to ensure it can get enough traffic if it is marketed properly? If it does get lots of traffic, is there a way to monetize it? Are there products available for it? If I search for this niche in Google, does Google provide a wide array of ads on the topic? Are there any affiliate programs that I can sign up for that allow me to earn commissions on products in this niche?
- If the niche is viable, what type of site will I create in this niche? Will it be mostly information (such as tutorials) that I give away or sell? Will it be mostly products that I sell? Will it be a review site? Something else?
- Where will the content come from? Me? Me and a group of people I will hire/partner with? Somewhere else?
- How big will the site be? What is the general outline of the site, including main topics, subtopics, etc.? How much time will it take to build out this site, and add all this content? How much time will it take to maintain the site over time?
- What methods will I use to monetize the site? How will I earn money and how much money do I expect the site to make?
- Where will I host my site? (Where will my site "live"?)
I suggest you first do a quick scan through the text on this page to start formulating your "big picture ideas", without worrying about grasping the fine details. Once you think it through and have the vision of your site, you can then go back and re-read this page, concentrating on the specifics, and learn what you need to accomplish your goals.
Hosting Your Site
Let's answer that last question first. Where will you host your site? Your website, once built, needs to be served from a server someone where "out there" on the Internet. Companies that serve sites are called hosting companies (or web hosts for short). There are literally thousands upon thousands of hosting companies, and it can be very confusing to choose the right one. (The wrong ones - and there are plenty of those - will make you miserable). After having used many hosts over the years, we can easily recommend one that shines - Hostgator. Their speed and reliability is rock solid. Enough said.
Coding The Site
The basic building blocks of a website are HTML (or XHTML, which is the more modern version of HTML) and CSS. HTML is relatively easy to learn, as are the basics of CSS, although CSS can get complex as well. Still, you can definitely learn both - at least to the extent where you can create your own websites and/or modify templates to customize them for your own sites. We aren't going to attempt to reinvent the wheel. There are plenty of good tutorials already created, so we will merely point you to the best of the best.
Work your way through each tutorial:
HTML Beginner Tutorial
CSS Beginner Tutorial
HTML Intermediate Tutorial
CSS Intermediate Tutorial
HTML Advanced Tutorial
CSS Advanced Tutorial
Once you have a solid basic understanding of CSS, you'll want to soak up the finer points with the following resources:
Added Bytes CSS Cheat Sheet (V2)Selectutorial’s CSS Selectors tutorial
CSS Basics
Brainjar’s explanation of the Box Model
Site Design
Now that you understand how to create a basic website, you'll want to make it look good. This is where the design work begins. Of course, you can always just hire a web designer, but we're going to assume you want to get your hands dirty, and do a lot of this work yourself. Not only is it economical to do it yourself, but you gain knowledge and knowledge is always useful.
One of the best ways to learn is to look at the code that others have used. Most site designers start out this way. In fact, it's often much easier to start with a pre-designed template, and just make adjustments to customize the look to be exactly the way you want it.
Regardless of how you create the code, you're going to need to consider colors, logos, and images, in that order. First, decide on a color scheme, and then use those colors in the logo you design (or have designed for you). Three or four colors is usually best, as the primary scheme.
Color Schemes
One of the easiest ways to work up a color scheme is to use one of the many color scheme tools on the web. My favorite is this color scheme designer because not only does it make it easy to just pick one color, and then provides you with various pleasing color schemes based on that color, but it then also gives you the option to see example sites using those schemes - both in a light version and a dark version. This makes it so much easier to visualize what a color palette will look like in the real world.
Logos
Now that you have your color scheme decided upon, you'll want to use 2 or 3 of those colors in your new logo. You can make your own logo, of course, but I recommend sourcing this part out to the experts. These days, it's relatively inexpensive (as low as $50 or so) to get a professional logo created, so it makes sense to do this part right. After all, it's the logo that is the representation of your site and business everywhere. It needs to stand out and look good. I recommend LogoNerds to get a nice, custom, professional logo designed quickly.
Images
Your design will probably need images to spice it up. Don't make the mistake of grabbing images off the web (or at images.google.com) to put on your site. More than likely, any image you grab will be copyrighted, and you will essentially be breaking a law or two if you use them on your site. Don't take the chance of getting sued later on. Images can be licensed for you site for very, very little money - often as low as $1 each. Trust me, it's worth it to do this part right.
There are essentially two types of images you'll be using. One, of course, is photos. Unless you have photos that you've taken yourself (which of course means that you have the right to use them), you'll want to search for some that you can legally use. I highly recommend Fotolia for any photos you need. The prices are great, and I've never failed to find exactly what I was searching for. The second type of image is non-photo, or graphically designed artwork. You'll want to make sure to use vector images for this purpose, because vectors can be resized (scaled larger or smaller) without losing any quality. You'll soon find out that this is extremely important. If you use the common .gif, .jpg., or .png bitmap image formats, and try to make them larger, you'll wonder why the end result looks terrible. If you want to understand the details of why that happens, you can read about it here, but the only thing that really matters is that vector images are what you really want to start with. Once you've resized a vector image, you can always save a copy of it as a .gif, .jpg, or .png file, but you definitely need to start the process with a vector. In most cases, unless you are an artist, you won't want to try to create your own vector images, so it's best to license those as well.
Once you have the images you want to use, you will almost always need to edit them or resize them to fit your site's design. There are a myriad of tools you can use for these purposes. Some are free such as Gimp and some are not, such as Photoshop Elements or Photoshop CS4. Photoshop is the recommended choice because it's the standard for web designers the world over, but if cost is an issue, you can get by with Gimp (though you will make some sacrifices over time). If you just want to use an online photo editor, something like Photoshop Express may work for you.
We won't get into either Photoshop or Gimp tutorials here, as there are a plethora of sites devoted to the subjects, and they are far superior than any we could produce. They are the experts, so we'll just send you there. Here are a couple places to start: PSDTUTS and Gimp Tutorials.
Content
You've got your site designed, but it's lacking something - CONTENT! The meat of your site is the content, and it matters a lot. There's no tutorial that will help you create the content, I'm afraid. This is where you, your knowledge, or your wallet comes into play. You need to create the content or have it created for you. This may include articles, videos, podcasts, infographics, product information, sales pages, etc.
Despite the fact that the content is the most important part of your site, it's the one part that we really can't help you with. All we can say is that you need to make it be the very best it can be. If you have terrible content, you'll have a terrible site, and terrible results. So spend whatever time, effort, and money you need to create killer content
.Traffic
Once you have a beautifully designed site, with killer content, you need to let people know about it. You need traffic to the site. The best site in the world is pointless if no one knows about it, and no one goes to it. Here are the top ways of obtaining real, qualified traffic to your site. (Important Note: Never ever fall for one of those ads that tell you that you can buy tons of traffic for a small amount of money. Every single one of those is a scam. You will end up paying for tons of fake traffic. The traffic you obtain either won't be real people at all, or if the traffic does consist of people, they are people who are not in the least interested in your site. Don't waste your money).
Advertising
Of course, the quickest route to acquiring traffic is to advertise. Most people start out by advertising on Google using Adwords. This can be a great way to acquire traffic, because you only pay when people actually click on one of your ads, but even this method can be a little tricky to manage. You'll want to be very careful not to accidentally overspend. If you decide to advertise using Adwords, I strongly suggest you use Google's Adwords learning center first.
Search (SEO)
In our opinion, the best way to get traffic to your site is by ranking well in search engines. If someone is actively searching for something, and your site shows up at or near the top of the rankings in Google, Yahoo, or Bing search results, you've scored a victory, and your traffic can skyrocket. This method of acquiring traffic is known as SEO (search engine optimization), and it can be a very complex field. However, if you master just the basics, that can often be enough to succeed. You absolutely MUST ignore 90% of what you read about SEO however. Many things you'll read are either flat-out wrong, or designed to deceive you. There are however, many SEOs who are extremely knowledgeable and ethical (and I personally know most of them). For that reason, I recommend only a few sources of information when you want to learn the basics of SEO. Start with The SEO Handbook and once you are comfortable with the basics, then consider getting some advanced training via Aaron Wall's SEO Book Training.
Word Of Mouth and Social Media
A good example of acquiring traffic to your site via word-of-mouth or via social media is Twitter or Facebook. Social sites like these enable people to easily share links with their friends and followers, so if someone likes your site, they may let all their social network friends know about it. This is a great way to get traffic to your site, and it can create buzz and have a wonderfully viral effect that spreads quickly. Don't abuse social networks, but utilize them to let others know what's happening with your site. If you've created a good site, and you don't spam others on social network sites, you can use social media and word of mouth to generate very good traffic.
Google Analytics
Once your site starts getting traffic, you're going to want to track that traffic. It's vital to know who your visitors are, and how they found your site. This information enables you to make marketing decisions to bring even more traffic to the site. The best free tool for tracking your site's traffic (also called website analytics) is Google Analytics. Below are some videos designed to help you learn everything you need to know about Google Analytics
Beginning Analytics: Interpreting and Acting On Your Data
Non-Ecommerce Sites: Beyond Averages
Google Analytics in 60 Seconds: Find the Best Keywords
More Google Analytics Video Tutorials
Monitoring Site Uptime
Although we've recommended Hostgator as your host of choice, all hosting companies occasionally have problems. When they do, your site may not be available or visible to anyone for a while. (The standard phrase to describe that situation is "Ack! My site is down!"). Hopefully, this happens to your site rarely, and when it does occur, it hopefully comes back up online within a few minutes. Still, you want to know when then happens, so you'll want to monitor your site's uptime. I recommend using SiteUptime to keep an eye on your site. If SiteUptime lets you know that your site is down, you can get in touch with your host immediately to try to solve the problem asap.
Monetization
Of course, the looming question is always, How do I make money from my website?. It's a good question, but the answer is different for everyone. Basically, there are numerous ways to make money from a website, and often the best way is to utilize more than one way. Not every monetization method works well for every site. It's usually best to test various methods and see which appeal to your site's audience the most. You'll likely fine 2 or 3 that, used in conjunction with one another, will bring the best results. Here, then, are the main ways sites make money.
Ad Revenue
The best way to understand this method of monetization is to think about the newspaper and magazine industries. Newspapers and magazines are in the business of providing content to readers, just like websites are. While newspapers and magazines do charge a subscription fee, and most websites do not, those subscriptions really aren't the main revenue generators for those publications. What really pays the bills in those industries are the ads that are included in the publications.
Advertisers generally pay steep prices to display ads in newspapers and magazines. Without ads, those publications won't last long. Once you understand that business model, you can see how the same kind of model can be applied to sites. Because sites are interactive, however, with the user being able to click on things, there are various types of ads that can be displayed on sites. Each type can result in a unique revenue stream for a site, with some types performing better than others.
CPC Contextual Ads (aka Google Adsense)
Google Adsense is the easiest way for sites to monetize via ads. Once you get approval from Google to display Adsense on your site, you simply create some text ads via Google's site (really, all you are doing is setting up an ad size and choosing some options), and include the provided snippet of code that you are given onto your page(s). From then on, the ads are automatically placed in that spot on your page(s). Any time a user clicks an ad, you earn a few cents. (Note: CPC stands for cost per click, which is the indicator that this revenue stream results from clicks on ads).
Let me post a HUGE WARNING at this point. Never EVER click your own ads, or suggest that anyone you know (or don't know) do the same. I strongly suggest you read all the Google guidelines and TOS (terms of service) as well. I promise you that Google can detect fraudulent clicks, and they WILL ban you from Adsense forever when they do. Don't even THINK about trying to outsmart them.
CPM Banner Advertising
Unlike CPC ads, which earn money based on click-throughs, CPM ads pay based upon number of times they are shown to users. In other words, whether or not a user clicks on an ad, you get paid for having shown it to the user. This is priced per 1000 views, so if the revenue is stated as $2 CPM, that means that you would get paid $2 every time the ads are shown 1000 times. If ads are shown 10,000 times, you'd be paid $20. In general, it's a little more difficult to get accepted into the ad networks who pay with this model, because they usually require that sites get a minimum level of traffic before being allowed to show their ads. When you are just starting out, you probably won't qualify.
Direct Ad Sales
This type of ad revenue is a direct buyer-seller connection. Rather than using a 3rd party, like Google or an ad network, you deal one-on-one with an advertiser. You and the advertiser agree on a price, which could be a flat monthly fee, or cost per click-throughs, or cost based upon number of impressions. In most cases, a new site will charge a flat monthly fee because it is easiest to handle. No tracking of clicks of ad impressions is required. This is a favorite method of bloggers.
Affiliate Marketing
If your site isn't selling your own product, you'll want to find other ways to bring in income. Affiliate marketing is one of the best ways to do this. Essentially, when you are an affiliate marketer, you are simply acting like a salesperson for another company. You tell your visitors about a product that is relevant to your site's topic, and refer those visitors to the website of that product. If one of your visitors buys the product, you get a commission from the sale. Of course, not all companies have affiliate programs, so you'll need to find companies that offer affiliate marketing programs (and there are plenty). Plus, you'll need to learn the finer details of how to best participate in these programs.
The best way to learn about affiliate marketing is to learn from the masters. Here is the best of the best: Super Affiliate Handbook by Rosalind Gardner. You can watch the video below, but the meat of the content is in the handbook.
Selling Knowledge
Often, a site that focuses on giving information freely to users, also offers some type of upgraded version of that information. So for example, if a site's goal is to teach users how to cook on a budget, they may give free tips on the site, but the user can also choose to purchase a book (either physical or more often, an electronic version, called an ebook). The free tips on the site give the users a sense of the value that they'll receive if they purchase the book. If the users like the free information, they feel confident that the upgraded version will be worth paying for. The most common way of selling knowledge is by creating an ebook. However, there are other methods as well. You can sell a physical book, and can even self-publish the book via places such as Lulu.com. You can set up a private membership program, where users pay a monthly subscription fee, which entitles them to access password-protected sections of the site. These members-only sections may include extensive information, group interaction via chat or forums, or even one-on-one discussions with you.
If you want to create an ebook, here are the basic steps you'll need to take.
- Download OpenOffice. Write your ebook, using images and formatting to make it look great. Then choose File / Export to PDF. You now have an ebook you can sell.
- Get a snazzy ebook cover designed for it. You pretty much have three choices here. If you own Photoshop, you can scour the net for free Photoshop actions that make it easy to design your own. If you don't own Photoshop, you can either hire someone to create one for you (there's plenty of ebook cover designers out there), or you can try to make your own.
- You need a way to sell them. Digital products are easy to deliver, since they can just be emailed or downloaded, but there are easy ways and hard ways to go about it. The hard way is responding manually to each order and emailing the product yourself. If someone orders at 2 a.m., they want it right away, and wont be pleased that you are sleeping at that time. For that reason, I recommend getting an account with e-junkie.com. It's only $5/month with no extra charges. By using them, you can upload your ebook file to their server, use their shopping cart (which is a pretty good one), place their code on your web page, and when people order from you, e-junkie sends them a secure link for them to download the file immediately. You can set the maximum number of times a person can download the file (which is useful, in case they lose theirs). Once they reach the maximum (2 or 3 is a good number), they can no longer download it. This prevents them from sharing the link with all their friends.
- Market your ebook. Tell everyone you know and everyone you don't know about it.
- You can also set up an affiliate program so everyone you know can market it for you too. You can do that via e-junkie as well, if you'd like. People can sign up to be an affiliate of your ebook (through e-junkie's marketplace); they are given their own special link to your sales page; and when they refer anyone to your page, which results in a sale, they get a commission. You determine the amount of the commission. I like to give affiliates 50% of the sales price, to give them incentive to sell my product.
- You can also try to get some of the big-name marketers out there to sell for you as well. If you can snag any of the BIG PLAYERS, give them 75% or more of the cut, because they will potentially sell tons for you. This is often referred to as a Joint Venture. You may have a hard time working your way into their circles, but keep trying to find a way into the nest of joint venture players, and you may get lucky.
Selling Tangible Products
Of course, if you have a real, tangible product to sell, then by all means, do so! Maybe you create hand-made quilts or paint beautiful portraits. Whatever your product is, selling it via the web is a good idea. You will have to consider how to ship items however, so keep that in mind.
Especially when selling physical items, you'll need a good shopping cart to handle the transactions. There are many to choose from, but the best free open-source carts, in our opinion, include FatFreeCart, PrestaShop, OpenCart, Magento, OSCommerce and ZenCart.




