How to Build a Website: New? Start Here!

Build a website in just a matter of minutes without coding and spending too much! Below you will find 1WD’s  guide on how to build a WordPress website, including recommended tools and services that you should use for your website, both free and premium.

This resource page also includes a getting started guide on how to become a web designer.

Do you want to become a web designer? Whether you have zero to little knowledge about web design, we can help you become a web designer. And it will only take you one week at most! Provided that you will give your heart out to this task, of course.

Before we move further, let me tell you about the beauty of becoming a web designer.

The only people who succeed are those who take action.

Becoming a web designer means being able to build entire worlds from scratch. You act as a bridge between people and information. You arrange chaos into poetic beauty. And most of all, you can make a comfortable living out of being one!

There is a reason why you are in this page, and what you need to do now is hold on to that reason and reflect on it. Do you really want to change your life, and venture towards the unknown? Well, not really an “unknown” because we are here to help you, guide you in every step of the way.

We will keep on updating this post as we find more and relevant tools to recommend to you!

  1. How to Create Your Own Website
  2. Essential Tools and Services
  3. How to Become a Web Designer

Terms to Remember

  • Domain name - the name of your website, www.yourname.com. Usually costs from $9 to $15 depending on the registrar.
  • Host – this is where your files are saved; images, text files, and everything about your website. We recommend BlueHost for beginners.
  • Control Panel – this is where useful tools for managing your website are located. You can create your own @yourname.com email under your web hosting’s control panel, install scripts and all sorts of software like WordPress with just one click, and many more.
  • CMS – a content management system allows publishing to be done easier since you won’t deal with the intricacies of coding just to publish an article, video, or a photo. For this guide we will be using WordPress.
  • Dashboard – inside WordPress, this is where the magic happens. This is where you can manipulate your website’s content that visitors see.
  • Theme – a theme is a bundled-up design (and often with extra features) that you can use out of the box; it can change the way your website looks without necessarily changing the content.
  • Plugin – a plugin is an add-on that you can, well, include on your WordPress site installation to extend its functions. For example, most WordPress themes usually just come with the regular image slider, top posts and top comments section, and some fancy decorations. What if you want to add a specific feature like Twitter stream on your website? That’s where plugins enter. To date, there are over 24,000 free plugins that you can choose from at WordPress.org.

Now that you have an idea of the terms above, let’s create your very first WordPress website!

How to Build a Website

So, you want to create a website but you don’t know where to start? Let us help you, all you need to do is follow the steps outlined below and by the end of it you’ll have your own website!

If you’re creating a website to promote your products or services, start a blog to share your daily activities or become a repository of information, and whatever reason you have, we will help you!

This step by step guide on how to create a website is very easy to follow; you won’t need coding and it will not take you an hour to create your very first website.

Ready?

Step 1: How to Build a Website in 5 Minutes

Option 1: Setup everything manually

Hiring a web developer to setup a website for you can cost you $300 to $800 plus yearly charges for hosting, but if you follow our guide it won’t cost you more than $100 for an entire year.

Visit BlueHost | See Why We Love BlueHost

Everything that you will ever need is on the video above, from choosing a domain name up to installing WordPress. Do not skip!

Option 2: Wix - Free Hosting and Web Builder

Using Wix’s free service can help you get started, and if you find it to your liking, you can upgrade anytime you want to.

Wix is one of the easiest and most reliable website builders online. You can simply drag and drop design elements and have a website of your own running in no time. You can use it for free and upgrade later. It comes with 100+ free templates to choose from, including free hosting.

To make this deal a no-brainer, Wix kindly offered special discount code for loyal 1stWebDesigner readers. To get 20% discount for Wix Unlimited/Combo yearly package use:

  • Coupon code: 1stwebdesigner221

To use this coupon, you need to choose one of Unlimited/Combo packages for upgrade, and insert the code in checkout.

Free web builder

  • Free hosting
  • 100+ customizable templates
  • Free web builder
  • Compatible with mobile browsers

Visit Wix

Step 2: Install a WordPress Theme

Note: this step is for Option 1 above.

Okay, so you have your WordPress blog already installed, it’s time to install a WordPress theme. This step was shown in the video, but I will write a step-by-step mini-guide here as well, just to be sure.

The first thing you need to do is to login on your WordPress dashboard. You can login at www.yourdomain.com/wp-admin.

Once logged in, hover your cursor on Appearance. A window will slide out and click on Themes.

how to build a website

Once the page loads, click on the Install Themes tab. Then you can use the search function to search for free WordPress themes. It’s like using Google!

thme-guide-2

If you prefer to upload a zip file of the theme, click on the Upload link.

thme-guide-3Below I have listed several links to resource pages for both Free and Premium WordPress themes.

Premium WordPress Themes:

Free WordPress Themes:

Step 3: Install Plugins for Extra Features

To install a plugin, you need to login to your WordPress dashboard and click on the Plugins page seen on the left.

plugin-guide-1

In order to upload a zip file of the plugin, click on the Upload link and from there, you will see a form for uploading.

plugin-guide-2 plugin-guide-3

But if you want to search the WordPress plugins repository, you can simply use the search text box.

plugin-guide-search-1

Plugin search would look like this:

Click Install Now to install the plugin, then Activate it once the page loads.

Here’s a huge list of Plugins that you will need:

That’s it. That’s all you need to build a website! You don’t need to hire anyone to do the job for you, you can do it yourself and it’s much cheaper. Plus, you will learn new things!

Essential Tools and Services

Hosting

  • BlueHost - best web hosting service for small to medium websites, easy to scale when your website grows big enough; customer service is superb and we highly recommend them.

Newsletter

  • Aweber - for your newsletter needs; we use Aweber to cater almost 60,000 email subscribers and growing.

Stock Photo

  • Stock Fresh - see the thumbnail up there? Yup! Stock Fresh. They have thousands of stock photos that can fit all of your needs, from posters to web images to just about anything!

Speeding Up WordPress

  • MaxCDN - a content delivery network helps deliver your website’s content to people all over the world the fastest way possible.
  • W3 Total Cache - this WordPress plugin will speed up your WordPress blog and make user experience better by decreasing download times. Also helpful for your limited monthly bandwidth.

SEO Plugins for WordPress

  • WordPress SEO by Yoast - the best SEO plugin for WordPress to boost your website’s traffic from searches.
  • Video SEO for WordPress – another plugin from Yoast, main purpose is to help videos get ranked better on search engines.

Security

  • Limit Login Attempts - your WordPress dashboard is one of the most important places in your website, you need to secure your account so that no one will ever gain access to it to mess around your site. Limiting login attempts will free your site from brute force.
  • Dropbox – backup your WordPress site to Dropbox for FREE.

Contact Form

  • Contact Form - so far the most easy to use and minimalistic contact form plugin for WordPress blogs.

Comments

  • Livefyre - a commenting platform that focuses on real-time discussion, great for entertainment and news websites.
  • Disqus - perhaps the most used commenting platform, known for its numerous features that help websites encourage discussion.

WordPress Themes

  • Photocrati – premium WordPress themes for photographers, used by over 15,000 photographers — you can’t go wrong!
  • ThemeForest - the biggest marketplace for premium WordPress themes where you can literally find everything that you will ever need. From personal blog themes down to corporate themes.

If you want to learn how to design or customize your own WordPress theme you need to spend a couple of days learning different stuff such as HTML and CSS. Below is a guide on how to become a web designer.

How to Become a Web Designer

Are you willing to change your life for the better?

If your answer is yes, then there is only one thing left to do: scroll down!

Step 1: Learn HTML, CSS, and Adobe Photoshop

Every web designer needs to know how to use the following: HTML, CSS, and Adobe Photoshop.

If you are totally new to HTML, CSS, and Photoshop, here are useful introduction articles for you:

  1. HTML5 Introduction – What is HTML5 Capable of, Features, and Resources
  2. CSS3 Introduction – New Features, What it Can Do, and Resources
  3. Basic Web Design Video Course – Photoshop, HTML, and CSS

These are the only tutorials a beginner will ever need. Make sure that you will not skip a single word because every word matters and as a designer, you should pay close attention to every detail.

Step 2: Practice Your HTML, CSS, and Photoshop Skills

Once you are comfortable with your knowledge of HTML, CSS, and Photoshop, you can start building your own WordPress theme or an entirely different web element such as navigation menus, contact forms, and many more. You might as well learn how to convert PSD into HTML/CSS.

You shouldn’t limit yourself to just creating a single-page website on Adobe Photoshop; you need to design the whole website and show it off to people. That way you know that you are growing as a web designer. Never stop learning; never stop creating!

  1. PSD to HTML Tutorial: Code a Photoshop File to a Working Website
  2. Media Queries Tutorial – Convert Burnstudio into a Responsive Website
  3. Creating a CSS3 Dropdown Menu – Video Tutorial
  4. Create a Contact Form in HTML5 and CSS3 for Dummies
  5. Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

Compared to the tutorials on the previous section, the five above are more advanced. These will actually help you get your own web design service running in no time.

54.234.51.165 - unknown - unknown - US