Are you a beginner? Don't have any coding skills? No need to worry, I'll teach you to build a fully professional-looking website in just under 30min without any prior knowledge of coding.
I have given a very minimalist approach in teaching just enough skills that are important for beginners to build a beautiful-looking website.
This guide can benefit you either in your career or if you want to start your own freelancing business.
I have been a website designer for the past 10+ years; Must say today technology has changed to such an extent that with minimalist skills we can build great websites.
Using these exact skills, I make around $300 (Per Client) by designing a complete website for my clients. I'll explain everything about freelancing in my coming posts today let's stick to our tutorial.
But, how is it so easy? The answer is by using a ready CMS (Content Management System) which does all the coding work, along with a page editor plugin that makes it easier to update content with their drag-drop functionality and not to forget ready themes to jump-start the design work.
I have chosen WordPress as our CMS in this tutorial as it is an Easy, Cheap & Powerful Website development framework.
So we will be learning a complete end-to-end process of developing a website using WordPress.
Here is the list of topics that we will be learning in this tutorial -
- Domain & Hosting Setup - (10min)
- Wordpress CMS Installation - (5min)
- Installing a Theme - (15min)
- Creating & Updating pages
What is a Website?
A website is a collection of web pages, there can be several pages on the website which include default landing page or homepage, about page, contact page, etc.
Websites today use more complex programming languages that also include backend programming languages & databases.
What is Wordpress?
Wordpress is an open-source Free CMS application; it's one of many CMS out there on the internet. Wordpress is the most used CMS in the world, which powers almost 42% of websites globally.
Wordpress is a powerful website building framework that uses PHP programming language as its backend and MySQL to power its database. The best part of this CMS is that you don't need to code; the application eases the building process.
How can Wordpress accelerate my website development?
Wordpress makes building websites easy without the knowledge of coding.
Wordpress has huge community-based support on the internet, in addition to educational materials & troubleshooting advice spread across the internet.
Wordpress has countless plugins and themes, both free & paid to make the website more advanced & Easy.
What are Wordpress Plugins?
Wordpress plugins are the extensions that can be added to produce further advanced features to our website. For Example: Adding a free plugin named "Woocommerce" can help you convert your website into an online store; It is that Easy.
What are Wordpress Themes?
WordPress themes are ready-built templates that can help beautify your websites by changing the overall appearance of your blog or website.
There are a lot of free & premium themes available for Wordpress. One that we are using today is a free theme called Astra. I'll be teaching more about themes in my later tutorial.
If you are interested to check out premium themes, then go to ThemeForest.
What is Elementor Page Builder?
Elementor is one of the most professional Website Builders designed for WordPress. We will be using Elementor to edit the pages.
Elementor makes content creation easy with its advanced drag and drop functionality. You can create some cool and fun designs using this free tool; they also have a premium version, but we don't need it for today's tutorial.
What is a Domain Name?
A domain name is a unique name provided for websites to be accessible from web browsers. For Example www.google.com. You can buy domains from domain registrars companies such as GoDaddy, Namecheap, etc.
TLDs or top-level domains are the suffix or extension added to the end of your domain name. In an earlier example with www.google.com, .com is called TLD.
There are a lot of TLDs available like com, co, io, org, biz, etc. The most commonly used TLDs is .com and I highly recommend buying the same.
What is Web Hosting?
Web hosting is a virtual space provided on the internet to store your website files and make them accessible on the internet. The companies that dedicate these spaces are called hosting providers.
In our case, we are installing Wordpress CMS onto our web hosting space and then connecting it to our domain name to make it accessible on the internet. Don't worry, I'll be explaining everything in my later guide below.
How To Build a Website in 4 Steps:
So enough information let's begin the actual topic of how to build a website in under 30 mins. Before I begin my tutorial, I would like to request my readers to read each step carefully first and then start the process.
Step #1: Domain, Hosting & Wordpress Setup
Before we begin, first think of a domain name for your business that is unique and ends with .com for example www.azfar.com.
Check the Screenshot below for Reference:
- Go to Bluehost - www.bluehost.com.
- From the top navigation bar click on Hosting.
- Under hosting click on Shared Hosting.
- Choose any package of your choice. I recommend going for Plus Plan.
- This is the only investment that you make in creating a website.
- In the next step, choose to Create a New Domain.
- Enter the domain name of your choice.
- Bluehost offers domain + hosting under the same platform.
- Fill in all the necessary details as asked, and submit the form.
- Next, choose Limitless Customization.
- Enter your Blog Name & Tagline.
- Choose your Domain Name from the list.
- Within a few seconds, Wordpress CMS will be installed.
- Click on Login To WordPress.
Note: Remember to Make Note of username & Password.
Step #2: WordPress Theme Installation
- As soon as you log in, choose the Plugins page from the Left Navigation Bar.
- Deactivate all the plugins shown, we don't need unnecessary pre-installed plugins.
- Now go to Themes from the Left Navigation Menu.
- Click on Add New.
- Search for "Astra" from the top search bar.
- Install & Activate the Theme.
- Then go to Appearance from the Left Navigation Menu.
- Then go to Astra Options from the Left Navigation Menu.
- Now click on Install Importer Plugin from the right box.
- Click Activate & click on See Library.
- Choose Elementor page builder from the options.
- From the top filter, choose the Free option instead of All.
- Select from the various free themes that are available.
- Choose a theme and click on Import Complete Site.
- Follow the window instructions & click on next.
- Congratulations, your website is ready. I believe you haven't taken more than 30 mins.
Note: You can see that the website has dummy content; So in the next steps let's try to change all the content using the elementor plugin.
Step #3: Page Creation & Updation
- Go to WordPress dashboard.
- Click on Pages.
- Next, choose from a list of Pages that you want to edit.
- Click Edit with Elementor.
- This will open a preview of the page with edit and add options.
- You can also drag and drop elements.
Watch Elementor Tutorial:
Learn how to edit pages with the elementor plugin.
Step #4: Update Logo, Header & Footer
- Go to Appearance from the Left Navigation Menu.
- Click on Customize.
- Click on Header Builder to edit the Logo & Top Button.
- You can get your logo designed using a free tool called Canva.
- Click on Footer Builder to edit the bottom part of the website.
- Click Site Identity to change the Logo across the pages if available.
How to edit Top Navigation Bar?
- Go to Appearance from the Left Navigation Menu.
- Click on Menu.
3. You can rearrange the menu order from the left box.
4. You can drag and drop new items from the right box.
5. Once done Save Menu.
Well, congratulations, you are now officially a Web Developer.
This is the quickest & complete guide you will ever find on the internet to build a full-fledged website.
If you follow all my steps then you will be successful in building a professional-looking website for yourself or for your clients.
Building a website for any client can help you make somewhere around $300-$500.
You can also register for freelancing websites such as fiverr.com, freelancer.com, and upwork.com, etc.
I personally use fiverr.com to make around $1,000+ every month using this simple guide.
Wordpress is a vast subject; now that you know the basics you can head on to the internet to explore more knowledge.
Any queries you can email me at hey[@]azfar.co. Good Luck :)