There are two parts in web development/programming:
– the front-end (what the browser is displaying to the user)
– the back-end (what happens before the browser is displaying the results to the user)
Each of these sections are big enough for a programmer to not know both very well (I am not talking about geniuses here).
To build a website, a modern website, you need to have both sections.
Before starting, you will need to get a hosting account where you can practice with your website development. Hosting is cheap these days and I recommend to buy a cheap one, just for development, because you can jump into learning and developing right away without spending time learning how to setup your own hosting environment (that takes time too).
THE FRONT-END
To know how to program the front-end you need to know:
– HTML or HTML5 (HTML5 is the latest standard)
– CSS (Cascading Style Sheets) – version 2 or better 3
– Javascript
HTML is the backbone of any website and it’s not a programming language per se but a markup language which uses tags <> to enclose its commands.
You can see HTML codes if you go to a webpage with your browser, then right-click, then View Page Source, or View Source. That’s how I learned HTML…by reverse engineer webpages looking into their source code.
HTML is not hard to learn. You can use a visual webpage editor like Microsoft Frontpage, Coffeecup, NetObjects Fusion or iWeb (for Mac) and create a webpage, then look into the source code to see what you have done. Play with that.
Later on, you will be able to write HTML by hand in an advanced text editor like Editplus, Notepad++ or TextPad (don’t skip learning how to code by hand, don’t rely on the visual editor too long).
After learning HTML it’s easy to pick up advanced HTML, which is HTML5.
If HTML is the backbone of a website then CSS is what give a website its look and formatting (presentation semantics, as they call it). You can compare HTML with Notepad and CSS with MS Word processor. One makes text, but the other ones makes it much prettier. That’s what CSS does, basically.
Sometimes you can find CSS code by looking into the webpages source code (like this:<style type=”text/css”>…your CSS code…</style>) but usually the CSS code is kept in a separate file (ending in .css) and invoked/included in the HTML page using a specific command (like this: <link rel=”stylesheet” type=”text/css” href=”whatever_name.css” /> ).
If you encounter a website which has this inclusion command then you can see the CSS code by going to that .css file directly, in the browser (like www.the_website.com/whatever_name.css).
See here an example of a CSS file (it’s my site’s CSS file)
Javascript is used to add dynamics to a webpage, to a webpage otherwise static.
Like CSS, you can find sometime Javascript embedded directly to the HTML page (like this: <script language=”javascript”>….your Java script code….</script>). But mostly it will be in a separate Javascript file ending in .js (included in thew HTML page like this: <script src=’whatever_name.js’ type=’text/javascript’></script>). You can see it directly if you open it with the browser (like http://www.the_website.com/whate…).
See here an example of a Javascript file (it’s one of my site’s Javascript file).
Links for learning
HTML
– http://en.wikipedia.org/wiki/HTML
– http://en.wikipedia.org/wiki/HTML5
– http://www.w3schools.com/html/
– http://www.w3schools.com/html/html5_intro.asp
CSS
– http://en.wikipedia.org/wiki/Cascading_Style_Sheets
– http://www.w3schools.com/css/
Javascript
– http://en.wikipedia.org/wiki/JavaScript
– http://www.w3schools.com/js/
You can find on Google (including Youtube) many tutorials about these. Just type “HTML tutorials”, “CSS tutorials” or “Javascript tutorials”.
Having some graphic design skills doesn’t hurt also (Adobe Photoshop or equivalent to make pretty graphics for your website).
THE BACK-END
The back-end now is even more complicated than the front-end and that because there are so many options, it’s mind boggling.
In the last 10 years the open-source movement gave birth to many programming languages and were made free to people, spawning even more open-source tools and programming languages.
You may have heard of Perl, TCL/TK, PHP, Python, Ruby, Java, Erlang, C, C++, Lisp, Haskell, ASP/ASP.NET/C#, Coldfusion/CFML. But some of these have lots of frameworks built on top of them (the scope of the framework is to make life easier for the programmer – only PHP has over 20 frameworks).
What are these back-end programming languages doing? Most of them are serving as an intermediary between the browser and the database (yes, back-end means also database).
The data is sent to this intermediary through a page written in a programming language of choice which is processed by the programming language interpreter which allows to that data to be sent into a database. Also, the same page programmed in a language can get the data from the database and send it to the browser using the programming language interpreter.
What programming language you choose it doesn’t matter much as long as you can accomplish your result.
But you, as a beginner, should choose a programming language which has these characteristics (and I am not referring at the syntax):
– the language should be popular (that means it has a big community which can offer support)
– the language should be open source (that means you don’t have to pay money for it)
– the language should stick around for longer time (that means the language shouldn’t disappear or be less used in the short term – it happened with ASP classic and Coldfusion/CFML/TCL/TK)
In conjunction with these languages also you should choose the database which you will learn. The database should also be open-source (MySQL, PostgresSQL, SQLlite).
In my opinion, for a beginner, you should choose from among these back-end technologies to help you started:
– PHP (open source, big community, lots of software built with, lots of jobs),
– Ruby on Rails (open source, growing community, hot with startups, growing number of jobs),
– Python (open source, big community, quite hot with startups, growing number of jobs)
– MySQL database (open source, big community, hot with startups, many jobs)
You have to try these and see what you like, what fits you.
Links for learning:
PHP
– http://en.wikipedia.org/wiki/PHP
– http://www.php.net
– http://www.w3schools.com/php/
Ruby on Rails
– http://en.wikipedia.org/wiki/Ruby_on_Rails
– http://rubyonrails.org
– http://oreilly.com/ruby/archive/rails.html
– http://oreilly.com/ruby/archive/rails2.html
– check out also the installation tutorial I wrote
Python
– http://en.wikipedia.org/wiki/Python_(programming_language)
– http://www.python.org
– http://python.about.com/od/gettingstarted/tp/pytutbeg.htm
MySQL
– http://en.wikipedia.org/wiki/MySQL
– http://www.mysql.com
– http://www.mysqltutorial.org
– http://www.w3schools.com/sql (SQL is the language used to extract, insert, delete and process data in the database – you need to know this as well)
– http://php.about.com/od/learnmysql/ss/mysql.htm
Don’t forget! You can find tutorials not only on Google but on Youtube too (so you can have a visual).
You can try front-end development and also back-end development…but in the end you will have to specialize (you can’t learn everything very well, unless, of course, you are a genius).
Learning from scratch will take you time but don’t despair. Even God needed seven days to create Earth, so they say.
Be perseverent, ask around when you don’t understand, get connected to the specific communities, go to stackoverflow.com or other communities for very technical questions, search on Google, buy some books and practice.
Practice makes perfect, they say and that’s not far from truth.
NOTE: This article was published by me on Quora.com on June 22, 2011