How to learn web design online?

What are the best resources online to learn Web design or Web development from scratch ?

  • 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.

  • Answer:

    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 http://www.jquery.com 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:Firefox with Firebug - essential for bug testing and fixing all the weird errors that will happen. Also, really useful for the live CSS preview.A good text editor. All websites are almost all text in one shape or form. You can easily build a really nice looking site using nothing but Notepad. However, a nice editor with http://en.wikipedia.org/wiki/Syntax_highlighting is really, really useful. People have almost come to blood over their favourites, but I'll weigh in:Textmate on the Mac. Once you have this set up well, it's amazing how much coding time you can save. It's a beautiful thing.Textwrangler on the Mac. Free, and really well specced. It's a bit complicated at times, but will do almost anything you need.Notepad++ on the PC. Free, and really customisable. It's a bit complicated to set up, but can be really quite powerful.Dreamweaver - PC/Mac. I can't get on with this for neither love nor money, but it has it's fans.Visual Studio Express - PC. Apparently these free dev tools are very good, but I've never tried them. Definitely worth a shot though. A visual CSS editor can be really handy. As already mentioned, Firebug has a live CSS preview that should serve you very well. If you're on the Mac, CSSEdit is very good, but not free, and should be used after you know CSS properly. FTP software! Filezilla is free and cross-platform. Transmit is paid-for for the Mac, but the best that I've tried. An HTML validator! This is a web service that makes sure your code is correct. The http://validator.w3.org/ is the classic example, but http://validator.nu is a really nice alternative that supports HTML5 syntax. Good luck, and have fun!

Yiba at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

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: http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php.

Mick

http://www.css-tricks.com. 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). http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/ might be a good screencast to start with. http://net.tutsplus.com/ also has some good material.

backwards guitar

Lynda.com is a great resource for tutorials/instruction.

TheBones

http://htmldog.com/ will teach you modern XHTML and CSS.

ixohoxi

If anyone points you to W3 Schools, show them http://w3fools.com/. Seconding Chris Coyier and HTML Dog. Roger Johansson at http://www.456bereastreet.com/ regularly has some great articles, especially on accessibility as do the teams at http://www.alistapart.com/ and http://www.smashingmagazine.com/ (the comments at the latter are generally less useful though). A couple of other sites for your feed: http://www.noupe.com/ and http://sixrevisions.com/.

ceri richard

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.

Elminster24

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 http://www.amazon.com/exec/obidos/ASIN/0596520301/metafilter-20/ref=nosim/ and http://www.amazon.com/exec/obidos/ASIN/059610197X/metafilter-20/ref=nosim/ to get the basics down. They also have a host of other books covering other web technologies. Good luck and have fun!

vilandra

Sorry, I seem to have deleted the first part of my reply which recommended thehttp://products.sitepoint.com/. The http://courses.sitepoint.com/css-live is especially good and a steal at $9.95.

ceri richard

The rhetorically titled http://freelancefolder.com/can-you-teach-yourself-web-design/ includes some resources on where to start.

londonmark

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.