What's the best way to learn web design?

November 6, 2008 2:20 PM

Best way for a beginner to learn web design and Dreamweaver?

Several years ago I used to be into web design (back when it was basically just HTML) and I did a lot of the coding myself. It's a hobby I would like to get back into, no rush. I have noticed that things have significantly changed; CSS, Flash, XHTML, etc.

If you are a web designer in this day and age, how did you learn? I've seen the Lynda series out there, so that's an option. I would prefer to learn on my computer at home but I'm open to buy a nice book or two. I am just wondering what out there is effective and a good source of information for beginners, especially with using Dreamweaver. Like I said, I'd like ot combine the two in the same tutorial if possible.

posted by jwfree to computers & internet (13 comments total)

Stick to the basics in the beginning - XHTML & CSS. Grab a nice text editor and learn about the process rather than using a nasty, dirty-code-writing beast like dreamweaver. Not trying to be difficult but if you learn the underlying code rather than dragging elements around on the screen you will be much better off (and standards complaint and more google friendly). Its not like HTML and CSS are massive languages to learn... 20 html tags and 30 css properties will get you a LONG way.

Then make yourself a site.

I don't even bother with books now, google and a few good sites are better reference than any book.

html discussions, + more - alistapart.com
html validator - http://validator.w3.org/
posted by wackoacko at 2:37 PM on November 6, 2008

Best way to learn is by doing it.

Register a domain, get a hosting service, and come up with an idea.

Put a site together. See what problems you run into. Go nuts. Look up those problems. You'll probably have fewer than you fear.

If you have a background already shouldn't be that hard for you.

CSS is a lot like html. I don't use flash at all (and would prefer others didn't, but that's my preference). XHTML is just a stricter mark up than html, and not something you have to do.

I wouldn't buy books at all.

You didn't mention if you are wanting to build static or dynamic sites, but regardless, here's some good links to get started.

CSS/Markup Resources
css Zen Garden
SitePoint CSS Reference
CSS Mania
CSS Validator
Markup Validator
web typography

Web Design
Kirupa
Technotarget
Web Designer Wall

It would also be helpful to know which side of the Mac/PC debate you come down on, and which version of Dreamweaver you use.

Adobe also has a thriving community and decent tutorial.
posted by cjorgensen at 2:44 PM on November 6, 2008 [3 favorites]

Oh yes, I forgot to mention I'm a PC user. I haven't had to chance to look into Dreamweaver versions. I figure I might as well get the newest and after I drop some serious cash on it, that will make me want to learn even more...

I would like to get to the point where I could create dynamic sites. Then I would need to brush up on databases. I have checked out different content management systems like Drupal and Movable-Type. It would be great if I could get to the point where I could use a CMS platform but design my own theme(s) for them.
posted by jwfree at 2:53 PM on November 6, 2008

Why are you drawn to Dreamweaver? As stated above, I think you could work from the ground up and do better in the long run. Refresh your knowledge and go from there.

I'm not really sure why you have to buy a domain to test out your coding - just examine it in various browsers for a first examination.

Also, make sure you really want to pay for Dreamweaver. Sure, it's pretty handy, but it can make some VERY ugly code. I use Dreamweaver as an easy instant-review of the code you have, but I'm sure there are cheaper routes towards that. And there are PLENTY of programs that will color your code for easy review.
posted by filthy light thief at 3:04 PM on November 6, 2008

If you want dreamweaver, then get it. It will certainly help speed things up, especially since you want to get into dynamic websites (database driven).

Just avoid leaning on the drag and drop, design WYSIWYG mode, and learn to use it more as a code editor.

Yes, get your own domain (they're like $10 at godaddy).

And yes, get some hosting that supports PHP/mySQL or whatever language you decide to work in (you mention Drupal and Moveble Type = PHP based)

As for not needing a domain/hosting, 'just examine in various browsers' - that's incorrect information, bad guidance, if you want to get into the dynamic, PHP, CMS stuff, as you'll need to see it all working. Yes, hosting will help, but you'll also need to set up a server (apache, php, mysql) on your local machine to see things working BEFORE you upload.

As an aside, the problem I have with this question is that it buries so many non-HTML issues under the surface - gee, I wanna make websites, so all I have to do is learn 30 tags or so and I'm done.

Folks, that's about 10% of what makes a great website (and great website developer) - but the thinking is so common, it's impossible to dislodge.

Anyway, here's to yet another of the eleventy-billion*.
posted by MTCreations at 3:19 PM on November 6, 2008 [2 favorites]

I used the Lynda DW book and if you follow it carefully step-by-step it does a good job of showing you the basics. I found it confusing at first but now can understand manage BASIC web development fairly well. I think the rest would come with practice, but I don't do enough to continue learning - my forgetter is too good. (Not a well-made book though - the spine fell totally apart.)
posted by anadem at 3:42 PM on November 6, 2008

If you really want to learn Dreamkill ... er, Dreamweaver, use Lynda.com.

In grad school, we learned to build our own sites from the ground up: hand coding our own design.

I highly recommend O'Reilly's Web Design in a Nutshell, by Jennifer Niederst Robbins. At the same time, pick up O'Reilly's CSS Pocket Reference by Eric A. Meyer and also Niederst Robbins's HTML & XHTML Pocket Reference.

Buy some colored pencils (high tech!) to rough out your design. And get BBEdit to help with your coding. It uses color coding within the text file to help you put stuff in the right place, which is a big problem for me. I do not have BBEdit, and I am going to get it soon. But, you could just use whatever text editor you have.

O'Reilly's Head First HTML with CSS & XHTML by Freeman and Freeman is pretty good but uses some rather juvenile teaching devices, IMNSHO. It does have a companion Web site for the lessons, which is a great feature.

Learn hand-coding first, then work with Dreamweaver. It is pretty nice to have DW fill in the top of the page for you, but that's about as much as I really trust it for. DW's real strength is its connection to the entire CS package.
posted by jgirl at 4:02 PM on November 6, 2008

I use the Sitepoint book Build Your Web Site the Right Way to teach my intro XHTML/CSS classes. I like it because it does clean XHTML, using divs, right from the start, without teaching any "bad" deprecated habits along the way.

If you want my class notes drop me a mefi mail!
posted by media_itoku at 4:39 PM on November 6, 2008 [1 favorite]

Adding my voice to the "God no, not Dreamweaver" camp. Get a good text editor and do it right. Dreamweaver is...never mind. Just say no. (Not picking on Dreamweaver in particular; all WYSIWYG engines suck.)

Install Drupal, install a barebones theme like Zen, copy the Zen folder and rename it, and go nuts on it.
posted by bricoleur at 5:02 PM on November 6, 2008 [1 favorite]

I did just this. I started with the trial of Dreamweaver, got frustrated, so I just got Crimson Editor, did the courses at W3 Schools, and played around. I produced a halfway decent website in a couple of days. Dreamweaver actually makes things harder in the long run, IMO, it produces ugly code, limits your flexibility, and when all is said and done, you know how to use Dreamweaver, you don't know how to code. In the amount of time it will take you to actually use Dreamweaver beyond the very basics, you could learn how to code it yourself and actually produce what you want. Save your money, learn how to hand-code.
posted by biscotti at 5:42 PM on November 6, 2008

I'm not sure I have a resource for this, but just remember that a lot of good web design is just that: DESIGN. You don't have to be a graphic designer, but start really looking around at websites and seeing what works, what doesn't. Get friendly with istockphoto.com, which has a great selection of graphics at good prices. They also have some easy-to-use xml photo galleries, etc.
posted by radioamy at 6:17 PM on November 6, 2008

People have strong feelings about hand-coding vs. Dreamweaver. I do all hand-coding myself, but I think Dreamweaver is a fine choice if you want to start with a more visual approach to web design. Just be aware that it's limited in a lot of ways compared with hand-coding. There's no real impediment to learning hand-coding as a WYSIWYG user when you decide you're ready; you can even use Dreamweaver to facilitate the process by opening the split view and observing how your markup changes as you alter visual elements and vice-versa.

BBEdit won't work for you as a PC user. I like Notepad++ as an editor for HTML/CSS; it's fast, stable and free. But there are lots of good choices, free and paid, for editors that make hand-coding more enjoyable than the stock Notepad editor.

You don't need a domain or a webhosting service until you're ready to show your work to other people. As MTCreations mentions, you do need Apache, PHP and MySQL installed on your PC to do any dynamic stuff, including installing a CMS like Drupal. The easiest way to do that on a PC is XAMPP.
posted by [user was fined for this post] at 6:29 PM on November 6, 2008

"you can even use Dreamweaver to facilitate the process by opening the split view and observing how your markup changes as you alter visual elements and vice-versa."

Yes, I do like that a lot.

Well, sorry, I didn't realize that BBEdit won't work on PCs. But by all means get a more advanced text editor.
posted by jgirl at 7:55 AM on November 7, 2008