How to create your own website for free with your own hands – step by step instructionsMarch 28, 2020
How to create a website for free and on your own from scratch without technical knowledge? What is a “domain” and “hosting” and why are they needed? What is an “HTML site”, “CMS system” and “site builder” and what are their key differences from each other?
TOP HOSTING REVIEWS:
If you are close to the above questions, please get comfortable, and we will try to answer them in detail in this instruction. We understand the importance, because by learning to create modern and functional sites, you can build an online representation not only for yourself or your company, but also offer similar services to other interested people. Today it is one of the most promising and stable types of online earnings.Content
Where does any website start?
Any site, and ideally the idea of creating a site should begin with a clear understanding of the purpose of creating and further developing a new Internet resource.
For what purpose can a site be created?
In fact, all the goals of creating a new site can be divided into two main categories:
I must admit that in most cases, Internet resources are created specifically for commercial purposes. Let’s look at specific examples of such goals so that everything becomes clear.
So, the commercial goal of creating a site can be:
- sale of goods and services;
- personal or political PR;
- transfer of valuable information to the target audience for the purpose of subsequent profit;
- creating a positive image for a commercial company;
- website development for customers.
As for the non-commercial goals of creating the site, among them are the creation of Internet resources for charitable organizations, as well as the creation of Internet sites designed for communication and exchange of various content and information between certain groups of users.
Definition of tasks before creating a site
First of all, it should be noted that any well-designed site is able to solve the widest range of tasks. For example:
- creating a flow of targeted visitors for your business;
- organization of effective processing of applications received from potential customers;
- increasing the recognition of the company or personal brand of the creator of the site;
- building trust from potential customers;
- providing relevant information in the most popular formats, such as text, images, as well as video and audio materials;
- giving website visitors the opportunity to download the file of interest to them, for example, a price list or presentation of a proposed product;
- automation of your business;
- and many many others.
Do you already know what tasks your site will solve? This is really important, because only on the basis of the tasks you can choose the type of site that is best suited to create your Internet resource.
CREATE A SITE NOW!CHOOSE A SITE DESIGNER
Technical aspects of creating a site
The technical aspects of creating your own site largely depend on the correct choice of the necessary tools. First of all, it is worthwhile to understand that today there are three main ways of creating a website yourself:
Let’s look at each of these methods in more detail. To begin with, which, in our opinion, is better than others for beginners.
We are convinced that if you have limited time or a desire to understand, then the best way would be to create a website in the designer. We have chosen the most effective and easy to use, that to create a site you will not need any knowledge in the field of layout, programming and web design.
So, the site designer is a specialized online service that includes ready-made graphic design options for the sites being created, as well as a convenient and intuitive user interface. Ideally, a modern website designer should allow anyone to create their own Internet resource without the need for knowledge in the field of web programming and design.
Most Popular Website Designers
- Wix is one of the most popular website constructs that allows you to quickly and easily create truly high-quality Internet resources. On our site you will find a detailed overview of this designer, as well as a step-by-step guide to working with it. Recommended!
- UKit is a constructor that allows you to create modern sites, and then successfully deal with their SEO-promotion. It has an easy to learn and intuitive user interface, and also includes an advanced analytics system. Especially for readers of our site, we have prepared a step-by-step guide on working with this constructor.
- Nethouse is a constructor that is perfect for creating business card sites, portfolio sites, online stores. It is quite simple in primary development and further use. We have prepared a detailed review of it , as well as a step-by-step guide .
- UMI is another easy to learn and use site builder. Read our detailed overview , as well as a step-by-step guide to working with it.
In addition, especially for readers of our site, we have compiled a rating of the best site designers . Be sure to pay attention to it to analyze all the possible options!
A simple example of creating a site
Let’s briefly go through the steps of creating a site in the Wix designer . It is perfect for business people who do not want to dive into the intricacies of creating sites and save them from having to make their first resource in bare HTML or to understand the features of CMS.
The process itself consists of several understandable and simple steps, which are discussed below!
Step one – register in the constructor and enter the account.
We go through a simple registration procedure by filling out these forms or simply logging in to one of the popular social networks.
Step two – choose the basic design template for the future site.
The designer provides users with a collection of more than 500 unique free templates! There is no such choice anywhere!
Your task will be to choose the most suitable template in terms of functionality and visual design, after which you can begin to configure and fill it.
Step three – we design and personalize the site.
First of all, you need to give the created resource a unique name. It is worth noting that, if necessary, the site name assigned at this step can be changed at any time.
By default, you get a third-level domain (of the form yourlogin.wix.com / yoursite ), but you can easily connect your second-level domain.
A visual editor with the simplicity of MS PowerPoint, allows you to change any element of the created site, and also without any problems add or remove a wide variety of blocks and modules.
In particular, you can:
- Add the necessary pages to the site and fill them with content .
- Photo galleries and videos .
- A variety of functional elements such as forms, buttons and menus .
- Social network buttons .
- Functionality for blogging the company .
- Implement a full online store .
- Activate SEO-tools to promote the created site.
- Add colorful favicon .
- A variety of counters and metrics to track important site parameters and characteristics.
- And many more and many different modules for different purposes.
Fourth step – final touches and launch.
- Browse the mobile version, make sure that everything suits you.
- Confirm previously entered contact details.
- Be sure to do a “ Preview ” before launching the site.
- Finally, click the Publish button to make the site you create become part of the World Wide Web and available to all users.
Of course, creating a site is a creative process and most likely you will constantly return to it and introduce new features and chips. The designer allows you to concentrate on the most important and enjoy the creation process.
As a result, you get a high-quality website with a convenient mobile version and absolutely no technical knowledge. If you still have questions about the designer, then you can find the answer to them in our detailed step-by-step instructions .CREATE A WEBSITE ON WIX!
The term CMS comes from the English expression Content Management System and is used to refer to the so-called ” content management systems ” ( site ). These same systems are often called ” engines ” for sites. Today, any CMS-system allows you to manage all the contents of the site using a simple and intuitive interface.
Naturally, the choice of a CMS system depends on the purpose of creating a specific site. Each engine for the site has its own characteristics, advantages and disadvantages. In addition, it is worth considering that all CMS systems are divided into two large groups: free and paid engines.
Top free CMS systems
- WordPress – great for creating blogs, business card sites, corporate sites. By the way, the site that you are reading now works on the basis of this particular CMS. And we have already published a guide that talks about how to create a website on WordPress .
- Joomla is another multifunctional CMS-system that allows you to create a simple business card website or corporate website, as well as a full-fledged online store. Be sure to read our guide on how to create a site on Joomla .
- InstantCms – first of all, this engine is designed to create social networks, city portals, as well as dating sites and online clubs;
- Drupal is another popular CMS-system, which is great for creating corporate sites, business card sites, as well as portfolio sites, social networks and online stores;
- OpenCart – this CMS-system is designed primarily for creating online stores. However, it is worth considering that it is easy to use, but at the same time quite complicated in terms of development. As practice shows, the development of a full-fledged online store based on this engine requires the involvement of an experienced PHP programmer.
- phpBB is a great CMS system for creating forums.
Top paid CMS systems
- “ 1C-Bitrix ” is a powerful and multifunctional site management system. It allows you to create and maintain online resources of almost any type. The key features worth noting are the simplicity of managing the created site, high performance, integration with 1C ( this is a very important point for Russian online stores ), as well as extensive mobile administration capabilities.
- UMI.CMS is another worthy representative of paid CMS systems. The motto of its developers is ” convenience for people .” Especially for this engine, 500 unique templates were created that are suitable for almost any site and at the same time provide an opportunity for refinement for each specific project. And 2500 developers will be happy to help you create a site based on UMI.CMS and “ sharpen ” it specifically for your goals.
- osCommerce is a paid CMS-system designed to create modern online stores and has rich functionality .
Especially for those who want to learn how to write the source code of the created site on their own, we have prepared step-by-step instructions for creating a simple website in HTML. Go!
Attention! If you are an absolute beginner or just do not want to dive into working with code and other technical issues, you can safely proceed to the section ” Create a site from scratch or on the site builder? “
HTML site creation
As a first example, we will create a simple HTML site that will consist of just one page. The HTML ( The HyperText Markup the Language – hypertext markup language ) – a universal language for describing web pages. Its task is to tell the browser what and how to display when the page loads in the user’s browser. Each of its tags describes a fragment of the page.
The following is the source code for the simplest HTML page :
<! DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251" /> < base href = "https: //www.internet- technologies.ru/wp-content/uploads/pages/createMySite/ " /> < title > Travel agency TurbBuro </ title > < meta name = " description " content = " Page description " /> <meta name = "keywords" content = "Keywords" /> < link rel = "stylesheet" type = "text / css" href = "style.css" media = "screen" /> </ head > < body > < div id = "page" > < header > < a href = "/" title = "" class = "logo"> < img src = "images / logo.png" alt = "Travel Agency" /> </ a > < div class = "phone" > +7 (123) 45-67-89</ div > < nav > < ul id = "top_menu " > < li >< a the href = " the index.html " > About</ a ></ li > < li ><a href = "services.html" > Our Services </ a > </ li > < li > < a the href = "contacts.html" > Contacts </ a > </ li > </ ul > </ the nav > < div class = "header_img" > < img src = "images / header_img.jpg" alt = "Travel Agency" /> </ div > </ header > <section id = "content" > < h1 >Welcome to the Travel Bureau website! </ h1 > < img src = "images / content_img.jpg" alt = "Image" class = "float-right" /> < p >Hello! We are pleased to welcome you to the site of the travel agency "Travel Bureau"! We offer our customers only the most interesting and exciting adventure tours around the world! </ p > < p >Only here you can fly to India on an elephant and plunge into the deep blue sea, holding on to the shark fin. But don’t worry - every client of our agency is fully insured and longs for adventure again and again! </ p > < p > If you have nothing to do, you truly decide to do adventure on your own, then we invite you to our company’s offices throughout the country to choose the most delicious offers. </ p > </ section > < footer > < a href = "https://www.internet-technologies.ru/" title = "Website building from A to Z" Web design from A to Z </ a > < br /> All Rights Reserved </ footer > </ div > </ old body > </ the html >
Copy this code into a new text file and save it on your computer. Name the saved file index.html . Then open this file in any browser and look at the result.
Please note that by default, any web server tries to give the browser exactly the page called index.html . Therefore, in 99% of cases, the source code of the main page of the site is saved in a file under this name and this is considered a good form.
You can download the full version of this simplest HTML site as an archive ( 10.8Mb) . After unpacking the archive, run html / index.html .
Key stages of website creation
Self-creating a site from scratch consists of three main stages:
- Creating a site layout . It is at this stage that a clear visual representation appears of what the created Internet resource will look like. Most often used is Adobe Photoshop or other raster editors.
- Site layout . At this stage, they begin layout of the site from the .psd layout , mobile adaptation and testing for correct display in various browsers.
- PHP implementation . At this stage, the site turns from static to dynamic.
Let’s deal with all these steps in more detail.
Creating a site layout
Most often, the layout ( in this case, by this word is understood as visual design ) of a site is created in programs that are commonly called graphic editors. The most popular are Adobe Photoshop and CorelDRAW . We recommend that you use Photoshop , as it is a little easier to learn and at the same time has rich features. In addition, it is what all web designers use.
Create a new document in Adobe Photoshop . Give him a name – MySite .
Choose a resolution of 1000 by 1000 pixels. It guarantees the correct display for any user, the vertical size in the future can be increased.
Choose a resolution of 72 pixels per inch and RGB color . These settings are required, as they are responsible for the correct display of the web page.
Then set the background color of the F7F7C5 in hexadecimal format or select it using the color palette.
After that, select the menu item ” View ” – ” Guides “ and activate the display of rulers and guides.
In the menu item “ View ” – “ Snap to ”, you need to check that the snap to guides and borders of the document is turned on.
Using the ” Text” tool , enter the text name of the future site, the slogan under it, as well as the contact phone number at the top right of the layout.
To the left of the logo and to the right of the contact phone number, we draw guides that will allow us to designate the frames along the width of the site.
Then, using the “ Forms ” tool , create a rectangle with rounded edges ( radius – 8 points ) and use it to designate the place for the image, which will be located in the header of the site.
Now it’s time to insert the image into the header of the site.
With the tool ” Text “ and the font Georgia , included in the standard set of operating system, the Windows , create a navigation menu and the title of the home page.
Then, using the tool ” Text “ and the font ” Arial “ , adds the text of the main page. In this case, it is best to use block text for further work with it.
For the title in the text we use a black font. For the navigation menu – white.
Moving the right border of the main text block, we insert the image into the page text (to the right of the text ).
Using the tool “ Forms ” – “ Direct ” , draw a final line under the page text.
C tool ” Text » ( Arial font ) in place copyright footer ( under the line ).
We cut the image fragments necessary for the layout of the site using the “ Cutting ” tool ( we selected the main picture in the header and the picture in the text of the page ).
As a result of the work done, we created a full site layout. If you want to make your own changes to the page layout, the PSD file can also be found in the archive .
In order to save and use the results of the work done in the form of images for the subsequent layout of the site, go to the “ File ” menu and select “ Save for Web ” . Then we adjust the quality of the output images and save them.
As a result of this, we will get many graphic fragments for our future template. In the folder where the template, the folder with images (displayed has been saved images ). We select the necessary and rename.
The page layout is created, the necessary fragments are received, you can go to the layout.
First of all, you need to create a new text file and save it under the name index.html .
The first line of this file should look like this:
<! DOCTYPE html>
It tells the browser exactly how to process the contents of the page. The following is a set of tags:
<html> < head > "Head" of the document </ head > < body > "Body" of the document </ body > </ html >
A pair of <html> … </html> tags indicates that the HTML is inside .
Inside <head> … </head> are tags that do not appear in the user’s browser window. As a rule, they begin with the word meta, and are called meta tags, but the <title> … </title> tag is displayed as the title of the browser window and is analyzed by search engines.
Next is a couple of <body> … </body> tags that enclose the contents of the page. This part, which is often called the body of the page, is displayed in the user’s browser.
It is also important to understand that there are several ways to organize content. The most popular of them are organization using blocks ( <div> … </div> ) and in the form of tables ( <table> … </table> ).
As for the format for displaying elements, it can be set either directly, using the appropriate tags, or using CSS style sheets . Moreover, it is the second method that is most preferable, since it allows you to re-apply component styles. The style sheet is set either in the inside of the <head> tag or in a separate file ( most often this file has the name style.css ), the link to which is also located inside the <head> .
In our case, the structure of the site elements is as follows:
The fundamental documents that describe all the components of a particular language used to create sites are specifications.
More detailed examination of all the basic HTML-tags, their purpose, the use of style sheets ( the CSS ), you can use the books presented in the section ” Markup Languages “ , in addition, helpful tips for organizing the content, layout, CSS are given in the articles .
Creating a site using PHP
On the HTML page created in the previous example, everything is predefined and will not be changed when accessed by users. Such pages are usually called static; for their creation, the means provided by the HTML hypertext language are quite enough.
If the information provided to users of the site changes depending on any factors or requests, they say that the web page contains dynamic content ( is dynamic ).
To create such pages, you must use web programming languages . Among them, PHP, Python, and Ruby on Rails for Unix systems are the most widespread , while Windows is characterized by the development of dynamic content using .NET tools .
In the archive we prepared there is a php folder in which the index.php file is saved . It is he who allows you to implement three pages of our test site using PHP .
PHP is the most popular web programming language for creating dynamic web pages. The main difference between a dynamic web page and a static one is that it is formed on the server, and the finished result is transmitted to the user’s browser.
In this article, we will not delve into the jungle of PHP programming, and for clarity, we will restrict ourselves to simple insertions of code fragments.
The essence of these actions is that we take out the header and footer of the site in separate files: header.php and footer.php, respectively. And then on pages with textual content, insert them into the site layout using PHP . You can do this using the code below:
<? php include ( 'templates / header.php' ); // Insert the site header ?> ... <? Php include ( 'templates / footer.php' ); // Insert the footer of the site ?>
Try running the php / index.php file in your browser . Did not work out? Of course not. After all, the browser does not know what to do with the commands that make up the PHP file ( it is also a PHP script ).
In order for any PHP script to execute successfully, it must be processed by the language interpreter. Such an interpreter is necessarily present on all web servers and allows you to process PHP code . But how to see what has changed as a result of our work?
To debug web applications and implement a full-fledged web server on computers running the Windows operating system , a free Denwer package was created ( for your convenience, it is in the archive we prepared ). It includes an Apache web server , interpreters of web programming languages such as PHP and Perl, a MySQL database , and email tools.
Installing the Denwer application suite does not require any major effort. We run the installation file, we fulfill all its requirements. Select the letter of the virtual disk for quick access to the webserver, create shortcuts. That’s all! Denwer is ready to go!
The web server that we just installed is launched by clicking on the Start Denwer shortcut ( you may have a different name for it ). After starting the web server, copy to the folder home / test1.ru / www / located on the virtual disk that appeared on the system ( usually Z ) the contents of the php folder from the archive we are working with, except for the index.html file .
After that, type test1.ru in the address bar of your browser . A familiar picture? Now, follow the links at the top of the page. Works? Fine!
Create a site from scratch or on site builder?
The key difference between creating from scratch (whether using CMS systems or source code) from site builder is that creating a site from scratch implies the ability not only to create a site that meets your specific needs, but also to manage all the features that you yourself and laid.
In turn, creating an Internet resource with the help of one or another site builder will not require special technical skills from you. Any of the above designers allows you to create a full site in just a few hours. However, the choice of designer should be taken very carefully. The choice is yours!
In the table below we tried to summarize the key advantages and disadvantages of a site from scratch VS site builder:
|Comparative characteristics||Sites created using the constructor||Sites created independently from scratch|
|Ease of creation||Simply||Complicated|
|Creation speed||Very fast||Long|
|Ability to edit source code||No||there is|
|Possibility of promotion in search engines||Possible nuances||Absolute freedom|
|Flexibility in customizing design and functionality||Limited||Not limited|
|The ability to transfer to another hosting||More often than not||there is|
What is the most preferable way to create a site?
In fact, there is no single answer to this question. It all depends on your goals and objectives. Maybe you want to learn the most popular CMS systems? Or maybe learn how to independently generate the source code of the created site? Nothing is impossible!
But if you want to create a modern and really high-quality website in an extremely short time, we recommend that you use the site builders !CREATE A SITE NOW!CHOOSE A SITE DESIGNER
Useful programs for beginners webmasters
We will list several useful programs that will greatly facilitate and speed up the process of creating a website yourself:
Notepad ++ is a text editor that allows you to create and edit the source code of the created site. Excellent replacement program “ Notepad “, part of the operating system, the Windows .
Adobe Dreamweaver – a powerful and feature-rich program for creating sites. Among other things, it includes the ability to preview the created resource.
Publication of the created site on the Internet
Suppose you have already created your first site, but what needs to be done so that any user of the World Wide Web can access it?
What is a “domain” and why is it needed
Domain is the name of the site. In addition, the term ” home n” is often understood as the address of your website on the Internet .
A great example of a domain is the name of the site you are currently on – internet-technologies.ru .
As you can see from the above example, the domain name of a site consists of two parts:
- directly the name of the site – in our case it is internet-technologies ;
- selected domain zone. In our case, the “ .ru ” domain zone was chosen . The domain zone is indicated in the address of the site after its name.
It is also worth noting that there are domains of various levels. To understand this is very simple – just look at the number of dotted parts of the site address. For example:
- internet-technologies.ru – second level domain;
- forum.internet-technologies.ru is a third level domain (it is also a subdomain).
Domain zones can be different. Most often, the choice of a domain zone depends on the country or destination of each particular site.
The most commonly used domain zones are:
- .ru – the most popular domain zone in the Russian-speaking segment of the World Wide Web;
- .biz – often the domain zone is used for business-related sites;
- .com – this domain zone is most often used for commercial and corporate sites;
- .info – in this domain zone quite often informational sites are located;
- .net is another popular domain zone suitable for Internet related projects;
- .rf – the official domain zone of the Russian Federation
Important! We strongly recommend that you do not use domains in the .РФ zone . This is due to the difficulty in promoting a site located in this domain zone.
If most of the target audience is located in Russia, we recommend registering a domain in the “ .ru ” zone .
How to choose a domain
When choosing a domain for your own site, we recommend that you follow the following principles:
- originality and ease of remembering;
- maximum length – 12 characters;
- ease of typing in Latin;
- absence of a dash in the domain name (desirable, but not necessary).
- The purity of the domain’s history and the absence of any sanctions on it from search engines. This can be verified using the whois history service .
Where can I buy a domain?
We recommend using the services of a reliable and time-tested domain name registrar – WebNames . We use it.
Among other things, the site of this registrar allows you to directly select the name (domain) for your site directly online. This is pretty simple.
To do this, just enter the desired domain name in the corresponding field and click the ” Search domain ” button .
What is hosting?
In order for the site you created to be available to all users of the World Wide Web, in addition to the domain, your Internet resource will also need hosting.
The term ” hosting ” refers to the service of placing your site on the Internet. The provision of such services is handled by a large number of companies, which are usually called ” hosters .”
You must clearly understand that all the sites that are available on the World Wide Web are located somewhere. More specifically, they ( their files ) are located on the hard drives of servers ( powerful computers ) at the disposal of host companies.
Since almost any site consists of different types of files ( databases, texts, pictures, videos ), access to them from different computers is carried out by processing a request addressed to the site, which is located on the server of the hosting company.
The cost of hosting can vary greatly depending on how large and visited the site you create. The good news is that most sites do not require truly expensive hosting.
How to choose a hosting
When choosing a hosting for the created site, we recommend that you follow the following criteria:
- Stable work . The hosting you choose should work stably 24 hours a day, 7 days a week. Otherwise, you will suffer reputational losses in the eyes of visitors, as well as lose confidence on the part of search engines. In this regard, it is worth paying special attention to such a parameter as uptime hosting. Uptime is the time during which the site is operating normally and visitors can open it in their browser without any problems. It should be as close as possible to 100%. In turn, the response time of the site demonstrates how quickly your site responds to a request from the user’s browser. The shorter the response time, the better.
- Simplicity and convenience of the user interface . Upon entering your personal account, the entire control panel should be not only accessible, but also intuitive. In particular, you should see the current balance, as well as have quick access to all the basic hosting functions.
- Professional Russian-speaking support service . Fast, qualified and native-speaking technical support is very important in the event of various malfunctions in the site and the need for their prompt elimination.
- Cost of services . This aspect is important both for beginner webmasters who have a limited budget at their disposal, as well as for owners of large-scale Internet projects that require the use of really expensive hosting.
For our part, we can recommend you such reliable and time-tested hosting providers as Beget ( for beginners and advanced webmasters ), as well as FastVPS ( for those who need high-performance hosting ).
Placement of the finished site on the server
Let’s say you have already created a website, bought a domain and hosting. What to do next?
Now you need to place all the files on our site on the server of your chosen hosting provider. There are several ways to do this. Let’s talk about them.
- This is loading the contents of your site using the HTTP protocol using the hosting control panel.
- FTP protocol using the so-called FTP client .
It is the second method that is the fastest. For this task, we recommend one of the best free FTP clients – FileZilla .
After establishing a connection with the FTP server of the hosting provider of your choice ( usually after the hosting provider pays the IP address, login and password ), the available disk space will be displayed as a logical device ( like regular computer hard drives ) on one of the two panels used programs. After that, it will remain to start the copying process and wait for it to finish.
Thus, your site will be published on the Internet and will be available to all users of the World Wide Web. At this stage, it will already be possible to type its domain name in the address bar of the browser and enjoy the result of the work done. CREATE A SITE NOW! CHOOSE A SITE DESIGNER
Answers to Common Questions
Where to start training a future webmaster (website creator)?
How to find and select specialists to create a site
Where can I get professional website development training?
Can I learn the basics of site building for free?
Can I create my own website on my own?
Is it possible to create a full site absolutely free?No you can not. Even if you develop everything yourself (from scratch or on the CMS ), you still need to buy a hosting and domain. It does not cost a lot of money, but still money.
If you take site designers, then you can create and test a site on them for free, but you can’t link your own domain name to the created resource for free.
The option with free subdomains, which is often used by website designers, or with free hosting, should not be considered as full-fledged.
Therefore, investments, albeit minimal, will be required. But do not be upset – it usually costs like a couple of cups of coffee a month.
Can I make money on website development?CREATE YOUR SITE FOR FREE!
Instead of a conclusion
Thank you for reading this article. We will be very happy if our recommendations help you. In addition, we thank you for the likes and shares. Stay with us and you will find out many more interesting things!
Maybe you have some questions about creating sites? Ask them in the comments and we will try to help you!