Anyone know any really good web design tutorial sites?

[Usha Starchild]

Looking for stuff thats up to date and can take someone from beginner to making half decent pages.

Edit: I hope we can get a good little list of websites here, so I'm going to edit all the suggestions into my original post here.

• - W3Schools Online Web Tutorials DisgruntledOrangatang "which is very beginner and hardly comprehensive, but if thats what you are, it's pretty damn good."
  - Smashing Magazine DisgruntledOrangatang "Great site for design, not so much for coding"
  - Web Development & Design Tutorials - Nettuts+ Lenas Great site with tons of tutorials.
  - Web Design Tutorials: The Ultimate Roundup | Graphics Usha "The Best Photoshop tutorials related to website interface design."

[DisgruntledOrangatang]

Well there is of course W3Schools Online Web Tutorials which is very beginner and hardly comprehensive, but if thats what you are, it's pretty damn good.

But you say web design, do you mean simply from the design perspective and not coding it? If so Smashing Magazine is great.

[Mixtilplix]

I have always found books to be the best way to learn HTML/web stuff comprehensively and use online tutorials to augment my knowledge or if I am looking for a specific solution. O'Reilly and friendsofed make pretty good introductory books that will teach you the right way. You can find easily find these books to download at you know where... You can download the accompanying files to these books on the publishers web sites for free.

Also you are going to need an HTML editor to make your sites. You can use a WYSIWYG or text editor. I prefer text editors myself.

[Lenas]

Smashing Magazine and Nettuts+

[Usha Starchild]

Originally Posted by Mixtilplix

I have always found books to be the best way to learn HTML/web stuff comprehensively and use online tutorials to augment my knowledge or if I am looking for a specific solution. O'Reilly and friendsofed make pretty good introductory books that will teach you the right way. You can find easily find these books to download at you know where... You can download the accompanying files to these books on the publishers web sites for free.

Also you are going to need an HTML editor to make your sites. You can use a WYSIWYG or text editor. I prefer text editors myself.

I agree a book is nice to have sitting in front of you, but stuff is changing so fast you need to make sure what your learning is the latest and greatest. With books some of the stuff you are reading could have been written 3 years ago, and in tech terms thats a long time. I'm also in China and have no access to English books

[Usha Starchild]

Originally Posted by DisgruntledOrangatang

Well there is of course W3Schools Online Web Tutorials which is very beginner and hardly comprehensive, but if thats what you are, it's pretty damn good.

But you say web design, do you mean simply from the design perspective and not coding it? If so Smashing Magazine is great.

Thank you very much, Ill exploit those as much as possible. If anyone else has any great sites please let us know.

I want to learn coding and more design. Back when I first studied html etc back in the early - mid 90's we were using frames and really nasty looking gif's for background images. I found this site yesterday with some cool tutorials on doing layouts. Web Design Tutorials: The Ultimate Roundup | Graphics They have a ton of tutorials some of them are really in depth.

[Usha Starchild]

Originally Posted by Lenas

Smashing Magazine and Nettuts+

Thanks, Netttuts looks awesome.

[Hutchy]

Sixrevisions.com is similar to smashingmagazine but with different content. It's very good as well.

[Mixtilplix]

Originally Posted by Usha Starchild

I agree a book is nice to have sitting in front of you, but stuff is changing so fast you need to make sure what your learning is the latest and greatest. With books some of the stuff you are reading could have been written 3 years ago, and in tech terms thats a long time. I'm also in China and have no access to English books

Not true. New internet technologies are actually rather slow coming into use especially HTML. 2000 was the last time HTML was updated(HTML5 doesn't count). Implementation(i.e. web standards) matter most. A three year old book would work just fine today. You can use a book from 2006 and it is still valid today. You can download most of these books in pdf format off the publishers site if you want to pay for them or you can find other ways to download them.

I'll try to kill two birds with one stone. SitePoint is a great site with web tutorials and articles Site Point. They also publish how to books on web design etc. They are really easy to read, color pages, and all. 30 bucks right now gets you 5 pdf books of your choice to download.

[Northerner]

Agreed Mixt. If anything actually, you don't need the latest and greatest tech to produce good webpages and especially at the entry level. Nothing is worse than the new guy's overly loud tech-demo page that conveys no information and is essentially useless if not detrimental.

If you want to get into it, learn the design elements first and the coding/standards/tech second.

[Usha Starchild]

Originally Posted by Northerner

Agreed Mixt. If anything actually, you don't need the latest and greatest tech to produce good webpages and especially at the entry level. Nothing is worse than the new guy's overly loud tech-demo page that conveys no information and is essentially useless if not detrimental.

If you want to get into it, learn the design elements first and the coding/standards/tech second.

The advice is well appreciated. What would you learn first if you were to start fresh?

HTML then Javascript?, Flash?

End results is you want to be able to set up a website that can have a large database of info such as product photos and specs.

[Ketu]

Originally Posted by Usha Starchild

What would you learn first if you were to start fresh?

How to develop without tables.
A demonstration of what can be accomplished visually through CSS-based design.

[Mixtilplix]

Originally Posted by Usha Starchild

The advice is well appreciated. What would you learn first if you were to start fresh?

HTML then Javascript?, Flash?

End results is you want to be able to set up a website that can have a large database of info such as product photos and specs.

Honestly Usha if you are trying to learn how to code a big ecommerce site from the ground up by yourself and without any prior experience you are in for some fail. Developers don't normally do everything. Some do the site architecture, another will do front end(i.e. UI), and then another will handle the server side coding, plus you also need someone to do the db(usually the server side coder). Do you know that you will need a VPS to run a dynamic application like that? There are a lot of variables that you need to be aware of.

But the usual path to learning is HTML->CSS->JAVASCRIPT->SERVER SIDE CODING(PHP, ASP.NET, COLDFUSION, JSP, ETC.)

[Usha Starchild]

Originally Posted by Mixtilplix

Honestly Usha if you are trying to learn how to code a big ecommerce site from the ground up by yourself and without any prior experience you are in for some fail. Developers don't normally do everything. Some do the site architecture, another will do front end(i.e. UI), and then another will handle the server side coding, plus you also need someone to do the db(usually the server side coder). Do you know that you will need a VPS to run a dynamic application like that? There are a lot of variables that you need to be aware of.

But the usual path to learning is HTML->CSS->JAVASCRIPT->SERVER SIDE CODING(PHP, ASP.NET, COLDFUSION, JSP, ETC.)

I actually just want to learn as much as I can over the next year, once I know more I will start on a project and if it comes down to it hire help. I like to know what I'm working with before I ask others to do it for me. I know a shit ton about construction and auto repair, so when I do decide to ask someone to fix something for me, I know what to pay and how long the work should take. When you blindly hire people you get screwed by poor work ethics more often than not.

I appreciate all your advice, thanks.

[simeon]

First thing's first: get a solid baseline for your knowledge. A little bit of theory of how things work can go a LONG way. Blindly learning technologies (HTML, JSP, Servlets, blah blah) without knowing how or why they are interconnected leaves a lot of gaps in what you know. Having that baseline will help the learning go a lot smoother.

Learn the general stuff:
- Request / Response model and how a browser interacts with a server
- URI's
- Difference between GET and POST
- Static vs dynamic site
- Usual components for a dynamic site
- Understanding the chain of how information is passed from one thing to another
- Responsibilities of HTML/CSS vs JSP vs Servlet or some other server side technology vs Database

This will take you a couple hours, and shouldn't be too overly complicated, but the benefits are pretty significant.

After that, below is the recommended route I'd take. The main thing you should be concentrating on is getting the information you want to the screen. It doesn't really matter how this information looks. This is why CSS, page layout theory, and other GUI elements should come secondary to the actual functionality of your site.

Therefore:
1) HTML - It's a nice foundation. It's easy. The entire purpose is to display your information. Don't get too hung up on the intricacies which you can always Google. Aside from the general structural layout, focus on form submission.

2) JavaScript - If you're familiar with a higher level programming language already, just throw this further down the list. Otherwise, it's a nice easy transition into learning 'heavier' and more mainstream imperative / object oriented programming languages (Java, C, C++).

3) Unless you're REALLY serious (which it sounds like you're not): PHP - See what it can do and compare it to JavaScript. Understand how PHP is different than JavaScript. They're both 'scripting languages' but what are they each controlling?

4) Databases - Get a general understanding of what an RDBMS is and their accompanying basic ideas: primary / foreign / composite keys, cardinalities, etc.

5) SQL - Learn how to create tables and produce other queries needed to communicate with the database server so that you can store and retrieve your information.

6) PHP Database ODBC - Learning this will teach you how to connect to your database in PHP so that you can make SQL queries directly from the code your web application. This is the key that exposes the information from your database to the client (browser).


Voila. By then, you should know the entire chain of how information is then submitted from HTML, through PHP, stored in a database, retrieved from a database back to PHP, and finally back to the client.

Now it's time to make it look pretty. This is where you can learn CSS and more advanced JavaScript.

If you make it this far and you're honestly still interested to learn, go back to school and get a degree. You'll get a core understanding of both higher and lower level programming languages and most importantly the theory associated with it. Deep understanding of complex algorithms and data structures are KEY in site performance for high traffic web applications. Once you learn that, you can transition your knowledge into the more 'grown up' technology of J2EE and graduate from that kiddie PHP stuff. :-)