Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am currently a high school student and know how to use Pascal and C/C++ to take part in competitions such as the Informatics Olympiad. I have learned data structures and many algorithms to solve various kinds of problems. Now, I want to move on to become a web developer. However, I know web development is quite different from competitive programming. To make a web application, I have to master HTML, databases, back-end programming etc. But these all look like separate pieces of information. I don't know where to start and what order should I follow.

Anybody who can give a comprehensive list of learning points? I know there are HTML, Ruby on Rails, CSS and Javascript. What else? More importantly, can someone give a brief outline of their relationship?

share|improve this question

migrated from Nov 16 '11 at 17:32

This question came from our site for professional and enthusiast programmers.

closed as not constructive by Jarrod Roberson, ChrisF Nov 17 '11 at 12:01

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

Wikipedia has a good article on Web Development – Adrian Cornish Nov 16 '11 at 17:31

I was hired to join a Ruby on Rails project, so I learned web development via Programming Ruby and Agile Web Development with Rails. Those books are both well written, easy to follow, and fun. They will get you started with Ruby and HTML and MySQL.

Later the project evolved to more dynamic behavior and I read Dynamic HTML: The Definitive Guide and Javascript: The Definitive Guide. Then I had to work on page layout and read CSS: The Definitive Guide. There's a lot to learn to be an expert web developer, but you don't have to know it all to build a useful web application.

share|improve this answer

I think the first thing to realize is that web development tends to be made up of more different (and at least theoretically interchangeable) parts than you usually deal with in desktop development.

With that in mind, rather than try to look at specific implementations, I'd start by looking at the abstract ideas of the tiers in a typical web application. Something like this:

  • Data storage
  • Data access
  • Business logic
  • Remoting
  • Presentation

You can argue (and undoubtedly quite a few will) over adding, subtracting, editing, etc., that list. My point isn't to try to give an exhaustive or perfect list, but to give the general idea of breaking things into categories, and then learning at least some of the basic ideas of each major category before diving into the details. Once you've done that, you probably want to get at least some idea of the major "players" in each category.

Without that, it's easy to waste a lot of time and effort on questions, research, etc. that may not make a lot of sense, or are only of interest to a few people trying to do something quite unusual. It's probably also good to think about whether you want to deal with all of those, or concentrate specifically on a few parts -- chances are pretty good that you can decide things like that pretty quickly based on your desktop background, and how specialized of work you did there (and if so, what you specialized on).

share|improve this answer

I would argue that your knowledge of a procedural/OOP language like C++ gives you a huge advantage over people who only know 'web-oriented' languages like PHP or JavaScript.

There are popular frameworks like GWT (and the C# equivalent, whatever it's called) that let you write client-side code using a standard language that can also be used to write server side code. If you can make the transition from C++ to either C# or Java and use these frameworks, you can write web-based applications with complex logic and business logic.

You will have to pick up some HTML and CSS for formatting, but don't have to know JavaScript all too well, or worry about server-side languages.

share|improve this answer

It sounds like you're on the right track. There are a lot of learning points, and honestly, you can't really avoid any of them.

HTML: The very basics. Defines structure for data in a web page.

CSS: Style the elements in your HTML.

Javascript: Manipulate the elements in your HTML.

SQL: Store and relate data in meaningful ways. As mentioned by Raynos, there are alternatives. MongoDB, Redis, etc.

Ruby: Write software that manages your data, generates your web pages, and everything in between.

Ruby on Rails: Framework that sits on top of Ruby that makes it all easy. Sucks that there's so many prerequisites.

Here's some good resources:

Also keep in mind that while Rails is awesome, something like PHP is easier and faster to get into.

share|improve this answer
SQL is optional. noSQL databases are a good choice. Ruby/Ruby on rails is also optionals – Raynos Nov 16 '11 at 17:38
Good point. Though still, some sort of data storage is necessary. SQL of some sort is a pretty standard place to start. – Tyler Brown Nov 16 '11 at 17:40
@Raynos OMG it's you! :) – Tyler Brown Nov 16 '11 at 17:40
Do I know you?.. – Raynos Nov 16 '11 at 17:43

Duckduckgo-able terms are in bold.

The web stack is huge. Most people focus one one part of it. Designers tend to focus on graphics down to HTML and CSS. Front end developers tend to focus on HTML/CSS/JS. Back end developers tend to focus on HTML/HTTP/server side programming. DBAs focus on the databases.

And now… the stack (presented from the middle out).

Websites are based around documents. These are usually written in HTML which is a markup language that describes the semantics, structure and relationships of the text.

They live on a webserver and are transmitted over HTTP (sometimes with encryption via SSL, the combination of the technologies being HTTPS)

When a browser receives a markup document, it converts it into a DOM and renders it.

CSS is a presentation language that describes how a markup document should be presented on various media types (and with media queries on the same media with different properties (such as windows under a certain width having different presentation to windows over a certain width).

JavaScript is a programming language. It can be used in many places (including on servers via ASP, node.js and various other means) but is the only language supported by browsers without the use of plugins. JavaScript can be embedded in HTML to respond to events (such as clicks) and manipulate the DOM on the fly (the DOM specification is mostly an API that describes how to manipulate it). You can issue HTTP requests from JavaScript (usually using XMLHttpRequest or JSON-P) to get new data for a document on the fly. This data is often encoded using JSON but can be any format you like.

Webservers can serve up documents from flat files, but often generate them on the fly (in response to HTTP requests) by running software.

Such software can be written in any language you choose as there are a number of standard interfaces such as CGI and FastCGI. Some languages give you specific interfaces which may provide advantages over the generic ones, e.g. Perl has mod_perl which gives you a vast amount of access to the internals of the webserver (extreme example: I've seen someone turn Apache HTTPD into a spam filtering SMTP mail server using mod_perl).

Ruby is a programming language. Ruby on Rails is an MVC Framework for Ruby. These exist for most languages, Perl has Dancer, Catalyst and MojoMojo, Python has Django, Java has Spring, and so on).

Many programmes use a database for storage and searching. SQL databases are most common (including Postgresql, MySQL, MS SQL and SQLite), but other options are around. JSON based document stores (such as CouchDB) are quite popular.

Since HTTP is stateless, cookies are used to store data between requests. These are stored by the browser and included in each request back to the site that set them.

share|improve this answer
You forgot the "Have fun learning the entire web stack" – Raynos Nov 16 '11 at 17:50

The web is kind of complicated.

You will need to understand

  • HTTP. This is used by browsers to communicate with servers
  • HTML. This is send from a server to a browser, the browser renders this into a document
  • CSS. Browsers use CSS to style HTML.
  • DOM. Browsers use the DOM to represent the current state of the document
  • JS. Browsers use JavaScript to manipulate state of the DOM and create interactivity.

Then you will need to understand a server of choice. Pick one you like, ASP.NET, Java, PHP, RoR, django, node.js, perl, erlang, etc.

Then you probably want a mechanism for persitant storage on the backend like a database of choice.

There are plenty of other things you need to worry about, like which operation system for the server, which web server, what frameworks to use.

To start just learn HTTP and a server of choice. Then work on HTML/CSS/DOM&JS. Then worry about databases.

share|improve this answer

This is a bit of general advice that so far has worked very nicely for me, but it requires you to dedicate quite a bit of your time.

Think about what concepts you know at this moment. Think of the biggest thing that you could put together using only that which you know right now. Try to do it...

This way you are pushing your knowledge to the limit; you will find that certain things are cumbersome to implement using only what you know at the moment. When you arrive at that point come back here and ask for a better solution.

One example from personal experience: the first bigger project I did was a text based game. When I started I didn't even know functions existed (every time I needed to repeat something I would just copy-paste). When I finished the project I understood functions, knew a little about classes and some basic stuff about C++'s STL.

Also, since you're interested in web development, at some point in time you'll find this link below useful. If you don't really understand why it would be useful, do what I said above and you'll feel the need to solve a problem that this answer addresses:

share|improve this answer