how to design a website step by step tutorial

Written by: Lana Miro

April 5, 2018

How to Build Your First Website [Step-By-Step Tutorial]

how to design a website with wordpress tutorial

Several years ago, people might have thought that having your personal website or your own blog was a fancy thing and if you wanted one, you were a hipster-ish kind of person.

However, nowadays having your own website is a must no matter what kind of business you own. Maybe you have a business and simply want to reach a wider audience. Or maybe you just want to share your thoughts on your blog and reach the world with your message. It doesn’t really matter why you need a website—all you need to know now is how to create one.

That’s why we decided to create this short website development tutorial for you.

How-to-Build-Your-First-Website-Step-By-Step-Tutorial-How-to-approach-the-website-development-process

So let’s first tackle the question you have in mind right now: How do you actually approach the website development process?

People usually think they need to either get a big, fat check ready or learn how to code in order to create a website of any kind. However, that’s not really true in 2018.

RELATED: How to Create a Visual Style Guide to Help You Stay on Brand

 

What Are the Most Popular Ways to Create a Website?

Here are the most popular ways to get your own website:

  1. Hire a freelancer to do it
  2. Hire a web studio to design it
  3. Do it yourself (no real coding skills needed)

Let’s review the amount of resources and skills you need in each situation.

how to design a website wordpress tutorial

Create your own beautiful blog graphics with this DIY tool.Try It for Free

Finding the right freelancer for your job may turn out to be extremely time consuming, especially if you happen to hire someone who is unreliable or is unable to execute the concept you’ve envisioned. Considering the high risk of this path, there are other options you may want to pursue.

Of course, you can always hire a web studio to do it for you, but if you are not some Fortune 500 company, it might easily be a waste of money. You will likely end up doling out a large amount of money in return for an exclusive, yet very overvalued website.

On the other hand, if you have a limited budget or simply understand that there is no need to waste your money on something you can do on your own, there are other alternatives for creating your own website at a very reasonable price.

If you decide to develop a website on your own, all you’ll need to do is access a premium website template, buy a domain name and pay for the hosting plan.

how to design a website wordpress tutorial

The actual website customization process is easy, even for those who do not know how to code or how to design a website.

So, what option should you choose? If you are planning on developing a website on your own, here’s how you can start.

RELATED: 50 Gorgeous Color Schemes From Award-Winning Websites

 

How to Design a Website: What CMS Should You Use?

Let’s start with the basics and decide what kind of content management system (CMS) you should choose. In layman’s terms, this is the engine under the hood that powers your entire website.

If you are planning to develop a blog, company website or a personal page, you will need to choose one of the following:

content management system drupal joomla wordpresss

If you want to build an online store, you’ll need to choose from these:

content management systems magento prestashop opencart

If you want to build your own site (and not an e-store), then the best option for you is WordPress because it’s the most popular and user-friendly CMS of all.

You can use WordPress to build your blog, company website, landing page, portfolio or a personal page. For example, here are just a handful of famous magazines that use the WordPress CMS:

websites that use wordpress as content management system

Even a fancy-looking site like Kinfolk uses WordPress for their online presence. This CMS is so flexible that you can start a project of any size or complexity. There is no need to worry that this platform works only for small blogs. This is lesson number one: Don’t underrate WordPress!

By the way, did you know that even NASA’s Glenn Research Center blog uses WordPress?

nasa wordpress content management system

They credit this system for being flexible, but let us highlight the key feature that makes WordPress the best choice for you: easy to use. This is because they’ve created a product that you can start using right away without resorting to 500-page instruction manuals.

Even if you do not understand something, you will find tons of easy-to-follow tutorials on the web. And, not to mention, WordPress websites look amazing.

If you browse Template Monster’s WordPress responsive themes category, you’ll see that there are a variety of visual themes to choose from:

template monster wordpress responsive themes

 

Responsiveness and Mobile Friendliness

A few years ago, you had to go out of your way to look for mobile responsive WordPress themes. Nowadays, you’d have to spend quite some time to find a template that is not mobile friendly.

Smartphones and laptops require the template-building market to adapt, so everyone understands the importance of mobile friendliness now. Just take a look at these bestselling mobile responsive themes:

template monster wordpress themes mobile responsive

Our marketplace is full of all kinds of WordPress templates. There are dozens of niches covered, so if you choose the WordPress CMS, you will never have to worry about looking for a decent template for your business website.

 

What Do You Get With Your WordPress Theme?

So, once you’ve purchased a WordPress responsive theme, you’ll receive your order. Let’s dig inside and see what you will receive with the template you buy from our marketplace.

how to design a website wordpress tutorial

Create your own beautiful blog graphics with this DIY tool.Try It for Free

Let’s review the components one by one:

  • The file documentation.html includes a link to the big documentation page, where you can see how to install and customize this template.
  • The files info.txt and license.txt include the general info about the licensing.
  • The Screenshots folder includes banners and screenshots of the main Monstroid² skin.
  • The Theme folder includes the actual theme .zip file that you should upload to your WordPress dashboard.
  • The sources.zip file includes all the Photoshop source files. Feel free to use them, but not sell them.
  • We include all the files you may need in the process of customizing the template. If any questions arise, you can review the documentation file or call our customer service center, which is available at any hour.

RELATED: 16 Web Design Trends to Watch Out For

 

How to Install a WordPress Theme in Just 20 Steps

To install the template, visit the WordPress admin panel located at the following link: [replace with your website.com]/wp-admin

how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

To log in to your account, use the username and password that you chose when you installed WordPress through your hosting provider admin panel.

how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

The WordPress admin panel (also called the Dashboard) looks like this. You can see all the sections on the left and the window on the right will display all the settings you can work with.

wordpress dashboard how to design a website wordpress tutorial

To begin, you need to change the theme. Here, at TemplateMonster, we offer lots of great-looking WordPress themes, so feel free to choose one that suits your needs. For this article, I decided to use the Monstroid² theme. The reason is simple: Monstroid² is a multipurpose theme, so it usually works for all kinds of website topics.

monstroid2 theme how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

In order to change the WordPress theme, you should click on Appearance and click on the Themes menu option.

wordpress appearance menu how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

This option will redirect you to the page where all the installed themes are listed, but we are not interested in these as they look boring!

wordpress appearance menu how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

In order to install a new theme, you should click on the Add New Theme option and upload the template you want to use.

wordpress add new theme how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

After the installation process, click on the Activate button to apply the changes and set the new theme as the default one for your website.

wordpress activate theme how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

Once activated, the WordPress admin will show you a tip right above the templates area. It will recommend you install the TM Wizard, which you should use.

wordpress admin appearance how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

The TM Wizard will offer to start the skins installation process. Simply click on the Start Install option and proceed to the next step.

wordpress tm wizard how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

The wizard will check if all your system settings are optimal and will notify you if something is wrong. When you see that everything is in green, just click the Next button to proceed to the next step.

wordpress installation wizard how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

Next, you will see a list of all the available skins. This where you should decide which skin works best for your needs. As already mentioned, you should select the default one, so just click on the Select Skin button under the Default option.

wordpress skin tm wizard how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

Next, you will see two options: the Full and the Lite installation option. The Lite one can be used in the case your website hosting package doesn’t provide a lot of space. By choosing the Lite installation option, you agree to get less space for blog posts and other demo data.

wordpress full lite installation options how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

If you selected BlueHost as your web hosting company, you don’t have to worry about this part. Just proceed with the Full Installation option—it will work perfectly fine for you. Now the Installation Wizard will download and install all the necessary plugins.

wordpress install plugins how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

In order to install demo data, you should agree that you want the sample data to replace the existing data on your website. Basically, this warning was added just in case you are installing this theme on your website where you have lots of old content. This is the point where you should consider saving your data.

Since your WordPress website is new and doesn’t have any data, you shouldn’t care whether your posts will be replaced or not, so just select the “Replace my existing content with demo content” option.

replace existing content with demo content how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

WordPress will not allow you to perform this step without entering the admin password again. This is because such important decisions should be confirmed on your side before proceeding.

how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

It may take some time but the Wizard will import all the sample data for you and make sure your website looks great and operate as needed.

wordpress import data how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

Once everything has been installed, you will get a website that looks exactly like our demo unit. All your data will be imported there.

wordpress monstroid2 theme how to design a website wordpress tutorial how to install a wordpress theme in 20 steps

Now it’s time to start the customization process, which simply entails inserting your own information and images. If you don’t want to buy themes, you can also try free WordPress themes.

 

Your Turn

Now that you know how to design a website, you will probably be in need of some free plugins to enhance the look and functionality of your site. To get you started, here are 36 top WordPress plugins to enhance your website design.

90% of all information transmitted to our brains is visual.
People remember...
Become a more effective visual communicator. With Visme, you can create, share or download your visuals with no design training. It's free! Take a tour.



We’re stingy and don’t share emails with anyone.

About the Author

Lana Miro is passionate about beautiful web design and works with Template Monster to help everyone find the best solutions for their online projects.

3 responses to “How to Build Your First Website [Step-By-Step Tutorial]”

  1. Sara Youl says:

    Lana, thanks for your useful post, Really WordPress is very easy to use CMS among all of CMS. and you know that approximately 48.46% market is conquered by WordPress. The most powerful things are of WordPress is that it has many SEO plugins which are very useful for your website marketing.

    • Lana Miro says:

      Hi Sara! Thank you for sharing your thoughts. I also prefer WordPress CMS, but sometimes it has some problems to face with. Anyway, there are a lot of forums, which help me to solve it:)

  2. compra venta relojes madrid says:

    Hey Tһere. I found you blog using msn. This is a very
    wеll ѡritten article. Ӏ’ll make suге to bookmark it аnd comе bɑck to rеad morе of yur uѕeful informɑtion. Thanks foг the
    post. Ι wіll certainlү return.

Leave a Reply

Your email address will not be published. Required fields are marked *

Create Graphics That Convert

Want to create stunning visual content that converts better? Start creating engaging content within minutes with our easy drag-and-drop software. Access 100+ beautiful templates, 100+ free fonts and millions of images and icons right now.