How should one start learning web applications development?

Question

I have done web programming through PHP, so I know the basics of HTML, CSS, and sessions. Nontheless, there's probably a lot of concepts and theory behind web development which I'm probably missing since my original approach came from knowing a language, not a platform itself.

Where does one go to learn the practices and general theory, applicable for all programming languages, about:
-Proper HTML and CSS coding, techniques, and best practices
-Differences in browser rendering
-Web site design
-Optimization for loading
-Session management, cookies
-Client-side scripting, Javascript
-Security (this is a biggie)
-Development paradigms
-Template languages

My question basically arises from the fact that nowadays most sites seem like a spaghetti mesh of embedded and external CSS and Javascript, AJAX, server-side scripts, APIs and frameworks that manage everything under the sun and have a million different ways of doing the same thing (from security to forms to validation to code generation), and it seems there is no authoritative source for any of this; and when you stick to any framework there seems to be a lot "magic" going on which hides an unknown level of complexity (GWT's preferred use needs client-side caching, Django provides modules for handling ORM, ASP.NET has a template language which maps in weird ways to client-side variables, etc.)

Answer 1

Most of these items will need to be researched via conventional methods. As in many, many, many hours of searching the topics in Google and linking from different pages. There are many books out there for each topics you mention. Amazon.com will gladly take your money for these books and the public library will gladly lease them to you for practically free.

In my experience, I've found that it is easiest to learn a new programming concept by giving myself a project to work on. Possibly come up with an idea for a site that will use all of these concepts and start building it. In the process of working on this project, you will be required to learn these topics in order to finish the project. Once you're done, if you still you are still a bit rusty, rip and repave. In other words, start from scratch on another project. Who knows? Maybe your project will end up being the next MySpace... or better yet, StackOverflow.

Anyway, hopefully this approach will help you in your journey. Good luck.

Answer 2

My number one resource: Google. The rest is commentary:

One thing jumps out at me regarding your laundry list of knowledge is that it crosses entire domains. There are entire careers built solely around "web site design", for example. Web site designers will know CSS, HTML, and all the dirty tricks to get a site looking great (or at least good) in as many browsers as possible. That covers the first three in your list. The rest span client-side, server-side, and a few other domains.

So- the short answer is: just as doctors and lawyers don't learn their entire practice from one three-story tome, there is no single place to find information on all those aspects of web development.

You could also spend an eternity compiling all sorts of "knowledge" on these topics without ever really learning anything. Don't get me wrong- for specific requirements there are many great resources. You just need to know what you want before you go looking. Don't attempt to absorb knowledge across that entire list for every stack and framework. You'll go nuts. Concentrate your get-stuff-done research within a few core domains. Supplement with platform-independent theory for the rest to round it out.

Answer 3

I am not an expert in all of the areas you listed buy I'll try and address those I have more experience with.

-Proper HTML and CSS coding, techniques, and best practices
-Web site design
There are a lot of books about the subject but I have always found that reading somebody else's code has been a lot more beneficial. Take a look at the free CSS templates you can find on Google or pick some website you like the look of and look at HTML/CSS. The tool I would recommend using is the "inspect" feature in Firebug. You can point at the element on the page and it takes you to the corresponding element in the code.

-Differences in browser rendering
-Client-side scripting, Javascript
IE6 ACCCKKKK!!! Sorry but in my experience you just have to try it out in all the browsers and see what does and doesn't work. In the case of CSS this WC3 site lists the different CSS properties and which browsers support them. In the case of Javascript IntelliJ had an Intellisense like feature that would tell you which browsers each Javascript function was supported in. If you don't have IntelliJ You can also read MSDN and MDC to find out more about specific browsers and which Javascript functions are supported. I would recommend using existing Javascript libraries (prototype,jquery,...) to take care of the cross platform Javascript things for you. I would recommend writing your own XMLHttpRequest object that is cross browser compatible. It will give you a good idea of what the frameworks are doing for you.

-Optimization for loading
The senior project at my university was a web app used by 3000 people weekly. We stress tested the app and it was fine on the test data set. But in the wild with the real user data it ran slow on one of the URL requests. Long story short: a database query was running slow and it was not obvious why that was the case. We solved the problem simply because we had logging in place on the live application and were able to use a mysql profile tool on the live server to see exactly where the problem was taking place. Solve the optimization problem when you get there but do everything you can to prevent or mitigate the problem through logging and stress testing.

-Session management, cookies
-Security (this is a biggie)
Session management/cookies and security kind of go hand in hand. Read about CSRF attacks (here, and here). New web frameworks have things in place to prevent this type of attack (django, ASP.NET MVC). CSRF is an easy one to get burned on (it's happened to me and the big guys like YouTube and Google). It has happened to experts so it's not a simple problem. But CSRF and XSS seem to be the two big/common problems. One way to learn about them is to write an app that has one intentionally and exploit it and then fix it. The django templates when rendered will escape the variables preventing most XSS attacks.

As for the frameworks doing magic: you are right they do and that is the point of the framework. And it can be frustrating when you want to understand what is going on underneath. The framework hides complexities you should never have to worry about building a web application. Think about it this way: a compiler is just as much magic. It takes a high level program and turns it into a low level one. One way to dispel the magic of the compiler is to learn assembly and C. Web frameworks are not different. To understand your tool sometimes it is best to build the tool. Write your own web framework maybe after you learned one. Write your own template language. Also learn a framework that is open source so you can answer questions about the "magic" it is doing. For example I wondered how django implemented the CSRF middleware. A quick look at the code and my question was answered. Most of the frameworks are well written so the code is usually readable. Just don't be afraid to look at it.

---

that magic is lear

Answer 4

Many people alredy mentioned Google, and it's obvious choice of course. I would just add: read conventional books as well. Read website designers' and coders blogs. In my google reader I got few of those that I read regularry, even if there's nothing I was searching for. Just for kicks and to know what others are struggling with.

Answer 5

For CSS: Take a look at the yahoo developer site for information about object oriented CSS and reflow performance.

For JS: Learn how to write unobstrusive javascript, event delegation and how to use one of the major frameworks like e.g. JQuery

For HTML: Keep it lean and semantic. Prefer classes to ids and use tables only for tabular data, not for layout. Don use javascript handlers or style attributes if possible.

For the server-side: This depends on our language and framework, however Ruby on Rails is quite popular and might give you some good ideas. Also take a look at Lift (for Scala).

Answer 6

There are books that are worth reading though. ‘CSS: The Definitive Guide’ by Eric Meyer does what it says on the tin, and has a few good notes on browser support.

quirksmode.org has lengthly writings on cross-browser issues in CSS and JavaScript.

‘Designing With Web Standards’ by Jeffrey Zeldman started the whole CSS thing, so I’ve heard. There’s a first and a second version; I’ve read neither, so I’m not sure of the differences.