Updated February 05, 2017
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.
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
- They should offer basic hosting packages for newbies like you.
- They should offer domain name services (for newbies like you).
- They should offer a website builder and it should be FREE.
- That website builder should contain lots of design templates that are ready to edit: fully customizable.
- You should not have to download any software. The builder should be cloud-based.
- The builder should offer the Drag & Drop method of creating your site.
- You should be able to publish updates to your website on your own.
- You should be able to add extra features to the website you create.
- 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…
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.
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.
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.”
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:
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:
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…
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:
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.
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:
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!).
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:
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…
…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”:
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:
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.
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!
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“:
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!
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…
…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:
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.
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…
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:
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…
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…
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!