How do I teach myself Web Design?

January 5, 2012 4:31 PM

How do I teach myself Web Design?

So, I've been working with the web since I was a young'n.

I write a lot, I'm a creative chap, which in today's modern world of flying cars and meals in pill form means that I constantly have ideas for small, single serving websites that would serve as the backdrop for some hilarious memetastic awesomeness that would enhance my prowess as a man and a cyborg.

The problem always is, or at least I always say it is: I don't know how to code, I don't know how to vector or resize or magic wand or cyberspace. I don't know how to take the drawings I've done of the site and insert them into the interweb so that people will cluster around their dehydrated water coolers to discuss them.

So, if I wanted to make a website, what's the best way of teaching myself? Stuff like this, except more illustrious. Let's say I have an idea for an incredibly simple website, what's the first step? How do I do this? Like, I know there are resources, which ones? Do I need to bite the bullet and just pay for courses from a lovable robot or something? Do I need to get bitten by a Wereputer and wait till the next full moon?

HELP

posted by Willfull to Media & Arts (25 answers total)

That website doesn't look particularly simple. It's probably best to start with HTML, which is super easy, then move on to CSS, then onwards to...well, I don't know what's next. It would depend on what you wanted to do.

Do you have an understanding of the difference between, say, JPG and PNG and the strengths and weaknesses of the formats?
posted by The Lamplighter at 4:36 PM on January 5, 2012

Response by poster: No, I most certainly do not.
posted by Willfull at 4:37 PM on January 5, 2012

Do you actually want to code or do you just want to make a website by any means necessary?
posted by The Lamplighter at 4:40 PM on January 5, 2012

Response by poster: I want to learn to code.

I've made websites in the past by paying other people to make them.

I don't want to do that.

I want to make it m'self.
posted by Willfull at 4:43 PM on January 5, 2012

There are lots of templates available free for sites and you can start with those and learn how they are put together by examining the code and there are plenty of free HTML/CSS tutorials all over the Web. There are plenty of places where you can host sites for free.

If you just want to get started, just dive in and start playing. Start with an idea for a basic site, build it, test it and then work your skills up to more advanced layouts as your knowledge grows.
posted by dg at 4:44 PM on January 5, 2012

Would a tumblr blog or something like that work for you? They are extremely simple.
posted by The Lamplighter at 4:44 PM on January 5, 2012

W3 Schools offers a Web Building Primer course which includes hands-on exercises. I haven't gone through it but I've been impressed by some of their other courses.
posted by davcoo at 4:47 PM on January 5, 2012

Response by poster: If designing a Tumblr blog will get me started, then a Tumblr blog it shall be.

If you had a six year old that wanted to make a Tumblr blog all on their ownsome, what would you tell them to do to to get started?
posted by Willfull at 4:48 PM on January 5, 2012

Most incredibly simple websites these days are built from templates and widgets. You pick a content distribution platform (tumblr, blogger, drupal, wordpress, etc.) and decide which widgets to plug into it. You pick a template that someone else designed, then you fill the damn thing with content.

Louis vs Rick is built on tumblr.

Great single-serving websites like youarelistening.to/losangeles take interesting widgets (such as free streaming ambient music and free streaming police band radio) and plop them together in a simple but attractive webpage. Boom.

It sounds really advanced to be talking to you about widgets and templates and stuff, but really the best way to get to where you can build this kind of thing from scratch all by yourself is to first build it on top of other people's hard work, then go back over their code and learn from it. That's pretty much how I taught myself HTML ten years ago, and I'm quite sure it still applies today.

Steal, tweak, improve, learn.
posted by carsonb at 4:49 PM on January 5, 2012

If you had a six year old that wanted to make a Tumblr blog all on their ownsome, what would you tell them to do to to get started?

I'd tell them to go to and sign up. It's not hard at all.
posted by The Lamplighter at 4:55 PM on January 5, 2012

I would absolutely not suggest starting with tumblr or any other template based site. You will get hung up on the particular quirks of that particular system, which will waste your time since your end goal is not in fact to learn that particular system.

Start with basic HTML and CSS tutorials, which are widely available and easy to find (w3schools is a fine place to start; some of their information is a bit dated but none of it is wrong). Step two is to see something cool on somebody else's website, hit "view source", and figure out how they did it. Repeat step 2 for the duration of your website building career.
posted by ook at 5:31 PM on January 5, 2012 [1 favorite]

I code by hand. I'm self-taught. I started with a basic HTML how-to in 1995. My first site was weak and lame. Now I can handle CSS, JavaScript, Perl and all the fun things you can do with (X)HTML. My learning curve came mostly from three sources:
1. Webmonkey tutorials. There is a lot here, some is outdated but it is a really good starting point. Start with basic HTML and then run through the JavaScript and CSS tutorials.
2. A List Apart. There is far less basic stuff here but a lot of really good in-depth stuff from some very well-regarded designers.
3. The ever-excellent Dive Into series. The author (Mark Pilgrim) has taken the originals offline but many of the series are mirrored elsewhere. If nothing else, I suggest the Dive Into Accessibility and Dive Into HTML5 guides.
posted by caution live frogs at 5:36 PM on January 5, 2012 [19 favorites]

Addendum: if like me you burn through all of the above, you should endup with the best skill ever - the ability to look at someone else's code, figure out what they did, figure out how to adapt it to do what you want, and implement it. If you can't do it on your own, but can figure out how to do it by dissecting someone else's code, you're golden (even if your solution is an awkward, inefficient hack, it's yours and you can be proud of it!)
posted by caution live frogs at 5:38 PM on January 5, 2012 [1 favorite]

Starting at the rock bottom and with dead tree I would suggest Williams' Non-Designer's Web Book which has brought many a fledging student through design concepts and practical things such as, what is the difference between jpg vs. png files.
posted by jadepearl at 5:42 PM on January 5, 2012

I think Tumblr is a fine place to start in this case (a) because it seems to give complete control over the HTML, CSS, and even Javascript without paying a cent, (b) because the chunks of stuff that come from the database are templated in a way that resembles pretty much any CMS or templating engine, (c) because it's not totally clear you want to go pro and may just want to make one nice site, and (d) because it means you don't have to learn more about web hosting to get your final site up.

What you want for learning HTML/HTML5, CSS, and Javascript is Opera's Web Standards Curriculum, and Tumblr's documentation explains almost everything else about how to code it. As for graphics, perhaps you have a Mac and can use Pixelmator really cheaply. Otherwise, I think your options are challenging (GIMP & Inkscape) or grossly expensive (Photoshop & Illustrator), although the latter are ultimately what you'd choose for professional design work, and there are many thousands of tutorials for them.
posted by Monsieur Caution at 6:01 PM on January 5, 2012

I decided to make the website for my own small business. The website wasn't important or really necessary so I didn't want to pay anyone for it. I started out learning simple HTML and CSS. The problem I found was I still lack the creativity and design sense to make the website have the professional and polish look I was after. Also, I was often frustrated by the layout issues with different browsers. In the end I discovered Drupal. While it isn't the answer for everyone, it was the right answer for me. My goal wasn't to be a great or even good web designer. I just wanted to have a nice website I could tweak and update easily.
posted by drug_dealer73 at 6:10 PM on January 5, 2012 [1 favorite]

Added to all of the excellent resources above, I just finished reading CSS For Print Designers[*] and dammit, I wish that it had been around when I started out.

Bonus: he has a great sense of humor.

If you like video tutorials, Russ Weakley's Practical CSS course on Learnable is excellent too (some of the videos are on YouTube).

Personally, I would avoid Tumblr, WordPress, etc at the very start: get a domain + cheap hosting, create some simple html/css pages to upload and test without the bother of working out if existing code is interfering with your own.


[*] For "print designers" read "anyone who wants to build a website and learn how to do it properly from scratch, including the difference between .jpg, .png format, etc.".
posted by humph at 5:00 AM on January 6, 2012

(Also, avoid W3 Schools.)
posted by humph at 5:02 AM on January 6, 2012

Design starts with an idea. A good idea typically works better than a bad idea. You have to communicate this idea to your audience so knowing your audience very well is an excellent second step. Get to know what works for them and what their expectations are when they come to your site.

Now you move on to the part where you have to communicate visually. Look at some of the masters of graphic design. Start with geniuses like Paul Rand and study, study, study. Sketch ideas and study more. Understand the process of how they take an idea and distill it into something that sticks in the mind of the viewer.

Design takes practice and study but once you get the handle on it then you have graduated from geek-craft to something that will make "people will cluster around their dehydrated water coolers to discuss them". Just to make it clear, being creative does not mean you have good visual design sense. You have to work at it.

Once you get a sketch or two that works, pop it into Photoshop and start bringing it into the web world.
posted by JJ86 at 6:23 AM on January 6, 2012

I always recommend starting with plain old HTML and CSS, even in this modern world of flying cars and meals in pill form. CMSes and blogging platforms like Tumblr are wonderful once you know how all the pieces fit together but as ook said, if you start with a specific platform you may have a hard time differentiating what's plain vanilla HTML and which are proprietary template tags or special conventions for a particular platform.

Also: If you are interested in design and implementation specifically for the web then don't rely on automated tools like Photoshop's "Export slices as web page" feature and WYSIWYG editors like Dreamweaver. Web design is its own thing and requires a unique combination of left-brain/right-brain skills; creating a beautiful design with your right brain and knowing how to design it so that you can effectively chop it up and translate it to HTML and CSS with your left brain.

Have patience, it will take a while to grok everything. 'View Source' is your friend!
posted by usonian at 7:13 AM on January 6, 2012

There are a billion free resources out there (I learned a lot of stuff from WebMonkey when first starting out).

But I strongly recommend Lynda.com for nearly any type of tech learning. I HATE video tutorials, but I like theirs, and there are a million of them covering everything you need in a logical way.

At $250 for a year, it's a steal.

And once you get the basics, learn to use Wordpress or Drupal (also available from Lynda.com) -- making a great site is unbelievably easy once you know how, and much more rewarding if you know enough HTML/CSS/scripting to customize it to your needs.
posted by coolguymichael at 9:52 AM on January 6, 2012

As the guy who made your example site (you can't hide anything from google analytics) I can tell you it's really all about immersion, which is to say you have to understand your problem in order to understand how to solve it. I started from zero myself.

For a first step, I'd recommend something along the lines of a "for dummies" book. I hate the way they title things like that, but the reality is that an overview something like that would provide is the best place to start. Don't try explaining what exactly you want to do to someone - they'll probably recommend a programming language and next thing you know you're waist-deep in instruction you will literally never understand.

The suggestion of starting with plain HTML is a good one - even CSS should be considered secondary. HTML is the basis on which all of what you actually see on the web is formed - everything else just generates HTML (that's not exactly true, but more or less). Many browsers (Firefox, Safari, Chrome are best) provide developer tools which include something called an Element Inspector or Web Inspector. On any page, if you open that up you will see the guts of the web page, as the browser has actually rendered it (browsers attempt to correct for mistakes or less-than-valid markup). This is different from View Source, which shows you the markup the browser was given to work with. I think the document tree presented by the Inspector is a great place to see a couple of things - how a web document is really formed, and the most valid techniques for building a page by hand. It'll give you a good sense of what markup really is, and how the browser handles it. Really understand the document. After that, CSS will make a whole lot more sense.

Others probably have better things to say about getting into actual programming, but I'd stress that all of that will be overwhelming until you have a firm hold on what the browser is showing you.
posted by shanecyr at 2:33 PM on January 6, 2012 [1 favorite]

Lots of great coding advice here but there is one secret to making a web site that most people don't know. The secret is that it is a two step process. Before you open up your favorite web editor to write your first line of code you have to, what we call in the business, DESIGN a web site. It is often thought that designing is coding but that is wrong. It is what you do before you code.

Sketch a mock-up of your site with pencil, crayons, Photoshop, Gimp, whatever. Visualize it, lay it out, with colors and graphics. Pick a color scheme, pick fonts. Design is about making it visually appealing and laying it out so that it is functional. Of course you can design a web site for the blind in which case pretty colors and graphics don't matter but it is not likely you will get a lot of blind people coming to your site.

At this stage I wouldn't worry about coding at all. Later with a good structure of html/css you can change the design very easily but a strong design will last and will not need changing unless the site expands. In that case go back to the drawing board.
posted by JJ86 at 6:24 AM on January 7, 2012

Humph -- I was curious as to why you thought W3Schools is a bad site as I have found it really helpful to learn what individual tags and properties actually do.

I am not a web developer, but have recently been putting together a site for myself and have relied a lot on W3Schools. Can you tell me a bit more about why you think it is bad? I have been using it is a reference a lot in building a Wordpress site, as I like that I can pop over there and find info on CSS, PHP and html by tags. My technique is pretty much trial and error, so I like a lot of their little "try this out" feature. However, my knowledge is so shallow that maybe I don't get why the W3Fools people are so against them. They are mad because it isn't a wiki? I agree that, as they say, I am "years behind my colleagues", but how is it harmful as a list of different tags and codes? I have no interest in their certifications -- perhaps that is what they don't like? If I don't go near those, is it still bad? I looked at their alternatives, and they didn't seem to offer the same sort of thing (for example, the Google site is mostly videos -- I typically want to quickly see what a tag does and an example, not watch a 7 minutes video).

I'm not trying to threadjack, I just came in here to recommend that site, so perhaps it would be helpful to know why not to go there.
posted by This_Will_Be_Good at 4:01 PM on January 7, 2012

A lot of the information on w3schools is dated or imprecise. It has always been kind of a lowest common denominator site, and this doesn't get a lot of respect... And tbh I'm sympathetic to those who bad mouth it; they're not wrong. But sometimes the lowest common denominator is just what's called for, though. It's a readable and free reference for what tags exist and more or less why, if nothing else.
posted by ook at 4:21 PM on January 7, 2012