Create a proffesional website for free in 2020 The ultimate tutorial



By FreeCodeWiki.com , 3/2/2020


Do you think creating a website is too hard or too expensive?
Do you think only a programmer can create a website?
The good news are, you are wrong!
The great news are, this ultimate tutorial will guide you step-by-step untill you launch you own website
It will be responsive for mobile and desktops, Google optimized, and FREE of charge. (except hosting)
With us you will learn how to build a website from scratch easily



Level of expertise needed for this tutorial:
Beginner


Time needed to setup your website:
30 to 60 minutes


What you will get:
Responsive full website, domain, hosting service, seo optimization



This tutorial contains all the information you need in order to create a proffesional resposnive website that will work perfectly on desktop and mobile, and apply the SEO.




Click on a link to teleport to the desired section






You can skip this part and start creating your website, this section is dedicated to answer some common questions about building a website


What is the best free website?
The best website is a website that is mobile friendly, has low page load time,
user friendly, and has a good design


How can I create a professional website?
There are 2 options, you can use a website builder or website building platforms, such as WordPress, Wix, Joomla, Drupal, and countless other platforms
Or you can create your own website by yourself (we added bonus tutorial including template and step by step instructions)


Whice way should i choose?
If you want to finish quickly and launch your website go with a website builder
If you want full control of your website and slightly better SEO go with our step by step bonus tutorial in the last section of the tutorial


How much does a website cost?
Well you can pay 1,000$ (usally more) for a web development company
Or you can create a website for free using this tutorial


Which website builder is the best?
Absolutely without a doubt wordpress, ease of use, countless extensions, tons of sources, developers and more, however consider creating your website by yourself, it has alot of benefits (we added bonus tutorial for that including template and step by step instructions)


Creating a website for your business free, was never so easy











Section 1


Get web hosting and register a domain




Click here to return to the main menu


In order to set up your website, whether you made it by a web builder platform
Or by yourself using our tutorial in section 6, you will need two things:

1. Domain name (the website address like FreeCodeWiki.com)

2. Web hosting (a big server that connects your website to the entire internet)


Why do i need a domain?
Because otherwise no-one would be able to find your website, also you can insert keywords in your domain for SEO purposes, adding keywords to your domain will boost your ranking in Google, for example if you create a website about Motor boats and your company name is Jacks then go with JacksMotorBoats.com
Domain is super cheap you can get free domain along with the hosting plan or pay from 5 to 15 dollars a year



Why do i need web hosting?
Without hosting your website will not appear in the net
Pick up reliable hosting company, no-one likes a slow website that often crash, Google even penalize slow websites by ranking them badly or even ban them from the search results, it is extremly important to pick up a reliable hosting company, dreamhost, and bluehost are very good options.



How and Where Do I register a Domain Name and Get Web Hosting?



1. Go To www.dreamhost.com (or Any Other Web Host company)


We are currently using dreamhost services, and are happy with it, we are NOT sponsored by them, and are not gettin paid


complete guide to create a website

2. Pick up Your Website Hosting Plan


Click "get started" as we showed in the photo above


You will be redirected to the hosting plans page, pick up the right plan for you
The "shared starter" is more than enough for a new website
The price that you see in the photo is for 3 years plan, you can choose 1 year plan for 3.95/month
You will get a free domain, free SSL, and unlimited traffic
You can always upgrade your plan in the future, but this plan is more than enough for a new website and even two!



complete guide to create a website


3. Choose Your Domain Name


Under the desired plan click sign up now (look in the photo above)
You will be redircted to the next page:



complete guide to create a website

Choose the length of your plan, monthly, yearly, or 3 years (you get discount for longer periods)

Then click "Register new domain" (we marked it in red in the photo above)


You will see the next option:


complete guide to create a website

Type in your domain name and click on the search icon.


If you didn't decide about your domain name yet, let me give you the next tip:
Adding keywords to your domain will boost your ranking in Google, Google uses more than 200 data types to decide how to rank your website, one of them is the domain age, and name, if you create a website about Motor boats and your company name is Jacks then go with JacksMotorBoats.com or somthing similar.


If the domain name is not taken you will see this:


complete guide to create a website

Click Add for 0.00$, and in the next page uncheck every additional service, add your payment method and click submit order.
Fill your information and follow the instructions.


Once completed, you'll have access to your DreamHost panel at: panel.dreamhost.com
Important: If you have any problem, dreamhost offers free LIVE chat in their site, just click and speak to an agent that will assist you.


If you need help adding your new domain read this: How do I add a domain?

If you need help adding a user read this: Adding a user to a server











Section 2


Set up your website




Click here to return to the main menu


Now you have your domain name and hosting plan, save your id and password, you are doing great job!
The next step is installing wordpress into your hosting account


Log in to your account at: panel.dreamhost.com
Click "Domains" in the left navbar, then "One-click installs"




complete guide to create a website

Select "wordpress" (the first option from the left)


In the page that opened
Select the domain you would like to install wordpress into
Select 'Automatically Create Database'
Select the Deluxe Install: It's recommended you check this box, This is a free addition to your install.
Select Install WP Website Builder




complete guide to create a website


How to log into your WordPress site

After you've installed WordPress, you'll receive an email to the primary email address on your DreamHost account. This email lists further steps to take to complete the installation. When WordPress is finally running on your site, you can log into it at: example.com/wp-login.php (replace example.com with your domain)


Important: If you have any problem, dreamhost offers free LIVE chat in their site, just click and speak to an agent that will assist you.











Section 3


Add the design of your website




Click here to return to the main menu


Ok now the fun part begins!, let's talk about how to design your new website, Wordpress offers countless themes and templates, Most of the WordPress themes are free and professionally designed allowing you to custom them as you wish.


Log Into Your WordPress Dashboard at: https://yoursite.com/wp-admin


If you don't know your password or username, check the email that you entered in your dream host account, you get an email from wordpress when you installed it on your website in the last section, you can also reset username and password using that email.


This is what you should see once you logged in WordPress dashboard:



complete guide to create a website

Go to FREE Themes



complete guide to create a website

Now you have thousands of free templates, just pick up a theme you like
If you want even better designed templates you can always search in google, web-sites like https://themeforest.net/category/wordpress offer great themes for cheap amount, check this great design:
https://exponentwptheme.com/hosting/ , absolutly amazing template for your website.


But before you dive in, try out a free template
You can use filters or search for a keyword to find themes that suit your website
Also make sure the theme is responsive for mobile, most of them are though.



Install Your New Theme/Template


Installing your favorite theme is so easy, just click install now.
Removing your theme and replacing it with a new theme won’t delete your content.
Feel free to change themese as much as you want.












Section 4


Add content




Click here to return to the main menu


Ok now you have a design, but your website is empty, you need to add content
Without content, you can't start ranking up your web pages in the search engines
Also no-one would stay in an empty website right?
In this section we will guide you step by step on how to add content to your new wordpress website


In the administration dashboard you will see a left-column menu at the sidebar
Click pages then Add new



complete guide to create a website

After clicking "Add new" in the editor, Add text, images and anything you want, then save it when you’re done.


Adding an Image / Media



complete guide to create a website

If you want to add an image to your page, click the Add Media button above the formatting controls and the Insert Media dialogue will appear.
Under the Media library tab you can see existing images that have been uploaded
In order to upload new image click "upload files"
WordPress has a handy drag-and-drop interface, you can also press "select files" to do it manualy



Adding New Pages to the Menu


Once you are done adding content and media, it is time to connect your new page to a menu
Save your changes by clicking “Update”
Click “Appearance” -> “Menus” in left the sidebar
Locate the page you created and check it in the checkbox and click "Add to menu"














Section 5


Apply SEO and launch




Click here to return to the main menu


What is SEO and why do i need it?



Why do i need SEO?
Did you know that the avarage ad cost is about 5$ per click?
Some ads costs 20$!!!
By applying SEO, you can gain tens of thousands of visitors to your website
Let's do simple calculation, 10,000 x 5$, that 50,000$!
You can save up 50,000$ or more every month, and gain free visitors
There are billions of search queries every day, good SEO will build up your buisness.
Also since YOU can control which keywords to plant in your content, you can also decide which people will visit your website, for example if you ranked for the keyword, "Buy book about programming", you know for a fact that only people that intrested in your product will visit your website.


What is SEO?
SEO stands for search engine optimization
Unfortunately alot of people find SEO threatening, and waste thousands of dollars, on SEO companies
Don't be the typical sheep
Ofcourse you will not be a SEO expert in 1 week, but yes you can apply the basics really easily
By maintaining your Title tags, Heading tags, content and some other factors that we will mention, you can apply SEO by yourself, for those of you that want more, we will provide an amazing course about SEO, if you finish the course i can assure you that you will do even better job then entire SEO company, since they work by the hour, and really not care about your buisness.



Page titles


Title are the number 1 SEO factor, and the first factor that we want you to apply
Every page should have unique title, describe the page in the title, and plant your desired keyword
Don't make too long titles.


How do i control my page title?

Go to "setting" > "general" and fill the form:



complete guide to create a website

Tagline are added at the end of the title
Again use unique title for each page, below the tagline you can specifie the page url



Page Headings


Headings are extremly important, they help search engines to understand your page and the data structure
Add Headings in every page, plant your keywords there, but do not spam headings!


How do i control my page headings?

Go to "posts" :



complete guide to create a website


Editing the Sidebar


In most WordPress themes you will have a sidebar on the right side
You can get rid of it or edit it, this is great for SEO
You can add links to the sidebar, and plant keywords into the name of the tabs
Connect your important blog pages to the sidebar, let google and your visitors reach it easily
This will help you rank higher more easily
Go to “Appearance > Widgets”, use the drag and drop tool to control your sidebar.
There’s also an “HTML box” – where you can control the source code and rename the links and plant keywords.



Install SEO plugins and more


Plugins are tools that expend your capabilities, add free features and alot more
they require no programming knowledge
The best SEO plugin for wordpress is without a doubt Yoast SEO
You can install this tool for free


How do I Install a Plugin?


Go to "plugins" > "Add new" or "Install" , enjoy.
Do not add alot of plugins, that will slow your website and harm your SEO
Only install the best plugins such as Yoast SEO and Google Analytics
Use google and youtube, watch the plugin review and use them smartly.




Backlinks


One of the main factors that matter in your google rankings are backlinks
Backlinks are links from other websites linking to your website
There are countless of backlings building tutorials
Just remember that you need links from relevance websites, if you sell cars, links from pizza websites will not help you.
Start by linking your website on relevance forums or reddit, add helpful content before the link, otherwise that is a spam
The best way to get backlinks is making a great content, guide or a tool, people naturally will link to that page.




SEO Pro course (for those of you want the best)


If you apply our above tips and add quality content to your website you will see results.
SEO results takes time, usally more then 2 months
If you want to dive in the SEO world and be an expert check out this course
SEO pro Course
Again I am not getting paid by udemy, I only offer products that helped me in the past
I took this course in the past, it is 8 hours long, has more than 28,000 students, and costs only 18$ at this time.














Section 6


Create awesome responsive landing page by yourself (no wordpress)




Click here to return to the main menu


Wow you are still here, i am impressed



Why would i read this section?
Aren't you interested how things work behind the scenes?
Don't you want a new skill that can potentially change your life?
If the answer is yes, this is the right section for you
How do I create my own website?
We are gonna guide you step by step to create a landing page by yourself
You will not be an expert after this tutorial, but you can keep learning in our website, and get to that level.
Wordpress is great, but you are limited because you don't have any web development skills, once you know the basics and launch your website using this section, you can add anything you want to your website, without paying a developer

(If you want to create a full website in under an hour, go back to section 1.)

Refresh the page to see the effect:



Click to see full page >>



In this lesson you will learn how to create a landing page using HTML and CSS


This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Javascript Instructions

We will add comments inside the example code boxes and the code editors to explain as much as we can, comments are in grey color.



Level of expertise needed for this section:
Beginner with passion


Time needed to complete your page:
it's up to you


What you will get:
An amazing landing page, and new skill







ok here we go.



Part 1


Add HTML


First you have to create new html file, this is very simple, just download visual studio code and follow our instructions in the HTML Editors >> lesson and you will be done in 5 minutes


Ok now that you have visual studio code running and you made a folder and html file we can start
This is the entire source code, click on the code editor and do not panic we will guide you step after step:

Code editor:


First we need to declare the HTML page, copy paste the HTML code below:



Code Example:

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Website landing page 2020</title>
</head>
<body>
  
</body>
</html> 
  


What is that?


<!DOCTYPE html> defines the document to be HTML5  
<html> this element is the root element of an HTML page  
<head> this element has meta information about the document  
<meta> basic meta tags for screen responsiveness and more  
<link> allow you to use free fonts   
<title>  effect the title for the document, when you change the text in this element, you will see it in the browser tab.  
<body> this element has the visible page content and divs  


Now add section area inside the body tags:


Code Example:

           
    <body>
       <section>
            
       </section> 
    </body>
    
  

Notice that the body tag has closing tag also, every tag in HTML has closing tag, inside the body tag we inserted section tag, inside the section tag we will place the page content.



Adding the heading, text and button inside the section tags


Inside the section tag we will insert the text and the button area:
You can change the text as much as you want.



Code Example:

           
    <body>
       <section>


            <div class="content">
                <div>
                <h2>Jack Sparrow</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, sequi unde et doloremque fugiat placeat rerum consequuntur dignissimos.</p>
                <a href="#">Learn more</a>
                </div>
            </div> 


       </section> 
    </body>
    
  

<div> Div is simply an area in the website that we define now, we give it a class in order to style it later on using CSS    
<h2> Defines heading    
<p>  Defines paragraph.  
<a> Defines link and text area (we will use it as button in this case)  



Adding the image area, and the navbars, and the responsiveness script



Code Example:

           
    <body>
       <section>

            <div class="content">
                <div>
                <h2>Jack Sparrow</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, sequi unde et doloremque fugiat placeat rerum consequuntur dignissimos.</p>
                <a href="#">Learn more</a>
                </div>
            </div> 


             <div class="image">
               <img src="../img/jack.png">
             </div>

             <ul class="nav" id="nav">
             <li>
              <a class="active" href="#">Home</a>
              </li>
              <li>
              <a href="#">About</a>
              </li>
              <li>
              <a href="#">Team</a>
              </li>
              <li>
              <a href="#">Ranking</a>
             </li>
             </ul>

             <ul class="sci">
             <li>
             <a href="#" class="fa fa-youtube"></a>
              </li>
              <li>
              <a href="#" class="fa fa-facebook-square"></a>
              </li>
              <li>
              <a href="#" class="fa fa-twitter"></a>
             </li>
             </ul>



       </section> 
        <span class="menuicon" id="toggle" onclick="menuToggle()"></span>
       <script type="text/javascript">
          function menuToggle(){
              var nav = document.getElementById("nav");
              nav.classList.toggle('active')
              var toggle = document.getElementById("toggle");
              toggle.classList.toggle('active')
          }
       </script>
    </body>
    
  

<img> Defines an image    
<ul> Opening list (we use it for the navbars)    
<li>  the list childs.  

Notice that our image source is "../img/jack.png">
/img is the folder name
/jack.png is the image name inside the folder
If the image is not in the same folder of the HTML web page that you created in the beggining, you have to add the dots, if you placed the images folder and the HTML file in the same folder you dont need the dots


Now the page structure is ready, all we have to do is add the style (CSS)




Part 2


Add CSS


Create style tage below the title tag:



Code Example:

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Website landing page 2020</title>

        <style>

        </style>


</head>
<body>
 
</body>
</html> 
  


Copy paste the CSS code inside the style section you made:



Code Example:

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Website landing page 2020</title>

        <style>
 @import url('https://fonts.googleapis.com/css?family=Open_Sans:300,400,600,700,800&display=swap');

      *
      {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
      }
      section
      {
        position: relative;
        widows: 100%;
        min-height: 100vh;
        background: #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      section:before
      {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ff2562;
        clip-path: polygon(73% 0, 100% 0, 100% 100%, 89% 100%);
        animation: fade-in 0.5s ease-in forwards;
        animation-delay: 1.5s;
        opacity: 0;
      }

      section .content
      {
        position: relative;
        padding: 100px 50px 100px 150px;
        box-sizing: border-box;
        animation: left-in 0.5s ease-in forwards;
        animation-delay: 0.5s;
        opacity: 0;
      }
      section .content h2
      {
        color: #fff;
        font-size: 3em;
        font-weight: 800;
      }
      section .content p
      {
        color: #fff;
        font-size: 1.2em;
      }
      section .content a
      {
        position: relative;
        display: inline-block;
        padding: 15px 30px;
        margin-top: 20px;
        background: #ff2562;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.95em;
        font-weight: 700;
        letter-spacing: 2px;
      }
      section .image
      {
        position: relative;
        padding-right: 100px;
      }
      section .image img
      {
        max-width: 500px;
        animation: fade-in 0.5s ease-in forwards;
        animation-delay: 2s;
        opacity: 0;  
      }
      .sci
      {
        
        position: absolute;
        bottom: 75px;
        left: 150px;
        display: flex;
        animation: left-in 0.5s ease-in forwards;
        animation-delay: 1s;
        opacity: 0;
      }
      .sci li 
      {
        list-style: none;
      }
      .sci li a
      {
        margin: 10px;
        padding: 20px;
                font-size: 20px;
                width: 60px;
                height: 60px;
        text-align: center;

        color: white;
      }
      .sci li a:hover
      {
        opacity: 0.5;
      }

      .nav
      {
        position: absolute;
        top: 75px;
        left: 150px;
        display: flex;
        border-left: 5px solid #ff2562;
        padding-left: 20px;
        animation: left-in 0.5s ease-in forwards;
        animation-delay: 0s;
        opacity: 0;
      }
      .nav li 
      {
        list-style: none;
      }
      .nav li a
      {
        text-decoration: none;
        margin-right: 30px;
        font-size: 0.9em;
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
      }
      .nav li a.active,
      .nav li a:hover
      {
        color: #ff2562;
      }
      @keyframes fade-in
      {
        0%
        {
          opacity:0;
        }
        100%
        {
          opacity:1;
        }
      }
      @keyframes left-in
      {
        0%
        {
          transform: translateX(-200px);
          opacity:0;
        }
        100%
        {
          transform: translateX(0px);
          opacity:1;
        }
      }
     
              
              
              .fab:hover {
                  opacity: 0.7;
              }
              .fa-youtube {
                background: #bb0000;
                color: white;
              }
              
              .fa-facebook-square{
                background: #3B5998;
                color: white;
              }
              .fa-twitter {
                background: #55ACEE;
                color: white;
              }
              @media (max-width: 991px)
              {

               .menuicon {
                   position:fixed;
                   top:40px;
                   right:40px;
                   width:30px;
                   height:30px;
                   background: url(../img/menu.png);
                   filter: invert(1);
                   background-size: 30px;
                   cursor: pointer;
                   background-repeat: no-repeat;
                   z-index: 1000;
               }
               .menuicon.active {
                   background: url(../img/close.png);
                   filter: invert(1);
                   background-size: 30px;
                   cursor: pointer;
                   background-repeat: no-repeat;
                   z-index: 1000;
               }
               .nav{
                   position: fixed;
                   top: 0;
                   left: -100%;
                   width: 100%;
                   height: 100%;
                   background: rgba(0,0,0,.95);
                   flex-direction: column;
                   z-index: 11;
                   border: none;
                   padding: 50px;
               }
               .nav.active{
                   left:0;
               }
               .nav li {
                   margin: 5px 0;
               }
               section
                       {
                    flex-direction: column-reverse;
                    justify-content: center;
                 }
               section:before
                       {
                    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 26%);
                      }
               section .content
                      {
                    padding: 50px;
                    margin-bottom: 30px;
                     }
               section .content h2
                      {
                    font-size: 1.5em;
                     }
               section .content p
                      {
                    font-size: 1em;
                     }
               section .content a
                      {
                    font-size: 0.8em;
                    padding: 10px;
                    margin:30px;
                     }
               section .image
                      {
                    max-width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding-right: 0;
                    margin-top: 20px;
                     }
               section .image img
                      {
                    max-width: 500px;
                     }
                      .sci
                      {
                    left: 50px;
                    bottom: 30px;
                   }
              }

          
        </style>

</head>
<body>
</body>
</html> 
  


Enjoy your new page, share this tutorial on how to create a website free of cost



Check it out:








Navigation