GreggHz

Teach Yourself HTML and CSS

See the actual app here.

My wife is a designer. Recently she has expressed interest in learning html and css since it would help her tremendously at work. So we agreed that I would teach her. I'm not a great teacher, so I wanted to make sure everything was as painless as possible. In my mind, the least useful/fun part when learning to work with html and css is dealing with the editors and opening the page in a browser and refreshing the page and checking for errors and refreshing the page and making changes and saving your work and refreshing the browser and so on. I decided that I can get rid of most of the grid of learning css and html by creating a simple web app. This web app (linked above) allows you to edit css in one pane, edit html in a second pane, and see the results in a third pane below the first two. This way, the flow is reduced to editing html or css. That's it. It's all in real time so you don't have to reload the page or save any files or open them in a browser.

The implementation of this tool was a rather simple affair. As of writing this blog post, I have spent maybe 3 hours total working on it. Part of why it was fairly simple is because of the awesome open source community and the tools they provide. Specifically, this project uses jQuery, CodeMirror, 960.gs, and Blueprint (everything but the grid). Without these tools, this project would have been MUCH more difficult to even get it to the rudimentary state it is currently in. I'm particularly impressed with CodeMirror and they editor. I think it really adds a level of polish to the app.

This project is very much in its infancy. I have a number of ideas for how to improve it. First of all, I would like for it to have an undo and redo functionality. Thanks to CodeMirror, this should be relatively trivial to implement. The bigger struggle for me is defining the UI for undo and redo. Since there are two editors, they each have their own undo stack and so it needs to be clear which one you are "undoing" at any given time. I would also like to have multiple different save slots. That way each user (identified by something saved in localStorage or perhaps server-side authentication) would be able to have a few different experiments they are working with. Things like tutorial progress or a code snippet you'd like to hold on to would be nice to be able to save. I'm sure there are plenty of features that would be useful that I haven't thought of yet. If anyone comes up with anything they would like to see, email me and let's talk about it.

This project has re-inspired an old idea I had as well. When I first got my Cr-48 the first deficiency I noticed was the lack of a useful IDE. I started on a web based IDE back then, but never got very far. With the experience I've gained from this simple project, I've decided that I would give it a go once more. I have a very early prototype ready, but it still needs a lot of work and will likely be months before anything substantial is released.

Oh, by the way, and excellent reference for learning html and css can be found over at HTML Dog. Check it out.