How to Build a Website in 10 Minutes

In another article, "How to Build a Website," we talked about a robust, long-term set of guidelines for beginners who want to experience the power of creating a new website. However, that article dealt only with long-term guidance, and had no hands-on steps for actually teaching you how to make a website.

In this article, we'll show you the direct nuts and bolts of how to build a website - albeit, the simplest website you've ever seen.

Before you start, you'll need:

Notepad, or Simpletext, or some other plain text editing program. Every computer has this.
A list of web pages you'd like to link to. Come up with 10 or 20 websites, or articles, and divvy them into categories.
A few color choices. Here's an excellent page that visually shows you the many color choices available: http://www.computerhope.com/htmcolor.htm

Alright, let's get started learning how to build a website!

Step 1: The basic document structure.

In your plain text editor, put the following code:

<html>
<head>
<title>My First Website!</title>
</head>

<body>

<h1>Hey, it's a start!</h1>
<p>Cut me some slack, I'm just learning how to build a website for the first time!</p>

</body>
</html>

The indenting and extra lines are purely optional, but helpful to you.

Save that file on your desktop, and name it something like "mywebsite.html."

Important tip: In Notepad's file save dialog, be sure to choose "Files of type: All files" before you save - or it might mangle the filename by adding .txt at the end.

Once it's saved, double click that file, and it should open in your web browser. You should see the title (My First Website!) in your browser's top-most bar. The heading and paragraph will appear rather plain, but they will indeed appear!

You've just learned how to build a website in less than 10 minutes!

Now, let's teach you how to build a website that's a bit more useful. The following advice will help you later, if you ever write blog posts, or want to share a few ideas or links with colleagues.

Even though you'll probably use software to create the finished web page in the future, you'll still know more about how to create a website by following these tips.

Step 2: Adding links.

You should have noticed above that everything in a website has a pair of matching tags, for example:

<p>This paragraph has a start "p" tag and and end "/p" tag.</p>

When you see <these things> in the HTML code, that's called "markup code." (The "M" in HTML stands for "Markup.") Here's how to use a new tag, called the "anchor" or simply "a-tag" to create a website with links.

Underneath the paragraph you already entered in basic website you just created, add this:

<p>This is <a href="http://www.5shades.com">a link to a great web design company!</a></p>

If you're going to learn anything about how to create a website, then we'd better break that down briefly.

The <a> tag is how you create links to other pages. You'll notice that the a-tag doesn't immediately end with a closing bracket, but it continues with href="/something" … and in the example above, that something was this website's main page.

Then some text appears - in that example the text was "a link to a great web design company!" After that text, was the closing </a> tag.

Save the file with that addition, and reload it in your web browser. You'll be able to click the linked text, and arrive at our website!

That's the basics! For more help getting started with building a website, continue to part two of this article, "Hello, Web Design!"

Client Testimonials

Bare Leaf Tea
Patchwerk Recording Studio
SpeechArts
Innovative Closet Solutions

After trying many designers and waiting days for a response, I contacted 5 Shades Media. I received an immediate response. 5 Shades Media has done a terrific job. We love our website. 5 shades Media was not satisfied until we were. They always kept us informed of progress on the site and has done a great job in working with us to establish an identity. If you're looking for a professional site and equal service, 5 shades is definitely the way to go. We look forward to working with 5 Shades Media on future projects.

I am very satisfied with the level of service and the quality of the product that I received from 5 Shades Media. They personally consulted me on the needs of our website and provided the best solutions at the most feasible price. The service was prompt and done correctly the first time around. Even now that the work has been completed, 5 Shades Media is still as accessible as they were during the update of our site. They have also been helpful in answering all my questions as I learn to operate the new functions. I would (and have already) recommend them to anyone.

It is easy to recommend 5 Shades Media! They make contact immediately when notified and are consistent in that level of responsiveness. They were incredibly patient with my acillations and willing to 'listen' to my needs, vision, and wants, which only became clear after the work had started. Along the way and without being asked, 5 Shades Media took time to provide 'how to' advice that would help me with getting my business going. My website looks great, and I know that I got more than what I paid for! I'm indebted to 5 Shades for their dedicated efforts on my behalf!

I just wanted to say thanks for making me such an awesome web site. I described the look and feel of the website that I wanted and the team at 5 Shades pulled it off! The most impressive part of this company is the customer service. E-mails are returned lightning fast and they are to the point with a lot of great ideas and input towards pulling everything together. The website editor is a great addition and is very easy to use and navigate through. I am very happy with the overall experience and would recommend 5 Shades Media to anyone ready to take their company to the next level.

ecommerce-design

We're Experts In

Business Website Design
Website Redesign
eCommerce Web Design
Corporate Website Design
Internet Marketing (SEO)
Web Hosting & Domain Names
Logo & Corporate Identity Branding
Content Management Systems
Do-It-Yourself Website Builder
Real Estate Web Design
Wordpress Blog Design
Legal & Law Web Design
HTML/CSS Website Design
Medical Website Design
Lead Generation Websites

Name:

Phone:

Email:

Project Details: