How to create a website with free hosting and domain

Hosting is a service for providing hardware and system resources for hosting a website on the Internet. Most often, it involves a monthly payment, and even if you find hosting without a rent, it is likely to be unreliable. Despite all this, it is possible to create a website with free and powerful hosting. In addition, you can get a domain in addition.

How to do this – I will tell in today’s article.

Where to find free hosting

Usually hosting providers provide free access for a certain time to test the features. These days it is possible to host your website with a connected domain. Only in such cases can we talk about hosting without payment. There is no other way, because even theoretically it is impossible to get free resources, since the hardware, access to a network channel, rent and purchase of premises, its equipment and re-equipment cost a lot of money.

However, not everything is so sad: for the purchase of hosting, some providers give pleasant bonuses. For example, on Timeweb you can pay for hosting for a year at a discount and get a domain in the .ru, .rf, .host, .website, .space, .site, .online, .fun zones as a gift. The bonus can be used both to purchase a new domain and to renew an existing one in the .ru, .rf zones.

Also, Timeweb is now actively advertising its partner – the Craftum website builder , which allows you to create websites without the involvement of programmers. We will talk further about how to use it and attach a free domain to it.

How to create a website yourself – step by step instructions

All new Craftum users have full access to hosting and the constructor for 10 days. This is what I talked about above – hosting providers provide free access to their services for a few days.

The constructor itself is paid, and the monthly fee is 197 rubles. If you make a one-time payment for the whole year, then you will receive a free domain from the zones that I mentioned above as a gift. Thus, you can launch your site on a free test account, and then receive a domain for it as a gift with the appropriate payment.

It is also worth noting that Craftum is not just a constructor that allows you to create template sites. With it, you can achieve the results that the development team achieves. All this thanks to the “Design block” function, which allows you to create sites with a unique design. If in templates we are limited in actions, then in such a block everything is allowed – you can move elements as you like. In addition to this, you can add a unique HTML code and make the functionality of the resource even richer.

Let’s see how it all works:

1. Open the official Craftum website  and click on “Create a website for free”.
2. In the window that appears, enter the name and mailing address to which the login information will be sent. Then click “Create a website”.
3. Thus, we immediately get to the section where you can select a template. This means that free access for 10 days is already activated.
4. Let’s move on to creating a site – for this we can use either one of the templates or a blank page. The difference is that in the template the site is already ready, and you only need to remake it for yourself, and on an empty page you need to create everything from scratch. I’ll show you how to make a web page based on a template with the addition of a design block. After reading the instructions, you will be able to work both in the template and on a blank page.
5. For example, let’s take the Animal Grooming template, which is located in the Animals section. To start editing it, click on the “Select Template” button.
6. We’ll start by editing the first screen, and then I’ll show you how to work in the design block. First of all, we will change the title and subtitle – for this, click on the original title and enter your data. 
7. In the next step, let’s edit the text a bit – change the font and size. First, for this you need to go to the block settings, which are opened through the button in the upper left corner.
8. Next, go to the “Design” tab and in the “Title” block set, for example, the following parameters: font – Gilroy, weight – bold, line spacing – 120%, font size – 55px, indent from the subtitle – 30px.
9. We will also edit the subtitle – we will make the font Open Sans, the weight is normal, the font size is 18px, the line spacing is 160%. Note that I have chosen a different font – now I will always use it in the content, and the heading font in all other headings. This should be followed so that the site looks in the same style. Otherwise, it may turn out to be a mess, and then the user will most likely leave without scrolling through even half of the site.
10. Now let’s change the background image – for this we will stay in the same “Design” tab, but go to the “Block” section. At the bottom, click on the “Settings” button.
11. In the window that appears, we can add both our own photo and select an option from the Craftum library. For example, let’s upload our own photo – go to the “Photo” tab and delete the old background.
12. You can find high-quality and free photos on the Unsplash photo stock. I will also upload a photo from there (here is the  link if needed). Then just add an image to the empty field and click on “Use in block” at the bottom. Please note that there are also color filters here – you can play around with them to achieve the best result.
13. Now let’s edit the form – first we’ll work on its card. Let’s change the color, for example, to beige. You can do this in the “Design” -> “Card” -> “Background Color” tab. I also want to change the rounding of the corners, which is done at the bottom of the block.
14. It remains to change the font of the form and edit the button a little. To do this, in the same section, open the “Form” block and go to editing the “Fields”.
15. Install the font that we use in the content part, that is, Open Sans. Let’s give it a size of 16px and be done with it.
16. We will do the same with the button – we will specify the Open Sans font for it with a size of 16px. Also change the color to orange, make it rounded and remove the border.
17. Then we will set up the form itself – you can do this in the block settings in the corresponding tab. Let’s make it so that after submitting the form a message is displayed, and the application itself goes to our mail.
18. I got this first screen:
19. If you sit longer and experiment, you can get a more interesting result. Now I want to talk about a special function that I talked about earlier – the design block. To add it, you need to click on the plus sign between any two blocks. Then, in the window that appears, scroll to the very bottom and select “Design Block”.
20. As a result, we immediately get into block editing:
21. Let’s talk about the advantages of our company in this block. First of all, we need to delete all the content except for the text, since we still need it. Select all blocks and click on the “Delete” button.
22. Let’s also get rid of the background – to do this, open the menu through the button in the upper left corner and in the “Background” section, click on the cross.
23. Thus, the entire background becomes white, due to which the text is not visible. To fix this, you just need to change the text color to a darker one. First, select it in the “Layers” tab.
24. Now in the settings change the color to black.
25. Let’s also turn on the grid so that we can easily align the content. You should stick to the grid not only for this reason, but also because most often the content on all sites is located in the center – this allows users to conveniently interact with the site and focus on one area. The grid itself is turned on in the upper right corner:
26. Done, you can proceed to editing the content. Let’s work with the text first. Let’s rename the title as we did before, and do the same with the subtitle. Align them to the center and place them at the top of the block.
27. Now let’s add benefits – make them from plain text. To add it, click in the upper left corner on the button in the form of a plus sign and use the “Text” element.
28. Let’s add one more text in the same way so that we have a heading-subheading combination. Substituting my content, I get this:
29. For now, let’s leave one advantage. When we bring it to a normal form, we simply duplicate it 3 times and enter other data. All element settings in the design block are changed through the menu that we already opened when we changed the text color. Let’s go to it again, but first select the desired object. First you need to make sure that the title font is the same as on the first screen, that is, Gilroy. Let it be 55px in size.
30. Let’s do the same with the subheading – set the Open Sans content font for it with a size of 18px with a line spacing of 160%. Let’s also reduce the width of the subhead a bit so it’s 2 lines long. To do this, click on it and drag the right or left side in the opposite direction.
31. I will work on the benefits block and then duplicate it and change the content. For the headings, I’ll set the font to Open Sans with bold weight and size 18px. I will make the rest of the text the same font at 16px, line spacing 160% and normal saturation. As a result, I will get the following:
32. In conclusion, let’s reduce the height of the block a little, since we have a large “hole” at the bottom. You can do this through “Settings” -> “Block Height”.
33. This concludes my editing of the design block. If necessary, you can add photos, additional objects, videos, buttons, and unique HTML code for advanced features. I would like to draw your attention to the fact that the entire block does not automatically adapt to mobile devices, as happens with template blocks. Here you will need to configure everything yourself – this is done through the top buttons for switching screens.
34. As soon as editing the block is completed, you need to click on the “Close” button in the upper right corner.
35. This is how, block by block, the site is created in the Craftum constructor. If you need to add a new block from the template library, then this can always be done through the button that appears when you hover between the blocks. If a block needs to be duplicated, hidden, moved or deleted, then for this you need to move the mouse cursor over this block and use the desired button in the upper right corner.
36. That’s all, it remains only to publish the site. This can be done through a special button at the top of the constructor.

After publishing, the site is automatically assigned a test domain name from Timeweb. You can always change it to your own – to do this, write to the constructor’s chat, where they will tell you how to register a domain.

Do not forget that with a one-time payment for a year you will receive a free domain in the .ru, .rf, .host, .website, .space, .site, .online, .fun zones. This will be relevant if you are going to promote your site and want to regularly receive customers from it. Thus, you will have both a paid account and a free domain.

That’s all for me, thank you for your attention. I hope that you managed to create a cool site that will be useful. Good luck 🙂