Here is a Super Page which you will only learn about when you have made a website and many SEO people are emailing you to pay them money for them to get you to number one on Google rankings.
How everybody can be number one escapes one. We hope to show you how to do all this for yourself on this Do it Yourself guide.
You can go to get your domain and tools used to design your site parts of which we will be refering back to:
We will show you how to make a website without even spending a penny. Firstly we have to introduce you on how over 95% of the web is based on Linux. It is secure and protected by the world
community. You probably use Windows 10 arguably the worlds worst operating system and extremely infectious. You can of course continue to wait a half hour for updates at times and pass infections even to
your new website but we hope you will take our advise and dual boot with Windows 12 Lite a Linux fast operating system.
Then you will see you no longer need to pay for any more programs and can make your site for free, You can download for free Windows 12 Lite here
and there is a Youtube installation video you should first watch here
It also has a tutorial on Gimp which you will need very often to make image editing. Gimp is much better than Photoshop for this and is free. You will find it on your Windows 12 Lite desktop just search Gimp on
the Menu on the left bottom of the desktop panel. Also you can fetch it up with the Windows Key.
Ideally to have your own website on your machine you need a Desktop. You could use a laptop but that would not be very practical as if you are in a tunnel your website would disappear and you may just lose a sale if you are taking payments through a Shopping Cart.
If you want to buy a desktop then we have a ready made desktop with Website and Shopping cart ready to go for £245 with Wireless Keyboard and Mouse.
It has the site Windows12shop.com on and all you need to do is change all the pages to suit you then look at your site with your ip address. You can find your ip address at Of course giving out an ip address for your site is not done and you will need a domain name that will cost you about £6 a year. Free .co.uk domains are available at Fasthosts.co.uk. You can see it working if you go to windows12shop.com if you do not see it maybe down as it is hosted on a machine and the dns keeps moving. This happens if you have a router that has no fixed ip address. Try it and see if the site is visible. If it is not then please let us know and we will set the DNS. The DNS is being set on Fasthosts.co.uk. You can also have automatic DNS with other hosting providers. With the advent of 5G routers that use a mobile sim maybe no ip address is available so you cannot use these routers for hosting. You can still achieve 5G upload speeds if you use both type of routers at the same time.
Alternatively, can buy another desktop or use the one you have so here will need the best operating system for your site Linux Fedora 32 with the cinnamon desktop.
Later we will show you how to make Fedora host your site and add a Database which a shopping cart will need to operate.
If you want to pay then you can get a .com domain name for £0.99 (only the first
year) and provided you host with them you can quickly get a website up and running with GoDaddy
At first these seem a very cheap way of making a website. THEY ARE NOT! They use tools that you can make a site very quickly from various templates. You then use and modify the template to make your site. However these work on yet another website and you have to keep using the tools and that firms hosting.
You cannot change your mind and take the layout for yourself and you can be paying over a £100 a month for this. Cancelling payment cancels your website and you have to recover your domain from them as well.
If still do not want to pay anything for your site and you want more independence and a free domain .co.uk domain for the first year. The you may only want the domain name you can go to the friendly
Fasthosts.co.uk here you can obtain your domain name and have a Domain Name Service DNS to point to your Desktop.
Even if you move your domain name to another hosting service you can still change the DNS with Fasthosts here
Fasthosts can host your domain as well and has many tools for designing a website with tutorials which if you can get really quick answers from the chat service or email. You can also have a 100 domain names
hosting for about £10 a month. If you want to add shopping carts they have databases which are included in the hosting price. With shopping carts you will need a secure ssl certificate and they can provide it
for you and you can use them even on your own Hosting desktop.
Now if you are ready you can make your first page. This page is called index.php.
1. Using Windows 12 Lite, Fedora 32 cinnamon edition or my favourite MakuluFlash with 3D and wobbly windows.
You will need to add Geany and Filezilla to your panel
You will find them in the Menu so right click and add to the Desktop and Panel. Geany is your editor and Filezilla loads it to your site
if it is being hosted remotely. Look for them in the menu then right click on them adding to desktop and the panel.
Make a new folder where you will store your files locally you will hold all your files for your website here and upload them later. Let us call it www or use the Public folder.
When you use Filezilla your uploads will go to various folders. If you are hosting on Fasthosts use
htdocs. On other sites it may be Public_html.
Now open Geany then open a new file you will it says untitled. Now Save the File with Save As as index.php in local folder.
2. Using your Linux Fedora 32
Using your Linux Fedora 32 install Geany and Filezilla. You will need to add Geany and Filezilla to your panel Geany is your editor and Filezilla loads it to your site if it is being hosted remotely.
Install Geany and Filezilla in Fedora open a terminal and type sudo dnf install geany then sudo dnf install filezilla. When installed look for it in the menu then right click on it adding to desktop and the panel.
Now using either 1. or 2. Continue here.
Using Fedora hosting a folder called www is already made you will find it at var/html/www where you will hold all your files for your website. Now open Geany then open a new file you will it says untitled. Now Save the File with Save As as index.php in
the folder www.
Now you can put in the text below here is an image of what it will look like to start with. The items are just copied from these lines but they will not be visible on an actual site page, because
they are enclosed in comment tabs.
The start tab then your text ending in the stop tab --> the actual start and stop tabs you will use to comment out any text on your site. When you have an active site you will actually be editing with Geany on your site directly in your www folder.
We cannot show you the start comment tab except as an image. You can see both tabs working in the Geany screenshot image here.
Copy all the the text below into your Geany and save it.
Start of text ------------------------------------------------
target="_blank">zzz Windows12shop.com/images/advanced.gif" alt="Store Search" yyy
For the popular categories click here.
xxx www.Windows12shop.com/store/index.php target="_blank">zzz Windows12shop.com/images/epson265.png" alt="Epson" > yyy
You will need to replace xxx, yyy and zzz so click ctrl H to fetch the replace then in Search for: enter xxx and in Replace with:S the text in the xxx characters. Repeat for all the XXX then do the same for
yyy and zzz
xxx replace with
yyy replace with
zzz replace with
End of text here --------------------------------------------
You will see here the screen shot of the Geany after you have entered the text. You will see that http:// is used instead of https:// a secure site which requires a SSL certificate until you obtain one and have it added to your site then use http:// If you intend to have a shopping cart you will need one.
It is always best to have one and you can find them free on some sites.
This is now the screen shot of Geany after the start and end tabs have been added to hide the text not wanted or that maybe used later.
Now you will see html and body start the page and end with /body and /html These must be on every page for display they are all enclosed in left and right pointers.
Anything within these brackets are information for the display of the page and are not displayed.
On Line 8 between center and /center is an image it begins with SRC IMG that is how an image is displayed. Here the image is in the image directory. You must now make a directory on your site called images make the folder in the www folder.
The image name here is mypicture.gif and must be put in the images folder.
On line 12 this is an instruction to go to that site which is defined and the action button is the image on line 13. This is a Link and You must have the store.gif image in you images directory. You can have any picture or button for this. If the Image is not in the image directory the Text will be displayed and will be the action button.
You can obtain buttons by googling for website buttons. Save them in your image directory and edit them with Gimp see the tutorial later.
Links are very important between the two parts you can have text
for example a keyword making it a keyword link or a Brand name making it a Brandname link. here are 14 different kind of links and you get more points from Google the more you have.
External links have far more points. You can put a product from our site here just go to a product in our store and copy the address bar into your link. Try
https://www.webhouses.co.uk/store/index.php?main_page=product_info&cPath=80&products_id=312 and you can take a button the same way but you need to copy that into your images directory otherwise the Text will appear but you can still click on the text to make the link work.
Try adding the link to our mystery product and see what you get.
There are 14 types of links and you need to make them as varied as possible and as often as possible. Always check the link works if it does not it is a broken link. Then you might get a message from Google asking you to fix it otherwise you get demerits. We show you later a Broken Link Checker you need to use often. Putting the text in the link should be informative and as helpful as possible for your site and others.
You will see a top line has been added this allows the addition of header.php to your site. We will make header.php later as it sets out all the formating and colour of your web page.
You will see on line 18 the Start Tab Then on line 34 the Stop Tab --> have commented out a section which is always displayed in pink.
The lines begining with p> are the actual text that is to be shown and these you will see on your active site when you have uploaded any of your .php pages to your site. You first must do this with your
index page otherwise no pages will be displayed.
Now we will introduce you to the power of Gimp you will be shown a Gimp tutorial later. This picture was made with Gimp and you should now add it as your first image in your image folder so it will display as mypicture.gif.
Now hover over the image and right click and choose copy image now click on Gimp that should be on your bottom panel then with the Gimp up go to edit and in the drop down menu then click paste.
The image appears so you will now reduce it for your front page so go to image and in the drop down menu click Scale Image change the width to 400 and then click Scale.
You usually do not save with Gimp you Export As instead. Got to File then Export As mypicture.gif and select the folder as www/images and then click enter twice to export it if you have an active site
connected by filezilla you should then upload it to your images directory.
Now we will make the header so open on Geany a new file then Save As header.php and save in your www folder. Now copy the text below into Geany
Start of text ------------------------------------------------
(style)(square)head(left bracket)text-align:center(right bracket)(square)left(left bracket)float:left;width:30%;padding-left:1%(right bracket)(square)center(left bracket)float:left;width:67%;padding-left:1%(right bracket)(square)footer(left bracket)border:1px;float:left;width:100%;clear:both;text-align:center(right bracket)(square)head ul(left bracket)margin-left:-2.5em(right bracket)(square)head li(left bracket)list-style-type:none;width:7em;height:3em;text-align:center;float:left(right bracket)(square)head a(left bracket)text-decoration:none;color:(square)000;display:block;background-color:(square)EEF;box-shadow:5px 5px 5px gray;margin-bottom:2px;margin-right:2px;border-radius:5px;border:3px outset (square)EEF(right bracket)(square)head a:hover(left bracket)background-color:(square)DDE;box-shadow:3px 3px 3px gray;border:none(right bracket)body(left bracket) auto; background-color:(square)12b6cf;(right bracket) h1(left bracket)color:(square)C70039; font-family:'Gravitas One','arial black',serif;font-size:3em; margin-left: 50px; right-margin: 50px(right bracket) h2(left bracket)color:(square)585800;font-family:'Gravitas One','arial black',serif;font-size:1.5em; margin-left: 50px; right-margin: 150px(right bracket) h3(left bracket)color:(square)ff0000;font-family:'Gravitas One','arial black',serif;font-size:1.5em; margin-left: 50px; right-margin: 150px(right bracket) h4(left bracket)color:(square)ffff00;font-family:'Gravitas One','arial black',serif;font-size:2.0em; margin-left: 50px;(right bracket) h7(left bracket)color:(square)26b7d1;font-family:'Gravitas One','arial black',serif;font-size:1.5em(right bracket) p2(left bracket)color:(square)26b7d1;font-size:2em; margin-left: 50px; right-margin: 50px; padding-right: 100px;(right bracket)subform(left bracket)font-size:1.2em;color:(square)fff;font-family:tahoma,geneva,sans-serif(right bracket) p(left bracket)color:(square)fff;font-size:2em; margin-left: 50px; right-margin: 50px; padding-right: 100px;(right bracket)subform(left bracket)font-size:1.2em;color:(square)fff;font-family:tahoma,geneva,sans-serif(right bracket).subform .label(left bracket)display:inline-block;width:100px;vertical-align:top;text-align:right;margin-right:10px; font-weight:700;color:rgba(255,255,255,.5)(right bracket).subform input[type=submit](left bracket)height: 50px;margin-left:200px;padding:10px 25px;font-size:1em;color:(square)fff;background:(square)069; background:-webkit-linear-gradient(rgba(255,255,255,.1) 40%,rgba(255,255,255,.5));background:-moz-linear-gradient(rgba(255,255,255,.1) 40%,rgba(255,255,255,.5));background:-o-linear-gradient(rgba(255,255,255,.1) 40%,rgba(255,255,255,.5));background:linear-gradient(rgba(255,255,255,.1) 40%,rgba(255,255,255,.5));border:none;border-radius:5px;box-shadow:0 0 4px (square)fff(right bracket).subform select(left bracket)font-size:1.2em(right bracket).subform input[type=text],.subform textarea(left bracket)border-radius:5px;border:none;background-color:rgba(255,255,255,.5); color:rgba(255,255,255,1);font-size:1.2em;box-shadow:inset 0 0 10px rgba(255,255,255,.75);width:300px;padding:5px(right bracket).subform input[type=text]:,.subform textarea:focus(left bracket)background-color:(square)fff;color:(square)000(right bracket) @media (max-width:600px)(left bracket)(square)head(left bracket)display:block;width:90%;font-size:125%(right bracket)(square)left(left bracket)display:block;width:100%;height:auto;font-size:125%(right bracket)(square)center(left bracket)display:block;width:100%;height:auto;font-size:125%(right bracket) (square)right(left bracket)display:block;width:100%;height:auto;font-size:125%(right bracket)(square)footer(left bracket)display:block;width:100%;font-size:125%(right bracket)(square)head li(left bracket)list-style-type:none;width:7em;height:3em;text-align:center; padding-left: 10%(right bracket) (square)head a(left bracket)text-decoration:none;color:(square)000;display:block;background-color:(square)EEF;box-shadow:5px 5px 5px gray;margin-bottom:2px(right bracket)(right bracket) .w3-display-topleft(left bracket)position:absolute;left:0;top:0(right bracket).w3-display-topright(left bracket)position:absolute;right:0;top:0(right bracket).w3-display-bottomleft(left bracket)position:absolute;left:0;bottom:0(right bracket).w3-display-bottomright(left bracket)position:absolute;right:0;bottom:0(right bracket).w3-display-middle(left bracket)position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)(right bracket).w3-display-topmiddle(left bracket)position:absolute;left:0;top:0;width:100%;text-align:center(right bracket).w3-display-bottommiddle(left bracket)position:absolute;left:0;bottom:0;width:100%;text-align:center(right bracket).w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after(left bracket)content:"";display:table;clear:both(right bracket).w3-black,.w3-hover-black:hover(left bracket)color:(square)fff!important;background-color:(square)000!important(right bracket).w3-padding-16(left bracket)padding-top:16px!important;padding-bottom:16px!important(right bracket) .w3-large(left bracket)font-size:18px!important(right bracket)img(left bracket)max-width: 100%;(right bracket).ResultsNav(left bracket)background-color: (square)ffff00;}.ResultsNavCurrentPage(left bracket)color: (square)ff0000;} (/style)
End of text here --------------------------------------------
Now replace the following control carriers in Geany by Cntrl H as you did before.
(left bracket) with
(right bracket) with
You will need to format a little as it installs all on one line so choose sutiable point then click enter to make it fit your screen.
Now look at the finished header in Geany it should look like the image below
When satisfied save it with cntrl S and then upload it with Filezilla to www if you have an active site. You will see your sites colours have all changed. There is a lot of detail in this header
which will style many things that you could use later. You will find a lot is from W3Schools which you will see later.
Now you should find all the images and photos you will want for your website. Make a folder called images to prepare. You can now use gimp to add text to them and resize and export them to your www/images. Export As .gif to have smaller file size but .png or jpg are perfectly acceptable.
Now go to the Gimp Tutorial and make your images.You may also make a series of buttons that you can use in your links. Read the Tutorial and practise
When you are satisfied export them to www/images. On an active site you can go to your images and edit them directly with Gimp. Ensure Filezilla Edit>Settings>File Associations selector makes
the edit for .gif /usr/bin/gimp, .png /usr/bin/gimp, .jpg /usr/bin/gimp calls Gimp as the editor.
Now one important site you need to understand web design and run examples that you can integrate in your site is W3Schools use this and you will make great pages for your site.
Now there are many tools for you to make your pages up so you can look at our Tools and make your pages.
You can find how to obtain domains and inexpensive hosting to get started quickly and more tutorials for designing your website
Now to keep on top of things with the webcrawlers especially Google you need to ensure you have no broken links. You can find these errors and then fix them find them with the Dead link Checker here
Whenever you add links you need to do this check so do it often and fix them right away.
Now when you have built all your site you will have to add to your site a Site map for the crawlers to find everything about your site to put you up in the rankings. You need to add sitemap.xml to your site
You can create this with this Sitemap Creator
If you want a free 7 day course in SEO to make your site rise in the rankings then just ask us by adding a Review on our Windows 12 Lite
Here is a video by a SEO on how you need backlinks to rise in Google rankings
If you need further help that we have not covered or think we should add something more then, please get in touch please contact us.