Blog

How do I make a web site? A step by step guide.

How do I make a web site? A step by step guide.

If you have ever wondered, “how do I make a web site?”, then this article is for you. I will attempt to guide you through the process assuming you are an absolute beginner.

What is the internet?

A representation of the main "backbones" in the U.S.
A representation of the main “backbones” in the U.S.

The first thing to know is, “What is the Internet?”. You probably know that, when you signed up for internet service, that you were hooked up through phone line or a cable line, but then what happens? Well, essentially, that phone or cable line connects you and your computer to the rest of the world. The cables run to your ISP or Internet Service Provider. This is who you pay each month for internet access. Your ISP then connects you to bigger wires that can handle far more data and faster speeds. They are usually made from fiber-optics, which allow data to travel at the speed of light. These main-lines stretch across the country and under oceans. Lets say you sent an email to a friend. Your data travels out of your house, across the local phone or cable lines, to your ISP. At the ISP there’s a device called a Router. The Router is like a traffic cop at an intersection. It recognizes your email, and then tells it which way to go to get to the destination. This can happen over and over, dozens of times before your data, your email, finally finds it’s way to your friends house, and their computer.

Here’s a fun trick to show you exactly what I’m talking about. If you are on a Windows based computer, go to your Start menu, and click “Run” or just type in the bottom these letters “cmd”. This opens what is called a DOS Prompt, a basic Windows program that has been around forever, and is used to perform all sorts of basic commands and functions. The window should be a rectangle with a black background. Inside, there should be a line of text with a blinking cursor after it, waiting for your input.

Running Tracert to Google.com in a Dos window
Running Tracert to Google.com in a Dos window

Type in “tracert www.google.com” and hit Enter. (Your Enter key). Each line that shows up represents a “node” or router at an ISP where your request to find Google.com is traveling. Each line is a stop, where the router says, “Ok, you want Google.com, go this way!” and your request is sent down the proper lines until it get’s to the next intersection, until finally you reach your destination. This same process is what happens when you visit Google in a web browser. You say “I want Google!”, and that request goes through the internet until it finds Google, which is on a computer somewhere. That computer then says “Ok, you want Google, here it is!” and the data that shows you Google.com goes all the way back through the internet often over hundreds of miles, back you your computer. All within a fraction of a second. Amazing isn’t it?

So all these lines of fiber-optics and copper form an enormous “web”, hence the name “Word Wide Web”, or “www”! It is vastly complex. At the junctions of the web are either routers, like I mentioned earlier, computers, like the one your are using now, or computers that contain web sites. A computer that contains a web site is called a Server. When you want a website, your request for that site travels across the internet until it finds the Server.  The Server’s job is to then cough up the data that makes up a website and send it back to you. Servers are just computers, similar to the one you are using now, but more powerful and specially tuned to “serve” up webpages. The companies that own these servers are called Web Hosts.

What is a Domain Name?

In short a domain name is what comes after “http://www.”  in your web browser address bar at the top. Right now you are at RogueEasyWeb.com. That’s a domain name. It consists of two parts. The name can be letters, numbers or dash marks. Then there is a dot and after the dot is the Domain Name Extension, which most popularly is “com”. Domain Name Extension were intended as a way to divide up website by their purpose, and for the most part, it works. “Com” stands for c0mmercial. For a company or if you are selling anything. “Org” is for non-profits. “Net” stands for network, but is somewhat vague and is closer to “Com” than anything. “Gov” is for government use, and “Mil” is for the US military. Countries have their own Domain Name Extensions as well. For example, .jp is Japan, or .au is Australia. this can be useful if your website is in a language native to that country. There days, .com is still the most valuable and sought after TLD.

Here’s a list of all domain name extensions or TLDs, from Wikipedia.

When you want to purchase a domain name, you must first find out if it is available. If someone owns it, you can’t have it! Unless they will sell it to you. A huge industry is made from people who just buy domain names hoping that someone else wants them. They don’t use them, they just wait until someone  wants one and then they try to get as much money as they can for it. They are sometimes called Domain name Squatters. Anyway, you have to find you if the domain that you want is available. A good place to find this out is at NetworkSolutions.com. They are a domain name “Registrar” or a company who controls the sale of domain names, as well as a web host. I do not recommend signing up with them though. Instead, use the tool at NetworkSolutions, (which is nice because it allows you to enter multiple domains at one, to see if they are available) then head over to BlueHost.com, where you can get your domain name for FREE when you sign up with their web hosting plan. If you have more than one domain in mind, you can purchase it after you sign up. If you have domains at a registrar like Networksolutions or Name.com, but your web hosting somewhere else, that’s ok too. You will just have to tell your registrar to point your domain at your web host by changing what’s called the DNS settings.

What is a Web Host?

Web Hosts are the companies that own special computers or “servers” that contain the data that makes up a web site. When you sign up with a web host, you rent space on one of these computers, these servers and that’s where you will be putting your new web site! There are many, hundreds, of Web Hosts out there to choose from. I’ve been in the web design business for 10 years and I’ve tried many. Choosing a web host you want to look for a few key things. First, is cost. Compare to other plans. Around $10 is average for an “entry level” account. Are there “bandwidth limits” per month? If so, you can be charged overage fees if your website becomes popular and “serves” up more bandwidth than your plan allows for. Also, some plans have storage limits. For example, if your website got to be over 100 mb in size and your hosting plan only allows for 100mb of storage, you may be paying overage fees. When you get more experienced, you will want to know what kind of server you are getting. Is it running Linux? Windows? PHP? Database support? Most modern web-hosts should be up to date and run everything you need by default. If they don’t or want to charge you extra, than you may be getting ripped off. Finally, you will want good tech support. when you run in to trouble with technical issues on your server, it’s invaluable to be able to talk to a real live person who knows that they are talking about. I’ve been saved countless times by tech-support, and a two minute conversation can often lead to those “A-Ha!” moments when you really learn.

In my years of doing web design, I can firmly stand behind one web host in particular. They are called BlueHost. They offer only one plan, but it does everything you need. It’s one of the lowest priced plan you can find, yet has all the features you could want. You get a free domain name when you sign up. There are no bandwidth caps, no storage caps you can host unlimited domains on one account (So, you could have as many websites as you want, all under this one plan!), and best of all they have really great phone tech support available around the clock 24/7. I hate to see people get taken advantage of and purchase an inferior or expensive web hosting plan, when something like this is available. Do yourself a favor and click here to go check them out now. I’ll be honest, I do receive a small kick-back if you sign up with them. But I also honestly recommend them! In fact the web site you are reading right now is hosted with Bluehost, and has been for years.

Now I don’t usually like to bad mouth anyone, but there are bad web hosts out there. One in particular that I do not recommend is GoDaddy.com. If you already have them, don’t panic. They will work for you, and the pricing is ok. I feel like they have a very confusing website that’s specifically designed to lure people who don’t know any better into buying products that they don’t need. If you’ve ever worked with them before, you know what I mean. Also, their tech support is ok, but you often have to wait 15 or more minutes on hold before speaking with someone. Lastly, sometimes Ive seen some poor performance from their servers.

Building a Website: The Tools

Ok, so you have a web host, now it’s time to start building the web site. The entire internet runs on a base “coding language” called HTML or Hypertext Markup Language. HTML is what’s behind the scenes on every website you visit. Do you want proof? Ok, visit any website you want, right click your mouse on the page to get the pop-up window and select “View Page Source” or “View Source”. The window that comes up shows the HTML coding that’s behind the page. This simple trick is a very valuable technique for learning how websites are constructed, and how different people have done things.

So websites are built on HTML, how do I learn HTML? Well, I won’t write a book on learning HTML right now, but I’ll give you a couple options, recommendations and links to get you started. Basically there are two ways to get started in the world of web design, or you can combine the two. The first is using a WYSIWYG (“What You See is What You Get”) HTML editor. These programs are intended to build an entire website from within a program by selecting options from menus, adjusting values and changing settings. An HTML editor like this is great for getting things done fast, and getting results without having to taking time to learn core principles of how HTML and websites work. Of course, this is also why this method will eventually send you to a dead end. This brings me to the second method of approaching web design, which is writing the HTML by hand, line by line. All you need to start out with this method is a decent text/code editor that is built for writing code and highlight certain code snips, making it easier to read. (See the links below for recommendations.) This means you will be learning how HTML works from the ground up, starting at the very beginning. It also means that you have full control over your code, whereas an editor will insert code in ways that you may not like. Writing HTML by hand is very time consuming and requires lots of dedication, but if you stick with it, you will be on your way to being an HTML master. A third option of sorts is to combine the two methods. Use a WYSIWYG editor, but view your code from time to time, either in editor (most should offer this option), or, by opening the actual HTML file in a text editor.

Adobe Dreamweaver – A WYSIWYG HTML editor. Arguably the most well known and best out there. Dreamweaver is a little expensive. You can download and try an evaluation copy, here.

CoffeeCup – CoffeeCup is another WYSIWYG editor. As an alternative to Dreamweaver, it’s much cheaper. They also offer a  28 day free trial.

NotePad++ – This is a nice, free, html/code editor that runs on Windows. This is all you need to start hand editing code. Even if you go with one of the above programs, you may still want this.

CoreFTP – This is an FTP Client, and the one I use and prefer. You need this to transfer your website, the HTML files from your computer to the Server, and vice-versa. Editors like Dreamweaver have one built in. Having a standalone FTP client is good when you don’t want to be limited by your editor’s FTP functions, or are hand coding sites using a text editor like Notepad++. CoreFTP is free and runs on windows.

There are many many more options out there for html editing and FTP. These are just a few suggestions. I do most of my work in Notepad++ and CoreFTP.

Building a Website: The Knowledge

I’m a firm believer that that in this point in human history, the most valuable source of information on almost any subject is right in front of you. With exceptions, I have mostly taught myself computers, web-design, graphic design and more. It is the defining skill of this generation to know how to search for knowledge, and equally importantly, how to separate good knowledge from bad knowledge. Tool number one of course is Google. Rely on it often. A good answer is often a simple search away. If you don’t find what you need the first time, try different search terms. But like knowing what restaurants to eat at, it’s good to know what website’s are worth your time. Here’s a list of several websites that can assist you in getting started in answering your question of “How do I make a website?”.

Tizag.com – This site is one of my favorites for quickly looking up specific things like HTML or CSS tags. The design is very simple with no clutter. If you want to start coding by hand, they have a good starting point for that.

W3Schools.com – W3 Schools has a large amount of reliable infomation on HTML and web site design from beginners to advanced. If you want to learn from scratch with them, start here.

This About.com page – covers the basics of Dreamweaver in a step by step format. Probably a good place to start learning how to use Dreamweaver.

Those sites should at least get you started on the long road of web design. The amount of knowledge to learn is almost endless, and growing every day. That said, making websites simple, easy to use and understand is my primary focus and should be yours too. Trimming the fat to provide an easy to understand interface not only achieves superior design goals, but your code will end up being clean and simple as well.

If building a website for yourself, don’t be too concerned with the final product. It will change over time, as you learn. Go ahead and cover the basics, then update and improve it as you learn new tricks and techniques. If you want to be a we designer, my advice is that you start out by creating basic websites for people for free or very cheap. Create 3-5 websites. Do your best to create quality work, because these 3-5 websites will be your portfolio, and represent your knowledge and artistic style. Over time, you can update your portfolio of course, but starting with a strong portfolio will give you a good head start.

Well, I know this guide is a little rough around the edges, but I hope it’s valuable to at least a few people out there. If you get stuck, or just want a website built, come check me out at Rogue Easy Web.com

Tobias Carrier
Latest posts by Tobias Carrier (see all)

Looking for Web Design, Logo Design or Photography services? Contact me today for a free consultation!

Tobias Carrier is lead designer and owner here at Rogue EasyWeb. He has been a freelance web designer / developer for over 12 years now, serving the communities of Lake Tahoe, Bend Oregon, Ashland Oregon and beyond. If Tobias isn't behind the computer you can find him out on a mountain bike, a snowboard or out shooting photos.

Related posts

Search