Nowadays Creating an amazing and modern look website yourself became possible and super easy. Whatever your needs or your information about creating a website. It is really easy to build your own website from scratch yourself without extra experience or technical knowledge.
New available technologies like CMS platforms let you create your website by using very intuitive and user-friendly interface page builders.
You can build your website by drag and drop elements to your blank website pages without coding.
You can build and edit your website yourself with no need to hire a developer or website designer every time you want to make a small change to your website.
In this article I will walk you all process of creating a website yourself briefly with simple and plain language.
I will show you how to build a website yourself practically step by step.
You will be able to create and manage any type of websites from landing pages to Ecommerce websites.
Literally you can build great look websites like apple, yelp, adobe, airbnb.com yourself by drag and drop tools without any special knowledge or experience.
What is different in this article
Many talented and honest bloggers are publishing excellent articles of how to setup a website yourself. unfortunately many more others claim that you will be able to build your website yourself once you read their step by step articles or playing a single video.
but the truth is these articles let you repeat the same steps to get the same result. in other word you can create a specific type of websites in a specific look using a specific tools without knowing how websites work or the functionality of the tools you are using. and you will be enforced to play a 3 hours video over and over to remember or understand a little tip.
that makes you unable to build what in your mind, and you steel need a web designer to modify or add something to your website
But this article
- Lets you understand how websites work without stuffing your head with technical info
- Covers all process in a logical order
- Teach you the functionality of each tool and its alternatives, so you can choose whatever you want
- Lets you create any type of websites
- Crafted for absolute beginners
- Comes with 20 minutes video to see all process in action
- It is short, condensed and straight to the point to get the most in less time
How websites work?
Let’s assume that we want to visit CNN website, so we have to type cnn.com in our browser’s address bar and hit enter key to view the website.
cnn.com is typically the domain name of CNN organization website. they bought this domain name and it became their own property.
Also they are paying for a hosting company to host their website contents (text,images,videos,…etc) on a super powerful computer called hosting server which makes their website UP and accessible 24/7/365 for millions of visitors around the world.
When we type cnn.com in our browser it direct us to their hosting server and show us the CNN’s website.
If you decide to contact them or they emailed you they are using custom business emails integrated with their official domain name. for example firstname.lastname@example.org or email@example.com ..etc
Note: CNN emails mentioned above may be not exist I used it for clarification purposes only.
Also they are hiring web designers to post their news in readable and elegant look pages for their readers.
What is old process to create a website
In the past
- you purchase a domain name for your site
- Subscribe for a web hosting service
- Prepare your site contents for publishing (writing, images, videos ,..etc)
- Hire a website designer to wrap all together
- Review the website and ask designer for final modifications
[old process infographic]
What the domain name is
Domain name is basically the name of your website like google.com or apple.com. It is the address that users type in the browser’s address bar to get to your website. It is unique and exclusive for you.
What is web hosting
Hosting is the online disk space that you need to host your website’s contents. Normally you should pay monthly fees to keep your site/s live and available 24/7/365 for all visitors around the globe with high speed and performance.
How To Build A Website From Scratch Using New CMS Technologies
Today with the available CMS technologies you don’t need to hire a developer to build your website. As i mentioned earlier you can use drag and drop page builder to build your website without coding. And use pre-made templates and themes to modify the appearance of your site.
- Register a domain name for your website
- Subscribe for a web hosting service
- Prepare your site contents for publishing (writing, images, videos ,..etc)
- Build your website yourself by drag and drop CMS tools
[process using CMS]
What is CMS platforms
CMS stands for Content Management System. it is a software lets you manage your website contents visually without coding.
To build your website visually you must use one of CMS platforms. today market is stuffed with enormous number of CMS platforms.
See my article what is the best platform for your website or blog
CMS Technology became popular website building technology in today market. Consider following charts which show us CMS market share against traditional coding technologies according to w3techs.com statistics in 2019.
What is wordpress
WordPress is a CMS platform. It is the most popular and widely used platform in the world. WordPress is an open source platform which means millions of users from all over the world are running it. Thousands of developers create assistive apps and add-ons for WordPress every moment.
Why to use WordPress to create a website
- WordPress is the most popular platform
- 33% of entire web is created with wordpress
- It is full free
- It is super easy to use
- It is an open source software
- Lets you create and manage ANY TYPE of websites
- There are thousands of free resources, tutorials, articles and youtube videos to get help
Who uses WordPress
As i mentioned earlier more than 33% of entire web created with WordPress platform.
WordPress official website shows us who are using WordPress for their websites. You will be surprised how many reputable and well-known sites use WordPress like,
The White House , Sony Music, Global News
,Unicef UK , The Walt Disney Company, The New York Times Company, Sylvester Stallone, BBC America, Katy Perry, Usain Bolt, The University of Mary Washington, University of Berlin, Angry Birds, Microsoft News Center, The Obama Foundation and much much more.
How To Create A Website From Scratch With WordPress
- Get a domain name and web hosting
- Install WordPress with one click from within your hosting account
- Install and customize a theme
- Install page builder
- Build your website by drag and drop
[how wordpress works]
What is WordPress theme
Theme is a supplementary software that you can install with one single click to your WordPress.
It is responsible for the styling of your website. It is the uniform of your website including all fixed items like site colors,fonts, logo, header,footer and sidebar.
when you view any website you will notice that it has repetitive and fixed items in all of it’s pages.
For example Apple website, When we visit Apple.com website we can navigate between many pages and each page has its unique contents BUT there are fixed items repeated in all pages like apple logo. It has a fixed place in all website’s pages at the top left corner.
- You can choose any theme for your website
- more than 6,879 themes are available on WordPress dashboard
- more than 11,632 themes on ThemeForest
- Much more are available on other online marketplaces
- New awesome themes are released everyday
- You can install free or paid themes.
What is page builder
To create a website from scratch you need more than plain CMS you need something call Page builder. A page builder is a software helps you build your website visually without coding. Just by drag and drop elements and pre-made blocks to your page.
Most page builders are intuitive and user-friendly interface.
page builders based on WYSIWYG “What You See Is What You Get” technique, which means you can see results instantly without saving or publishing changes.
There are dozens of a page builders in the today market. And each CMS platform has its own page builders.
In WordPress you can choose from many available PAID or FREE page builders, And you can install it with one click as a plugin to your WordPress.
What is WordPress plugin
WordPress plugin is a small app lets you add functionality to your website.
For example you want to schedule weekly auto backup for your site contents. So you have to install a plugin to your WordPress to automate backups.
Another example you want to accept online payments or donations from you visitors, so you search for a plugin that helps you manage payment process on your site.
You can add any imaginable function to your website just by installing and customizing a suitable plugin. There are +57,190 free/paid plugins available in WordPress dashboard and all paid plugins come with a lite version for free.
Much more plugins are available on ThemeForest and other online marketplaces. it is necessary to understand how plugin works to create a website from scratch without need to refer to a developer or designer to add functions to your new site.
Let’s create a website from scratch in minutes
Now that you have an idea of website requirements and how WordPress does work?
That’s the time to create a website yourself using WordPress in minutes. Following part of this article will show you practical steps of how to create a WordPress website step by step.
1. Register a domain name for your website
You can name your site whatever you want but remember that it must be unique and not currently in use.
Here are some tips of how to select a winning domain name
- Make it short, simple and easy to remember
- Avoid using hyphens, numbers or doubled letters like domain–example.com OR 99example.com OR freeexample.com
- Use an appropriate extension like .org .tv .net .book .store …etc
- The extension .com is the most popular and recommended for all types of website
- Avoid purposed misspelling, this may get your visitors confused
- Don’t use a trademarked name even if the domain is available
- Make sure it reflects your business or activity idea
- Try to include keywords like kitchenwarestore.com OR quicklearnspanish.com
Domain name typically costs about $14 but you can get some offers for lower prices
In the next step i will show you how to register a domain name and subscribe for web hosting together and you will know how to get best value service with an exclusive discount.
2. Subscribe for a web hosting service
Getting a premium hosting service is critical for your website speed, security and search engine optimization.
When you subscribe for a premium web hosting service you will get
- Hosting at a powerful and high speed servers which is good for visitors experience and affects your website rank in search engines
- Unlimited disk space to host your site/s contents
- Unmetered bandwidth “you can change, edited and replace contents without restrictions or limitations”
- You can connect unlimited websites to one hosting service plan ”my business website-my personal website-my wife website-family event website .etc..”
- You can create unlimited custom business emails like firstname.lastname@example.org
- Premium support
Web hosting costs from $9.99 to $11.95 per month in average. most of famous hosting companies offer you great discount for your first billing cycle.
Let’s see it in action
I recommend A2Hosting to get your hosting and domain. A2Hosting is a reputable and reliable company which is working in this field since 2001. They offer best features compared to other hosting providers with a very competitive price.
if you decided to subscribe A2Hosting service you have to subscribe to a plan called SWIFT to get suitable hosting plan, free SSL certificate, unlimited disk space, unlimited websites and unlimited custom email accounts
Disclosure: when you subscribe using following affiliates link or any other link in this page I will receive a small commission from A2Hosting at no extra cost to you in fact you will get an exclusive 51% OFF on your total bill.
Most of hosting companies have there own affiliate programs but I recommend the only one offers the best value and price for my readers.
Go to A2Hosting.com
From within A2Hosting plans page click on GET SWIFT button to subscribe to SWIFT hosting plan
You are free to choose any plan but I recommend the SWIFT plan because it offers you most of hosting features in addition to the ability to connect unlimited domain names to your hosting plan. In other word you can create unlimited websites on one hosting account with no need to sign up for new hosting accounts.
this will direct you to a registration wizard to sign up for your new Swift hosting plan.
first step of this wizard is to choose your domain name, in the domain name field type whatever you want as the domain of your website then click Check button to make sure that this name is available.
if everything is OK scroll down then click Continue green button.
in the Configuration step go to Choose Billing Cycle then select your desired subscription period in the following picture I selected 12 Months.
From the right side, review your order summary then click Continue button.
Once you receive confirmation mail from A2Hosting that your hosting account has been setup. you can access to your account through A2Hosting customer portal with your username and password that you assigned during sign up.
to start building your website you have to access to your website cPanel and install WordPress.
there are many ways to access your website cPanel the easiest way is to log in to your cPanel through A2Hosting Customer portal.
go to A2Hosting website then click login to to access customer portal then type your email address and password.
from within your customer portal you can view and manage your subscription and account information. to login to your website cPanel click My Services from within the top of your screen.
scroll down to where you find your hosting plan then click Manage button then from within new screen click login to cPanel
cPanel is where you can manage your all hosting aspects. You can install software like WordPress,build new more websites ,create sub-domains, create custom emails and ..etc
3. Install WordPress
scroll down your cPanel home screen to where it says Applications then click WordPress Manager.
from within WordPress Manager screen click New Site button and it will direct you to choose what domain/sub-domain you want to install WordPress to.
Make sure that WordPress will be installed to your targeted domain then click Show Advanced Configuration. Assign a username and password to login to WordPress then click Install button. It is less than a minute and WordPress will be installed and ready to use.
WordPress will provide you your login details as you see in the following picture. keep them to where you can easily find.
Now you have a live website to view it, just head over to your browser and type your domain name in the address bar for example mybrandname.com.
And you will be wonder that you have a website with with real contents under your domain name.
[wordpress first impression autoplay video]
Most of people don’t know how to get to this stage and own a real live website in one minute.
Although your site is working and you can publish whatever you want, it still has a basic look and a poor design.
You need to add some addons to your WordPress to build a great and modern look website.
4. Login to WordPress dashboard
Every website has two views, Backend and frontend view. The frontend view is what your visitors see when they visit your website. While backend view is the view for the website creator, where you can create, edited, replace, or remove contents.
While you use WordPress platform to create and manage your website from scratch, we call this backend view “WordPress Dashboard”
WordPress dashboard allows you to create pages, blog posts, install and customize themes, install page builders, install plugins and adjust your website settings.
To login to WordPress dashboard simply add “/wp-admin” after your domain name in the browser address bar. For example www.mybrandname.com/wp-admin
The Login to WordPress dashboard will require the username and password that you get earlier from WordPress after installation.
Type your WordPress username and password then Click Login.
5. Create your website pages
A website is a collection of related web pages. you may find a one page website but most of websites are consist of a group of web pages, like home, contact, shop, term of services, gallery and more.
to create a new page in WordPress hover over Pages from within the left sidebar then click on Add New
From there you can create and name your new page.
In the title field you can type whatever you want, this is your new page name. I will name it “Home”.
then from the right sidebar click on Publish.
You can repeat this step as many as you want to create your website’s pages.
I will create 4 pages Home, Service, About, Contact. once you create all your websites pages you can view the list of all existing pages.
To view the list of your website pages hover over Pages from the left sidebar then click on All Pages.
6. Install a WordPress theme
As I showed you earlier, WordPress theme is the framing of your website which is responsible for the appearance of whole site and all it’s fixed elements.
To install WordPress theme hover over Appearance from the left sidebar then click Themes.
WordPress will direct you to your installed themes list. From there you can install, activate, switch or delete themes.
In our example we have 2 installed themes here.To install a new theme you can click on Add New Theme box OR click on Add New button from the last top left of your screen.
You can choose from +6,900 themes and there are new themes are released every day. Also You can search your desired theme by name, site type, purpose, or layout.
For example you want to create a website for online hotels booking. All you want to do is to type “booking” in search box at the top right of theme’s screen.
You can search for any type of website freelancing, gym, spa, food, travel, online coaching, dog walking, gardening, blog, newspaper…etc
If you downloaded a WordPress theme from any other place you can install it here by uploading it in seconds.
In our case we will use an amazing free and multi-purpose theme called Flexia. After testing dozens of themes on the web I found that Flexia is one of best choices for most site types.
I recommend Flexia because
- Its free version includes all essential features
- Incredibly simple and easy to use
- Multi Purposed and fits most of sites types
- Amazing support even if you use the free version
- It is a page builder friendly
To install Flexia theme just type “flexia” in the search box in the top right of your screen. Then hover over Flexia box and click install button, wait few seconds then click Activate button.
Once you install and activate Flexia theme, a notification of a required plugin called Flexia Core will appear at the top of your screen. It is OPTIONAL but it will make the theme works better.
Simply click install link and it will be installed automatically.
Now your new theme is installed and your website appearance completely changed. Just visit your site and see how it looks like now with the new theme.
7. Customize WordPress theme
You can customize your WordPress theme to get your desired look and site layout.
For example you can assign your own logo, type your brand name in the copyright section, show or hide sidebars, customize menu, header, footer and more.
To customize your WordPress theme hover over Appearance from the left sidebar then click Customize from within your WordPress dashboard.
WordPress will direct you to theme customizer screen, where you can customize all theme elements.
Theme customizer screen consists of two sections. Left Toolbar which contains tools and options to customize your WordPress theme elements, second section is the preview screen in the right side where you can see the result instantly on the front-end with on need to visit your website.
Remember that all changes we will make here will be applied to our 4 pages that we created previously. Also all new pages will take the same effects because theme customizer makes global changes on your website.
You can try yourself and play with each button and discover how they work and affect your website appearance.
Now is the time to customize our theme. We will custom it to make our website looks like most of common modern websites.
a. Assign a logo
From customizer panel click General Settings then click Site Name And Description from new screen click Select Logo button.
This will open your media library to select an image as your site logo.
While you currently have no files in media library you have to browse your local files and select a logo from files stored on your computer.
Play following 40 seconds video to see how to assign a logo to your website.
Now new logo has been assigned successfully. You can follow same steps to add the site icon.
If you don’t have a logo you can create a free one on logomakr.com in 2 minutes.
b. Assign a navigation menu
Your website may contain more than one menu, menu is typically a list of arranged links of your site different pages.
Most of websites include at least one menu called navigation menu located in the website header.
Many other sites contain extra menus in sidebars or footer
Set your important internal links into menu in a clear and visible place to your visitors like your website header.
To assign a new menu, from theme customizer click on Menu then click on Create New Menu,
in the Menu Name field you can name the menu whatever you want. I will name it “top menu”
Then check Primary Menu check box to make it your main navigation menu. Then click next.
From next screen click on Add Items button then click your desired pages to be included in your navigation menu.
You can reorder menu items “page” by drag and drop pages top and down. Then click reorder ===> Done.
Play following 45 seconds video to see how to assign a menu to your website.
c. Edit Your Website Footer
You can set whatever you want in your website footer, for the moment we will edit the Copyright line.
From theme customizer click on Footer button then scroll down to where it says Footer content, remove the default flexia text and type your desired text instead. For example “Copyright 2019, My Awesome Website By ME”.
Play following 30 seconds video to see how to edit your website footer.
d. Assign your website’s front page
Front page is the page that will be showed for your visitors once they type your absolute domain name.
For example we have 4 pages in our website (Home-About-Services-Contact) if we choose the page “Contact” as our front page that’s mean when someone type our domain name www.mybrandname.com in his browser it will direct him to Contact page.
To assign any page as a front page click on General Settings ===> Homepage Preferences then click on A static page then select one of your website’s pages as a front page.
Play following 20 seconds video to see how to assign a specific page as your website’s front page.
e. Enable a scroll to top button
Scroll to top button is an arrow icon appears in the bottom of your site screen. It is a handy way for your visitors to back to your site header quickly and smoothly instead of keeping scrolling up.
To enable Scroll To Top button on your website, go to your theme customizer then click on footer then switch enable scroll to top toggle on.
Play following 30 seconds video to see how enable scroll to top button on your website.
f. Adjust sidebars
Sidebars is a rectangle area which holds multiple contents like ads, banners, forms, links menu, buttons, checkout, filtration options and much much more.
Any imaginable contents can be hosted on sidebar area to be fixed, visible and reachable to your website’s visitors.
You can enable or disable sidebars, you can add more than one sidebar to your WordPress website and each one of them can contains unlimited widgets or pieces of contents.In our example there is no need to add sidebars, we are going to create a clean and a full width website just like Apple or Uber websites. sidebars are typically necessary for blogs and it also work for websites in some cases.
To adjust sidebar settings go to theme customizer then click on Layout then under Content Layout select Content Only to disable sidebars.
Play following 17 seconds video to see how to disable sidebars on your website.
Now you can click pages links from main navigation menu at the top of your site and you will notice that all pages have same appearance and uniform.
Same header, logo, menu, site layout, footer.
That’s all about theme customization for this website example. more options will be covered later in other articles about creating different types of websites.
Remember that you can adjust more settings for other purposes, also each theme has its own options and controls.
Now it is the time to build our pages contents with page builder.
As I tought you earlier page builder is a small software that you add to your WordPress to be able to build and edited your web pages’ contents visually by drag and drop the ready made elements.
You can build an awesome and modern look pages without codes, just by using ready-made sections and elements.
Although many themes contain its own page builder,but it is recommended to install them independently to choose best theme and best page builder for your website.
You can install any kind of page builder to your WordPress. Page builder can be installed as a plugin.
8. Install a page builder in WordPress
From your WordPress dashboard hover over Plugins then click Add New you can search from 57,190 plugins from within your WordPress dashboard or you can download plugins from ThemeForest and other marketplaces and upload it to your WordPress.
Just as we did during searching themes, in the top right corner of your screen you can use the search box to search for plugins by name, function , category or keywords… etc
In the search box Type page builder, most of the results are page builders or plugins related to page builders. You can install any one of theme.
We will install Brizy page builder. Click on install button from Brizy Page builder result box.
Wait few seconds till installation complete then click on Activate button.
Why do I recommend Brizy page builder
- Intuitive and user-friendly interface
- Free version is loaded with most of essential features
- Built with newest technologies (released on April 2018)
- Has exclusive features like global changes and saving blocks
- Free version includes 150 ready-made blocks (sections)
- Lets you build any imaginable page
- Developed by an amazing team who offer a perfect support
- Works with most of themes
- Awesome video tutorials on Brizy YouTube Channel
- Weekly updates
9. Build your pages with Brizy Page builder
From WordPress dashboard left sidebar hover over Pages then click All Pages it will direct you to the list of your site pages that we created earlier.
Click your desired page to build it.
You will notice a new big red button called “Edit With Brizy” appears in the middle of the page editor screen.
before start building the page you may tend to remove the page title from your page.
so scroll down to where it says Page Header then select No Header, then From right sidebar click Update.
Now your page is ready to be built with Brizy page builder
Click on Edit with Brizy button
This will directs you to Brizy page builder’s interface to edit this page (in our example Home page)
First step is changing page layout click on Pages button from the bottom of the left toolbar then click Page Template then select No Container | Header, Footer that will show header and footer while you build page contents.
Every web page consists of horizontal sections or blocks. Consider the following picture of PayPal’s home page and you will notice that they built their home page with 5 blocks.
With Brizy page builder you can design any imaginable block or section by using blank block and adding elements to this block/section.
You can add any type of elements to your block text, image, video, map, icon, slider…. Etc.
You can add ready-made blocks to your web page and here is where MAGIC happens.
Brizy page builder has a unique and exclusive feature, it enables you choose from 150 pre-made blocks in its free version.
The 150 blocks are well crafted, clean, modern look and the most used blocks in all modern and famous websites.
Mostly you will never need to create your own blocks from scratch with this big collection of most used blocks and sections. It cover all potential needs for most types of websites.
To add blocks to your web page just click the plus icon in the middle of your screen.
Once you click add icon it will open a new window which includes the 150 ready-made blocks to choose from.
You can add a blank one and design it yourself by clicking the first rectangle in this window “Add A Blank Block”
Scroll down and click any of 150 ready-made blocks to add it with one single click, it’s really awesome.
You can repeat this action as many as you want to build your web page with different types of blocks and sections like hero, feature, pricing, team, testimonials, galleries and much more.
Click here to see an example of a page which is built with absolute ready-made blocks without any modification.
You can create a such web page in minutes with Brizy built-in blocks. Just few clicks and you will easily create and publish your own.
Brizy page builder lets you rearrange your web page blocks with an amazing easy tools called “Reorder blocks”. From Brizy left toolbar click second button where you can delete or rearrange blocks by dragging it up/down.
[reorder blocks autoplay video]
you can delete or edit every tiny element in these blocks, just click any element you want to edit or change like text, icon, image, …etc and you will notice a small Toolbar next to this element with buttons to modify and control all aspects of this element.
Once you feel that you are satisfied with your page new look click update button from the bottom right corner to apply these changes to your page.
Following short video shows you how to build a web page using ready-made blocks in Brizy page builder.
[using Brizy page builder]
That’s all and now you just created an awesome and modern look website yourself using WordPress without codes.
After having an insight of how to build your own website from scratch using drag and drop tools. you can start building your one using whatever tools you like. Steps which discussed in this article are essential and applicable for any type of websites.
Don’t forget to play How to create a website yourself without codes in minutes video to see all steps practically in action.
Create your own one as soon as possible because every moment is matter in the online world.
More features about Brizy page builder will be discussed in other articles about different types of websites, like job board, food recipe, spa, fashion, ecommerce, …etc.
Also you can have a look to Brizy YouTube Channel where you can find a definitive explanation for each feature and tool in Brizy page builder.
New topics will be post in the future like how to boost your website traffic, how to do SEO for your website yourself, how to create an eCommerce website, how to create and monetize a blog … etc.
Subscribe news letter to get notified about new articles, and share this post to help more people to get to it.
Your opinions, comments and suggestions help me strengthen topics and writing new articles, all comments are welcome ☺.
Most of icons downloaded from Icon8.com
RSS icon created with RSS icon by Icons8
many Other Icons downloaded with ♥ from Pixabay.com
Created my free logo at LogoMakr.com
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY