Hello interwebs =),
I'm trying to make
my own social network. I decided to not only blog my story to my goal, but also make tutorial about the things I'm facing to when I started the project without any experience of programming or website business ( marketing ) etc. In this tutorial I will show you the basics you will need to make and setup your own site. I will show you which programs you could use for programming, the benefits of a language, hosting and why you should / shouldn't choose for templates. Later on I will make tutorials about getting traffic and so on. I hope you will enjoy this how to / tutorial and checkout ( if there are ) more tutorials on my site or read my blog once up a time :D
- Conclusion - concept, The preparation, learning, hosting, SEO / Marketing
- More great tutorials sites
- Programs to write languages in - adobe Dreamweaver, textmate / notepad, notepad++, GUI, WYSIWYG
- Hosting - Wamp server, free hosting, paid hosting, disk space, bandwidth, RAM, VPS, dedicated server, unlimited
- Templates and WYSIWYG (CMS) programs
- Programming languages - HTML, CSS, JAVASCRIPT, PHP, MySQL, phpmyadmin
Conclusion
This may sound weird the conclusion at the beginning but this is kind of a summary of all the information below. I written everything down that I wanted but I found out that it is hard to order everything in a good order so that's why I start with this summary and you could read the other paragraphs for more information.
Concept
To start a site the concept must be very good and most times unique. As you guys may read in my blog I re-started this project around Christmas and that has multiple reasons but one of them was a problem with the concept. I had a small idea of a new social network and started with programming. But this is not the best way to start a project because later on I run in these 2 main problems: 1. I started when I had no experience with programming so the pages I made in the beginning were bad written and not efficient. So when you starting with learning programming languages start random project just to build up experience so you could make the real site in 1 time without old / bad code. 2. The concept wasn't that clearly. I started the project and I just randomly made something what kinda looked like what I was thinking in the beginning. While later on I changed some layouts in some parts of the site and than I had to change it in multiple pages because otherwise the site looks unorganized and it has no structure. You may think this isn't a problem but yes it is! I'm a Apple hater but I love the way Apple has a nice system off how apps are made. Everyone in this world even if you have a IQ of zero you could control a Iphone or Ipod. And in every app you know where the settings are etc. While in android the apps have no structure and with every app it's a new maze game where and how you could change settings in that specific app. And isn't that one of the main reasons why there are sold so many Iphones? So take some papers and paint your idea of how the site must look like and witch functionality it has. Depending on what you want to make but if you make a social network like me wait a week with programming your website. Think that hole week so I have this idea: Sending personal messages to other users. Cool idea? - yes, but now think a whole week about it. Could you randomly send personal messages or do you need to be a friend of that user? Could you send it in 1 time to multiple users? How do I block spammers (because you could send it to multiple users)? And after a week you know exactly the hole functionality of that concept.
The preparation
Okay, the idea of your new website is clear what now? (Read this hole blog first, hihi) But I'm not kidding. Search on the internet how much it will cost to host your own site before you running into unsuspecting bills. Don't be scared almost everything is free in the programming business and hosting isn't that expensive. I'm not going to explain what a little is but if you reading this blog and reading this I think you're not the new Mark Zuckerberg. So you as reader don't need that much and you could choose for the "Unlimited" plans at any host. (Read my part about unlimited now). Unlimited plans + domain name are available for 5 dollars a month. But if you making a new social network you will need a dedicated host and most of them are starting around 75 dollars a month. And I'm expecting to pay 500 dollars a month to host my site. But that's because I have allot of users by than and they are online often at the same time and uploading pictures as hell etc. and that's why it's so expensive by than. But again you as reader only need to pay around 5 dollars a month. And learning programming and using programming programs are free so it's only hosting that will cost you money.
Learning
Now you want to learn how to program. I learned everything with
lynda.com/. It's so good because they explaining everything behind in rather than
w3schools.com/ that only shows you something and if you don't get it you f*cked. So in the beginning I recommend videos to learn programming. Because I learned everything at lynda.com I don't know good YouTube channels for beginner programmers. But for advanced php I recommend
phpacademy. And that is the planning for your next 1 month intensive training, 2 months discovering and 9 months to become a programming master. Again don't let this scare you away you could make your own site in 1 month but 9 month until I think you could say "I'm a programmer". And a quick guide of what you need to learn. HTML is the base of your website (not that hard to learn). CSS is the layout of the HTML (medium to learn). PHP is the interaction with the user or a way for you to display things of your database (easy,medium,hard depending on what you wan to accomplish). Javascript is something I never learned because it was to hard and PHP could do 99% the same as Javascript.
Hosting
Before you start hosting look on the internet how you setup your own site by that specific host company before you don't know what to do. You could start using free hosting at the beginning to host your own little test site so you now what a host looks like (For free hosts go to my hosting section). And look on the internet around which host is the cheapest / best for you.
SEO / Marketing
coming soon!
More great tutorials sites
I know it's weird that I'm referring to other tutorial sites, but I'm not a pro and my English isn't that well either. So here are some tutorial sites:
lynda.com/ w3schools.com/ php.net/
youtube.com/phpacademy and use some forums to ask questions if you walk into some trouble:
w3schools.com/forum webdeveloper.com/forum/
Programs to write languages
These programs are some examples of the programs you could use to write code in. I think Notepad++ is the winner because of the functionality but you could use any program you want to use. Because hé? At the end of the day it's just writing some words on paper.
- Adobe Dreamweaver - is a GUI ( Graphical User Interface ) and WYSIWYG ( What You See Is What You Get) program to create websites. And I think that this is the worst program to make websites. I know the seduction is big to use this program but the problem is that you don't learn anything from it. Because you just paste some pictures in place and add some text here and there it may look nice but what if a error shows up? You don't know what the problem is because you don't now the html / css code that's behind it that causes the problem. So I wouldn't recommend this program because if you want to make complicated things later must be a good programmer and with this program you will never learn that. And you could always create the same "effect" by writing some code that will display the same website.
- Textmate and notepad (standard for mac and windows) - are also one of the worst programs to write your code in. There are not benefits and the most common problems: Different color usage, line counter and more advanced options.
- Notepad++ - is the best program to write your code in. It is almost the same as notepad ( duh ++) but it has allot of advanced options! For every element there is a different color (Yes colors are handy and not disturbing!) , Line counter at the side (you will need this if you do allot with MySQL queries because they will say (if there is a error) error at line 821) and more advanced options if you really want to get the maximum out of you text editor.
Hosting
Now you know in which programs you could write codes in and I think I must talk about hosting before programming language, because before you writing a hell lot of code you must know a program that could execute your code and so YOU could test it. I say this now before you pay for a host to only test your code. So if you already now how to program and you have your project done you will need a host. Most people think you only need a domain name for a website but that's totally wrong! A domain name is only the name for your website but if you want to put files on it and get traffic you will need a server (host). Although don't bother that much about the money because your site will only cost 4 dollar a month! Eventually and depending on what you want it could cost ALLOT more but I think if you're on this page you don't need a big host. In this part of the turial I will show you were to look for and the difference between VPS, Dedicated and unlimited hosting. Lets start with a WampServer.
WampServer
A WampServer is a server on your own desktop / laptop / mobile to run your php code and have your own database. The site is not online and can't be visited by anyone it's just for you as developer to test your new code.
Where to host your server?
000webhost.com byethost.com/free-hosting freehostingcloud.com
Are some free hosts and you could use it for your official site but most sites are yourname.compannieshost.com and that's really ugly. Also most of these hosts are very small. These free hosting sites exist to let you experiences a real host and to show you concept of your site to your friends.
But what if you want to pay for your server what are the benefits? To answer that question I have to explain some concepts off webhosting.
- Disk space - Is the memory you have to save image's / videos / your own scripts (scripts are very small about 30kb)
- Data transfer / bandwidth - Is the space you have for visitors to visit your site. Example your script is 30kb and there are 2 images on your site (1,5mb each) and 1 video (10mb) your total page is 13,030 KB (13 mb). Wich means if you have a limit of 100 mb a month you only could get 7 visitors a month to your site and after that your site will display a 404 error not found.
- RAM memory and processor - Are for a beginner less important things. But if you have ALLOT and I mean by that if you site is almost only running php code and have allot of users online at the same time on I would recommend a good processor so the php script is quick "calculated". And I would recommend more RAM memory if you have allot of users online at the same time that are using you database (getting info / changing info) I would recommend more RAM memory so you MySQL database is fast too.
So that are the basics to look at if you want to know what you need for a webhost. But what now? VPS, dedicated servers even some webhost sites are saying unlimited for 5 dollar a month!
- VPS - virtual private server isn't that private. You share a dedicated server with other users. It isn't that bad but you can't access the root of your server (for optimal performance) and it's a little bit unsafe if you have a social network with cookies / sessions and if you have a hacker on your vps that know how to access these "secret" things he could hack your site. The other downside is that you can't upgrade things like bandwidth. processor etc. Although it's a nice thing to start with because most time you have allot of bandwidth and enough RAM memory for a "normal" site that is viewed let say 500 times a day (not at he same time)? And it's pretty cheap for the things you get
- Dedicated server - You could see a dedicated server as a server you have in you room but it's somewere standing in your country (or in another country). You could access the root of your server and could "easily" (depending on your host) upgrade some stuff like processors, RAM memory etc. But the downside is that is it pretty expensive... Although buying a server for yourself is around 3000 dollars.
- Unlimited hosting - is bull crap! It's a vps and it allows you to use a vps for a very low price although there are some "unknown" limits. Look at the "Terms of use" most times at the bottom at the page to read what they mean by unlimited. Because some hosts just say 1tb bandwidth a month is unlimited (they think its allot) while others say "As long as you don't slow down the vps with allot of traffic its unlimited". So really read your terms of use before you buying "Unlimited" hosting.
Templates and WYSIWYG (CMS) programs
Templates
This is such as bad as working with Adobe Dreamweaver because you're not going to learn anything off it! But if you want to make it yourself a little bit easier you could use templates for your site. But before I tell you what it is etc. Know that you're not learning anything off it, you could better make your own site (it's even easier) and you are not always allowed to change even a little of the template what really sucks! So templates what are they? Templates are pre-coded website files (like index.html about-us.html) and you could easily fill in your own text between the elements that are made for that. You only have to download the code and filling in your own information is done in a minute but there are some downsides! First of all you're learning nothing off it because the code is already made and you still have to know something about html. But why should you copy a code if you already HAVE TO know html? Why not make your own site? In both cases (using templates / writing your own code) you have to know something about html. And by than you could better make your own website because you could change everything ( because some templates YOU are not allowed to change anything except the information ) and it's easier to make your own site because you know what you're writing. What if the template looks like <div><a></img></div></a> and you don't know what it does but you want to change the link? How do you accomplish that in this template? But if you're writing the code by yourself you don't run into this short of trouble.
WYSIWYG (CMS)
What you see is what you get programs / content management systems are created for you to change the content of your site easier. With WYSIWYG programs you have a text area with GUI (Graphic User Interface / buttons) above that text area and you could easily add a photo or ad a link without writing code's like <img src=""></img> or <a href=""></a>. But again of WYSIWYG programs you're not learning anything and it's always better to write you own code. These programs are also called CMS which like the background of WYSIWYG because you fill something in into your WYSIWYG area and CMS handles it and posts it automatically in a database and automatically displays it on your site. Here are some links to CMS systems (no one is better so choose one where you feel good):
wordpress.org/ joomla.org/ drupal.org/
Programming languages
This is the main part of making your own website. You could hire someone in to make a website for you but that's expensive as hell! And if you want to make a website for your (small) business without member parts or daily / weekly updated stuff its "simple" to make by your own. I would say you could make
your own website in 2 weeks if you spent 1 hour a day to learn html and css.
- HTML - Hypertext markup language is the main markup language for websites. With html elements you create the content of your website. For example this page it's nice looking with paragraphs, bold letters and new lines. Although this is what you see with your eye because the background of this site is way more difficult. To make a paragraph you need paragraph elements <p> </p> bold letters <b>bold letters here</b> new line <br />. You never see these elements on your own website but if you edit it in your editing program you have to work with these elements. But don't let this scare you away because it's easier than it looks. I think I know about 10 elements and that's all! My common elements: <div></div> <a></a> <img></img> and <br /> that's almost the only ones I use! Learning may takes 10 minutes but understanding and know how to work with it may take longer.
Good things: Easy to learn, this is almost everything you website need
Bad things: Not dynamic
- CSS - Cascade style sheets is the "eye" part of html. css makes html looks nice. So let say we make this paragraph: <p> Boring paragraph </p> it will be some boring black letters. But what if you could make it nice with colors etc? the css code: p { color: red; background-color:green; } the boring paragraph looks cool by now! (Childish but it's an example...) <p> Boring paragraph </p>
Good things: Make a website look nice (One of the most important things in the "website industry" because if a site looks childish ore very old I usually go away although the content is good)
Bad things: Medium hard to learn
- Javascript - is a language that makes a site more dynamic. Although it is a very good / important programming language if you want to interact with the user I still don't work with javascript. The main reason is that I never understood it and you almost could do everything with php too.
Good things: Nice way to interact with the user
Bad things: My opinion: hard to learn!
- PHP - Hypertext preprocessor is the language to make you site dynamic especially if you link it with your database (mysql / phpmyadmin). With php you could save / work with values of a form (html based). I use this method most time in the way of what if? What if the user filled in his name that is shorter than 10 characters. What if that name is equal to a name in the database? Do you add a 2 afterwards or do you say "Hey, this username is already in use!". You could do some much with it if you link it with a database for example: For each result (example names: David, James, Jack) show me a row in order with "Name of the user: (one of the users)". Example:
Name of the user: David
Name of the user: Jack
Name of the user: James
This is written with 1 line of code instead of html were you have to type every line manual. Example of how the php part would look like:
<?php
Foreach($result){
echo 'Name of the user: '.$name."<br />";
}
?>
- But again don't let this little part of code let you scare away because it isn't that hard to learn although you have to learn allot and "play with it" (Make random sites just to test you code and make your own code better / shorter) and you have to be creative (How do I make a script that removes all the , of this number 412,412,41 , you have to find out by yourself which php (element) you have to use for that). And php is THE way to show your database entries ($result in the example are database entries).
Good things: Make your website dynamic, medium hard to learn, just adds so much functionality to your site, works with databases
Bad things: You have to spend allot of time in it to really learn it and make "nice looking" script, some of the database codes are hard
- MySQL / PHPMYADMIN - MySQL is the language to build / change databases. I can't almost say more than that. MySQL is the thing to make databases and improve the structure (speed) of the database. And php is the way to display database entries. phpmyadmin is also a way to build / change databases but more in a GUI way ( Graphical User Interface) so with allot of icons to make it easier.
Good things: Makes your site dynamic if you use the info in the database in your php code.
Bad things: a little bit hard to correctly maintenance your database for ultimate performance
