Tags:

What are the best resources online to learn Web design or Web development from scratch ?
January 17, 2011 6:23 AM   Subscribe

I want to learn Web design. It is my goal to create web sites with the latest techniques. Where can i learn the skills on-line ? Also, i would love to be informed about useful forums or communities on-line that would actively assist a newbie like me.
posted by Yiba to computers & internet (13 answers total) 90 users marked this as a favorite
 
Lynda.com is a great resource for tutorials/instruction.
posted by TheBones at 6:26 AM on January 17, 2011 [2 favorites]


Css Tricks. His screencasts are great, and there is a forum as well (I've never used it, though - so I am not sure how good it is for beginners). HTML & Css - The Very Basics might be a good screencast to start with.

Nettuts+ also has some good material.
posted by backwards guitar at 6:34 AM on January 17, 2011 [3 favorites]


HTML Dog will teach you modern XHTML and CSS.
posted by ixohoxi at 6:43 AM on January 17, 2011 [2 favorites]


Don't focus on just the latest techniques, trends, and styles; learn and understand the basics of design. Here's a good place to start: Gestalt principles of perception.
posted by Mick at 7:40 AM on January 17, 2011 [5 favorites]


If anyone points you to W3 Schools, show them this.

Seconding Chris Coyier and HTML Dog.

Roger Johansson at 456 Berea St regularly has some great articles, especially on accessibility as do the teams at A List Apart and Smashing Magazine (the comments at the latter are generally less useful though).

A couple of other sites for your feed: Noupe and Six Revisions.
posted by ceri richard at 7:52 AM on January 17, 2011 [1 favorite]


I've really enjoyed the Head First series. They're packed full of information presented as concisely as possible. I often have to get up to speed on various technologies at work and I no longer have the patience for text heavy 3 pound bibles anymore. The Head First books get straight to the point, have a fun and informative visual style and plenty of examples. After all, it's faster for our brains to process pictures than to read a paragraph.

I'd say start with Head First Web Design and Head First HTML with CSS & XHTML to get the basics down. They also have a host of other books covering other web technologies.

Good luck and have fun!
posted by vilandra at 7:57 AM on January 17, 2011


Sorry, I seem to have deleted the first part of my reply which recommended the 2 week courses at SitePoint. The CSS course with Russ Weakley is especially good and a steal at $9.95.
posted by ceri richard at 8:02 AM on January 17, 2011


www.diveintohtml5.org is a really well written resource, and a useful primer even if you don't care all that much about HTML5.

http://www.alistapart.com/ has been going for ages, and has some really useful information.

Sitepoint has a good communitiy afaik, but I don't know how newbie-friendly they are. The Stackoverflow community is more geared towards the scripting and programming side, but they do cover HTML and CSS. They're definitely not geared towards the beginner, but they will be useful at a later stage.

Don't ever be afraid to look up syntax and tag definitions etc.
developer.mozilla.org is really useful.
Google will also be incredibly useful.

Basically, you should start out learning how to do static web pages in HTML and CSS. Nettuts and Psdtuts have some great tutorials on designing site comps (basically a picture of what you want the site to look like) and then turning those comps into actual websites. Once you've got that whole process down, you can start using a javascript library like jQuery to make the front-end more dynamic, and some sort of server-side language like PHP, Python or Ruby. But that's for a very other day.

As far as tools go, here are the basics: Good luck, and have fun!
posted by Magnakai at 8:08 AM on January 17, 2011 [4 favorites]


The rhetorically titled Can you teach yourself web design? article here includes some resources on where to start.
posted by londonmark at 8:10 AM on January 17, 2011


Rather than add to this already phenomenal list of resources, I just want to give a few notes about what you will likely encounter along the way...

1. Sites trying to sell you something. Lynda.com is about the only one out there that I'd consider worthwhile (although I know people who may or may not have pirated their videos...). The best part about learning web design is that if you are looking to learn something about it, odds are you can find anything you need online for free and with good quality of content. If you can't, there are great sites to ask your questions on.

2. Becoming overwhelmed. You'll learn pretty quickly that HTML and CSS are not going to cut it for "the latest techniques" you are looking to learn. The web is now a convoluted mess of languages that all have their appropriate uses. I had a working knowledge of HTML a couple years ago and didn't know anything else. I decided to get my skills "current" for my own projects, and it was a major journey to get where I am and I'm STILL not there. If you want some shortcuts to creating great sites, depending on the type of site, pick a CMS (like Wordpress) and become very comfortable with it. Once you pick up some basic HTML and CSS, and then some PHP and MySQL, you should be able to hack together just about any kind of site you need. A bonus is that the big CMS's out there have HUGE helpful communities for support, and free plugins for just about anything you could want to do.

3. Good web design also means good graphic design. Don't forget to brush up on your general design skills. Being able to photoshop a nice layout, and then code it, is a great skill to have. Plus, you'll find that some cool web design techniques require very specific types of graphics for them (think advanced CSS techniques).

4. Think hard about why you are embarking on this journey. I don't say all of this to discourage you, but I advise you to do some deep thinking on what you really want to get out of this. In my case, I am an affiliate (and as of last night proud owner of an ecommerce site) and so creating awesome sites and marketing them online is how I make money. At a certain point, depending on what I want to do, it is cheaper to just outsource the design/development. However knowing the bit of coding I do and being able to do my own design in Photoshop has saved me a fortune and allowed me to hack together just about anything I have needed thus far. There are still some very advanced ideas I have that are far beyond my reach, and I recognize that to get to the point where I can do that, I really need a lot of general computer science knowledge (algorithms and such) which is likely more than I want to get into. So recognize your true goals and your limitations. Learning something new is never a bad thing, but if you are doing this for profit, you may find a point where it just makes more business sense to outsource.

5. Don't disregard good content. If you have any aspirations of getting people to actually visit your site (which you may not if its purely a personal project thing), you need to rank well in search engines or pay for traffic. Ranking well in search engines requires three key things: relevant content, backlinks from authoritative/trusted sites, and a well-optimized site (SEO, which is a whole different rabbit hole to go down).

Good luck on your journey. It may be a long one, but it is definitely worthwhile.
posted by Elminster24 at 9:27 AM on January 17, 2011 [1 favorite]


I am elated by the response so far. Keep it coming!
posted by Yiba at 9:45 AM on January 17, 2011


If you want some shortcuts to creating great sites, depending on the type of site, pick a CMS (like Wordpress) and become very comfortable with it.

THIS. Once you're comfortable with creating static sites with HTML/CSS/jQuery, immediately specialize in a CMS. You'll start to learn a ton of PHP and SQL goodies, which will help if you ever want to actually learn PHP in earnest.

I can't recommend starting with wordpress hard enough. It's relatively simple to understand, and the codex has a ton of great documenation.

If you're on a mac and looking for a decent text-editor/ftp client/project management/ssh client, I've been using Coda for about a year now. It's a bit pricey (I hear it's cheaper on the App store), but it's worth it. The autocomplete and CSS editor make front-end coding much quicker once you're used to writing your code by hand.
posted by thsmchnekllsfascists at 9:45 AM on January 17, 2011


For relatively well organised introductions check out the Opera Web Standards Curriculum, WaSP InterACT or The Peer 2 Peer School of Webcraft.

For any questions you have along the way try stackoverflow or doctype.

For online discussion and community try reddit, the Web Standards Group, WebDesign-L or CSS Discuss.
posted by robertc at 3:08 PM on January 17, 2011


« Older Replacing my dinosaur desktop ...   |  YANMD Filter - weird body swel... Newer »
This thread is closed to new comments.