how to build a website with html without any technical skills

how to build a website with html without any technical skills

07

Sep

how to build a website with html without any technical skills

Friday September 7, 2018 Gilblas Ngunte Possi
In this article, I will teach you how to build a website with HTML without technical skills. Additionally, I will provide the first 10 readers access on my server to host their newly created website. For this article, I will try to be as explicit as possible but feel free to contact us for further question.  In order to build your website, you will need a code editor (compatible with your Operating System), an HTML template and little attention to details. My Case study is based on the Windows Operating System.

1. Download a code editor Notepad++

Visit the official website of Notepad++ and click on the button download. Once, you succeeded in downloading the setup, you can open the file to install. The installation of NotePad++ is very simple. In fact, when you will click on the setup file, you will have to select your language and just follow the instructions. notepad  

2. Download an HTML template. 

There are many free responsive designs available online. Even though you can use that to build a professional website, I will recommend buying a template for more serious projects. For the article sake, we will download a free template currently available on Start bootstrap. The template that we are going to use is called creative and you can get it here. Creative Once you have downloaded the template to your computer, you can extract the zip file. You will, for example, realized that the extracted files will be as in the picture below. file structure

3. Edit the  index.html to build  your website with HTML

Open the file index.html with Notepad++ you install in step 1.  In order to do that, you can right click on the file and look for open with option. And once, you do, you will surely have the Notepad++ among your options. Basically, HTML files have two main parts, the head, and the body.
  • The head contains metadata such as the meta title, the meta descriptions, the stylesheet link, and scripts ((sometimes there are at the bottom of the code). Parts of metadata are information that you find when you do a search on Google. For example, let assume that you search for the "food industry" on Google. On the displayed results, you can see "Food Industry - Wikipedia", a URL to the website and a description (See picture below).
Build a website with html
  • The body is where you put all the information that appears on the website. For instance, in the case of this article, it is can be what you see when you click on this demo link. You subdivide the body of a website subparts such as Footer or side.
In order to edit the HTML file, what you should know for now is that the contents appearing on the website are within HTML tags. (To learn more about HTML tags and probably other web languages, I will strongly recommend W3Schools). HTML tags are usually in the following : [sourcecode]<element> your text goes here ... </element>[/sourcecode] . You can find the list of various HTML tags and an explanation on how to use in the website of W3Schools. The whole idea behind creating your website will be to edit the template. In fact, after replacing the content within the tags by yours, half of the job will be done. However, if you want to do some adjustments, or add more features, you might a little bit of HTML skills.

A little trick for beginners that want to build a website with HTML

My Little secret for beginners that are using Notepad++ to build a website with HTML is to pay attention to the color code. In fact, information like texts is in black. So, go ahead and edit the text in black and replace by your content. For example, if you open the index.html and want to edit information within the header tag, you will get this. [sourcecode] <header class="masthead text-center text-white d-flex"> <div class="container my-auto"> <div class="row"> <div class="col-lg-10 mx-auto"> <h1 class="text-uppercase"> <strong>Your Favorite Source of Free Bootstrap Themes</strong> </h1> <hr> </div> <div class="col-lg-8 mx-auto"> Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached! <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a> </div> </div> </div> </header> [/sourcecode] The code above will be : [sourcecode] <header class="masthead text-center text-white d-flex"> <div class="container my-auto"> <div class="row"> <div class="col-lg-10 mx-auto"> <h1 class="text-uppercase"> <strong>Welcome Prositeweb Inc.</strong> </h1> <hr> </div> <div class="col-lg-8 mx-auto"> Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached! <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a> </div> </div> </div> </header> [/sourcecode] .That is if you want to replace "Your Favorite Source of Free Bootstrap Themes" with "Welcome Prositeweb Inc.". After editing the information in black, the next steps are links and images. For instance, images are within the img tag. For example in the template, if you see something like this: [sourcecode] <img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="my image"> [/sourcecode] that means, the image 1.jpg is called from the directory img/portfolio/thumbnails/. If you look closely, you will an element call alt within the img tag. The alt attribute represents the alternative name for your image. Note that alt is really important for SEO. As for the links, there are within the anchor attribute. For instance, if you see something like this : [sourcecode] <a href="about.html">About</a> [/sourcecode] that means you have a link pointing to the page about.html. In the case of this template, there are few links pointing outside the page. That is because the template is only one page. The "a" tag will then be used to redirect to various locations of the same page. The article is a little bit too long. However, if you read carefully, you will be about to build your first website.

4. Publishing your website on the web

Once you finish editing your index.html file and sale,  you can view it on any browser. The only thing you will need to do is to double click on the index.html file. You can now see your newly created website. Your website is surely ready, but you will need to upload your file on a server. If you need help or an article about how that is done, please contact us. To thanks for being part of our network, we want to give an opportunity to the 10 first reader to use our tutorial to build a website. Please send us an email and we will give you space to our server. That offer will help you to publish your website. Moreover, it will be accessible on the world wide web.  
Stay Updated

Get the latest updates and offers.