Web design DIY: do it yourself. Professional, easy and FREE

More than a tutorial this is a copy and paste ready to use website. Actually it is not a tutorial. Inside the code there are comments and you can start acting directly. Learning while playing. Get your website ready before learning. It is extremely concise.

• How can you create a website for free?
  Well we don't create it, you will do it by yourself
• How do I make my own website?
  Following this website example and asking for support

The web pages of this website are a mix of html/php/css without database. A basic knowledge of the HTML language can help in this do it yourself website.

Don’t you know HTML?
Don’t worry, just copy and paste! Yes you can do it anyway.


Unzip the content and place the folder where you want in your computer.
Open the folder and you will find these files:

• index.php
• menu.php
• services.php
• contacts.php
• aboutus.php
• privacy.php
• css.css

Fast way: edit the files! Note: the pages index, menu, services, contacts, about us, privacy all have the same comments. Maybe is boring but it helps to easier locate an area in the HTML code.

Gradual way: learn how it works
Starting with the index (the home page MUST be called index) you have to edit the code.
To edit the code you can use any HTML editor or also Notepad but I do suggest you to download and install Notepad++, it will give you a more clear vision of what you are doing. You can download (it is FREE) here.

If you are using Apple computer try Atom instead because Notepad++ does not run on Apple devices.

To visually see the result of a php file in a computer that is not a server you have to have the browser Firefox installed, it is also FREE. Download here in case you don’t have it yet.

Now right click the index.php file and choose /open with/Firefox
You will see in your browser the home page of this do it yourself website (but you will not see the menu till you will upload it in a PHP hosting).
Ok now again right click the index.php file and choose /Edit with notepad++ or /open with/Notepad++
The code will appear:


In Search/find write “Try This” (see image below) click "find next" so you will instantly locate that text. Change the text “try this” with “whatever you like”.


Save and reload the browser (Firefox). You will see that the text try this is now your new text.

Now you are 99% done with the knowledge of HTML/PHP . Oh, I forgot: to go down one line in html insert this syntax:

<br>

and the

<a href="here-the-name-of-the-file-where-the-link-point-to">link</a>

is the link. The

<p></p>

is a paragraph
After read all this very page follow the comments that you will find in the code of the files that you downloaded and you will understand all. There are many other HTML syntax. If you want to learn more about the syntax the best place is here, if necessary.


Each pages of this website is in reality composed by three pages: the page, the css.css style and the menu.php.
Each page has an header and a footer wide like the whole browser and a main part with a maximum width:


You can copy a page, change the name and you will have a new page (for example the pricing.php page). Then add the link for that new page in the menu.php file (read the comment in the file menu.php to understand how to do it).

We use some special font to prink the website.
Fonts on website pages are completely a different story compared to the fonts you use in any other work: in Word, Photoshop or any other program you can choose the font you like or download a particular font from websites like websiteplanet.com and other.
Once you choose a font for your website, for example "Cambria", this font will not show up if, in the computer of the visitor (or his smartphone), there will be no "Cambria" font installed.
So, if you use Arial or Times New Roman you are sure the text will be rendered as you desire but when you use less common fonts the results are unpredictable.
As a consequence you have to use online fonts. The visitor's browser will download the font and render it on your page.
Choose the font that you prefer in Google font. But choose only with a fast download (check the size of the font file itself, usually .woff or .woff2)

Keeping the menu’ as a separate file will help you in adding pages: you will not be forced to edit the menu’ in each page as it will be common for all the page. Just modify the menu.php
Idem for the CSS style: you don’t need to change it in all files. If you want, for example, change the color or font of texts, just modify the css.css file.
Following this concept in future you can create more common part in each page like the footer for example or other section.
The style (colors, font style, property of the page and sections) as above just said, are defined by the CSS code in the css.css file that is recalled by a link in the head part of the page. Don't worry, also this has instruction in the comments. You can edit the CSS in the css.css. Just try it, it will be easier than you think, there are also the comments that will help you.
In short:
The webpage is divided in areas. Each area has a different style class. The class property is in the css.css file. The areas have a start and an end point:
The website is responsive and can fit any screen of any device. As there are many way to use html/php/css any of the techniques used in this website example are debatable but this website is also really fast (if you will use optimized images only). In Google PageSpeed Insights perform at over 90/100! You can try: copy and paste the demo URL ( https://webdee-seoservice.com/website-do-it-yourself/index.php ) in Google PageSpeed Insights.
To optimize the pictures you should use an image editor with the “save for web” function. Save in .jpg at 39% quality and progressive. And also keep on resizing your new image with the same size of each images that we use in this example. The website is about website do it yourself but you can change it to use for anything you like. Just change the content (text and pictures).


To let your website browsable from everybody you need an internet domain name and a hosting. We suggest you to buy it from hosting-international.com but any decent Linux hosting with cPanel will work as well (remember: PHP hosting).
To publish just upload your files in the public_html section of your hosting and it will be online. To upload you can use the file manager present in the control panel of your hosting or use the free Filezilla ftp program.

Blog

A little tip to create a blog starting with the above DIY website template. To better understand this suggestion I suppose that you already read this webpage from the beginning.

Simply insert a disqus.com area everywhere in the page or create a new blank page that contains only the disqus.com frame.
Obviously create an account in disqus.com first. You will be able to see comments, moderate, delete the comments so your DIY website will became a blog.
Of course there are other platforms similar to disqus.com available in internet.
This idea about creating a blog is about NOT creating a blog but add a comment area to your website. The result is the same. People to leave the comments need to register in advance, not with you but with disqus.com and probably many people are already member of it. And to simplify the signup process they can even log in with Facebook, Twitter and Google.

Contact us for help: helphelphelp@webdee-seoservice.com