How to create own website step by step instructions

How to create a website for free and on your own from scratch without technical knowledge? What is "domain" and "hosting" and why are they needed?
What is an "HTML site", "CMS" and "website builder" and what are their key differences from each other?

If the above questions are close to you, please make yourself comfortable, and we will try to answer them in detail in this manual. We understand the importance because having learned how to create modern and functional websites, you can build an online representation for yourself or your company and offer similar services to other interested people. Today it is one of the most promising and stable types of internet earnings.

Content

Technical aspects of website creation

The technical aspects of creating your own website largely depend on the correct choice of the necessary tools. First of all, you should understand that today there are three main ways to create a website on your own:

  • using website builders ;
  • using CMS systems ;
  • by self- writing the source code of the site.

Let’s take a closer look at each of these methods. Let’s start with the one that, in our opinion, is best suited for beginners.

Website builders

We are convinced that if you have a limited time or desire to figure it out, then the best way would be to create a website in a constructor. We have chosen the most effective and easy-to-use ones, which do not require any knowledge in the field of layout, programming and web design to create a website.

So, a website builder is a specialized online service that includes ready-made graphic design options for the sites being created, as well as having a convenient and intuitive user interface.
Ideally, a modern website builder should allow anyone to create their own internet resource without the need for knowledge of web programming and design.

Most popular website builders

  • Wix is one of the most popular website builders that allows you to quickly and easily create really high quality Internet resources. On our site you will find a detailed overview of this builder, as well as a step-by-step guide to working with it. Recommended!
  • UKit is a website builder that allows you to create modern websites and then successfully engage in SEO promotion. It has an easy to learn and intuitive user interface and also includes an advanced analytics system. Especially for the readers of our site, we have prepared a step-by-step guide on how to work with this constructor.
  • Nethouse is a builder that is perfect for creating business card sites, portfolio sites, online stores. It is quite simple in the initial development and further use. We have prepared a detailed overview of it , as well as a step-by-step guide .
  • UMI is another easy to learn and use website builder. Read our in- depth review as well as a step-by-step guide to working with it.

In addition, especially for the readers of our site, we have compiled a rating of the best website builders . Be sure to pay attention to it in order to analyze all possible options!

A simple example of creating a website

Let’s take a quick look at the steps of creating a website in the Wix Builder . It is perfect for business people who do not want to dive into the intricacies of creating sites and relieve them of the need to make their first resource on ” bare ” HTML or deal with the peculiarities of the CMS.

The process itself consists of several clear and simple steps, which are just below!

Step one – registering in the constructor and logging into your account.
We go through a simple registration procedure by filling out the form data or simply logging into one of the popular social networks.

Step two – choose a basic design template for the future site.
The constructor 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 start setting up and filling it.

Step three – design and personalize the site.
First of all, you need to give the created resource a unique name. It should be noted that, if necessary, the site name assigned at this step can be changed at any time.
By default, you get a third-level domain (like https://users.wix.com/signin ), but you can easily connect your second-level domain.

Visual editor with the simplicity of MS PowerPoint, allows you to change any element of the site being created, as well as add or remove a wide variety of blocks and modules without any problems.

In particular, you can:

  • Add the necessary pages to the site and fill them with content .
  • Photo galleries and videos .
  • Various functional elements such as forms, buttons and menus .
  • Social media buttons .
  • Functionality for blogging of the company .
  • Implement a full-fledged online store .
  • Activate SEO tools to promote your website.
  • Add colorful favicon .
  • Various counters and metrics to track important parameters and characteristics of the site.
  • And there are many and many different modules for different purposes.

Step four – finishing touches and launch.

  • Check out the mobile version, make sure everything suits you.
  • Confirm the previously entered contact information.
  • Be sure to do ” Preview ” before launching the site.
  • Finally, click the ” Publish ” button to make the site you created becomes part of the world wide web and is available to all users.
wix.com home page

Of course, creating a website is a creative process and most likely you will constantly come back to it and introduce new features and chips. The constructor allows you to concentrate on the most important things and enjoy the process of creation.

As a result, you get a high-quality website with a convenient mobile version and absolutely no technical knowledge.

CMS systems

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 systems are often called ” engines ” for sites. Today, any CMS system allows you to manage all site content using a simple and intuitive interface.

It is quite natural that the choice of a CMS system depends on the purpose of creating a particular site. Each site engine has its own characteristics, advantages and disadvantages. In addition, it should be borne in mind that all CMS systems are divided into two large groups: free and paid engines.

Top free CMS systems

  • WordPress is 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 very CMS. And we have already published a guide that explains how to create a WordPress website .
  • Joomla is another multifunctional CMS system that allows you to create both a simple business card site or corporate site, and a full-fledged online store. Be sure to read our guide on how to create a Joomla website .
  • 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 that is great for creating corporate sites, business card sites, as well as portfolio sites, social networks and online stores;
  • OpenCart – this CMS-system is intended primarily for creating online stores. At the same time, it should be borne in mind that it is easy to use, but at the same time quite complex 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 “ – a powerful and feature-rich Content Management System. It allows you to create and maintain Internet resources of almost any type. The key features are the ease of managing the created website, high performance, integration with 1 C ( 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 have been created that are suitable for almost any site and at the same time provide an opportunity for revision for each specific project. And 2500 developers will be happy to help you create a site based on UMI.CMS and ” sharpen ” it exactly for your purposes.
  • osCommerce is a paid CMS system designed to create modern online stores and has the richest functionality .
About CMS

Key stages of website creation

Self-creation of a website from scratch consists of three main stages:

  • Website layout creation . It is at this stage that a clear visual representation of how the created Internet resource will look like appears. Most often, Adobe Photoshop or other bitmap editors are used.
  • Website layout . At this stage, they start coding 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 take a closer look at all these stages.

Website layout creation

Most often, the layout ( in this case, this word should be understood as the visual design ) of the site is created in programs that are usually called graphic editors. The most popular are Adobe Photoshop and CorelDRAW . We recommend using Photoshop , as it is a little easier to learn and at the same time has the richest possibilities. Plus, this is what all web designers use.

Create a new document in Adobe Photoshop . We give it a name – MySite .

We choose a resolution of 1000 by 1000 pixels. It guarantees correct display for any user, the vertical size can be increased in the future.

Choose 72 ppi and RGB color . We must make these settings, since they are responsible for the correct display of the web page.

Then set the background color of F7F7C5 to hexadecimal or select it using the color picker.

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 snapping to guides and document boundaries is enabled.

Solved: Paint bucket tool is missing after recent update P... - Adobe  Support Community - 7901675

Using the ” Text” tool , enter the text name of the future site, the slogan below it, as well as the contact phone number at the top right of the layout.

Learn how to use the text tool in a few quick steps

To the left of the logo and to the right of the contact phone number, draw guides that will allow us to mark the frames along the width of the site.

Then, using the ” Shapes “ tool , create a rectangle with rounded edges ( radius – 8 points ) and use it to designate a place for the image, which will be located in the header of the site.

How to Fill a shape with a photo in Photoshop, 3 ways. - PhotoshopCAFE

Now it’s time to insert the image into the site header.

Solved: hassle with photoshop batch process - Adobe Support Community -  9724926

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 subsequent work with it.

For the title in the text, use a black font. For the navigation menu, it is white.

Arabic and Hebrew type in Photoshop

By moving the right border of the main text block, insert the image into the page text (to the right of the text ).

Using the tool ” Shapes “ – ” Straight “ , draw a final line under the text of the page.

Using the ” Type “ tool ( font Arial ), place the copyright in the footer of the page ( below the line ).

We cut the fragments of images necessary for layout of the site using the ” Cutting “ tool ( we have selected the main picture in the header and the picture in the text of the page ).

As a result of the work done, we have created a full-fledged website layout. In case you would like 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 the ” Save for Web “ item . Then we adjust the quality of the output images and save them.

As a result, we will get a lot of graphic fragments for our future template. In the folder where the template, the folder with images (displayed has been saved images ). We select the ones we need and rename them.

The page layout is created, the necessary fragments are received, you can proceed to the layout.

Website 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 will tell the browser exactly how to handle the page content. This is followed by a set of tags:

<html> < head > "Head" of the document </ head > < body > "Body" of the document </ body > </ html >

A couple of <html> … </html> tags tell you what HTML is inside .

Inside the <head> … </head> tags are located 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 pair of <body> … </body> tags that enclose the page content. It is this part, which is often called the body of the page, that is displayed in the user’s browser.

It’s also important to understand that there are several ways to organize your content. The most popular of them are organization using blocks ( <div>… </div> ) and in the form of tables ( <table>… </table> ).

As for the display format of elements, it can be set either directly, using the appropriate tags, or using CSS style sheets . In this case, it is the second method that is most preferable, since it allows you to reapply component styles. The style sheet is specified either inside the <head> tag , or in a separate file ( most often this file is named style.css ), the link to which is also located inside the <head> .

In our case, the structure of the site elements looks like this:

Build HTML and JavaScript apps using Rider | The .NET Tools Blog

The fundamental documents, which describe all the components of a particular language used in the creation of sites, are specifications.

You can learn more about all the main HTML tags, their purpose, and the principles of using style sheets ( CSS ) in our section of articles: ” Site layout “ .

Building a website with PHP

In the HTML page created in the previous example, everything is predefined and will not change when accessed by users. Such pages are usually called static, for their creation there are quite enough tools provided by the HTML hypertext language.

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 need to use web programming languages . Among them, the most widely used are PHP, Python and Ruby on Rails for Unix systems , while Windows is characterized by dynamic content development using .NET tools .

This is all about the server side, and JavaScript is most often used for client-side programming .

In the archive we have prepared, there is a php folder in which the index.php file is saved . It is he who allows us 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 generated on the server, and the finished result is sent to the user’s browser.

Within the framework of this article, we will not go deep into the jungle of PHP programming and, for clarity, we will limit ourselves to simple insertion of code fragments.

The essence of these actions is that we move the header and footer of the site into separate files: header.php and footer.php, respectively. And then on pages with text content, we insert them into the site layout using PHP . This can be done using the code below:

<? php include ( 'templates / header.php' ); // Insert site header ?> 
 ...
 <? Php include ( 'templates / footer.php' ); // Insert a site footer ?> 

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 ( aka 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 can we 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 present in the archive we have prepared ). It includes the Apache web server , interpreters for web programming languages ​​such as PHP and Perl, a MySQL database , and email tools.

Installing the Denwer app suite does not require any major effort. We launch the installation file, fulfill all its requirements. We select the letter of the virtual disk for quick access to the web server, 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 ( it may be called differently for you ). After starting the web server, copy the contents of the php folder from the archive we are working with, except for the index.html file, to the home / test1.ru / www / folder located on the virtual disk that appears in the system ( usually Z ) .

After that, type test1.ru in the address bar of your browser . Sound familiar? Now follow the links at the top of the page. Working? Fine!

Basic Website Design (HTML Elements) - Techie Blog

Create a website from scratch or on a website builder?

The key difference between creating from scratch (whether using CMS systems or source code) from a website builder is that creating a website from scratch implies the ability not only to create a website that meets exactly your needs, but also to manage all the possibilities that you yourself and laid.

In turn, creating an Internet resource using one or another website builder does not require you to have special technical skills. Any of the above builders allows you to create a full-fledged website in just a few hours. However, the choice of a designer must be taken very carefully. The choice is yours!

In the table below, we have tried to summarize the key advantages and disadvantages of a site from scratch VS Site Builder:

Comparative characteristicsWebsites created with the designerWebsites created by yourself from scratch
Ease of creationJustHard
Creation speedVery fastLong
Source code editingNotthere is
Possibility of promotion in search enginesNuances are possibleAbsolute freedom
Flexibility in customizing design and functionalityLimitedNot limited
Ability to transfer to another hostingMore often notthere is

What is the most preferable way to create a website?

In fact, there is no single answer to this question. It all depends on your goals and objectives. Maybe you want to explore the most popular CMS systems? Or maybe learn how to independently generate the source code of the site being created? Nothing is impossible!

But if you want to create a modern and really high-quality website in the shortest possible time, we recommend using the website builders !

Useful programs for novice 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 site you are creating. Excellent replacement program “ Notepad “, part of the operating system, the Windows .

Adobe Dreamweaver is a powerful and feature-rich website creation program. Among other things, it includes the ability to preview the created resource.

NetBeans is an application development environment that allows you to effectively work with markup and Web programming languages ​​such as HTML , CSS , JavaScript, and PHP .

Publishing the created site on the Internet

Let’s say you have already created your first site, but what needs to be done so that any user of the World Wide Web can visit it?

What is a “domain” and why is it needed

Domain is the name of the site. In addition, the term ” house n” is often understood as the address of your site on the Internet .

An excellent example of a domain would be the name of the site you are currently visiting – internet-technologies.ru .

As you can see from the above example, the site’s domain name has two parts:

  • directly the name of the site – in our case, it is internet-technologies ;
  • of the 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. It is very easy to understand this – just look at the number of parts of the site address separated by a dot. For instance:

  • internet-technologies.ru – second level domain;
  • forum.internet-technologies.ru is a third-level domain (aka subdomain).

Domain zones can be different. Most often, the choice of a domain zone depends on the country or the purpose of each specific site.

The most commonly used domain zones are:

  • .ru is the most popular domain zone within the Russian-language segment of the World Wide Web;
  • .biz – often the domain zone is used for business sites;
  • .com – this domain zone is most often used for commercial and corporate websites;
  • .info – information sites are often located in this domain zone
  • .net is another popular domain zone suitable for Internet related projects;
  • .рф – the official domain zone of the Russian Federation

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 website, we recommend that you be guided by the following principles:

  • originality and ease of memorization;
  • the maximum length is 12 characters;
  • ease of typing in Latin;
  • the absence of a dash in the domain name (desirable but not required).
  • The purity of the domain history and the absence of any sanctions on it from the search engines. This can be checked 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 . This is what we use.

Among other things, the site of this registrar allows you to choose a name (domain) for your site directly online. This is pretty easy to do.

To do this, just enter the desired domain name in the appropriate field and click the ” Search domain ” button .

Webnames.ru Review 2021 – Is It Worth It?

What is “hosting”

In order for the site you have created to become 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. A large number of companies are engaged in the provision of such services, which are usually called " hosters ".

You must clearly understand that all 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 hosting 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.

Hosting costs can vary greatly depending on how large and visited site you create. The good news is that most sites don’t need really expensive hosting.

How to choose a hosting

When choosing a hosting for a website being created, we recommend that you be guided by the following criteria:

  • Stable work . The hosting you choose should work stably 24 hours a day, 7 days a week. Otherwise, you will suffer reputation losses in the eyes of visitors, as well as lose trust from search engines. In this regard, it is worth paying special attention to such a parameter as hosting uptime. 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 to 100% as possible. In turn, the site response time 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 . When entering your personal account, the entire control panel should be not only accessible, but also intuitive. In particular, you should be able to see the current balance and also have quick access to all the main hosting functions.
  • Professional Russian-speaking support service . Fast, qualified and speaking in your native language, technical support is very important in the event of various failures in the site and the need to quickly eliminate them.
  • Service cost . This aspect is important both for novice webmasters who have a limited budget at their disposal, and 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 of our site on the server of your chosen hosting provider.

 There are several ways to do this at once. Let’s talk about them.

  1. This is uploading your website content over HTTP using your hosting control panel.
  2. According to the protocol FTP with the help of the so-called FTP-client .

The second method 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 your chosen hosting provider ( usually, after paying for hosting, the provider transmits the IP address, login and password ), the available disk space will be displayed as a logical device ( like ordinary computer hard drives ) on one of the two panels used programs. After that, it remains 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 his domain name in the address bar of the browser and admire the result of the work done.

conclusion

Thank you for reading this article. We will be very glad if our recommendations will help you. Also thank you for the likes and shares. Stay tuned and you will find out a lot more interesting things!

Maybe you have any questions about website creation? Ask them in the comments and we will try to help you.

2 thoughts on “How to create own website step by step instructions”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top