This post is an attempt to do the impossible, to try and give desktop developers a brief introduction to developing on the web. I say impossible because the web is such a vast topic. On one side sits stacks of bizarre and nuanced APIs, but on the other mountains of really useful resources and frameworks that help smooth over the cracks. I can't hope to cover even a small fraction of what exists, so I apologise now if your framework/resource of choice is missing. I've simply tried to give an ordered list of concepts to work through, in a way that I think I would find useful if I was first starting out on the web.
- Like it or lump it, there is no way of avoiding it, it is the glue that holds the web together. Even producing very simple sites, you're going to have to get your hands dirty with it.
- JSHint - JSLint is great when you're starting out, following a rigorous set of rules really helps when learning a language. However, once you start to understand the theory behind some of the compulsary checks in JSLint, they can seem a bit draconian. JSHint offers the same checks as JSLint but allows you to customise the checks with far more freedom.
- JSONLint - Same idea but this time for JSON.
HTML is going to be the one thing that I assume everyone has a rudimentrary knowledge of, if that's not you Wikipedia is as good a place as any to start. There's not really much to say here, other than to point out the new doctype on the block (this goes at the top of all your HTML pages) -
And the multitude of new semantic tags that have been added to save the world from div soup (i.e. using divs as the only tag in your page is a bad thing because it makes it very difficult for screen-readers, search engines and maintainers to interpret). There is a full listing of tags at HTML5Doctor along with explanations, examples and some other articles that are well worth a read. There is one gotcha worth mentioning, if you use the new tags in IE6-8 then they are unaffected by CSS, easy fix though just grab an HTML5 shiv.
The best place to start is with selectors, a selector rule controls which elements the scoped style rules apply to. For once the specification is actually a good starting point. The specification I linked to is from version 2.1 which is now one generation behind the latest. The advantage of it being a generation behind is that it is widely supported across the browsers. As an aside, you should always try and apply as much styling as possible using selectors to target elements rather than setting style attributes directly on the element (discussion here).
Now that you can target elements, it's worth learning about some of the basics of positioning elements and while you're at it get floats clear in your head (sorry that was irresistible but truly awful!). Colours and fonts are pretty self-explanatory (unless you're trying to embed one) but the box model is a bit confusing. Oh and then there are all the vendor prefixed "CSS3" properties to worry about, and we've not even touched on cross-browser issues.
At this point with CSS I think it's worth taking a step back and looking at the bigger picture. You're an app developer, 90% of the time a standard clean layout will do the job. For the minority of cases where the design is important you're probably going to be working with a design team anyway.
The reason for my flippant attitude? By now you've hopefully realised that CSS can be a minefield and not something you want to be tackling when you first start out. Instead, once you've got your head around the basics, take a look at a project called Twitter Bootstrap. It's a CSS library that I thoroughly recommend that you use. As long as you follow the basic markup templates, you can mix-and-match the built-in styles to make standard clean looking layouts that work across all the popular (and most of the less popular) browsers.
I know of a couple of CSS tools -
- Less - If only for the fact that Bootstrap uses it. Less defines a super-set of CSS which allows the definition of constants, basic maths operations and helper methods for dealing with cross-browser issues. It sounds like a sensible idea to me but I don't want to comment further as I've never had cause to use it directly.
- CSSLint - A linting tool for CSS but again I've never had cause to use it and it seems to be even more controversial than JSLint!
End of part 1 (damn it, this wasn't meant to be in parts!)
If you've made it this far then I hope you've found it useful, or at the least picked up a link or two you haven't come across before. As the title says this wasn't meant to be in parts, but I've got a lot left to cover (browser debugging tools, the DOM, jQuery, its army of plugins and how to pick a web framework) and I need a coffee break...