How to Create a Website in 20 Minutes
In this article, I will show you how to create a gorgeous looking website without any technical knowledge or coding skill.
After reading this article you will be equipped with special knowledge of creating a beautiful looking website in minutes by using drag and drop Free Website Builder
Keep in mind you only need to buy a domain and Hosting which is very inexpensive to create a website, don’t Buy any Pro Featured Theme, You simply don’t need it.
Resources used in this Article
1- https://www.godaddy.com/ For Domain Name Registration
2- BlueHost best website hosting (Highly Recommended)
3- WordPress Free to manage and create stunning websites
4- I will be using Free Astra Theme and Professional Free Plugin
That’s all we need so let’s get started…
Simply head over to godaddy.com and register your domain name.
The domain name will be the name of your website like yourname.com
After you pick your domain name just follow through the simple checkout process.
Step # 2
Sign up with world-class hosting (BlueHost)
Simply Click here and head over to BlueHost
Select the above Package and you will be prompted with the following screen
Enter the domain name you just registered with GoDaddy and click on Next and fill out the simple checkout information and you are done.
You are now the proud owner of the world-class hosting platform and ready to rock in the Artificially intelligent world of world wide web.
In simple words, you are ready to Create a beautiful and professional looking website in Minutes.
Please don’t buy any other tool except for domain and hosting, since these are the only tools you need.
Step # 3
BlueHost Welcome Email
You will receive a Welcome email from BlueHost that contains all the information of your account.
Save this email for future reference as well
In this email, you will have the DNS Name Servers information, In simple terms, DNS Name Servers will help to connect your domain name with your hosting provider, simply copy the DNS information it usually looks something like the image below
As you can see the image it is showing the Name Server Information, all you have to do copy the name servers and head over to GoDaddy your domain name Provider.
Keep in my mind above image is showing the Name Servers for the website host break since I was testing this website for hosting solution but it did not pass the test, but your email will have the name server name from BlueHost so copy that information.
Next step is head over to GoDaddy and clicks on your name right-hand side dropdown menu and Click on Manage Domains.
Click on Manage domain and you will see the screen with your domain name that you just registered with GoDaddy.
Click on your Domain name and you will see the following Screen
Click on Manage DNS and in the next window simply add your name server information that you just copied from your BlueHost Welcome Email.
Click Save it takes between 24 to 48 hours to propagate your domain name with your Hosting but usually it happens pretty quick and now we are ready to design our site.
Next step is WordPress Installation
Login to your BlueHost account, and Click to Install WordPress
Once You Install WordPress, all you have to do is simply fill out some important and easy information and click on install and your WordPress will be installed on your website.
Follow the steps below to install WordPress effortlessly
Follow the next image below to complete the WordPress installation
Now the WordPress has been installed to your website, as soon as you finish WordPress installation, you will receive your login details in the next window.
This is how you log in to your WordPress website
You will have to write the following URL in your internet browser
Look below this is how my website WordPress login URL looks like
The next step is to log in to your WordPress website, once you type the above URL in your internet browser you will see the following screen
Once you login this is how your WordPress Dashboard will look like
Now you can easily access your website from the WordPress dashboard and you can control all aspects of your website within the dashboard of WordPress.
Whenever you want to visit your website you can simply click your website name from the top left-hand corner and click visit site
Now the next step is to install a Free New and Professional WordPress Theme so we can edit our website however we want
The default WordPress theme does not have many options and it does not look professional as well, take a look at the default WordPress theme below
Did you notice how generic and basis this theme is …. And it is not professional looking at all..
We don’t want Free WordPress default theme on our website.
We want a Free and Professional WordPress theme so lets do it.
Head over to your WordPress dashboard
Click on Appearance ⇒ Theme ⇒ and Click on Add New
Your New Astra Theme has been activated
Next we are going to install a plugin which comes with this Theme
By installing the plugin we will be easily able to customize the Theme
To install a Plugin Click on ⇒ Plugins and Click ⇒ on Add New
Type in the search Field⇒Astra and Click ⇒ Install Now
Activate the Plugin
The Great thing about Astra Plugin is that it has Pre designed beautiful and professional looking website templates that will make you Pro web site designer instantly.
After Activation of the Plugin Click on ⇒ See Library
Now you can see all the design consist of these libraries
Once you Click on Free Tab it will bring all the 46 Free Templates to Choose From
I am going to use Agency Template to make our website
Next, we will Click Preview to see how our website will look
Now you can see the Preview, how your website looks, and it looks extremely beautiful and Professional so from here all you have to do is Simply Click on Import Site Button..
Once it is done we now can view the site..
Now you can view your site and I got to tell you that the website looks professional and you haven’t done any coding to get that site up and running.
This is the power and beauty of drag and drop website builder, now take a look at your website below
You can now click on each page and see how it looks as well.
Now let me show you how easily you can customize the content of your website
Lets say you want to edit the home page.
We will click on Home and Click edit with Elementor
Now lets say you want to change the title text of this page, all you have to do simply Click on the text and make Changes and you are done.
I just change the title of this page and change the color as well
You can change the color, Typography, text shadow, and Blend mode as well, just play around with all the options by simply click on them and watch their effects.
Now the next step is to change the Button setting on your Page.
Did you see the button on your home page which says “More Info”
You can change the style of this button, text,color and when user will hover their mouse on the button the button color will change, it is called hover effect, which really gives professional and classy touch on our website, so lets make all the changes on our Button
Right now you could see that the Button color is white, text color is Black and Hover effect will be Blue take a look at the image below
Now notice when we Hover our mouse on the button, the button text color also changes from black to white, it is pretty near effect, let’s perform all those effects.
Click on the Button and you will see the complete panel on your left hand side for all the button properties, Now you can make any changes to your button by Simply Clicking and apply the effect.
Please Note the Link “#About” in the link Field of the button, it means once the button Clicked it will take user to the same page of our website where About us Information has been displayed.
So instead of sending user different page you can add a section on the same page, give a name to the section and make it Clickable, in this case, our section name was About and by typing Pound sign # and the name of the section, once clicked it will take us straight to that specific section of the page.
Next Step is Change the styling of the Button
Next step is to Click on Hover effect and make changes to it so it can give nice looking hover effect, keep in mind Hover effect triggers when user Hover their mouse on Button and Button changes the background color, text color and give animation effect as well.
Click on Hover effect Button, now you can make any changes to the Hover effect of the Button.
Take a look at the screen shot below.
Now the same way you can make any changes in any page and you can change any element of the page by simply click on the element and make changes and you are done, this is how easy it is to make changes to your website.
Now you know how to make changes to your website
Next step is change the header and footer of Your website.
Lets make some changes in our header first
Click on Customize option to make changes in your header
Next step is to change the logo if you already have a logo you can apply it by simply clicking the pencil icon and upload your logo.
And if you don’t have the logo, let me show you the quick trick to create a nice and professional looking free logo.
Head over to https://snappa.com
Click to add text
Click to add Heading
I added the name of my company, you can write your brand name or individual name to present your logo.
I am keeping things simple, I can be as fancy as I want but for the sake of this tutorial i am creating a simple logo without any graphic designing skill or without hiring any graphic designer, that’s cool right 🙂
Next simply add a graphic to your logo
I choose the graphic and add into my logo
That’s it, as I mentioned above I want to keep things simple and the next step is simply download your logo by clicking the download Button.
The next step is to add our logo in to our website
Click to Customize
Click on the pencil icon to change the logo
Click to Upload Files and Select Your Logo that You just created using snappa.
Take a look how our website looks with a simple logo
Pretty neat ☺️
Next step I am going to show you how to change the Menu of your website.
Grab a Cup of Coffee since it will be very intense ☺️ just kidding it is very easy to change the menu icon along with the attached page.
The first step is to create a page, first, click on your website dashboard
After making the changes click update and preview the page
Now click back to the dashboard of your website
Now let’s create our menu button and link that button to our page and also add that button to the top navigation menu
Now Click on Free Tutorial Page and it will be added to Our Menu Section
The next step is to view your site to see if your menu has been updated and when clicked it is taking you to the relevant page
As you can see below the new menu Navigation with the name of “Free Tutorial” has been added to the Top Navigation Menu,take a look at the screenshot below
Now once you click on Free Tutorial Navigation menu button it will take you to the Free Tutorial page
Now the final step is to change the footer section of our website
Scroll down to the footer section and click on the pencil sign right next to any element you would like to change
Let’s change the address on our footer,Click on the Pencil icon right next to the address and add a new address
Take a look at the screenshot below the new address has been added
By using the same technique you can change any element on the footer section as well
There you have it, I did my best to cover almost everything, I really wanted to help everyone.
And I am hoping you are now equipped to design your website from scratch without any coding skills.
Congratulations You are now a Super Star and ready to design any website from scratch, would you like to take that skill and make money with it.
This should be your next logical Step.
I have Created an exceptional Course to Start and Profit from your own Web Designing Agency.