Learning HTML/CSS/JavaScript

elevature

I want to learn HTML, CSS and JavaScript. I know a little HTML and have written a couple simple pages, but I dont know it in any real depth.

What are some good sites or books I can use? I'd take a course, too, if anyone is in Toronto and knows of something good that's not too expensive.

TychoCelchuuu

W3Schools is great for HTML and CSS, at least. I've never tried their JavaScript stuff but it's probably good too.

EWom

I also used w3schools while learning html and css, and it was very helpful. I still reference it sometimes. If you like barnes and nobles or similar book store locally you can always go grab a couple books (NOT "for Dummies"), on whichever language you're looking for at the time; and just flip through it, sometimes they have really good tips that require very specific questions to find the answer to on the internet. And at least at the store where I'm at, it seems like there's always some programming books on sale; which are nice to have on hand for reference.

The easiest way to learn it though IMO, will be to give yourself assignments. Start simple... different background types, colored, tiled, single image, tiled horizontal only, tiled vertical only, etc. Anchors, images, tables, then move into CSS and manipulate your pages, classes, div's, etc, then move into Javascript and learn it pretty well, at least enough to know what you're doing... and then realize that it's shit and needlessly troublesome and uncooperative, and move to jquery instead.

splash

Find a real website project. People always want a website and this will give you the holistic learning experience you need. Make a simple one with HTML and CSS first. Talk to them to understand what they need.

When complete move on to another project that requires JavaScript as well. You really shouldn't do all 3 from the get-go.

This is what I always suggest because it worked out so well for me:

1. http://www.lynda.com/HTML-tutorials/xand-essential-training/47603-2.html
2. CSS: the missing manual by David Sawyer McFarland by O'Reilly books

(Spend time here to make a real website)

3. JavaScript: the missing manual David Sawyer McFarland by O'Reilly books

(Spend time here to make a real website)

You won't be disappointed!

This should take you some months. Next step after all this. Get excited for HTML5: http://www.lynda.com/HTML-5-tutorials/html5-first-look/67161-2.html (don't skip ahead)

Echo

TychoCelchuuu wrote:

W3Schools is great for HTML and CSS, at least. I've never tried their JavaScript stuff but it's probably good too.

More like w3fools. Their stuff is, at best, factually correct. A huge chunk of it teaches dumb and foolish practices, and another chunk is outright wrong. They very rarely fix their stupid shit, and W3Fools lists a lot of it.

There are better resources out there.

[Michael]

These videos are good for CSS. I haven't seen the HTML or JavaScript ones. I'd agree with Echo to avoid W3Schools for learning this stuff. It can be used as a reference, though.

You might want to check out the JQuery framework for JavaScript. It simplifies JavaScript and takes care of all sorts of cross browser issues. Some people might disagree, and maybe it's just because I hate working in plain JavaScript, but I'd say start learning JavaScript with JQuery. The JQuery site has tons of tutorials and it's very well documented.

Peewi

Echo wrote:

TychoCelchuuu wrote:

W3Schools is great for HTML and CSS, at least. I've never tried their JavaScript stuff but it's probably good too.

More like w3fools. Their stuff is, at best, factually correct. A huge chunk of it teaches dumb and foolish practices, and another chunk is outright wrong. They very rarely fix their stupid shit, and W3Fools lists a lot of it.

There are better resources out there.

Thanks for posting that. I've been using W3Schools a bunch and didn't know it had all these errors.

Jimmy King

[Michael] wrote:

These videos are good for CSS. I haven't seen the HTML or JavaScript ones. I'd agree with Echo to avoid W3Schools for learning this stuff. It can be used as a reference, though.

You might want to check out the JQuery framework for JavaScript. It simplifies JavaScript and takes care of all sorts of cross browser issues. Some people might disagree, and maybe it's just because I hate working in plain JavaScript, but I'd say start learning JavaScript with JQuery. The JQuery site has tons of tutorials and it's very well documented.

I generally recommend doing at least one site without jQuery, but make it a site that is just for messing around, not something you will be maintaining long term. This way you understand what jQuery is doing for you behind the scenes.

CelestialBadger

Peewi wrote:

Thanks for posting that. I've been using W3Schools a bunch and didn't know it had all these errors.

I've used it as reference for a simple project and had no problems. My experience was that there is a lot of info about CSS and HTML on the web and most of it is contradictory or incomprehensible. W3Schools at least has the virtue of clarity. If there are better resources out there, which ones?

TychoCelchuuu

CelestialBadger wrote:

Peewi wrote:

Thanks for posting that. I've been using W3Schools a bunch and didn't know it had all these errors.

I've used it as reference for a simple project and had no problems. My experience was that there is a lot of info about CSS and HTML on the web and most of it is contradictory or incomprehensible. W3Schools at least has the virtue of clarity. If there are better resources out there, which ones?

Perhaps 1 of the 6 suggested alternatives linked at the W3Fools website. I too have been happy with W3Schools although I've only used them for basic stuff, and the Opera stuff linked at W3Fools looks pretty good and is what I'll probably use from here on out if I ever decide to do more web stuff.

Tejs

I'd also recommend going to Stack Overflow when you have questions. We're pretty decent bunch if you honestly want to learn (or have a question about why something is functioning like it does).

elevature

These are good tips, thanks dudes. I bought an HTML book to use as a refresher/quick reference, and after this I'll move on to the CSS book that splash suggested.

As far as finding a real project, beyond working with someone that I know, how do I go about this? Is there a forum or something for people that are looking to have websites built? Especially by someone who doesn't really know what they're doing?

Saydlen

I find W3 most useful as a dictionary of sorts. It'll give you the description of what an item is and the different attributes you can feed it (especially for CSS).

As Tejs mentioned, Stack Overflow is a fantastic resource for specific problem solving.

If you're looking for some ideas of what HTML and CSS are capable of, then I'd highly recommend checking outCSS Zen Garden and maybe even taking up the challenge yourself.

Do yourself a huge favor and learn to use development tools (My favorite for debugging designs is Firebug, a plugin for Firefox).

I learned mostly by finding sites that did things I liked and viewing their source to see how they did it. That's going to depend on your learning style, but learning through examples really helped a lot of things crystallize for me.

Once you're a bit further down the rabbit hole there are some great articles on A List Apart.

One thing to really consider is whether you're trying to be only a designer/themer or if you're trying to be a full spectrum web person. Static HTML/CSS is quickly going the way of the dinosaur with open source Content Management Systems so readily available. It'll be well worth your while to get comfortable with one or more as well as the philosophy of separating content from design. Wordpress has its faults and limitations, but it's relatively easy to get started with and there's a huge community surrounding it. If you really want to get crazy you can start looking into things like Drupal or ModX or one of many other options.

As for where to find projects, there are a plethora of bidding sites out there of people looking for as cheap as possible and Craigslist is always a place to look for people unwilling to pay top dollar.

Nightslyr

W3schools sucks. Run by a bunch of hacks. If you want quality information, go to the Mozilla Developer Network: https://developer.mozilla.org/en-US/learn/

CelestialBadger

Nightslyr wrote:

W3schools sucks. Run by a bunch of hacks. If you want quality information, go to the Mozilla Developer Network: https://developer.mozilla.org/en-US/learn/

Looks good. Bookmarked.

Infidel

Just so it's clear, people should skip W3Schools. It is a reference, not teaching material, which is a huge difference here. And when a reference is wrong, well it just is useless.

Tejs

Here's another link a coworker passes to me... you may find it useful. http://learn.appendto.com/lessons

KPC

It doesn't cover HTML5 & CSS3, but htmldog.com helped me learn both HTML and CSS over the course of two days. Just start with beginning HTML and go down from there.

Kathemo

I second htmldog, A List Apart and CSS Zen Garden.

I'd like to add Smashing Magazine to this! I've found it really helpful once I'd gotten the ball rolling. It might be a much now but there's a lot of great tutorials and resources there.

elevature

I've been looking at HTML Dog and I like it a lot. I've already gone through one of the tutorials and I'm staring the second. It seems to be the easiest to understand out of all the ones I've looked at so far. I may end up getting the book as well, it seems like a good compliment to the site, at least based on the Kindle sample.