Updated February 05, 2017

Start a Website

Are you excited about getting your website up and going? This step-by-step guide takes you from zero to sixty in 20 minutes. 

Need a website? Whether your ambition is to become the next big hit Mommy Blogger, sell your amazing stuff, or to provide an online presence for your company,  you’ll need to set yourself up with a website first.

You Can Do This

In case you are harboring any fears over whether you can actually do this, this fun fact will remove them from your consciousness forever:

As of September of 2014, the world passed an important milestone: 1 billion websites.

And it’s safe to say that a large chunk of these websites were created by people like you: people with zero experience. All it took was some simple guidance like what I’m providing to you here, and millions of people were off and running with new websites.

That’s a lot of websites!

That’s a lot of websites!

So, nothing should be stopping you. And I hate to say it, but these days creating a website has become so incredibly easy that if it’s the fear of not understanding how to begin that’s stopping you, you’re going to feel pretty silly by the time you read this.

That’s because in a few short minutes you’re going to find out how simple the process really is. You might even be embarrassed that you haven’t started before now!

With that, let’s begin.

How to Make a Website

1. Set up a Hosting Account

Since there’s no point in creating a website unless you have a way to get it up onto the internet, start by finding a hosting company. Since I’m of the mindset that whoever offers the easiest route to actually getting a site live, I look for hosting companies that offer an all-in-one package (yes I also like all-inclusive tropical vacations: easy peasy and no hassle).

That means hosting, domain, website builder, and support for all three all rolled into one exceptionally easy-to-manage package. That’s what I demand, and you should too. And you should never put up with any service that’s not friendly, either. Here’s a handy checklist of what to look for in a hosting company:

What to Look for in a Hosting Company

  1. They should offer basic hosting packages for newbies like you.
  2. They should offer domain name services (for newbies like you).
  3. They should offer a website builder and it should be FREE.
  4. That website builder should contain lots of design templates that are ready to edit: fully customizable.
  5. You should not have to download any software. The builder should be cloud-based.
  6. The builder should offer the Drag & Drop method of creating your site.
  7. You should be able to publish updates to your website on your own.
  8. You should be able to add extra features to the website you create.
  9. Customer service should always be 24/7 and friendly without fail, at all times!

Don’t settle for bad UX, either. UX stands for “user experience” and it covers ease of use issues. That’s why the Drag & Drop method is important, and the interface for using everything from the Drag & Drop features to selection your options and customizing your site should be very intuitive, easy, and even fun to use. You shouldn’t wonder what’s happening, you shouldn’t be nervous that you broke something, and you should know what’s going on at each stage… you are in control and the interface should make you feel that way. That’s good UX.

FastWebHost has all these things. They also provide everything I need for a speedy go to market process, to borrow some business terminology from product developers. I can sign up, build my website, and be live on the World Wide Web within half an hour. Even former tech simpletons like I used to be will find this easy to do. It’s all in the package they’ve created, plus the handy dandy friendly customer service they offer makes for a pleasant experience, even if you’re having issues getting your website off the ground.

Oh- did I say it includes a FREE DOMAIN, and I should probably mention the cost…

Just One Buckaroo Per Month

Just One Buckaroo Per Month

I don’t know about you, but last time I checked, nothing costs $1 per month. You can’t even stay stocked in ramen noodles for that!

Start by clicking here to go to FastWebHost. This link will open in a new window.

Select your plan: Next, you will see a page like below where you will be able to choose a plan, register a new domain or use an existing domain.

Fastwebhost plans

Choose either Value or Business plan.

After purchase, you will receive a Welcome Email from FastWebHost with the login information for cPanel. This information is important and should be kept safe for future reference.

2. Log Into Your Hosting Account to Start Building

If you chose FastWebHost, these instructions will get you through the very slick process of building your website. Even if you haven’t selected a hosting company or anything else as of this moment glance over these steps anyway. Once you see how easy it is, you may have an easier time of making a decision about where to set up a hosting account for building your site.

So, log into your hosting account, which you create when you sign up with FastWebHost. It’s no more complex than signing up for a Walgreens account or any other online retailer.

Once you’re logged in, you’ll be at your Dashboard. It’s a pretty busy-looking dashboard, I’ll admit. It’s covered with icons, each representing something you can do from this page.

The icons are categorized into sections… the first one is “Files”, then “Databases”, etc. Skip those and scroll down to the “Software” section.There, you’ll find an icon that resembles the FastWebHost logo and it’s labeled FastWeb Builder.

choose fastwebbuilder

 

Click on the FastWeb Builder, and it launches immediately. Hope your’e ready to start creating your website!

3. Begin The Builder – Choose Your Site

Don’t be put off by the first step, which might be misleading for total newbies. The builder asks you to “choose a domain/subdomain you want to use to build your site for.”

You probably only have one domain, so click it now.

You probably only have one domain, so click it now.

Most of you will only have one website, like I did when I started this account. Click it now. If you eventually wind up with multiple websites in your hosting account, you’ll see them listed here whenever you go to use the FastWeb Builder.

4. Select Your Template

Right off the bat, we get to the fun stuff. See what I mean about a great user experience? This is where you get to select your template. Here’s what the screen looks like now:

Simply click on the template you like.

Simply click on the template you like.

Notice the sorting and filtering options on the left. This can help narrow down the field for you, so you can quickly choose the right look for the website you’re building. Here’s what you have to choose from:

Template categories- lots of them!

Template categories- lots of them!

One thing to remember here is that if you’re in a hurry or working under deadline, it’s important to stay focused. I am the world’s worst at this, since I inevitably end up delving too deep into the myriad possibilities offered at this juncture.

What I’m talking about is the huge array of incredibly professional-looking, creative templates available through the website builder. One could easily spend half a day browsing the possibilities, enjoying imagining how wonderful one’s website is going to look after slapping one of these gems on.

I know, because I’ve done this on several occasions. So please take my advice: if you’re under the gun or you only have a little bit of time to spend on building your website, just choose the first template that sticks out to you as good, and move on. You can easily (very easily, in fact) switch up later on.

Just choose a template and move on- you can VERY easily switch up later on!

It’s very easy to customize your template once you’ve selected on that seems right. The templates used in this website builder are chock full of helpful tips. Take a look at this sidebar element, which I’ve cropped out of the website so you can read the helpful words under the picture…

Templates come with useful info for making your design work for you.

Templates come with useful info for making your design work for you.

Another thing that’s pretty awesome about FastWebHost’s website builder is that you can also use it to build pretty effective landing pages for your product or service, too. Take a look at the superbly-designed templates they offer in the “Landing Pages” category of templates:

Tons of great landing pages.

Tons of great landing pages.

They come with Call-to-Action buttons build right in, placed for optimal conversion and everything!

Since I’m in education, I chose the ‘Education’ section and found a nifty-looking template that I love. I previewed it first, so make sure. You should do this too. Just hover on the template you think you like, and click “Preview“. Your browser will open up a new tab with the template looking like a real live website already.

If you like what you see, click back to the original tab in your browser, hover on your template of choice, and click “Select” this time.

Preview or Select your template

Preview or Select your template

5. Begin Building… For Real!

Choosing a template is cosmetic stuff, but now you’re into the meat of things with this next step. Here’s where you’ll enter your text, rearrange the composition (if you like), and add extra features.

The Builder starts you off with editing the text of your site, to make it say what you want it to say. I’m going to leave that up to you, of course. At this point in our little tutorial, you may have to step away so you can decide what you want your website text to be. I know, you didn’t think you’d be at this stage so soon, right? But yes, you’re already there, and it’s time to be proactive and decide what your website is going to say.

So, either take a breather now while you draw up some words for your site, or keep going if you know what you’d like to say.

Here’s your screen now:

See all the different things you can do from this point? Exciting!

See all the different things you can do from this point? Exciting!

Obviously, your screen will look different because what are the chances you also chose the “Books” theme that I chose? But the steps are the same, as are the building elements you’ll be working with. Just try and picture your theme under the editing tools.

I chose to first change the title of the website from the default “Books” to “Tutorials for Newbies”. To do that, I clicked the pencil icon on that section (first I had to unlock it by clicking the padlock icon near the text I wanted to change). Then I chose “Edit Text” from the little drop down menu that appeared.

That big letter “A” you see circled on the image above? That’s what you can drag onto your template anywhere you like, if you want to add another block of text.

You may also simply double click on any area of the template to make changes. For example, I double clicked on the part in the image above that says “Great deals on bestselling books”. It brought up the same text editing menu that you see in the image above “Tutorials for Newbies“. You can change all kinds of font characteristics here, make a link, add bullet lists, or add anchor text.

6. Track Your Progress on the “Steps to Do” Sidebar

Notice that in the right-hand side of your builder, there’s a box with a list of steps to do. This is a helpful feature that demonstrates your progress through the website-building process. You may close it if you like, but if it’s your first time I recommend keeping it up there. You’ll learn more that way, and it’s nice to have a guide (besides me, that is!).

This keeps track of your progress.

This keeps track of your progress.

The steps I’ve already completed are in green and checked off. Nice little touch to make me feel confident.

7. Don’t forget to save your work.

If you get interrupted during the building phase, make sure you save the draft you’re working on. This is done by hovering over the “Publish” button at the top left of the upper navigation bar. Take a look:

Don't forget to save your work!

Don’t forget to save your work!

8. Make Your Menu

Templates are templates, so they come with default items you’ll probably want to change. The menu is most likely going to need some customization to fit your needs.

I changed the default menu item in my template (“Books”) to “Resources”. To do this, I simply worked through the website builder until it told me it was time to work on my menu. It said “click here to change a menu item” and when I did, it brought up this box…

menu

…and from there it’s pretty much self-explanatory. Hit “Apply” when you’re satisfied.

9. Note all the nifty things you can do…

At first, the SiteBuilder appears very simple: the interface is clean and well-organized so that even newbies can easily see where to begin building a website from scratch.

But start clicking around and you’ll quickly find that the capability is much stronger than what it first seems. You can do virtually anything with each and every element of your design.

For example, any image you place on your site can be hyperlinked to anything you like. I took my little book icon at the top of my home page and linked it to the page on my site called “My Tutorials”.

To do that, as well as to perform other functions with your page elements, again: click the “pencil” icon that appears in the upper right-hand corner of the item. Then click “Properties”:

How to do further style and add functionality to your page elements.

How to do further style and add functionality to your page elements.

Before you hit “Properties“, however, notice all the other things you can do with that element once you’ve entered edit mode (see image above).

Once you’re inside the Properties dialogue box, you have lots of great options. I’ll just preview them now, since they’re not essential at this point for completing a basic website. After you’ve got your site live and looking the way you want it to look, you can always refer back to this section for these “advanced” moves. But here’s a sneak preview anyway:

Make your images link to another page in the Properties dialogue box.

Make your images link to another page in the Properties dialogue box.

Notice you can even make any image open up an email program. That’s useful if your image has something to do with emailing: the universal symbol for email, which is the envelope.

 

email button

You could link an image like this one to your email address to make it convenient for visitors to contact you.


10. Check your design on all devices

One of the biggest mistakes that newbie web designers make (yes, you are a web designer now!) is forgetting to check how their site appears on different devices. For example, you may create your site on a PC, forgetting that people will also view your site on a tablet or a mobile phone.

The SiteBuilder takes care of that for you: notice in the upper menu of buttons there are symbols for the different devices. Click them and your screen will simulate each device, showing you how your website looks on say, a phone. Great!

Check your design on every device using these buttons.

Check your design on every device using these buttons.

Those buttons turned out to be a life-saver for me, since one of the little icons I’d added didn’t line up properly on wide screens. Here’s how it looked when I clicked on “Wide“:

My design didn't look right on a wide screen.

My design didn’t look right on a wide screen.

All I did to fix that was to move it over, then lock that item again against further editing. Problem solved!

And when I checked to see how my site looked on people’s phones, there was another “OOPS” moment… the language buttons were all on top of my book icon!

I had to make some more adjustments to make my site work on mobile.

I had to make some more adjustments to make my site work on mobile.


11. Add extra functionality with the drag & drop buttons

Now we’re at another junction, where you can choose to skip ahead and hit the Publish button and be done with your basic website. It will look the way you want it to look and it will work.

But if you’re feeling confident and you have a couple of extra minutes to spare, here are some more things you can do. Take a look at the menu bar at the top of your builder…

Lots of cool functionalities from this menu bar.

Lots of cool functionalities from this menu bar.

 

…and notice what you can drag and drop onto your site. I went straight for the “Languages” icon, since I’m a global kind of gal and I want everyone to be able to read my site.

I dragged the button down to the upper right hand corner of my site, next to my social buttons. That’s usually where you see language options so people will be expecting it there.

Next, I added the languages I wanted. Here’s what the option box looks like, and how you add more languages:

Add languages this way.

Add languages this way.

 

Speaking of languages, you may also choose to run through this website builder in other languages, too. If you’re considering referring a friend to the FastWeb SiteBuilder, and that friend speaks Turkish or Romanian, for example, go for it since this tool can be translated into dozens of languages.

Run this SiteBuilder in any language!

Run this SiteBuilder in any language!

121. Hook up your Social buttons

I mentioned the social buttons just now… my template came with Twitter, Facebook, and Google+ built right into the home page. That sort of covers it for me (in fact I removed the Google+ button since I don’t have an account there). But if you have other account with like, for example Flikr, then add them now.

You may also add a Share button, which allows visitors to Tweet or email your page. There’s also a button to add so people can share your site easily on Facebook.

13. Add a Map

On your Contact page, it’s good to have a map to the location of your business, if you are a business. This helps with authenticity and of course it helps people find your business.

Of course, there’s a button for that too!

I suggest adding it to your Contact page, not your home page since it may add to the load time of your home page. The more you add to your home page, the slower it may load. Most people don’t want to wait around for a slow-loading website to appear, so they sometimes don’t bother waiting and move on to someone else’s website. Not good.

14. Consider other nifty options

You may also add a YouTube video, a Vimeo video, a Skype button, and more.

If you are selling something, there’s an entire world of payment and eCommerce solutions for you to explore. Again, since it’s Drag & Drop website building, all you do is find the buttons in the top menu, then drag them to the spot on your site where you’d like them to appear. Wonderful!

As for me, I kept it simple to begin with, and only added a button. Since my type of website has a goal of getting people to try my tutorials, I needed a “Call to action” button. And it needed to be placed directly front and center of the top portion of my website. That’s called above the fold, by the way. You don’t want visitors to have to scroll down to get to your most important website element.

So, I clicked on the “Button” icon at the top and simply dragged it down to just below the main area of my site…

I added a "Call to action" button.

I added a “Call to action” button.

 

You are now entering the “intermediate” stage of building your site, which means for now, it’s completely skippable. If you’re eager to publish and get on with things, I certainly understand.

So let’s skip to Publish…

15. Publish your site!

For your big moment, click on Publish – you should be used to finding that button because it’s the same button used for saving your drafts. Hopefully you’ve been saving periodically (I’ve been reminding you…).

It will take a moment while everything gets prepared and uploaded. Your screen will offer you a progress bar that looks something like this:

The Big Moment!

The Big Moment!

Now, if you’re not ready to hit “Publish”, you may first preview your site. I highly recommend this, as it affords you some last bit of editing before the site goes live. You’ll find the “Preview” button right next to “Publish”.

16. Backup your site

The Builder allows for safe and easy backing up of your website, so you always have a copy. Hover on the “Publish” icon (again, this is the same button you hover on to save your drafts so you should be very well aware of where this button is by now!).

Select the third option: “Backup/Restore“. The backup option tab will be there by default…

Be safe and back up your website.

Be safe and back up your website.

You’ll be choosing a location after you hit the green Backup button.

While we’re here, notice the Restore option. This lets you go back in time to restore an earlier version of your website. This is sometimes very useful if you generally get into a mess of things…

Erase your mess with the Restore feature.

Erase your mess with the Restore feature.

 

And with that, we’re pretty much out of time. If you’ve followed along and completed the steps with me, you now have a fully functioning website that’s live, professional looking, and ready for more editing and tweaking.

Your next step will be to explore the advanced options and continue tweaking your design. Remember to have fun with, save often, and let your creativity flow!


Lets Recap: 

  1. Setup a web hosting account and domain name with FastWebHost – Here
  2. Login to your hosting account – cPanel
  3. Choose your site or domain (same thing)
  4. Select a template
  5. Begin Designing
  6. Save your work in-between
  7. Make a menu
  8. Check your design on all devices
  9. Add Social media button
  10. Preview and Publish your website 🙂
  11. Backup your website


IF YOU LIKE IT? PLEASE SHARE IT !