Learning web programming, good tutorials?

[narreth]

If I have some experience with basic programming and matlab/VBA, which languages do I need to learn to do web development? PHP/HTML? What about flash? I'm looking for good tutorials so I can teach myself.

 

[911paramedic]

Start with the basics and work your way up. I would think:

• HTML
• CSS (for styling the content, NEVER use HTML for that)
• PHP
• Javascript
• ...

I don't know of any video tutorials off hand, but the best resource IMO is http://www.w3schools.com/default.asp

 

[Ken g6]

First, I second w3cschools. I'm not a tutorial kind of guy; I just look at some existing code, change it as necessary, and refer to references - like w3cschools - as necessary.

I can point you to some tools that will make learning easier:

2. Get Firebug. Firebug lets you see what's going on on any page with HTML, CSS, and Javascript; plus you can modify CSS and execute your own JavaScript, all from within the browser!
3. Learn HTML. It's pretty dry, but it's the foundation for just about everything else on the web.
4. Learn CSS, at least a little.
5. Get Stylish. With Stylish, you can change the CSS on any page any way you want, in real time! Also look at styles others have made and learn from them. Try out their techniques on sites you want to restyle. Try using FireBug to identify the elements you want to restyle. When you can restyle any site, you can certainly style your own site!
6. Learn JavaScript, at least a little.
7. Get Greasemonkey. Greasemonkey lets you add JavaScript to any site the way Stylish lets you add CSS. Also look at scripts others have made and learn from them. Try using FireBug to identify the elements you want to modify with Greasemonkey. Use FireBug's console to execute and debug most Greasemonkey scripts. Particularly get comfortable with modifying the InnerHTML attribute of elements.
8. Now that you're used to modifying HTML, how about a language that writes HTML? Well, they're called Server Side Scripting languages, and there are several of those! You can stick with JavaScript, with Node.js. Or you can branch out to PHP, or maybe even ASP.NET. But you may want to learn C# before learning ASP.NET.

There's plenty more stuff to learn, like jQuery for JavaScript, or SQL for AJAX and most Server Side Scripting languages. And Flash is a world unto itself. But I hope this gives you a good start.

 

[eldavo]

I've recently been enjoying Rails 3.0 (the latest incarnation of Ruby on Rails). The documentation is great and I think that the library (called 'gems') management is a done well. If you're more of a visual kind of guy, they have great screencasts.

If I might add something to Ken g6's excellent post, I'm a big fan of using selector gadget and Nokogiri when "interfacing" with websites (*wink* *wink*).

 

[Ka0t1x]

+1 for Ken's suggestions.

Its far much easier to learn HTML/CSS and then incorporate a scripting language followed with a DBMS.

JavaScript is made easy with jQuery. Learn to love it.

Also, I've been doing PHP w/ MySQL/Oracle for the past..5+ years.. but I'm getting into Rails again with v3 release... Rails just seems to be a better experience, and they're getting MUCH better at performance. I've tried frameworks in PHP.. it just doesn't work.

Gogo RyanBates @ railscasts.com

 

[911paramedic]

I forgot to mention this until I read Ken's post, you should really get the web developer toolbar for firefox. A real must have IMHO.

 

[PhatoseAlpha]

Hey Ken, what's the point of Stylish if you've already got Firebug installed? You can already edit styles in real-time with firebug.

 

[Ken g6]

If I might add something to Ken g6's excellent post, I'm a big fan of using selector gadget and Nokogiri when "interfacing" with websites (*wink* *wink*).

This reminds me of a very old argument I keep having when doing automated testing. For automated testing, it's necessary to have a program automatically identify a control, or textbox, or even an element of a web page, even if that element has moved or changed. Automated testing tools usually include a way to automatically identify an object; but they also let you manually specify how to identify an object. Personally, I prefer to specify how to identify an object manually, to minimize the chance of mis-identification.

For CSS, I think manual identification is even more important, so you can specify a certain set of objects and no others. I'm trying this selector gadget, but it's not working very well for me. I'm not seeing a way to select, say, all

buttons on this page and nothing else, for instance; or all images inside all posts.

Edit: Oh, I forgot to mention my favorite CSS reference! I know, it's pink. D: But it's quite complete, and it links to a selectors support chart, so you know whether your CSS is supported on a particular browser.

 

[eldavo]

For CSS, I think manual identification is even more important, so you can specify a certain set of objects and no others. I'm trying this selector gadget, but it's not working very well for me. I'm not seeing a way to select, say, all

buttons on this page and nothing else, for instance; or all images inside all posts.

Well, color me confused. I went to a thread with images and clicked one. It gave me this string: .tcattdimgresizer which seemed to select all the images inside Nokogiri's css method. *shrugs*

Personally, I prefer to specify how to identify an object manually, to minimize the chance of mis-identification.

Right and the 'quote' buttons have no clear identifiers which makes their selection difficult. The selectorgadget tool is a suggestion for people who wish to harvest information from the web. Hence the winking. If I were ever coding a website I wanted to regression test, I would use clear formulaic identifiers in an HTML5 compliant style for easy and assured script selection. Nobody seems to do this though.

Here's an example of a fun first project for new Rails developers looking to do something interesting with a site they like on the web. I suggested selectorgadget as a tool to understand CSS classes, I use it a lot at home.