Help me become a web developer, fellow web developers!

January 21, 2012 2:09 PM

In what order should I learn technologies for web development? There're so many!

Okay, let's assume I have a fairly decent grasp of HTML and CSS, but it's kinda rusty, and I want to become a fairly well-rounded web developer. In which order should I work on becoming versed in the following technologies/methodologies?

HTML5/CSS3
Javascript
jQuery
PHP
AJAX
XML
JSON

Are there any that are seemingly unrelated to a novice like me (pretty sure Javascript and jQuery are interrelated), but if learned in a certain order will "build off" each other? Let's also assume I have no prior coding experience, but are there some programming languages (PERL, Ruby, anything else?) that I should try to grok before I hit any of these on the list?

Essentially, if you were trying to create the perfect jack-of-all-trades, master-of-none (to start) web developer, how would you go about instructing them?

posted by jasondbarr to computers & internet (21 answers total)

Probably some programming, ruby and python are common server side languages, pick the one that seems most common in the area you want to work. JQuery is a special case of ajax which are written in Javascript is also programming. XML and JSON are formats used by any programming language.
posted by sammyo at 2:21 PM on January 21, 2012

The most common development environment these days is probably "LAMP" - Linux, Apache, MySQL, PHP.

I would say if you can do PHP, HTML, CSS, and Javascript (including JQuery), you're in good shape.

As noted above, AJAX, XML, and JSON are not really things you "learn," they are formats or techniques you use along the way. it's confusing b/c so many job descriptions are so badly written.

HTML5 and CSS3 are extensions of good old HTML and CSS, so learn the basics first.

There are also multiple paths within "Web development." Some places hire developers who focus more on presentation, so it's all HTML/CSS/Jquery/chopping up images in Photoshop.

Over developers are more "code-heavy," which is where heavy PHP and things like Ruby and Python come in.

And of course some places want someone who can do everything.
posted by drjimmy11 at 2:28 PM on January 21, 2012 [2 favorites]

*Other* developers
posted by drjimmy11 at 2:28 PM on January 21, 2012

The way I learned all these technologies is by bumbling through them concurrently. Do a short tutorial for Javascript (jQuery is really just a library that makes some javascript tasks easier, but it's good to know how to not rely on it) and another for PHP then build something really simple. Here's an example of something I did early on:

Make a web page with a form where users can input their email address. Have the form post its input to a PHP script that emails a coupon (or anything) to the email address then stores it in a database. Once you've got that working, start validating the email input as it comes in so no one can put garbage in your database. After that, redo the form to work with jQuery, so that you can submit your info and receive a "thank you" message without ever leaving the page.

These are all relatively simple tasks to do once you have a basic handle on how the languages work, and they're all very common things to accomplish, so you can find reference all over the internet.
posted by liamcampbell at 2:34 PM on January 21, 2012 [2 favorites]

I'd say learn to program.

If you claimed to be a jack-of-all-trades web developer but said you didn't know how to program, it would be hard to take you seriously.

On the other hand, if claimed to be a jack-of-all-trades web developer, but said you didn't know how to design, that describes a lot of people I know.
posted by yaymukund at 2:37 PM on January 21, 2012

I'd say learn to program.

That is exactly what he is trying to find out how to best do.

To the probably confused OP:

Some people get a kick out of deriding front-end development as "not programming." There is a technically correct, if annoying, distinction that HTML and CSS are markup and not code.

Javascript, though interpreted on the client-side, is clearly a programming language. PHP is also a programming language, and one I suggest you look into. Of course a CS degree is nice, but don't let anyone tell you you need to learn C or something to be a web developer.
posted by drjimmy11 at 2:43 PM on January 21, 2012

You can make web pages with HTML and CSS. Without them, you can't. So learn that, at least enough to understand and change others' work. Ditto JavaScript/jquery.

Learning php these days is like learning html4... It's most common, but looking particularly long in the tooth. Learn to program anything else, and php will make sense. I like python, others like ruby...
posted by cogat at 2:45 PM on January 21, 2012

Learn to do simple things in JavaScript and PHP - set yourself small achievable tasks that are practical and useful. The more relevant they are to things you actually want to achieve the better. I find I can't learn anything reading textbooks, they send me to sleep. But if I have something I want to make, I learn the skills necessary along the way. All the resources you need are easy to find online.

Seconding LAMP as mentioned above - get MAMP or WAMP or whatever equivalent on your machine. Set yourself some tasks, from animating transitions or something simple, up to a db-driven site or web app. Make it fun and useful for yourself and you'll be a good programmer very quickly.
posted by iotic at 2:59 PM on January 21, 2012

liamcampbell: Thanks for the example of a task I could take on to start learning. That's very helpful. Doing the "tutorials" in a book, I've found, aren't super practical, since I'm just copying code into a text editor and seeing what it spits out.
posted by jasondbarr at 3:08 PM on January 21, 2012

Basically state of the art right now in web development is MVC frameworks like Rails or Django, which often use a REST-type interface. You then do some dynamic stuff on the front-end with jQuery and use HTTP(Ajax/Comet/WebSockets) to communicate JSON data back and forth from the server, which the Javascript on the page uses to make updates to the page content

Where things seem to be moving is towards the browser as more of a "real client" - see frameworks like ember.js and mustache templates - so conceptually instead of a browser hitting resources on a server, you have an "app" running in the browser, actively push/pull/streaming data back and forth and then dynamically generating/updating an HTML5/CSS GUI for the user. These apps can ideally be somewhat asynchronous (e.g. look at the way some gmail/facebook/etc actions seem instant - they're actually updating the GUI before the action is completed on the server) and work offline as well
posted by crayz at 3:14 PM on January 21, 2012

To paraphrase Lex in Jurassic Park: "I know this!" (Meaning: I've been teaching web development for a decade, so I have some experience in learning progression in this area).

In my experience, the order goes something like this:

HTML(5) -> CSS(3) -> JavaScript / JQuery -> PHP -> MySQL -> AJAX and everything else (JSON, WebGL, etc)

I describe web development as a multitiered wedding cake, with HTML always being the base flan. Everything else is built on that. You'll want to start with HTML5, as the spec is sufficiently different - and has so many new capabilities - that it will take a little getting used to.

Extending my analogy, CSS is the frosting on the cake. The more interest in web design you have, the more time you'll spend here.

CSS3 starts to shade into JavaScript in interesting ways. Five years ago, things like zebra-striped tables or animation on web pages could only be implemented through JavaScript; now it's much easier to do in CSS3, meaning that JavaScript itself starts to pushed into more complex areas. You'll also find that JavaScript starts to hook into HTML5 a lot. schmod's recent posts on the topic will prove very helpful there, if you haven't favorited them already.

Just to be clear, JQuery is really just a library of shortcuts for JavaScript; you'll get more value out of learning JavaScript first, but it can be frustrating transitioning into JQuery or another framework later and discovering what took two dozen lines of JavaScript code can be accomplished in three lines of JQuery. But knowing JavaScript will give you a much better base of understanding that is framework-independent.

Similarly, JSON and AJAX are techniques in JavaScript, and not new languages. They are often used for real-time communication with databases in conjunction with PHP and MySQL. As such, they can be pushed right to the end.

Very broadly speaking, JavaScript lets you accomplish "flashy" stuff on web pages; PHP is more the greasy engine under the hood, used for basic functionality. PHP features like server-side includes will also allow you to make pages much faster. (Which again, can be frustrating when you've been dealing with maintaining a site of a half-dozen or more web pages, but the learning experience is worth it). At this stage, you'll need a server, as mentioned above; before this point, everything can be created and tested right on your desktop.

Many sites now require a database, so MySQL is the next obvious step... after that, you can start taking big, multi-layered slices of your knowledge to make complete, fully-featured sites.

I hope this helps!
posted by Bora Horza Gobuchul at 3:33 PM on January 21, 2012 [10 favorites]

Some people get a kick out of deriding front-end development as "not programming." There is a technically correct, if annoying, distinction that HTML and CSS are markup and not code.

This is not so much a technicality as the fundamental difference between a serious web developer and a designer.

In the current day and age, one can do most aspects of front-end design without programming much of anything. Yes, you will have to use javascript, but even that can be mostly copied and pasted as the design patterns are so well-solved for 90% of the cases that you need very little programming talent to make that work.

I am not saying, mind you, that developers are better than designers. They do two different, important things. But it would be a mistake to assume that one encapsulates the other.

If you want to be a good web developer (programmer), you need to learn programming. While there is absolutely a ton of that that you can learn as you go and while you're working on projects, there is a lot to be said for having a solid computer science foundation upon which to build.

That foundation makes your programming work easier, it allows you to better understand how things work and why they were probably designed that way, and it separates you from the so-called "developers" who do most of their programming by copy and paste from stackoverflow.

What I'd recommend is to learn how to program. The MIT OpenCourseware Intro to CS is a great place to start, and I think you should be able to work on it in your free time as you start picking up projects to work on (either paid or just as idle curiosity).

One thing I would recommend: expose yourself to as much as you can, but try to figure out what you like and what you're good at. Being a jack-of-all-trades might open a lot of jobs to you, but they're probably not going to be high-level jobs, career-type jobs unless you get a little deeper into SOMETHING -- whether it's design, programming, front-end programming, database work, system administration, whatever. Don't pigeonhole yourself, but play to your strengths and interests.
posted by toomuchpete at 3:52 PM on January 21, 2012 [1 favorite]

PURPOSE: A web developer builds websites. Do that incessantly.

TODO: Make them pop, make them not. Make them store information from people who visit. Make them send messages. Make them animate, make them pretty.

Along the way you'll learn what you need of the technologies you mentioned.

Use StackOverflow and start answering questions there, and start asking them there, preferably in response to problems in the TODO list. The TODO serves the PURPOSE.

Build enough websites and you can get a job anywhere making websites.
posted by artlung at 4:00 PM on January 21, 2012

From the core skills you're missing SQL and relational query design, which every good web developer should know in depth so they're not entirely at the mercy of object-relational mappers; and Git or another distributed source control tool, which every professional developer needs to know now.
posted by nicwolff at 4:16 PM on January 21, 2012

Sorry, my previous response was glib. toomuchpete basically said it all better than me.

I'd also add a vote for learning Python (or Ruby, but I prefer Python) over JavaScript. While very useful, JavaScript is a special snowflake and you end up learning a lot of things that you can't generalize to other languages.
posted by yaymukund at 4:54 PM on January 21, 2012

Knowing CSS and how the DOM works makes jQuery a lot more powerful. Also, be prepared to unlearn everything you learned going in--laying out pages with rigid tables and spacer .gifs is thankfully mostly a thing of the past. (Unless you're doing HTML for e-mail, in which case I am sorry.)

Other things to look into: mobile first as a design philosophy, media queries, progressive enhancement, image compression (remember that? It's important on slower phones again). I keep meaning to start learning Sass because I grow tired of finding-and-replacing CSS elements.

Another field that will be beneficial to study: analytics. It's a lot easier to build pages with analytics in mind at the beginning than to go to an existing site and kick yourself because decisions that you made earlier make measurement more difficult. Google Analytics is a good place to start. It's really powerful and has the added benefit of being free--though personally I still prefer the old interface to the new one.

For design, there is a whole (sometimes complementary) world of stuff to learn. There are tools to help create designs now (like Axure, for example) which are faster than comping in Photoshop and build design specs in a jiffy. There are a host of books on user interface, information architecture, typeface and icon design, mental models, etc.

One final thing to keep in mind: IE8 is the new IE6.
posted by fifteen schnitzengruben is my limit at 7:45 PM on January 21, 2012

I'd also add a vote for learning Python (or Ruby, but I prefer Python) over JavaScript. While very useful, JavaScript is a special snowflake and you end up learning a lot of things that you can't generalize to other languages.

No, to be an capable Web developer now you need at least one server-side language and JavaScript/jQuery. You could replace PHP with Python, Perl, or Ruby, but you need JavaScript.
posted by nicwolff at 9:26 PM on January 21, 2012 [1 favorite]

(There are starting to be node.js jobs out there, so in theory JavaScript is the only language you need – but those jobs are going to serious experts.)
posted by nicwolff at 9:29 PM on January 21, 2012

Also consider: Java, ASP.NET as technology stacks on the server-side. There are a lot of jobs in those, assuming "regular job" employability is a factor in considering technologies. The hosting options for those are more specialized than, say, PHP though.
posted by artlung at 1:12 PM on January 22, 2012

nicwolff: "No, to be an capable Web developer now you need at least one server-side language and JavaScript/jQuery. You could replace PHP with Python, Perl, or Ruby, but you need JavaScript."

Agreed. I'm talking about the order. Learn Python as your first language, because it's easier to learn the JavaScript-specific stuff on top of Python than to unlearn the JavaScript-specific stuff as you're learning another language.
posted by yaymukund at 2:44 PM on January 22, 2012

Bora Horza Gobuchul: "Just to be clear, JQuery is really just a library of shortcuts for JavaScript; you'll get more value out of learning JavaScript first, but it can be frustrating transitioning into JQuery or another framework later and discovering what took two dozen lines of JavaScript code can be accomplished in three lines of JQuery. But knowing JavaScript will give you a much better base of understanding that is framework-independent.

Similarly, JSON and AJAX are techniques in JavaScript, and not new languages. They are often used for real-time communication with databases in conjunction with PHP and MySQL. As such, they can be pushed right to the end. "

Let me add one huge caveat here regarding AJAX. Don't bother making AJAX requests youreself; I realized the other week that, despite having written a plethora of web apps over the past few years, I couldn't remember the last time I actually wrote out a proper XMLHttpRequest. Simply put, when it comes to AJAX, there are a number of browser-specific quirks and hidden pitfalls that can be a huge pain to deal with. Lots of other people have spent tons of time determining the best way to reliably make AJAX requests, using the smallest amount of code necessary. Use one of their libraries.

I understand that web developers are now trending toward an obscene overuse of large libraries and one-size-fits-all UI toolkits. This is probably a bad thing overall, because it signals that the developers understand very little about the underlying JavaScript code. I recently had to debug a page from another developer that included about 18 different libraries in it....for a mobile site that was in production. About half of them weren't even used in the app. However, when it comes to AJAX, let someone else do the heavy lifting, and worry about the tricky bits.

There is an alternative though! If you want to keep your codebase small, but don't want to bother with the intricacies and nuances of Microjs provide a great compilation of tiny snippets of JavaScript code and functions that perform a variety of deceptively-tricky common tasks. Use frameworks and libraries for the tricky stuff, and do all of the easy stuff yourself.

In a similar vein, many polyfills are tiny, add support for new features that can considerably optimize and/or clarify your code, and have no negative impact on users running newer browsers.
posted by schmod at 12:35 PM on February 9, 2012