This question is so n00b that it hurts.

February 17, 2008 8:31 PM

Help me learn HTML and CSS.

I have an idea for a website and I want to try my hand at creating it. I have limited HTML experience (think Angelfire website back in 1995 and a small, personal site a few years ago) but I want to take this opportunity to really learn HTML, CSS, etc.

There are approximately seven billion websites and books on this subject but I want to weed out all the crap and get to the good stuff.

I’m very computer literate but for some reason, I just cannot wrap my mind around programming. I’ve dabbled in it a few times over the years but nothing beyond QBasic, C, and basic HTML/Javascript stuff. I learned most of my computer knowledge by ripping apart systems and making them work again and I can’t really do that with HTML, but I hope to find (preferably) free, online resources that I can stick with and see this project to fruition.

So yeah…I know that this question is pretty basic but hopefully I won’t be skewered too badly. Thanks!

posted by Diskeater to computers & internet (18 comments total)

For HTML, Webmonkey has a good intro.

For relatively advanced, but relatively easy to use, CSS and Javascript, A List Apart and CSS Zen Garden are excellent.
posted by Paragon at 8:47 PM on February 17

W3 Schools - has nifty "TryItOut" editor
posted by djb at 8:49 PM on February 17

I'm no web design expert, but I learned a lot from looking at the HTML of websites that are designed well. Unlike actual programming languages, it's pretty easy to see how someone's HTML transforms directly into what you see in the web browser. I think keeping a Blogspot or Wordpress blog and messing around with the templates provided can help you learn a bit too.

There are lots and lots of free CSS tutorials on the internet if you Google, here are some for starters: [1] [2] [3]

I think part of what makes many websites look really good is not the HTML/CSS, but the snazzy graphics. So you should probably get really good at making shiny, attractive, Web2.0ish things in Photoshop too.

Also, I know many people dislike them for some reason, but I think tables are a really easy way to get started making better-looking websites.
posted by pravit at 8:50 PM on February 17

If I am permitted a self-link, sections of my site may have what you need. Most of it is circa 1999ish, but good for beginners.
posted by netbros at 8:56 PM on February 17

The best thing I ever did for my own CSS training was to print out the entire Westciv CSS guide and read it cover-to-cover. This was in the late '90s and the company I worked for was too cheap to buy me any software, let alone send me to any classes. Wouldn't have done any good anyway, I suppose, since CSS was just getting rolling back then, and there probably weren't any decent trainers in my area. As it was, I cut my teeth on a personal copy of Photoshop 5.5 and Windows Notepad, my copy of this guide always open in front of me. I've used a lot of resources since, but this guide was the one that really opened the door.

I learned HTML by screwing around with other peoples' pages until I figured out what each tag was for, so I'm really no help there. Good luck!
posted by alas at 8:57 PM on February 17

Here's what you need to google: Blueprint CSS Framework, and Jquery for snazzy effects and the like.

Save yourself some headaches and use stuff like this that's already worked out the cross-browser compatibility headaches for you.
posted by singingfish at 9:00 PM on February 17 [1 favorite]

These two tutorials from HTML Dog are particularly well-written.

Looking at the source of a site can be useful, but it can be difficult to understand if the site is complex. Start with simple, non-dynamic sites first.

If you use firefox (and you should!) download the web developer toolbar. Particularly useful is the "view style information" command under the css menu. You can then click on an element of a page and it will show you the css for just that element. Xray is similar, and also good, but in different ways. Also it'll work on other browsers if you don't use firefox.

I wouldn't bother with books. I've learned all I know for free off the web and, although my skills may not be the greatest, I am employed as a "web designer" and that's got to count for something.
posted by kpmcguire at 9:42 PM on February 17

If you do decide to break down and spend money on a book, I strongly recommend Head First HTML with CSS & XHTML.
posted by tdismukes at 9:55 PM on February 17

Learning from books and websites can help, but seriously, the best thing for beginners is to right-click a page and choose "view source." For practice purposes, you can save that page's HTML and mess around with the tags using Notepad.

As others have mentioned, start by viewing simple sites that have obvious structures, and then you can build a simple one yourself and try out various tags that you think are cool, to see what you need to do to get the effect you want. It can be frustrating, but over the long term you will learn a ton, you'll be pleasantly surprised to find.
posted by estherbester at 11:23 PM on February 17 [1 favorite]

Download a design you like from OSWD and use it as a basis for your own design (changing both the HTML and the CSS). I second W3Schools as a good tutorial site.
posted by jontyjago at 1:21 AM on February 18

whatever you do don't touch wysiwig html editors.
posted by Baud at 3:26 AM on February 18

Thirding W3 schools, and agree with Baud - stay away from wysiwyg. For CSS, if you use a mac, try CSSedit, I found it really handy when learning as you can build up your styles visually and see how it's written out. When it comes to html editors try get one with autocompletion as this should help you also.

Another tip is to plan everything out on paper first. Draw your page, work out your content containers and how they relate to one another. Then try writing out your code, again on paper, but in a way that makes sense to you. So a basic page might be:

Start the body of the page
Container for main content
Container for menu
menu list
Close container for menu
Heading Paragraph
Image aligned right
Intro
Main text
Footer
Close container for main content
Close the body of the page

I found this really useful as I'm by no means a programmer and it helped me understand structure.. Thing to remember is that HTML and CSS aren't programming. It's mark up and styling. Nothing to be afraid of!

Diving in without preparing will just end up more confusing.
posted by twistedonion at 4:37 AM on February 18

It says it's meant "just for kids," but if you can get past the radioactive yellow and butterflies, Lissa Explains it All is actually a good resource.

Alternately, I taught myself both by using Evrsoft's 1stPage. It's a very powerful authoring tool - far more than you need - but it allowed me to reverse-engineer pages I admired.

Best of luck.
posted by Emperor SnooKloze at 5:25 AM on February 18

I teach HTML/CSS at the college level, but learned just about everything I know about the CSS side from two resources (other than heavy use of View Source):

This book is an excellent basic primer and resource - even with a fairly thorough knowledge of the subject I have learned a great deal from this book, and reference it often.

This tutorial from the previously mentioned WestCiv site is one of the best that I've seen - very straightforward and the end result is easy to accomplish but advanced enough to have you building real sites when you're done.

Other than those two resources, find sites you like and dissect their code, then try to create the look yourself.
posted by idzyn at 6:19 AM on February 18

There's lots of good advice in this thread, but I want to especially second W3 Schools and using a developer toolbar. If you use Firefox, Firebug is nice as well.
posted by drezdn at 6:48 AM on February 18

You have a great source of inspiration with websites, all of which make their source available!

Find some sites you like and dig into their source! Get the Firefox Web Developer toolbar (and Firebug), this will let you play with CSS in real-time, which is where all the website magic happens.

If I knew what I know now, I'd start out like this: I'd spend most of my time figuring out CSS. You can start with something as basic as a couple divs and build layers of your CSS knowledge on it. Two simple HTML tags! [div id="myfirstdiv"]hello[/div] [div id="myseconddiv"]there[/div] Put those tags in a text file and load up the file in a browser. Off you go!

Some simple tasks: Give both divs a background color. Make the fonts different for each tag. Change the font colors. Add different borders to each tag. Mess with padding and margin for each tags. And off you go!
posted by bprater at 9:09 AM on February 18

Wow, I'm really glad I posted this question. Tons and tons of good advice....keep it coming!

My idea is actually a bit more complicated than I originally thought and will probably require me to learn more than just the basics, so thanks everyone for the tips.
posted by Diskeater at 9:45 AM on February 18

2nding firebug and analyzing other well done websites.
posted by i_am_a_Jedi at 10:18 AM on February 18